@cdc/map 4.26.3 → 4.26.5

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@cdc/map",
-  "version": "4.26.3",
+  "version": "4.26.5",
   "description": "React component for visualizing tabular data on a map of the United States or the world.",
   "license": "Apache-2.0",
   "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/core": "^4.26.3",
+    "@cdc/core": "^4.26.5",
     "@googlemaps/markerclusterer": "^2.5.3",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-google-maps/api": "^2.20.8",
@@ -24,7 +24,7 @@
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
-    "dompurify": "^3.3.1",
+    "dompurify": "^3.4.0",
     "html-react-parser": "^5.2.3",
     "leaflet": "^1.9.4",
     "lodash": "^4.17.23",
@@ -42,7 +42,7 @@
     "vite-plugin-svgr": "^4.2.0",
     "whatwg-fetch": "^3.6.20"
   },
-  "gitHead": "d50e45a074fbefa56cac904917e707d57f237737",
+  "gitHead": "61c025165d96b45a6002c34582c5a622a9d865a9",
   "main": "dist/cdcmap",
   "moduleName": "CdcMap",
   "peerDependencies": {

package/src/CdcMapComponent.tsx

@@ -14,6 +14,7 @@ import SkipTo from '@cdc/core/components/elements/SkipTo'
 import Title from '@cdc/core/components/ui/Title'
 import Waiting from '@cdc/core/components/Waiting'
 import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAlone'
+import { supportedStatesFipsCodes, supportedCounties } from './data/supported-geos'
 
 // types
 import { type MapConfig } from './types/MapConfig'
@@ -24,10 +25,17 @@ import './scss/main.scss'
 import './cdcMapComponent.styles.css'
 
 // Core Helpers
-import { getQueryStringFilterValue, isFilterHiddenByQuery } from '@cdc/core/helpers/queryStringUtils'
+import {
+  getQueryStringFilterValue,
+  isFilterHiddenByQuery,
+  removeQueryParam,
+  updateQueryParam,
+  updateQueryParams
+} from '@cdc/core/helpers/queryStringUtils'
 import { generateRuntimeFilters } from './helpers/generateRuntimeFilters'
 import { type MapReducerType, MapState } from './store/map.reducer'
 import { addValuesToFilters } from '@cdc/core/helpers/addValuesToFilters'
+import { hasVisibleVizFilters } from '@cdc/core/helpers/filterVisibility'
 import { processMarkupVariables } from '@cdc/core/helpers/markupProcessor'
 
 // Map Helpers
@@ -47,7 +55,6 @@ import { generateRuntimeLegend } from './helpers/generateRuntimeLegend'
 import generateRuntimeData from './helpers/generateRuntimeData'
 import { reloadURLData } from './helpers/urlDataHelpers'
 import { observeMapSvgLoaded } from './helpers/mapObserverHelpers'
-import { buildBodyWrapClassNames, buildSectionClassNames } from './helpers/componentHelpers'
 import { shouldShowDataTable, filterCountyTableRuntimeDataByStateCode } from './helpers/dataTableHelpers'
 import { prepareSmallMultiplesDataTable } from './helpers/smallMultiplesHelpers'
 
@@ -66,7 +73,6 @@ import useLegendMemo from './hooks/useLegendMemo'
 import { LegendMemoProvider } from './context/LegendMemoContext'
 import { VizFilter } from '@cdc/core/types/VizFilter'
 import { getInitialState, mapReducer } from './store/map.reducer'
-import { RuntimeData } from './types/RuntimeData'
 import defaults from './data/initial-state'
 import { LEGACY_MAP_DEFAULTS } from './data/legacy-defaults'
 import { backfillDefaults } from '@cdc/core/helpers/backfillDefaults'
@@ -79,6 +85,7 @@ import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 import { ENABLE_CHART_MAP_TP5_TREATMENT } from '@cdc/core/helpers/constants'
 import CalloutFlag from '@cdc/core/assets/callout-flag.svg?url'
+import { useQueryParamsListener } from '@cdc/core/hooks/useQueryParamsListener'
 
 type CdcMapComponent = {
   config: MapConfig
@@ -88,6 +95,8 @@ type CdcMapComponent = {
   logo?: string
   navigationHandler: Function
   setSharedFilter: Function
+  clearSharedFilter?: (key: string) => void
+  hasActiveSharedFilter?: boolean
   setSharedFilterValue: Function
   setConfig?: Function
   loadConfig?: Function
@@ -102,6 +111,8 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
   isEditor = false,
   logo = '',
   setSharedFilter,
+  clearSharedFilter,
+  hasActiveSharedFilter = false,
   setSharedFilterValue,
   link,
   setConfig: setParentConfig,
@@ -124,6 +135,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     modal,
     accessibleStatus,
     filteredCountryCode,
+    filteredCountyCode,
     filteredStateCode,
     position,
     scale,
@@ -165,6 +177,22 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     }
   }
 
+  const setFilters = (filters: VizFilter[]) => {
+    const filterCopy = _.cloneDeep(filters)
+    if (config.general.showStateDropdown) {
+      const [stateFilter, countyFilter] = filterCopy.filter(
+        f => f.staticFilter && ['state', 'county'].includes(f.columnName)
+      )
+      const stateCode = (stateFilter?.active as string) || ''
+      const countyCode = (countyFilter?.active as string) || ''
+
+      setFilteredStateCountyCode(stateCode, countyCode)
+      if (countyFilter) filterCopy.pop() // remove county filter
+      filterCopy.pop() // remove state filter
+    }
+    _setRuntimeData(filterCopy)
+  }
+
   // Refs
   const innerContainerRef = useRef<HTMLDivElement | null>(null)
   const legendRef = useRef(null)
@@ -360,6 +388,32 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     />
   )
 
+  const STATE_CODE = 'state-code'
+  const COUNTY_CODE = 'county-code'
+  const setFilteredStateCountyCode = (stateCode: string, countyCode?: string) => {
+    const stateCodePattern = /^\d\d$/
+    const normalizedStateCode = stateCodePattern.test(stateCode) ? stateCode : ''
+    let _countyCode = ''
+    if (countyCode) {
+      const countyCodePattern = /^\d{5}$/
+      _countyCode = countyCodePattern.test(countyCode) ? countyCode : ''
+    }
+    if (!normalizedStateCode) {
+      updateQueryParams({ [STATE_CODE]: '', [COUNTY_CODE]: '' })
+    } else {
+      updateQueryParams({ [STATE_CODE]: normalizedStateCode, [COUNTY_CODE]: _countyCode })
+    }
+  }
+
+  const setFilteredStateCodeFromQuery = ({
+    [STATE_CODE]: stateCode,
+    [COUNTY_CODE]: countyCode
+  }: Record<string, string>) => {
+    dispatch({ type: 'SET_FILTERED_STATE_COUNTY_CODE', payload: { stateCode, countyCode } })
+  }
+
+  useQueryParamsListener([STATE_CODE, COUNTY_CODE], setFilteredStateCodeFromQuery)
+
   const mapProps = {
     setParentConfig,
     container,
@@ -369,6 +423,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     customNavigationHandler,
     dimensions,
     filteredCountryCode,
+    filteredCountyCode,
     filteredStateCode,
     isDashboard,
     isEditor,
@@ -381,8 +436,10 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     runtimeLegend,
     scale,
     setConfig,
-    setFilteredStateCode: (stateCode: string) => dispatch({ type: 'SET_FILTERED_STATE_CODE', payload: stateCode }),
+    setFilteredStateCountyCode,
     setSharedFilter,
+    clearSharedFilter,
+    hasActiveSharedFilter,
     setSharedFilterValue,
     config,
     statesToShow,
@@ -448,6 +505,42 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     </a>
   )
 
+  const applyStateFilter = (config: MapConfig): MapConfig => {
+    if (config.general.showStateDropdown && config.general.geoType === 'us-county') {
+      const stateFilter: VizFilter = {
+        columnName: 'state',
+        label: 'Select Location',
+        filterStyle: 'dropdown',
+        labels: supportedStatesFipsCodes,
+        values: Object.keys(supportedStatesFipsCodes),
+        resetLabel: 'United States',
+        staticFilter: true,
+        active: filteredStateCode
+      }
+      let countyFilter: VizFilter | undefined
+      if (filteredStateCode) {
+        const counties = Object.keys(supportedCounties).filter(countyCode => countyCode.startsWith(filteredStateCode))
+        countyFilter = {
+          columnName: 'county',
+          label: 'Select County',
+          filterStyle: 'dropdown',
+          labels: supportedCounties,
+          values: counties,
+          resetLabel: 'All Counties',
+          staticFilter: true,
+          active: filteredCountyCode
+        }
+      }
+      return {
+        ...config,
+        filters: [...(config.filters || []), stateFilter, ...(countyFilter ? [countyFilter] : [])]
+      }
+    }
+    return config
+  }
+
+  const filterConfig = applyStateFilter(config)
+
   return (
     <LegendMemoProvider legendMemo={legendMemo} legendSpecialClassLastMemo={legendSpecialClassLastMemo}>
       <ConfigContext.Provider value={mapProps}>
@@ -472,7 +565,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
                 ]
                   .filter(Boolean)
                   .join(' ')}
-                innerProps={{ 'aria-label': 'Map: ' + title, ref: innerContainerRef }}
+                innerProps={{ ref: innerContainerRef }}
                 bodyWrapClassName={isTp5Treatment ? 'cdc-callout d-flex flex-column' : ''}
                 bodyClassName={[
                   !config.visual?.border || isTp5Treatment ? 'no-borders' : '',
@@ -486,19 +579,18 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
                   .filter(Boolean)
                   .join(' ')}
                 filters={
-                  config?.filters?.length > 0 ? (
+                  hasVisibleVizFilters(filterConfig.filters) ? (
                     <Filters
-                      config={config}
-                      setConfig={setConfig}
-                      filteredData={runtimeFilters}
-                      setFilters={_setRuntimeData}
+                      config={filterConfig}
+                      setFilters={setFilters}
                       dimensions={dimensions}
-                      standaloneMap={!config}
                       interactionLabel={interactionLabel}
                     />
                   ) : undefined
                 }
-                bodySubtext={processedSubtext.length > 0 ? <p className='subtext'>{parse(processedSubtext)}</p> : null}
+                bodySubtext={
+                  processedSubtext.length > 0 ? <p className='subtext cove-prose'>{parse(processedSubtext)}</p> : null
+                }
                 bodyFooter={
                   <>
                     {isDashboard && config.table?.forceDisplay && config.table.showDataTableLink
@@ -569,13 +661,13 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
                     {config.annotations?.length > 0 && <Annotation.Dropdown />}
 
                     {processedFootnotes && (
-                      <section className='footnotes pt-2 mt-4'>{parse(processedFootnotes)}</section>
+                      <section className='footnotes cove-prose pt-2 mt-4'>{parse(processedFootnotes)}</section>
                     )}
                   </>
                 }
                 header={isTp5Treatment ? null : mapTitle}
                 messageIsIntroText={!!processedIntroText}
-                message={processedIntroText ? parse(processedIntroText) : null}
+                message={processedIntroText ? <div className='cove-prose'>{parse(processedIntroText)}</div> : null}
               >
                 <>
                   {isTp5Treatment && <img src={CalloutFlag} alt='' className='cdc-callout__flag' aria-hidden='true' />}
@@ -663,6 +755,7 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
               enableMarkupVariables={config.enableMarkupVariables}
               data={config.data}
               dataMetadata={config.dataMetadata}
+              footerClassName='cove-visualization__footnotes'
             />
           </VisualizationContainer>
         </MapDispatchContext.Provider>

package/src/_stories/CdcMap.AltText.stories.tsx

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect } from 'storybook/test'
+import CdcMap from '../CdcMap'
+import { assertVisualizationRendered, waitForPresence, waitForEditor, openAccordion } from '@cdc/core/helpers/testing'
+import altTextConfig from './_mock/alt_text_metadata.json'
+
+const meta: Meta<typeof CdcMap> = {
+  title: 'Components/Templates/Map/Accessible Alt Text',
+  component: CdcMap,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Demonstrates SVG accessibility for maps: auto-generated aria-label with optional configurable description concatenated into the label for reliable screen reader support.'
+      }
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof CdcMap>
+
+export const MetadataDescription: Story = {
+  args: {
+    config: {
+      ...altTextConfig,
+      altText: { type: 'metadata', metadataKey: 'altDescription' }
+    },
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Description pulled from dataMetadata is concatenated into the aria-label after the auto-generated title for reliable screen reader support.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    const svg = await waitForPresence('svg[role="img"]', canvasElement)
+
+    const expected = `United States map with the title: COVID-19 Case Rates by State. ${altTextConfig.dataMetadata.altDescription}`
+    expect(svg?.getAttribute('aria-label')).toBe(expected)
+  }
+}
+
+export const StaticDescription: Story = {
+  args: {
+    config: {
+      ...altTextConfig,
+      altText: {
+        type: 'static',
+        value: 'US map showing COVID-19 rates concentrated in the Southeast region.'
+      }
+    },
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Static manually written description concatenated with the auto-generated title.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    const svg = await waitForPresence('svg[role="img"]', canvasElement)
+
+    expect(svg?.getAttribute('aria-label')).toBe(
+      'United States map with the title: COVID-19 Case Rates by State. US map showing COVID-19 rates concentrated in the Southeast region.'
+    )
+  }
+}
+
+export const AutoGenerated: Story = {
+  args: {
+    config: altTextConfig,
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'No altText configured. Falls back to the auto-generated aria-label: "United States map with the title: COVID-19 Case Rates by State".'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    const svg = await waitForPresence('svg[role="img"]', canvasElement)
+
+    expect(svg?.getAttribute('aria-label')).toBe('United States map with the title: COVID-19 Case Rates by State')
+  }
+}
+
+export const EditorWithMetadata: Story = {
+  args: {
+    config: {
+      ...altTextConfig,
+      altText: { type: 'metadata', metadataKey: 'altDescription' }
+    },
+    isEditor: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Editor mode showing the alt text description control in the General accordion with metadata-driven description.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await waitForEditor(canvas)
+
+    await openAccordion(canvas, 'General')
+
+    const descPreview = await waitForPresence('[data-testid="alt-text-desc-preview"]', canvasElement)
+    expect(descPreview?.textContent).toContain('Choropleth map of the United States')
+  }
+}