@cdc/map 4.24.1 → 4.24.3

package/examples/{private/zika-issue.json → zika.json}

@@ -1,16 +1,12 @@
 {
   "general": {
-    "title": "Default World Map",
-    "subtext": "",
-    "type": "data",
     "geoType": "world",
-    "headerColor": "theme-blue",
     "geoBorderColor": "darkGray",
+    "headerColor": "theme-blue",
+    "title": "Countries and territories where Zika cases have been reported (as of October 5, 2023)*",
+    "showTitle": false,
     "showSidebar": true,
-    "showTitle": true,
     "showDownloadButton": true,
-    "expandDataTable": true,
-    "equalNumberOptIn": true,
     "showDownloadMediaButton": false,
     "displayAsHex": false,
     "displayStateLabels": false,
@@ -20,9 +16,10 @@
     "geoLabelOverride": "",
     "hasRegions": false,
     "fullBorder": false,
+    "type": "data",
     "convertFipsCodes": true,
     "palette": {
-      "isReversed": false
+      "isReversed": true
     },
     "allowMapZoom": true,
     "hideGeoColumnInTooltip": false,
@@ -30,10 +27,12 @@
     "statePicked": {
       "fipsCode": "01",
       "stateName": "Alabama"
-    }
+    },
+    "footnotes": "*Does not include countries or territories where only imported cases have been documented. Small island nations might not display on the map but data are included in the table above.",
+    "introText": ""
   },
   "type": "map",
-  "color": "pinkpurple",
+  "color": "sequential-blue-2(MPX)reverse",
   "columns": {
     "geo": {
       "name": "Country",
@@ -42,17 +41,15 @@
       "dataTable": true
     },
     "primary": {
-      "name": "Category",
-      "label": "Data Label",
-      "prefix": "",
-      "suffix": "%",
       "dataTable": true,
-      "tooltip": true
+      "tooltip": true,
+      "prefix": "",
+      "suffix": "",
+      "name": "Category",
+      "label": ""
     },
     "navigate": {
-      "name": "Link",
-      "tooltip": false,
-      "dataTable": false
+      "name": ""
     },
     "latitude": {
       "name": ""
@@ -62,30 +59,22 @@
     }
   },
   "legend": {
-    "numberOfItems": 3,
-    "position": "side",
-    "title": "Legend Title",
-    "description": "Legend Text",
-    "type": "category",
-    "specialClasses": [
-      {
-        "key": "Data",
-        "value": "N/A",
-        "label": "N/A"
-      }
-    ],
-    "separateZero": true,
     "descriptions": {},
+    "specialClasses": [],
     "unified": false,
     "singleColumn": false,
     "singleRow": false,
     "verticalSorted": false,
     "showSpecialClassesLast": false,
     "dynamicDescription": false,
+    "type": "category",
+    "numberOfItems": 3,
+    "position": "bottom",
+    "title": "Legend",
     "categoryValuesOrder": [
+      "Current or past Zika transmission",
       "Known to have mosquito that transmits Zika, but no reported Zika cases ",
-      "Not known to have mosquito that transmits Zika",
-      "Current or past Zika transmission"
+      "Not known to have mosquito that transmits Zika"
     ]
   },
   "filters": [],
@@ -96,11 +85,12 @@
     "height": "",
     "caption": "",
     "showDownloadUrl": false,
-    "showDataTableLink": true,
+    "showDataTableLink": false,
     "showFullGeoNameInCSV": false,
     "forceDisplay": true,
-    "download": false,
-    "indexLabel": ""
+    "download": true,
+    "indexLabel": "",
+    "wrapColumns": false
   },
   "tooltips": {
     "appearanceType": "hover",
@@ -108,9 +98,6 @@
     "capitalizeLabels": true,
     "opacity": 90
   },
-  "runtime": {
-    "editorErrorMessage": []
-  },
   "visual": {
     "minBubbleSize": 1,
     "maxBubbleSize": 20,
@@ -127,7 +114,8 @@
     "zoom": 1
   },
   "map": {
-    "layers": []
+    "layers": [],
+    "patterns": []
   },
   "hexMap": {
     "type": "",
@@ -148,6 +136,10 @@
     ]
   },
   "filterBehavior": "Filter Change",
+  "openModal": false,
+  "uid": "map1701275481219",
+  "editing": true,
+  "validated": 4.23,
   "data": [
     {
       "Country": "Afghanistan",
@@ -182,7 +174,7 @@
       "Category": "Current or past Zika transmission"
     },
     {
-      "Country": "Antartica",
+      "Country": "Antarctica",
       "Category": "Not known to have mosquito that transmits Zika"
     },
     {
@@ -361,10 +353,6 @@
       "Country": "Comoros",
       "Category": "Not known to have mosquito that transmits Zika"
     },
-    {
-      "Country": "Continental United States",
-      "Category": "Known to have mosquito that transmits Zika, but no reported Zika cases "
-    },
     {
       "Country": "Cook Islands",
       "Category": "Current or past Zika transmission"
@@ -719,7 +707,7 @@
     },
     {
       "Country": "Mali",
-      "Category": "Known to have mosquito that transmits Zika, but no reported Zika cases "
+      "Category": "Current or past Zika transmission"
     },
     {
       "Country": "Malta",
@@ -854,7 +842,7 @@
       "Category": "Current or past Zika transmission"
     },
     {
-      "Country": "Palestinian Territories",
+      "Country": "Gaza/West Bank",
       "Category": "Not known to have mosquito that transmits Zika"
     },
     {
@@ -942,11 +930,11 @@
       "Category": "Current or past Zika transmission"
     },
     {
-      "Country": "Saint Paul and New Amsterdam Islands",
+      "Country": "Sicily",
       "Category": "Not known to have mosquito that transmits Zika"
     },
     {
-      "Country": "Saint Pierre and Miquelon",
+      "Country": "Saint Paul and Amsterdam Islands",
       "Category": "Not known to have mosquito that transmits Zika"
     },
     {
@@ -1141,6 +1129,10 @@
       "Country": "United States Minor Outlying Islands",
       "Category": "Not known to have mosquito that transmits Zika"
     },
+    {
+      "Country": "United States of America",
+      "Category": "Known to have mosquito that transmits Zika, but no reported Zika cases "
+    },
     {
       "Country": "Uruguay",
       "Category": "Known to have mosquito that transmits Zika, but no reported Zika cases "
@@ -1190,9 +1182,13 @@
       "Category": "Known to have mosquito that transmits Zika, but no reported Zika cases "
     },
     {
-      "Country": "Zimbabwe",
+      "Country": "Dhekelia",
       "Category": "Known to have mosquito that transmits Zika, but no reported Zika cases "
     }
   ],
-  "validated": 4.23
+  "dataDescription": {
+    "series": false,
+    "horizontal": false
+  },
+  "dataKey": "Map-data-1_23_24-wMali.csv"
 }

package/index.html

@@ -11,12 +11,18 @@
       .cdc-map-outer-container {
         min-height: 100vh;
       }
+      /* .alaska,
+      .hawaii {
+        display: none;
+      } */
     </style>
   </head>
 
   <body>
     <!-- DEFAULT EXAMPLES -->
+    <div class="react-container" data-config="/examples/private/map.json"></div>
     <!-- <div class="react-container" data-config="/examples/private/zika-issue.json"></div> -->
+    <!-- <div class="react-container react-container--maps" data-config="/examples/usa-special-class-legend.json">/</div> -->
 
     <!-- <div class="react-container react-container--maps" data-config="/examples/private/tooltip-issue.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/test.json"></div> -->
@@ -25,11 +31,10 @@
     <!-- <div class="react-container react-container--maps" data-config="/examples/private/map-text-wrap.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/private/tooltip-issue.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/test.json"></div> -->
-    <!-- <div class="react-container react-container--maps" data-config="/examples/default-county.json"></div> -->
+    <!-- <div class="react-container react-container--maps" data-config="/examples/default-usa-regions.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/default-usa.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/US-County-Level-Map.json"></div> -->
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-geocode.json"></div> -->
-    <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-usa-regions.json"></div> -->
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/default-single-state.json"></div> -->
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/bubble-us.json"></div> -->
     <!-- <div class="react-container react-container&#45;&#45;maps" data-config="/examples/bubble-world.json"></div> -->
@@ -38,15 +43,16 @@
     <!-- <div class="react-container" data-config="/examples/private/wastewater.json"></div> -->
 
     <!-- TP4 EXAMPLES -->
-    <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div> -->
+    <!-- <div class="react-container react-container--maps" data-config="/examples/private/solr.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/custom-map-layers.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-stateBAD.json"></div> -->
-    <div class="react-container react-container--maps" data-config="/examples/example-world-map.json"></div>
+    <!-- <div class="react-container react-container--maps" data-config="/examples/private/world-map.json"></div> -->
+    <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/hex-with-arrows.json"></div> -->
 
     <!-- TP4 EXAMPLES -->
-    <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div> -->
+    <div class="react-container react-container--maps" data-config="/examples/example-city-state.json"></div>
     <!-- <div class="react-container react-container--maps" data-config="/examples/example-city-state-no-territories.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/example-world-map.json"></div> -->
     <!-- <div class="react-container react-container--maps" data-config="/examples/default-hex.json"></div> -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/map",
-  "version": "4.24.1",
+  "version": "4.24.3",
   "description": "React component for visualizing tabular data on a map of the United States or the world.",
   "moduleName": "CdcMap",
   "main": "dist/cdcmap",
@@ -24,7 +24,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/core": "^4.24.1",
+    "@cdc/core": "^4.24.3",
     "@emotion/core": "^10.0.28",
     "@emotion/react": "^11.1.5",
     "@hello-pangea/dnd": "^16.2.0",
@@ -51,5 +51,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "a352a3f74f4b681191e3244061dbb3621f36eec3"
+  "gitHead": "9c7ef7ca74f2d2a1e04d923b133fe0fc557a62bf"
 }

package/src/CdcMap.tsx

@@ -15,12 +15,13 @@ import 'react-tooltip/dist/react-tooltip.css'
 // Helpers
 import { publish } from '@cdc/core/helpers/events'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
+import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
 import Title from '@cdc/core/components/ui/Title'
 
 // Data
 import { countryCoordinates } from './data/country-coordinates'
 import { supportedStates, supportedTerritories, supportedCountries, supportedCounties, supportedCities, supportedStatesFipsCodes, stateFipsToTwoDigit, supportedRegions } from './data/supported-geos'
-import colorPalettes from '../../core/data/colorPalettes'
+import colorPalettes from '@cdc/core/data/colorPalettes'
 import initialState from './data/initial-state'
 
 // Assets
@@ -37,6 +38,7 @@ import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import MediaControls from '@cdc/core/components/MediaControls'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import getViewport from '@cdc/core/helpers/getViewport'
+import isDomainExternal from '@cdc/core/helpers/isDomainExternal'
 import Loading from '@cdc/core/components/Loading'
 import numberFromString from '@cdc/core/helpers/numberFromString'
 import DataTable from '@cdc/core/components/DataTable' // Future: Lazy
@@ -52,6 +54,8 @@ import NavigationMenu from './components/NavigationMenu' // Future: Lazy
 import UsaMap from './components/UsaMap' // Future: Lazy
 import WorldMap from './components/WorldMap' // Future: Lazy
 import useTooltip from './hooks/useTooltip'
+import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
+import SkipTo from '@cdc/core/components/elements/SkipTo'
 
 // Data props
 const stateKeys = Object.keys(supportedStates)
@@ -131,9 +135,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   const [container, setContainer] = useState()
   const [imageId, setImageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`) // eslint-disable-line
   const [dimensions, setDimensions] = useState()
+  const legendRef = useRef(null)
 
   const { changeFilterActive, handleSorting } = useFilters({ config: state, setConfig: setState })
   let legendMemo = useRef(new Map())
+  let legendSpecialClassLastMemo = useRef(new Map())
   let innerContainerRef = useRef()
 
   if (isDebug) console.log('CdcMap state=', state) // eslint-disable-line
@@ -239,8 +245,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         }
 
         // Cities
-        if (!uid) {
-          uid = cityKeys.find(key => key === geoName)
+        if (!uid && geoName) {
+          uid = cityKeys.find(key => key === geoName.toUpperCase())
         }
       }
 
@@ -267,6 +273,11 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         if (!uid && 'world-geocode' === state.general.type) {
           uid = cityKeys.find(key => key === geoName?.toUpperCase())
         }
+
+        // Cities
+        if (!uid && geoName) {
+          uid = cityKeys.find(key => key === geoName.toUpperCase())
+        }
       }
 
       // County Check
@@ -279,6 +290,10 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         uid = row[state.columns.geo.name]
       }
 
+      if (!uid && state.columns.latitude?.name && state.columns.longitude?.name && row[state.columns.latitude?.name] && row[state.columns.longitude?.name]) {
+        uid = row[state.columns.geo.name]
+      }
+
       if (uid) {
         Object.defineProperty(row, 'uid', {
           value: uid,
@@ -293,6 +308,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   // eslint-disable-next-line
   const generateRuntimeLegend = useCallback((obj, runtimeData, hash) => {
     const newLegendMemo = new Map() // Reset memoization
+    const newLegendSpecialClassLastMemo = new Map() // Reset bin memoization
     let primaryCol = obj.columns.primary.name,
       isBubble = obj.general.type === 'bubble',
       categoricalCol = obj.columns.categorical ? obj.columns.categorical.name : undefined,
@@ -514,6 +530,13 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         result = [...otherRows, ...specialRows]
       }
 
+      const assignSpecialClassLastIndex = (value, key) => {
+        const newIndex = result.findIndex(d => d.bin === value)
+        newLegendSpecialClassLastMemo.set(key, newIndex)
+      }
+      newLegendMemo.forEach(assignSpecialClassLastIndex)
+      legendSpecialClassLastMemo.current = newLegendSpecialClassLastMemo
+
       return result
     }
 
@@ -687,12 +710,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
           dataSet.forEach((row, dataIndex) => {
             let number = row[state.columns.primary.name]
-            let updated = 0
-
-            // check if we're seperating zero out
-            updated = state.legend.separateZero && hasZeroInData ? index : index
-            // check for special classes
-            updated = state.legend.specialClasses ? updated + state.legend.specialClasses.length : index
+            let updated = result.length - 1
 
             if (result[updated]?.min === (null || undefined) || result[updated]?.max === (null || undefined)) return
 
@@ -770,6 +788,13 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
     //-----------
 
+    const assignSpecialClassLastIndex = (value, key) => {
+      const newIndex = result.findIndex(d => d.bin === value)
+      newLegendSpecialClassLastMemo.set(key, newIndex)
+    }
+    newLegendMemo.forEach(assignSpecialClassLastIndex)
+    legendSpecialClassLastMemo.current = newLegendSpecialClassLastMemo
+
     return result
   })
 
@@ -781,7 +806,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
     if (hash) filters.fromHash = hash
 
-    obj?.filters.forEach(({ columnName, label, labels, queryParameter, orderedValues, active, values, type, showDropdown }, idx) => {
+    obj?.filters.forEach(({ columnName, label, labels, queryParameter, orderedValues, active, values, type, showDropdown, setByQueryParameter }, idx) => {
       let newFilter = runtimeFilters[idx]
 
       const sortAsc = (a, b) => {
@@ -824,6 +849,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       newFilter.queryParameter = queryParameter
       newFilter.labels = labels
       newFilter.values = values
+      newFilter.setByQueryParameter = setByQueryParameter
       handleSorting(newFilter)
       newFilter.active = active ?? values[0] // Default to first found value
       newFilter.filterStyle = obj.filters[idx].filterStyle ? obj.filters[idx].filterStyle : 'dropdown'
@@ -983,7 +1009,13 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
       if (legendMemo.current.has(hash)) {
         let idx = legendMemo.current.get(hash)
-        if (runtimeLegend[idx]?.disabled) return false
+        let disabledIdx = idx
+
+        if (state.legend.showSpecialClassesLast) {
+          disabledIdx = legendSpecialClassLastMemo.current.get(hash)
+        }
+
+        if (runtimeLegend[disabledIdx]?.disabled) return false
 
         // changed to use bin prop to get color instead of idx
         // bc we re-order legend when showSpecialClassesLast is checked
@@ -1074,6 +1106,12 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   // Attempts to find the corresponding value
   const displayGeoName = key => {
     if (!state.general.convertFipsCodes) return key
+
+    // World Map
+    // If we're returning a city name instead of a country ISO code, capitalize it for the data table.
+    if (state.type === 'map' && state.general.geoType === 'world') {
+      if (String(key).length > 3) return titleCase(key)
+    }
     let value = key
     // Map to first item in values array which is the preferred label
     if (stateKeys.includes(value)) {
@@ -1085,7 +1123,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     }
 
     if (countryKeys.includes(value)) {
-      value = titleCase(supportedCountries[key][0])
+      value = supportedCountries[key][0]
     }
 
     if (countyKeys.includes(value)) {
@@ -1124,11 +1162,19 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
       if (state.columns.hasOwnProperty('navigate') && row[state.columns.navigate.name]) {
         toolTipText.push(
-          // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-          <ul className='navigation-link' key='modal-navigation-link' onClick={() => navigationHandler(row[state.columns.navigate.name])}>
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/anchor-is-valid
+          <a
+            href='#'
+            className='navigation-link'
+            key='modal-navigation-link'
+            onClick={e => {
+              e.preventDefault()
+              navigationHandler(row[state.columns.navigate.name])
+            }}
+          >
             {state.tooltips.linkLabel}
-            <ExternalIcon className='inline-icon ml-1' />
-          </ul>
+            {isDomainExternal(row[state.columns.navigate.name]) && <ExternalIcon className='inline-icon ml-1' />}
+          </a>
         )
       }
     }
@@ -1266,18 +1312,19 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         const regex = /(?:\.([^.]+))?$/
 
         const ext = regex.exec(dataUrl.pathname)[1]
-        if ('csv' === ext) {
+        if ('csv' === ext || isSolrCsv(dataUrlFinal)) {
           data = await fetch(dataUrlFinal)
             .then(response => response.text())
             .then(responseText => {
               const parsedCsv = Papa.parse(responseText, {
                 header: true,
                 dynamicTyping: true,
-                skipEmptyLines: true
+                skipEmptyLines: true,
+                encoding: 'utf-8'
               })
               return parsedCsv.data
             })
-        } else if ('json' === ext) {
+        } else if ('json' === ext || isSolrJson(dataUrlFinal)) {
           data = await fetch(dataUrlFinal).then(response => response.json())
         } else {
           data = []
@@ -1435,6 +1482,12 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
       filters = generateRuntimeFilters(state, hashFilters, runtimeFilters)
 
       if (filters) {
+        filters.forEach((filter, index) => {
+          const queryStringFilterValue = getQueryStringFilterValue(filter)
+          if (queryStringFilterValue) {
+            filters[index].active = queryStringFilterValue
+          }
+        })
         setRuntimeFilters(filters)
       }
     }
@@ -1568,21 +1621,21 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
     // 1) skip to legend
     if (general.showSidebar) {
-      tabbingID = '#legend'
+      tabbingID = 'legend'
     }
 
     // 2) skip to data table if it exists and not a navigation map
     if (hasDataTable && !general.showSidebar) {
-      tabbingID = `#dataTableSection__${Date.now()}`
+      tabbingID = `dataTableSection__${Date.now()}`
     }
 
     // 3) if it's a navigation map skip to the dropdown.
     if (state.general.type === 'navigation') {
-      tabbingID = `#dropdown-${Date.now()}`
+      tabbingID = `dropdown-${Date.now()}`
     }
 
     // 4) handle other options
-    return tabbingID || '#!'
+    return tabbingID || '!'
   }
 
   const tabId = handleMapTabbing()
@@ -1600,9 +1653,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         {isEditor && <EditorPanel />}
         {!runtimeData.init && (general.type === 'navigation' || runtimeLegend) && (
           <section className={`cdc-map-inner-container ${currentViewport}`} aria-label={'Map: ' + title} ref={innerContainerRef}>
-            {!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && (
-              <ReactTooltip id='tooltip' float={true} className={`${tooltips.capitalizeLabels ? 'capitalize tooltip' : 'tooltip'}`} style={{ background: `rgba(255,255,255, ${state.tooltips.opacity / 100})`, color: 'black' }} />
-            )}
             {/* prettier-ignore */}
             <Title
               title={title}
@@ -1610,13 +1660,15 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
               config={config}
               classes={['map-title', general.showTitle === true ? 'visible' : 'hidden', `${general.headerColor}`]}
             />
+            <SkipTo skipId={tabId} skipMessage='Skip Over Map Container' />
+
             {general.introText && <section className='introText'>{parse(general.introText)}</section>}
 
             {/* prettier-ignore */}
             {state?.filters?.length > 0 && <Filters config={state} setConfig={setState} filteredData={runtimeFilters} setFilteredData={setRuntimeFilters} dimensions={dimensions} />}
 
             <div
-              role='button'
+              role='region'
               tabIndex='0'
               className={mapContainerClasses.join(' ')}
               onClick={e => closeModal(e)}
@@ -1626,10 +1678,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
                 }
               }}
             >
-              <a id='skip-geo-container' className='cdcdataviz-sr-only-focusable' href={tabId}>
-                Skip Over Map Container
-              </a>
-
               {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
               <section className='outline-none geography-container' ref={mapSvg} tabIndex='0' style={{ width: '100%' }}>
                 {currentViewport && (
@@ -1645,7 +1693,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
                 )}
               </section>
 
-              {general.showSidebar && 'navigation' !== general.type && <Legend />}
+              {general.showSidebar && 'navigation' !== general.type && <Legend ref={legendRef} />}
             </div>
 
             {'navigation' === general.type && <NavigationMenu mapTabbingID={tabId} displayGeoName={displayGeoName} data={runtimeData} options={general} columns={state.columns} navigationHandler={val => navigationHandler(val)} />}
@@ -1699,6 +1747,10 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         <div aria-live='assertive' className='cdcdataviz-sr-only'>
           {accessibleStatus}
         </div>
+
+        {!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && (
+          <ReactTooltip id='tooltip' float={true} className={`${tooltips.capitalizeLabels ? 'capitalize tooltip' : 'tooltip'}`} style={{ background: `rgba(255,255,255, ${state.tooltips.opacity / 100})`, color: 'black' }} />
+        )}
       </div>
     </ConfigContext.Provider>
   )

package/src/components/BubbleList.jsx

@@ -39,6 +39,7 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
         const circle = (
           <>
             <circle
+              tabIndex={-1}
               key={`circle-${countryName.replace(' ', '')}`}
               className={`bubble country--${countryName}`}
               cx={Number(projection(coordinates[1], coordinates[0])[0]) || 0} // || 0 handles error on loads where the data isn't ready
@@ -67,6 +68,7 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
 
             {state.visual.extraBubbleBorder && (
               <circle
+                tabIndex={-1}
                 key={`circle-${countryName.replace(' ', '')}`}
                 className='bubble'
                 cx={Number(projection(coordinates[1], coordinates[0])[0]) || 0} // || 0 handles error on loads where the data isn't ready
@@ -95,7 +97,11 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
           </>
         )
 
-        return <g key={`group-${countryName.replace(' ', '')}`}>{circle}</g>
+        return (
+          <g key={`group-${countryName.replace(' ', '')}`} tabIndex={-1}>
+            {circle}
+          </g>
+        )
       })
     return countries
   }
@@ -132,6 +138,7 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
         const circle = (
           <>
             <circle
+              tabIndex={-1}
               key={`circle-${stateName.replace(' ', '')}`}
               className='bubble'
               cx={projection(coordinates)[0] || 0} // || 0 handles error on loads where the data isn't ready
@@ -159,6 +166,7 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
             />
             {state.visual.extraBubbleBorder && (
               <circle
+                tabIndex={-1}
                 key={`circle-${stateName.replace(' ', '')}`}
                 className='bubble'
                 cx={projection(coordinates)[0] || 0} // || 0 handles error on loads where the data isn't ready