@cdc/map 4.26.4 → 4.26.5

package/src/components/UsaMap/components/UsaMap.County.tsx

@@ -295,6 +295,8 @@ const CountyMap = () => {
         const context = canvasRef.current.getContext('2d') as CanvasRenderingContext2D
         context.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height)
       }
+      geoPathCacheRef.current.clear()
+      geoPathCacheKeyRef.current = ''
       setTopoData(response)
     })
   }
@@ -350,6 +352,7 @@ const CountyMap = () => {
   const zoomBehaviorRef = useRef()
   const zoomFrameRef = useRef<number | null>(null)
   const geoPathCacheRef = useRef<Map<string, Path2D>>(new Map())
+  const geoPathCacheKeyRef = useRef('')
 
   // Clear pattern cache when pattern configuration changes
   useEffect(() => {
@@ -359,8 +362,20 @@ const CountyMap = () => {
   const runtimeKeys = runtimeData ? Object.keys(runtimeData) : []
   const lineWidth = 1
 
+  const getPathCacheKey = (canvas: HTMLCanvasElement) =>
+    [
+      topoData.year,
+      topoData.mapData?.length || 0,
+      topoData.states?.length || 0,
+      topoData.hsas?.length || 0,
+      focus.id || '',
+      canvas.clientWidth,
+      config.general.showHSABoundaries ? 'hsa' : 'county',
+      territoryVisibility.key
+    ].join('|')
+
   // Pre-compute Path2D objects for all geo features — avoids expensive geoPath projection on every zoom frame
-  const buildPathCache = () => {
+  const buildPathCache = (cacheKey: string) => {
     const pathGen = geoPath(topoData.projection)
     const cache = new Map<string, Path2D>()
     topoData.mapData.forEach(geo => {
@@ -378,7 +393,9 @@ const CountyMap = () => {
       const d = pathGen(hsa.feature as any)
       if (d) cache.set('hsa_border_' + hsa.groupId, new Path2D(d))
     })
+    geoPathCacheRef.current.clear()
     geoPathCacheRef.current = cache
+    geoPathCacheKeyRef.current = cacheKey
   }
 
   const resetZoomTransform = () => {
@@ -391,8 +408,10 @@ const CountyMap = () => {
   const getCanvasPoints = e => {
     const canvas = e.target
     const canvasBounds = canvas.getBoundingClientRect()
-    const x = e.clientX - canvasBounds.left
-    const y = e.clientY - canvasBounds.top
+    const scaleX = canvasBounds.width ? canvas.width / canvasBounds.width : 1
+    const scaleY = canvasBounds.height ? canvas.height / canvasBounds.height : 1
+    const x = (e.clientX - canvasBounds.left) * scaleX
+    const y = (e.clientY - canvasBounds.top) * scaleY
     const [mapX, mapY] = zoomTransformRef.current.invert([x, y])
     return { canvas, mapX, mapY }
   }
@@ -403,6 +422,10 @@ const CountyMap = () => {
   }
 
   const getZoomScale = () => zoomTransformRef.current?.k || 1
+  const getZoomTransformString = () => {
+    const { x, y, k } = zoomTransformRef.current || d3ZoomIdentity
+    return `translate(${x} ${y}) scale(${k})`
+  }
 
   const paintCountyGeo = (
     context,
@@ -862,14 +885,17 @@ const CountyMap = () => {
     context.restore()
   }
 
-  // Sets up canvas dimensions, projection, and Path2D cache, then renders.
+  // Sets up canvas dimensions and projection, rebuilds the Path2D cache only when geometry changes, then renders.
   // Called on data change, resize, focus change — NOT during zoom/pan.
   const drawCanvas = () => {
     if (canvasRef.current && runtimeLegend.items.length > 0) {
       const canvas = canvasRef.current
+      const canvasWidth = canvas.clientWidth
+      if (canvasWidth <= 0) return
+      const canvasHeight = canvasWidth * 0.6
 
-      canvas.width = canvas.clientWidth
-      canvas.height = canvas.width * 0.6
+      if (canvas.width !== canvasWidth) canvas.width = canvasWidth
+      if (canvas.height !== canvasHeight) canvas.height = canvasHeight
 
       topoData.projection.scale(canvas.width * 1.25).translate([canvas.width / 2, canvas.height / 2])
 
@@ -883,8 +909,10 @@ const CountyMap = () => {
         topoData.projection.fitExtent(fitExtent, focus.feature)
       }
 
-      // Pre-compute Path2D objects with the current projection
-      buildPathCache()
+      const pathCacheKey = getPathCacheKey(canvas)
+      if (geoPathCacheKeyRef.current !== pathCacheKey || geoPathCacheRef.current.size === 0) {
+        buildPathCache(pathCacheKey)
+      }
 
       // Render the map
       renderFrame()
@@ -968,7 +996,6 @@ const CountyMap = () => {
     context.strokeStyle = stateStrokeColor
     context.lineWidth = lineWidth * 1.25 * strokeScale
     topoData.states.forEach(state => {
-      if (config.migrations.showPuertoRico == false) return
       if (!state.id) return
       const path2d = cache.get('state_border_' + state.id)
       if (path2d) {
@@ -1140,7 +1167,10 @@ const CountyMap = () => {
       )}
       <canvas
         ref={canvasRef}
+        role='img'
         aria-label={handleMapAriaLabels(config)}
+        data-zoom-transform={getZoomTransformString()}
+        data-zoom-scale={getZoomScale()}
         onMouseMove={canvasHover}
         onMouseOut={() => {
           tooltipRef.current.style.display = 'none'

package/src/components/UsaMap/components/UsaMap.Region.tsx

@@ -57,6 +57,9 @@ const Rect: React.FC<RectProps> = ({ label, text, stroke, strokeWidth, ...props
 
 const UsaRegionMap = () => {
   const { runtimeData, config, tooltipId, runtimeLegend, interactionLabel } = useContext(ConfigContext)
+
+  const a11y = handleMapAriaLabels(config)
+
   const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
   const [focusedStates, setFocusedStates] = useState(null)
   const { geoClickHandler } = useGeoClickHandler()
@@ -250,7 +253,7 @@ const UsaRegionMap = () => {
             <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1} d={path} />
             <g id={`region-${index + 1}-label`}>
               <circle fill='#fff' stroke='#999' cx={CIRCLE_RADIUS} cy={CIRCLE_RADIUS} r={CIRCLE_RADIUS} />
-              <text fill='#333' x='15px' y='20px' textAnchor='middle'>
+              <text fill='var(--baseColor)' x='15px' y='20px' textAnchor='middle'>
                 {index + 1}
               </text>
             </g>
@@ -290,7 +293,7 @@ const UsaRegionMap = () => {
 
   return (
     <ErrorBoundary component='UsaRegionMap'>
-      <svg viewBox={SVG_VIEWBOX} role='img' aria-label={handleMapAriaLabels(config)}>
+      <svg viewBox={SVG_VIEWBOX} role='img' aria-label={a11y}>
         <Mercator data={focusedStates} scale={620} translate={[1500, 735]}>
           {({ features, projection }) => constructGeoJsx(features, projection)}
         </Mercator>

package/src/components/UsaMap/components/UsaMap.SingleState.tsx

@@ -1,4 +1,4 @@
-import { useEffect, memo, useContext, useMemo } from 'react'
+import { useEffect, memo, useContext, useMemo, useRef } from 'react'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { geoPath } from 'd3-geo'
 import { CustomProjection } from '@visx/geo'
@@ -26,10 +26,12 @@ import useGeoClickHandler from '../../../hooks/useGeoClickHandler'
 import { SVG_WIDTH, SVG_HEIGHT, SVG_PADDING, SVG_VIEWBOX } from '../../../helpers'
 import _ from 'lodash'
 import { getStatesPicked } from '../../../helpers/getStatesPicked'
+import { shouldAutoResetSingleStateZoom } from '../../../helpers/shouldAutoResetSingleStateZoom'
 
 const SingleStateMap: React.FC = () => {
   const {
     config,
+    isDashboard,
     setSharedFilterValue,
     isFilterValueSupported,
     runtimeFilters,
@@ -42,17 +44,17 @@ const SingleStateMap: React.FC = () => {
     useDynamicViewbox
   } = useContext<MapContext>(ConfigContext)
 
+  const a11y = handleMapAriaLabels(config)
+
   const dispatch = useContext(MapDispatchContext)
-  const { handleMoveEnd, handleZoomIn, handleZoomOut, handleZoomReset, projection, bounds } = useStateZoom(topoData)
+  const { handleMoveEnd, handleZoomIn, handleZoomOut, handleZoomReset, resetZoomState, projection, bounds } =
+    useStateZoom(topoData)
+  const previousRuntimeDataHashRef = useRef<number | null>(null)
 
   // Memoize statesPicked to prevent creating new arrays on every render
   const statesPicked = useMemo(() => {
     return getStatesPicked(config, runtimeData)
-  }, [
-    config.general.statesPicked?.length,
-    config.general.statesPicked?.[0]?.stateName
-    // Don't include runtimeData as it causes excessive re-renders
-  ])
+  }, [config.general.statesPicked?.length, config.general.statesPicked?.[0]?.stateName, (runtimeData as any)?.fromHash])
 
   const statesToShow = topoData?.states?.find(s => statesPicked.map(sp => sp.stateName).includes(s.properties.name))
 
@@ -84,6 +86,27 @@ const SingleStateMap: React.FC = () => {
     }
   }, [config.general.countyCensusYear, config.general.filterControlsCountyYear, JSON.stringify(runtimeFilters)])
 
+  useEffect(() => {
+    const runtimeDataHash = (runtimeData as any)?.fromHash as number | undefined
+    const hasDashboardFilters = Boolean(config.dashboardFilters?.length)
+
+    if (
+      shouldAutoResetSingleStateZoom({
+        isDashboard,
+        previousRuntimeDataHash: previousRuntimeDataHashRef.current,
+        nextRuntimeDataHash: runtimeDataHash,
+        hasDashboardFilters,
+        allowMapZoom: config.general.allowMapZoom
+      })
+    ) {
+      resetZoomState({ publishEvent: false })
+    }
+
+    if (runtimeDataHash !== undefined) {
+      previousRuntimeDataHashRef.current = runtimeDataHash
+    }
+  }, [config.dashboardFilters, config.general.allowMapZoom, isDashboard, resetZoomState, runtimeData])
+
   if (!isTopoReady(topoData, config, runtimeFilters)) {
     return (
       <div style={{ height: `${SVG_HEIGHT}px` }}>
@@ -152,7 +175,7 @@ const SingleStateMap: React.FC = () => {
           preserveAspectRatio='xMinYMin'
           className='svg-container'
           role='img'
-          aria-label={handleMapAriaLabels(config)}
+          aria-label={a11y}
         >
           <ZoomableGroup
             center={position.coordinates}
@@ -215,7 +238,7 @@ const SingleStateMap: React.FC = () => {
           preserveAspectRatio='xMinYMin'
           className='svg-container'
           role='img'
-          aria-label={handleMapAriaLabels(config)}
+          aria-label={a11y}
         >
           <rect
             className='background center-container ocean'
@@ -268,7 +291,7 @@ const SingleStateMap: React.FC = () => {
           preserveAspectRatio='xMinYMin'
           className='svg-container'
           role='img'
-          aria-label={handleMapAriaLabels(config)}
+          aria-label={a11y}
         >
           <Text
             verticalAnchor='start'

package/src/components/UsaMap/components/UsaMap.State.tsx

@@ -20,6 +20,7 @@ import HexIcon from './HexIcon'
 import { patternSizes } from '../helpers/patternSizes'
 import Annotation from '../../Annotation'
 import Territory from './Territory'
+import FilterControls from '../../FilterControls'
 
 import ConfigContext, { MapDispatchContext } from '../../../context'
 import { useLegendMemoContext } from '../../../context/LegendMemoContext'
@@ -88,9 +89,13 @@ const UsaMap = () => {
     dimensions,
     translate,
     runtimeLegend,
-    interactionLabel
+    interactionLabel,
+    clearSharedFilter,
+    hasActiveSharedFilter
   } = useContext<MapContext>(ConfigContext)
 
+  const a11y = handleMapAriaLabels(config)
+
   const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
 
   const { getSyncProps, syncHandlers } = useSynchronizedGeographies()
@@ -668,7 +673,7 @@ const UsaMap = () => {
 
   return (
     <ErrorBoundary component='UsaMap'>
-      <svg viewBox={SVG_VIEWBOX} role='img' aria-label={handleMapAriaLabels(config)}>
+      <svg viewBox={SVG_VIEWBOX} role='img' aria-label={a11y}>
         {general.displayAsHex ? (
           <Mercator data={unitedStatesHex} scale={650} translate={[1600, 775]}>
             {({ features, projection }) => constructGeoJsx(features, projection)}
@@ -681,6 +686,8 @@ const UsaMap = () => {
         {annotations?.length > 0 && <Annotation.Draggable onDragStateChange={handleDragStateChange} />}
       </svg>
 
+      <FilterControls />
+
       <TerritoriesSection territories={territories} logo={logo} config={config} territoriesData={territoriesData} />
     </ErrorBoundary>
   )

package/src/components/WorldMap/WorldMap.tsx

@@ -1,4 +1,4 @@
-import { memo, useContext, useState, useEffect } from 'react'
+import { memo, useContext, useState, useEffect, useRef } from 'react'
 import { geoMercator } from 'd3-geo'
 import { Mercator } from '@visx/geo'
 import { feature } from 'topojson-client'
@@ -27,6 +27,7 @@ import useGeoClickHandler from '../../hooks/useGeoClickHandler'
 import useApplyTooltipsToGeo from '../../hooks/useApplyTooltipsToGeo'
 import useCountryZoom from '../../hooks/useCountryZoom'
 import generateRuntimeData from '../../helpers/generateRuntimeData'
+import { generateRuntimeFilters } from '../../helpers/generateRuntimeFilters'
 import { applyLegendToRow } from '../../helpers/applyLegendToRow'
 import { normalizeTopoJsonProperties } from '../../helpers/normalizeTopoJsonProperties'
 
@@ -42,6 +43,8 @@ const WorldMap = () => {
   // prettier-ignore
   const {
     runtimeData,
+    runtimeFilters,
+    filteredCountryCode,
     position: mapPosition,
     config,
     tooltipId,
@@ -49,6 +52,8 @@ const WorldMap = () => {
     interactionLabel
   } = useContext(ConfigContext)
 
+  const a11y = handleMapAriaLabels(config)
+
   // Type assertion: position from context is actually the map viewport position, not legend position
   const position = mapPosition as unknown as MapPosition
 
@@ -63,6 +68,9 @@ const WorldMap = () => {
   const { centerOnCountries } = useCountryZoom(world)
 
   const dispatch = useContext(MapDispatchContext)
+  const previousWorldBubbleRuntimeData = useRef(runtimeData)
+  const isWorldBubbleMap = config.general.geoType === 'world' && config.general.type === 'bubble'
+  const isDrilledBubbleView = isWorldBubbleMap && Boolean(filteredCountryCode)
 
   useEffect(() => {
     const fetchData = async () => {
@@ -98,6 +106,11 @@ const WorldMap = () => {
     fetchData()
   }, [])
 
+  useEffect(() => {
+    if (!isWorldBubbleMap || isDrilledBubbleView || runtimeData?.init) return
+    previousWorldBubbleRuntimeData.current = runtimeData
+  }, [isWorldBubbleMap, isDrilledBubbleView, runtimeData])
+
   if (!world) {
     return <></>
   }
@@ -115,8 +128,19 @@ const WorldMap = () => {
 
   const filteredWorld = getFilteredWorld()
 
+  const rebuildRuntimeDataFromActiveFilters = () => {
+    const activeFilters = runtimeFilters?.length ? runtimeFilters : generateRuntimeFilters(config, undefined, [])
+
+    return generateRuntimeData(
+      config,
+      activeFilters,
+      runtimeFilters?.fromHash ?? runtimeData?.fromHash,
+      config.legend?.type === 'category',
+      config.table?.showNonGeoData
+    )
+  }
+
   const handleFiltersReset = () => {
-    const newRuntimeData = generateRuntimeData(config)
     publishAnalyticsEvent({
       vizType: config.type,
       vizSubType: getVizSubType(config),
@@ -125,6 +149,7 @@ const WorldMap = () => {
       eventLabel: interactionLabel,
       vizTitle: getVizTitle(config)
     })
+    const newRuntimeData = rebuildRuntimeDataFromActiveFilters()
     dispatch({ type: 'SET_FILTERED_COUNTRY_CODE', payload: '' })
     dispatch({ type: 'SET_RUNTIME_DATA', payload: newRuntimeData })
   }
@@ -139,6 +164,14 @@ const WorldMap = () => {
       vizTitle: getVizTitle(config)
     })
 
+    if (isWorldBubbleMap) {
+      const newRuntimeData = isDrilledBubbleView
+        ? previousWorldBubbleRuntimeData.current
+        : rebuildRuntimeDataFromActiveFilters()
+      dispatch({ type: 'SET_FILTERED_COUNTRY_CODE', payload: '' })
+      dispatch({ type: 'SET_RUNTIME_DATA', payload: newRuntimeData })
+    }
+
     // If countries are selected, center on them; otherwise, use default world position
     const countriesPicked = getCountriesPicked(config)
 
@@ -387,7 +420,7 @@ const WorldMap = () => {
   return (
     <ErrorBoundary component='WorldMap'>
       {allowMapZoom ? (
-        <svg viewBox={SVG_VIEWBOX} role='img' aria-label={handleMapAriaLabels(config)}>
+        <svg viewBox={SVG_VIEWBOX} role='img' aria-label={a11y}>
           <rect height={SVG_HEIGHT} width={SVG_WIDTH} onClick={handleFiltersReset} fill='white' />
           <ZoomableGroup
             zoom={position.zoom}
@@ -402,7 +435,7 @@ const WorldMap = () => {
           </ZoomableGroup>
         </svg>
       ) : (
-        <svg viewBox={SVG_VIEWBOX}>
+        <svg viewBox={SVG_VIEWBOX} role='img' aria-label={a11y}>
           <ZoomableGroup
             zoom={1}
             center={position.coordinates}

package/src/components/ZoomableGroup.tsx

@@ -1,8 +1,23 @@
 import React from 'react'
 import useZoomPan from '../hooks/useZoomPan'
 
-const ZoomableGroup = ({ center = [0, 0], zoom = 1, minZoom = 1, maxZoom = 8, translateExtent, filterZoomEvent, onMoveStart, onMove, onMoveEnd, className, projection, width, height, ...restProps }) => {
-  const { mapRef, transformString } = useZoomPan({
+const ZoomableGroup = ({
+  center = [0, 0],
+  zoom = 1,
+  minZoom = 1,
+  maxZoom = 8,
+  translateExtent,
+  filterZoomEvent,
+  onMoveStart,
+  onMove,
+  onMoveEnd,
+  className,
+  projection,
+  width,
+  height,
+  ...restProps
+}) => {
+  const { mapRef, transformString, position } = useZoomPan({
     center,
     filterZoomEvent,
     onMoveStart,
@@ -19,7 +34,12 @@ const ZoomableGroup = ({ center = [0, 0], zoom = 1, minZoom = 1, maxZoom = 8, tr
   return (
     <g ref={mapRef}>
       <rect width={width} height={height} fill='transparent' />
-      <g transform={transformString} {...restProps} />
+      <g
+        transform={transformString}
+        data-zoom-transform={transformString}
+        data-zoom-scale={position.k}
+        {...restProps}
+      />
     </g>
   )
 }

package/src/components/filterControls.styles.css

@@ -0,0 +1,6 @@
+.filter-controls {
+  bottom: 1em;
+  position: absolute;
+  right: 1em;
+  z-index: 4;
+}

package/src/data/initial-state.js

@@ -101,6 +101,8 @@ const createInitialState = () => {
       downloadUrlLabel: '',
       showDataTableLink: true,
       showDownloadLinkBelow: true,
+      search: false,
+      searchPlaceholder: '',
       showFullGeoNameInCSV: false,
       forceDisplay: true,
       download: false,

package/src/helpers/countyTerritories.ts

@@ -1,4 +1,4 @@
-export const US_TERRITORY_STATE_FIPS_PREFIXES = new Set(['60', '66', '69', '78'])
+export const US_TERRITORY_STATE_FIPS_PREFIXES = new Set(['60', '66', '69', '72', '78'])
 
 export type CountyTerritoryVisibility = {
   showTerritories: boolean

package/src/helpers/generateRuntimeFilters.ts

@@ -13,6 +13,7 @@ export const generateRuntimeFilters = (state, hash, runtimeFilters) => {
         queryParameter,
         orderedValues,
         active,
+        defaultValue,
         values,
         type,
         showDropdown,
@@ -50,7 +51,7 @@ export const generateRuntimeFilters = (state, hash, runtimeFilters) => {
       newFilter.values = values
       newFilter.setByQueryParameter = setByQueryParameter
       handleSorting(newFilter)
-      newFilter.active = active ?? values[0] // Default to first found value
+      newFilter.active = active ?? defaultValue ?? values[0] // Default to configured defaultValue, then first found value
       newFilter.filterStyle = state.filters[idx].filterStyle ? state.filters[idx].filterStyle : 'dropdown'
       newFilter.showDropdown = showDropdown
       newFilter.subGrouping = state.filters[idx].subGrouping

package/src/helpers/handleMapAriaLabels.ts

@@ -1,36 +1,51 @@
-export const handleMapAriaLabels = (state: MapConfig = '') => {
+import type { AltTextConfig } from '@cdc/core/types/AltText'
+import { resolveAltTextDescription } from '@cdc/core/helpers/resolveAltTextDescription'
+
+const getAutoLabel = (state): string => {
+  const {
+    general: { title, geoType, statesPicked }
+  } = state
+  let ariaLabel = ''
+  switch (geoType) {
+    case 'world':
+      ariaLabel += 'World map'
+      break
+    case 'us':
+      ariaLabel += 'United States map'
+      break
+    case 'us-county':
+      ariaLabel += `United States county map`
+      break
+    case 'single-state':
+      ariaLabel += `${statesPicked.map(sp => sp.stateName).join(', ')} county map`
+      break
+    case 'us-region':
+      ariaLabel += `United States HHS Region map`
+      break
+    default:
+      ariaLabel = 'Data visualization container'
+      break
+  }
+
+  if (title) {
+    ariaLabel += ` with the title: ${title}`
+  }
+
+  return ariaLabel
+}
+
+export const handleMapAriaLabels = (state: {
+  general?: { geoType?: string; title?: string; statesPicked?: { stateName: string }[] }
+  altText?: AltTextConfig
+  dataMetadata?: Record<string, string>
+}): string => {
   try {
-    if (!state.general.geoType) throw Error('handleMapAriaLabels: no geoType found in state')
-    const {
-      general: { title, geoType, statesPicked }
-    } = state
-    let ariaLabel = ''
-    switch (geoType) {
-      case 'world':
-        ariaLabel += 'World map'
-        break
-      case 'us':
-        ariaLabel += 'United States map'
-        break
-      case 'us-county':
-        ariaLabel += `United States county map`
-        break
-      case 'single-state':
-        ariaLabel += `${statesPicked.map(sp => sp.stateName).join(', ')} county map`
-        break
-      case 'us-region':
-        ariaLabel += `United States HHS Region map`
-        break
-      default:
-        ariaLabel = 'Data visualization container'
-        break
-    }
+    if (!state.general?.geoType) throw Error('handleMapAriaLabels: no geoType found in state')
 
-    if (title) {
-      ariaLabel += ` with the title: ${title}`
-    }
+    const title = getAutoLabel(state)
+    const description = resolveAltTextDescription(state.altText, state.dataMetadata)
 
-    return ariaLabel
+    return description ? `${title}. ${description}` : title
   } catch (e) {
     console.error('COVE: ', e.message) // eslint-disable-line
     return 'Data visualization container'

package/src/helpers/shouldAutoResetSingleStateZoom.ts

@@ -0,0 +1,22 @@
+type AutoResetArgs = {
+  isDashboard: boolean
+  previousRuntimeDataHash: number | null
+  nextRuntimeDataHash?: number
+  hasDashboardFilters?: boolean
+  allowMapZoom?: boolean
+}
+
+export const shouldAutoResetSingleStateZoom = ({
+  isDashboard,
+  previousRuntimeDataHash,
+  nextRuntimeDataHash,
+  hasDashboardFilters = false,
+  allowMapZoom = true
+}: AutoResetArgs): boolean => {
+  if (!isDashboard || !allowMapZoom) return false
+  if (!hasDashboardFilters) return false
+  if (previousRuntimeDataHash === null) return false
+  if (nextRuntimeDataHash === undefined) return false
+
+  return previousRuntimeDataHash !== nextRuntimeDataHash
+}

package/src/helpers/tests/handleMapAriaLabels.test.ts

@@ -0,0 +1,71 @@
+import { handleMapAriaLabels } from '../handleMapAriaLabels'
+
+const baseState = {
+  general: {
+    geoType: 'us',
+    title: 'COVID-19 Cases by State',
+    statesPicked: []
+  }
+}
+
+describe('handleMapAriaLabels', () => {
+  it('returns auto-generated title for US map', () => {
+    const result = handleMapAriaLabels(baseState)
+    expect(result).toBe('United States map with the title: COVID-19 Cases by State')
+  })
+
+  it('returns auto-generated title for world map', () => {
+    const result = handleMapAriaLabels({
+      general: { geoType: 'world', title: 'Global Data', statesPicked: [] }
+    })
+    expect(result).toBe('World map with the title: Global Data')
+  })
+
+  it('returns fallback when geoType is missing', () => {
+    const result = handleMapAriaLabels({ general: {} })
+    expect(result).toBe('Data visualization container')
+  })
+
+  describe('description', () => {
+    it('concatenates static description after title', () => {
+      const result = handleMapAriaLabels({
+        ...baseState,
+        altText: { type: 'static', value: 'Rates highest in the Southeast.' }
+      })
+      expect(result).toBe('United States map with the title: COVID-19 Cases by State. Rates highest in the Southeast.')
+    })
+
+    it('concatenates description from metadata after title', () => {
+      const result = handleMapAriaLabels({
+        ...baseState,
+        altText: { type: 'metadata', metadataKey: 'altDescription' },
+        dataMetadata: { altDescription: 'Map shows elevated rates in southern states.' }
+      })
+      expect(result).toBe(
+        'United States map with the title: COVID-19 Cases by State. Map shows elevated rates in southern states.'
+      )
+    })
+
+    it('returns title only when metadata key is missing', () => {
+      const result = handleMapAriaLabels({
+        ...baseState,
+        altText: { type: 'metadata', metadataKey: 'missing' },
+        dataMetadata: { other: 'value' }
+      })
+      expect(result).toBe('United States map with the title: COVID-19 Cases by State')
+    })
+
+    it('returns title only when not configured', () => {
+      const result = handleMapAriaLabels(baseState)
+      expect(result).toBe('United States map with the title: COVID-19 Cases by State')
+    })
+
+    it('returns title only when altText is empty object', () => {
+      const result = handleMapAriaLabels({
+        ...baseState,
+        altText: {}
+      })
+      expect(result).toBe('United States map with the title: COVID-19 Cases by State')
+    })
+  })
+})