@cdc/map 4.26.4 → 4.26.5

package/examples/default-county.json

@@ -97,6 +97,9 @@
   "runtime": {
     "editorErrorMessage": []
   },
+  "migrations": {
+    "showPuertoRico": false
+  },
   "visual": {
     "minBubbleSize": 1,
     "maxBubbleSize": 20,

package/examples/minimal-example.json

@@ -1,11 +1,15 @@
 {
   "version": "4.26.4",
-  "color": "pinkpurple",
   "general": {
     "title": "Minimal US Map",
     "geoType": "us",
     "type": "data",
-    "showTitle": true
+    "showTitle": true,
+    "palette": {
+      "name": "sequential_blue",
+      "version": "2.0",
+      "isReversed": false
+    }
   },
   "type": "map",
   "columns": {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@cdc/map",
-  "version": "4.26.4",
+  "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.4",
+    "@cdc/core": "^4.26.5",
     "@googlemaps/markerclusterer": "^2.5.3",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-google-maps/api": "^2.20.8",
@@ -42,7 +42,7 @@
     "vite-plugin-svgr": "^4.2.0",
     "whatwg-fetch": "^3.6.20"
   },
-  "gitHead": "432a2d1acab22915fafe793cb9da1f10318ff793",
+  "gitHead": "61c025165d96b45a6002c34582c5a622a9d865a9",
   "main": "dist/cdcmap",
   "moduleName": "CdcMap",
   "peerDependencies": {

package/src/CdcMapComponent.tsx

@@ -35,6 +35,7 @@ import {
 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
@@ -94,6 +95,8 @@ type CdcMapComponent = {
   logo?: string
   navigationHandler: Function
   setSharedFilter: Function
+  clearSharedFilter?: (key: string) => void
+  hasActiveSharedFilter?: boolean
   setSharedFilterValue: Function
   setConfig?: Function
   loadConfig?: Function
@@ -108,6 +111,8 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
   isEditor = false,
   logo = '',
   setSharedFilter,
+  clearSharedFilter,
+  hasActiveSharedFilter = false,
   setSharedFilterValue,
   link,
   setConfig: setParentConfig,
@@ -433,6 +438,8 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     setConfig,
     setFilteredStateCountyCode,
     setSharedFilter,
+    clearSharedFilter,
+    hasActiveSharedFilter,
     setSharedFilterValue,
     config,
     statesToShow,
@@ -532,6 +539,8 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
     return config
   }
 
+  const filterConfig = applyStateFilter(config)
+
   return (
     <LegendMemoProvider legendMemo={legendMemo} legendSpecialClassLastMemo={legendSpecialClassLastMemo}>
       <ConfigContext.Provider value={mapProps}>
@@ -556,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' : '',
@@ -570,9 +579,9 @@ const CdcMapComponent: React.FC<CdcMapComponent> = ({
                   .filter(Boolean)
                   .join(' ')}
                 filters={
-                  config?.filters?.length > 0 || config.general.showStateDropdown ? (
+                  hasVisibleVizFilters(filterConfig.filters) ? (
                     <Filters
-                      config={applyStateFilter(config)}
+                      config={filterConfig}
                       setFilters={setFilters}
                       dimensions={dimensions}
                       interactionLabel={interactionLabel}
@@ -746,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')
+  }
+}

package/src/_stories/CdcMap.Editor.ColumnsSectionTests.stories.tsx

@@ -433,13 +433,13 @@ export const ColumnsSectionTests: Story = {
       const tableHeaders = Array.from(dataTable?.querySelectorAll('th') || [])
       const tableHeaderText = tableHeaders.map(th => th.textContent?.trim() || '')
 
-      // Check if "Rate" column header appears in data table
-      const hasRateColumn = tableHeaderText.some(text => text.includes('Rate') || text.includes('Value'))
+      // The primary map column renders as "Location" in this story's data table.
+      const hasPrimaryColumn = tableHeaderText.some(text => text.includes('Location'))
 
       return {
         hasDataTable: Boolean(dataTable),
         tableHeaders: tableHeaderText,
-        hasRateColumn: hasRateColumn
+        hasPrimaryColumn: hasPrimaryColumn
       }
     }
 
@@ -451,8 +451,8 @@ export const ColumnsSectionTests: Story = {
         await userEvent.click(showInTableCheckbox)
       },
       (before, after) => {
-        // Rate column should disappear from data table headers
-        return before.hasRateColumn && !after.hasRateColumn
+        // Primary column should disappear from data table headers.
+        return before.hasPrimaryColumn && !after.hasPrimaryColumn
       }
     )
 
@@ -463,8 +463,8 @@ export const ColumnsSectionTests: Story = {
         await userEvent.click(showInTableCheckbox)
       },
       (before, after) => {
-        // Rate column should reappear in data table headers
-        return !before.hasRateColumn && after.hasRateColumn
+        // Primary column should reappear in data table headers.
+        return !before.hasPrimaryColumn && after.hasPrimaryColumn
       }
     )
 
@@ -482,14 +482,13 @@ export const ColumnsSectionTests: Story = {
       const geoGroup = canvasElement.querySelector('g.geo-group') as SVGGElement
       const tooltipHtml = geoGroup?.getAttribute('data-tooltip-html') || ''
 
-      // Check if tooltip contains data values (numbers with potential $ and % from earlier tests)
-      // Look for patterns like list items with numeric values
-      const hasDataValues = tooltipHtml.includes('<li') && /\$?\d+\.\d{2}%?/.test(tooltipHtml)
+      const hasPrimaryLocationField = tooltipHtml.includes('Location:')
+      const hasValueField = tooltipHtml.includes('Value:')
 
       return {
         tooltipContent: tooltipHtml,
-        hasDataValues: hasDataValues,
-        tooltipLength: tooltipHtml.length
+        hasPrimaryLocationField: hasPrimaryLocationField,
+        hasValueField: hasValueField
       }
     }
 
@@ -501,8 +500,8 @@ export const ColumnsSectionTests: Story = {
         await userEvent.click(showInTooltipsCheckbox)
       },
       (before, after) => {
-        // Tooltip should no longer contain data values, should be shorter
-        return before.hasDataValues && !after.hasDataValues && after.tooltipLength < before.tooltipLength
+        // Primary tooltip field should be enabled.
+        return !before.hasPrimaryLocationField && after.hasPrimaryLocationField && after.hasValueField
       }
     )
 
@@ -513,8 +512,8 @@ export const ColumnsSectionTests: Story = {
         await userEvent.click(showInTooltipsCheckbox)
       },
       (before, after) => {
-        // Tooltip should contain data values again, should be longer
-        return !before.hasDataValues && after.hasDataValues && after.tooltipLength > before.tooltipLength
+        // Primary tooltip field should be disabled again.
+        return before.hasPrimaryLocationField && !after.hasPrimaryLocationField && after.hasValueField
       }
     )
 

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

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect, userEvent } from 'storybook/test'
+import CdcMap from '../CdcMap'
+import { assertVisualizationRendered, waitForPresence } from '@cdc/core/helpers/testing'
+import singleStateConfig from './_mock/DEV-8942.json'
+import worldBubbleReset from './_mock/world-bubble-reset.json'
+
+const meta: Meta<typeof CdcMap> = {
+  title: 'Components/Templates/Map/Focus Visibility',
+  component: CdcMap,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Regression coverage for map focus treatment so single-state maps suppress pointer-only outlines while keeping keyboard-visible focus.'
+      }
+    }
+  }
+}
+
+export default meta
+
+type Story = StoryObj<typeof CdcMap>
+
+export const SingleStateFocusVisibility: Story = {
+  args: {
+    config: singleStateConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('path.county', canvasElement)
+
+    const mapRegion = canvasElement.querySelector('.map-container[role="region"]') as HTMLElement
+    const geographyContainer = canvasElement.querySelector('.geography-container') as HTMLElement
+    const countyPath = canvasElement.querySelector('path.county') as SVGPathElement
+
+    expect(mapRegion).toBeTruthy()
+    expect(geographyContainer).toBeTruthy()
+    expect(countyPath).toBeTruthy()
+
+    await userEvent.click(countyPath)
+    expect(geographyContainer.matches(':focus-visible')).toBe(false)
+    expect(geographyContainer).not.toHaveFocus()
+    expect(mapRegion.matches(':focus-visible')).toBe(false)
+    expect(mapRegion).not.toHaveFocus()
+
+    await userEvent.tab()
+
+    const focusedElement = document.activeElement as HTMLElement | null
+    expect(focusedElement).toBeTruthy()
+    expect(canvasElement.contains(focusedElement)).toBe(true)
+    expect(focusedElement?.matches(':focus-visible')).toBe(true)
+  }
+}
+
+export const WorldBubbleFocusVisibility: Story = {
+  args: {
+    config: worldBubbleReset,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('circle.bubble.country--France', canvasElement)
+
+    const mapRegion = canvasElement.querySelector('.map-container[role="region"]') as HTMLElement
+    const geographyContainer = canvasElement.querySelector('.geography-container') as HTMLElement
+    const bubble = canvasElement.querySelector('circle.bubble.country--France') as SVGCircleElement
+
+    expect(mapRegion).toBeTruthy()
+    expect(geographyContainer).toBeTruthy()
+    expect(bubble).toBeTruthy()
+
+    await userEvent.click(bubble)
+    expect(bubble.matches(':focus-visible')).toBe(false)
+    expect(bubble).not.toHaveFocus()
+    expect(geographyContainer.matches(':focus-visible')).toBe(false)
+    expect(mapRegion.matches(':focus-visible')).toBe(false)
+
+    await userEvent.tab()
+
+    const focusedElement = document.activeElement as HTMLElement | null
+    expect(focusedElement).toBeTruthy()
+    expect(canvasElement.contains(focusedElement)).toBe(true)
+    expect(focusedElement?.matches(':focus-visible')).toBe(true)
+  }
+}

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

@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import CdcMap from '../CdcMap'
+import CountyPatterns from './_mock/county-patterns.json'
+import { within, expect, userEvent } from 'storybook/test'
+
+const meta: Meta<typeof CdcMap> = {
+  title: 'Components/Templates/Map/Hidden Mount',
+  component: CdcMap,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+export default meta
+
+type Story = StoryObj<typeof CdcMap>
+
+const HiddenMountHarness = () => {
+  const [isVisible, setIsVisible] = useState(false)
+
+  return (
+    <div style={{ padding: 24 }}>
+      <div style={{ maxWidth: 960, marginBottom: 16 }}>
+        <p style={{ marginBottom: 12 }}>
+          This story mounts the county map while hidden, mimicking host-page CSS or JS that reveals it later.
+        </p>
+        <button type='button' onClick={() => setIsVisible(true)}>
+          Reveal county map
+        </button>
+      </div>
+
+      <div
+        data-testid='county-hidden-mount-wrapper'
+        style={{
+          display: isVisible ? 'block' : 'none',
+          width: 960
+        }}
+      >
+        <CdcMap config={CountyPatterns} />
+      </div>
+    </div>
+  )
+}
+
+export const County_Map_Revealed_After_Hidden_Mount: Story = {
+  render: () => <HiddenMountHarness />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates the original county-map hidden-mount scenario: the map is mounted while hidden and only shown after host-page interaction.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const revealButton = canvas.getByRole('button', { name: 'Reveal county map' })
+
+    await userEvent.click(revealButton)
+
+    const renderedCanvas = await canvas.findByRole('img', { hidden: true }, { timeout: 10000 })
+    expect(renderedCanvas).toBeInTheDocument()
+
+    const mapCanvas = canvasElement.querySelector('canvas') as HTMLCanvasElement | null
+    expect(mapCanvas?.width).toBeGreaterThan(0)
+    expect(mapCanvas?.height).toBeGreaterThan(0)
+  }
+}

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import CdcMap from '../CdcMap'
+import worldDataZoomFilters from './_mock/world-data-zoom-filters.json'
+import { assertVisualizationRendered, waitForPresence } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof CdcMap> = {
+  title: 'Components/Templates/Map/Reset Behavior',
+  component: CdcMap,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Manual repro story for world data maps that combine active filters with zoom so reset behavior can be validated directly in Storybook.'
+      }
+    }
+  }
+}
+
+export default meta
+
+type Story = StoryObj<typeof CdcMap>
+
+export const WorldDataZoomWithFilters: Story = {
+  args: {
+    config: worldDataZoomFilters,
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitForPresence('path[data-country-code]', canvasElement)
+  }
+}

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

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, userEvent, expect } from 'storybook/test'
+import CdcMap from '../CdcMap'
+import SingleStateWithFilters from './_mock/DEV-8942.json'
+import MultiCountry from './_mock/multi-country.json'
+import CountyPatterns from './_mock/county-patterns.json'
+import { assertVisualizationRendered, performAndAssert, waitForPresence } from '@cdc/core/helpers/testing'
+
+type Story = StoryObj<typeof CdcMap>
+
+const meta: Meta<typeof CdcMap> = {
+  title: 'Components/Templates/Map/Zoom',
+  component: CdcMap,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+export default meta
+
+const readZoomState = (canvasElement: HTMLElement) => {
+  const zoomTarget = canvasElement.querySelector('[data-zoom-transform]') as HTMLElement | null
+
+  return {
+    transform: zoomTarget?.getAttribute('data-zoom-transform') || '',
+    scale: Number(zoomTarget?.getAttribute('data-zoom-scale') || '0')
+  }
+}
+
+const verifyBasicZoomCycle = async (canvasElement: HTMLElement) => {
+  const canvas = within(canvasElement)
+
+  await assertVisualizationRendered(canvasElement)
+  await waitForPresence('button[aria-label="Zoom In"]', canvasElement)
+
+  const zoomInButton = canvas.getByLabelText('Zoom In')
+
+  await performAndAssert(
+    'Map zooms in',
+    () => readZoomState(canvasElement),
+    async () => {
+      await userEvent.click(zoomInButton)
+    },
+    (before, after) => before.transform !== after.transform && after.scale > before.scale
+  )
+
+  const resetButton = canvas.queryByRole('button', { name: 'Reset Zoom' })
+
+  if (resetButton) {
+    await performAndAssert(
+      'Map reset returns zoom to default',
+      () => readZoomState(canvasElement),
+      async () => {
+        await userEvent.click(resetButton)
+      },
+      (before, after) => before.transform !== after.transform && after.scale === 1
+    )
+  } else {
+    expect(readZoomState(canvasElement).scale).toBeGreaterThan(1)
+  }
+}
+
+export const SingleState: Story = {
+  args: {
+    config: SingleStateWithFilters
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Single-state zoom baseline. Use this to confirm local zoom and reset behavior outside dashboards.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await verifyBasicZoomCycle(canvasElement)
+  }
+}
+
+export const County: Story = {
+  args: {
+    config: CountyPatterns
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'County-map zoom baseline. Useful for checking that pan/zoom controls still behave correctly on county geographies.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await verifyBasicZoomCycle(canvasElement)
+  }
+}
+
+export const World: Story = {
+  args: {
+    config: MultiCountry
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'World-map zoom baseline. Useful for checking that world-map zoom and reset controls still behave after single-state zoom changes.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await verifyBasicZoomCycle(canvasElement)
+  }
+}