@cdc/map 4.24.2 → 4.24.4

package/src/CdcMap.tsx

@@ -1,5 +1,8 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react'
+import React, { useState, useEffect, useRef, useCallback, useId } from 'react'
 import * as d3 from 'd3'
+import Layout from '@cdc/core/components/Layout'
+import Waiting from '@cdc/core/components/Waiting'
+import Error from './components/EditorPanel/components/Error'
 
 // IE11
 import 'whatwg-fetch'
@@ -15,12 +18,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 +41,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
@@ -53,6 +58,7 @@ 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)
@@ -120,6 +126,7 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   const transform = new DataTransform()
   const [state, setState] = useState({ ...initialState })
   const [loading, setLoading] = useState(true)
+  const [displayPanel, setDisplayPanel] = useState(true)
   const [currentViewport, setCurrentViewport] = useState()
   const [runtimeFilters, setRuntimeFilters] = useState([])
   const [runtimeLegend, setRuntimeLegend] = useState([])
@@ -132,12 +139,49 @@ 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 [requiredColumns, setRequiredColumns] = useState(null) // Simple state so we know if we need more information before parsing the map
+
+  const legendRef = useRef(null)
+  const legendId = useId()
+  const tooltipId = useId()
 
   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
+  if (isDebug) console.log('CdcMap state=', state) // <eslint-disable-line></eslint-disable-line>
+
+  const columnsRequiredChecker = useCallback(() => {
+    let columnList = []
+
+    // Geo is always required
+    if ('' === state.columns.geo.name) {
+      columnList.push('Geography')
+    }
+
+    // Primary is required if we're on a data map or a point map
+    if ('navigation' !== state.general.type && '' === state.columns.primary.name) {
+      columnList.push('Primary')
+    }
+
+    // Navigate is required for navigation maps
+    if ('navigation' === state.general.type && ('' === state.columns.navigate.name || undefined === state.columns.navigate)) {
+      columnList.push('Navigation')
+    }
+
+    if (('us-geocode' === state.general.type || 'world-geocode' === state.general.type) && '' === state.columns.latitude.name) {
+      columnList.push('Latitude')
+    }
+
+    if (('us-geocode' === state.general.type || 'world-geocode' === state.general.type) && '' === state.columns.longitude.name) {
+      columnList.push('Longitude')
+    }
+
+    if (columnList.length === 0) columnList = null
+
+    setRequiredColumns(columnList)
+  }, [state.columns, state.general.type])
 
   useEffect(() => {
     try {
@@ -303,6 +347,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,
@@ -524,6 +569,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
     }
 
@@ -775,6 +827,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
   })
 
@@ -786,7 +845,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) => {
@@ -829,6 +888,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'
@@ -988,7 +1048,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
@@ -1135,11 +1201,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>
         )
       }
     }
@@ -1305,8 +1379,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
         data = transform.developerStandardize(data, state.dataDescription)
       }
 
-      console.log('data', data)
-
       setState({ ...state, runtimeDataUrl: dataUrlFinal, data })
     }
   }
@@ -1449,6 +1521,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)
       }
     }
@@ -1508,13 +1586,6 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
   }
   if (!table.label || table.label === '') table.label = 'Data Table'
 
-  // Outer container classes
-  let outerContainerClasses = ['cdc-open-viz-module', 'cdc-map-outer-container', currentViewport]
-
-  if (className) {
-    outerContainerClasses.push(className)
-  }
-
   // Map container classes
   let mapContainerClasses = ['map-container', state.legend.position, state.general.type, state.general.geoType, 'outline-none']
 
@@ -1570,7 +1641,8 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
     supportedTerritories,
     titleCase,
     type: general.type,
-    viewport: currentViewport
+    viewport: currentViewport,
+    tooltipId
   }
 
   if (!mapProps.data || !state.data) return <></>
@@ -1582,21 +1654,21 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
     // 1) skip to legend
     if (general.showSidebar) {
-      tabbingID = '#legend'
+      tabbingID = legendId
     }
 
     // 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()
@@ -1610,109 +1682,112 @@ const CdcMap = ({ className, config, navigationHandler: customNavigationHandler,
 
   return (
     <ConfigContext.Provider value={mapProps}>
-      <div className={outerContainerClasses.join(' ')} ref={outerContainerRef} data-download-id={imageId}>
-        {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}
-              superTitle={general.superTitle}
-              config={config}
-              classes={['map-title', general.showTitle === true ? 'visible' : 'hidden', `${general.headerColor}`]}
-            />
-            <a id='skip-geo-container' className='cdcdataviz-sr-only-focusable' href={tabId}>
-              Skip Over Map Container
-            </a>
-            {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'
-              tabIndex='0'
-              className={mapContainerClasses.join(' ')}
-              onClick={e => closeModal(e)}
-              onKeyDown={e => {
-                if (e.keyCode === 13) {
-                  closeModal(e)
-                }
-              }}
-            >
-              {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-              <section className='outline-none geography-container' ref={mapSvg} tabIndex='0' style={{ width: '100%' }}>
-                {currentViewport && (
-                  <>
-                    {modal && <Modal />}
-                    {'single-state' === geoType && <UsaMap.SingleState />}
-                    {'us' === geoType && 'us-geocode' !== state.general.type && <UsaMap.State />}
-                    {'us-region' === geoType && <UsaMap.Region />}
-                    {'us-county' === geoType && <UsaMap.County />}
-                    {'world' === geoType && <WorldMap />}
-                    {'data' === general.type && logo && <img src={logo} alt='' className='map-logo' />}
-                  </>
-                )}
-              </section>
-
-              {general.showSidebar && 'navigation' !== general.type && <Legend />}
-            </div>
-
-            {'navigation' === general.type && <NavigationMenu mapTabbingID={tabId} displayGeoName={displayGeoName} data={runtimeData} options={general} columns={state.columns} navigationHandler={val => navigationHandler(val)} />}
-
-            {/* Link */}
-            {isDashboard && config.table?.forceDisplay && config.table.showDataTableLink ? tableLink : link && link}
-
-            {subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}
-
-            <MediaControls.Section classes={['download-buttons']}>
-              {state.general.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={state} elementToCapture={imageId} />}
-              {state.general.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={state} elementToCapture={imageId} />}
-            </MediaControls.Section>
-
-            {state.runtime.editorErrorMessage.length === 0 && true === table.forceDisplay && general.type !== 'navigation' && false === loading && (
-              <DataTable
-                config={state}
-                rawData={state.data}
-                navigationHandler={navigationHandler}
-                expandDataTable={general.expandDataTable ? general.expandDataTable : table.expanded ? table.expanded : false}
-                headerColor={general.headerColor}
-                columns={state.columns}
-                showDownloadButton={general.showDownloadButton}
-                showFullGeoNameInCSV={table.showFullGeoNameInCSV}
-                runtimeLegend={runtimeLegend}
-                runtimeData={runtimeData}
-                displayDataAsText={displayDataAsText}
-                displayGeoName={displayGeoName}
-                applyLegendToRow={applyLegendToRow}
-                tableTitle={table.label}
-                indexTitle={table.indexLabel}
-                vizTitle={general.title}
-                viewport={currentViewport}
-                formatLegendLocation={formatLegendLocation}
-                setFilteredCountryCode={setFilteredCountryCode}
-                tabbingId={tabId}
-                showDownloadImgButton={state.general.showDownloadImgButton}
-                showDownloadPdfButton={state.general.showDownloadPdfButton}
-                innerContainerRef={innerContainerRef}
-                outerContainerRef={outerContainerRef}
-                imageRef={imageId}
-                isDebug={isDebug}
-                wrapColumns={table.wrapColumns}
+      <Layout.VisualizationWrapper config={state} isEditor={isEditor} ref={outerContainerRef} imageId={imageId} showEditorPanel={state.showEditorPanel}>
+        {isEditor && <EditorPanel columnsRequiredChecker={columnsRequiredChecker} />}
+        <Layout.Responsive isEditor={isEditor}>
+          {state?.runtime?.editorErrorMessage.length > 0 && <Error state={state} />}
+          {requiredColumns && <Waiting requiredColumns={requiredColumns} className={displayPanel ? `waiting` : `waiting collapsed`} />}
+          {!runtimeData.init && (general.type === 'navigation' || runtimeLegend) && (
+            <section className={`cove-component__content cdc-map-inner-container ${currentViewport}`} aria-label={'Map: ' + title} ref={innerContainerRef}>
+              {!window.matchMedia('(any-hover: none)').matches && 'hover' === tooltips.appearanceType && (
+                <ReactTooltip id={`tooltip__${tooltipId}`} float={true} className={`${tooltips.capitalizeLabels ? 'capitalize tooltip tooltip-test' : 'tooltip tooltip-test'}`} style={{ background: `rgba(255,255,255, ${state.tooltips.opacity / 100})`, color: 'black' }} />
+              )}
+              {/* prettier-ignore */}
+              <Title
+                title={title}
+                superTitle={general.superTitle}
+                config={config}
+                classes={['map-title', general.showTitle === true ? 'visible' : 'hidden', `${general.headerColor}`]}
               />
-            )}
-
-            {general.footnotes && <section className='footnotes'>{parse(general.footnotes)}</section>}
-          </section>
-        )}
-
-        <div aria-live='assertive' className='cdcdataviz-sr-only'>
-          {accessibleStatus}
-        </div>
-      </div>
+              <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='region'
+                tabIndex='0'
+                className={mapContainerClasses.join(' ')}
+                onClick={e => closeModal(e)}
+                onKeyDown={e => {
+                  if (e.keyCode === 13) {
+                    closeModal(e)
+                  }
+                }}
+              >
+                {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+                <section className='outline-none geography-container' ref={mapSvg} tabIndex='0' style={{ width: '100%' }}>
+                  {currentViewport && (
+                    <>
+                      {modal && <Modal />}
+                      {'single-state' === geoType && <UsaMap.SingleState />}
+                      {'us' === geoType && 'us-geocode' !== state.general.type && <UsaMap.State />}
+                      {'us-region' === geoType && <UsaMap.Region />}
+                      {'us-county' === geoType && <UsaMap.County />}
+                      {'world' === geoType && <WorldMap />}
+                      {'data' === general.type && logo && <img src={logo} alt='' className='map-logo' />}
+                    </>
+                  )}
+                </section>
+
+                {general.showSidebar && 'navigation' !== general.type && <Legend ref={legendRef} skipId={tabId} />}
+              </div>
+
+              {'navigation' === general.type && <NavigationMenu mapTabbingID={tabId} displayGeoName={displayGeoName} data={runtimeData} options={general} columns={state.columns} navigationHandler={val => navigationHandler(val)} />}
+
+              {/* Link */}
+              {isDashboard && config.table?.forceDisplay && config.table.showDataTableLink ? tableLink : link && link}
+
+              {subtext.length > 0 && <p className='subtext'>{parse(subtext)}</p>}
+
+              <MediaControls.Section classes={['download-buttons']}>
+                {state.general.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={state} elementToCapture={imageId} />}
+                {state.general.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={state} elementToCapture={imageId} />}
+              </MediaControls.Section>
+
+              {state.runtime.editorErrorMessage.length === 0 && true === table.forceDisplay && general.type !== 'navigation' && false === loading && (
+                <DataTable
+                  config={state}
+                  rawData={state.data}
+                  navigationHandler={navigationHandler}
+                  expandDataTable={table.expanded}
+                  headerColor={general.headerColor}
+                  columns={state.columns}
+                  showDownloadButton={general.showDownloadButton}
+                  showFullGeoNameInCSV={table.showFullGeoNameInCSV}
+                  runtimeLegend={runtimeLegend}
+                  runtimeData={runtimeData}
+                  displayDataAsText={displayDataAsText}
+                  displayGeoName={displayGeoName}
+                  applyLegendToRow={applyLegendToRow}
+                  tableTitle={table.label}
+                  indexTitle={table.indexLabel}
+                  vizTitle={general.title}
+                  viewport={currentViewport}
+                  formatLegendLocation={formatLegendLocation}
+                  setFilteredCountryCode={setFilteredCountryCode}
+                  tabbingId={tabId}
+                  showDownloadImgButton={state.general.showDownloadImgButton}
+                  showDownloadPdfButton={state.general.showDownloadPdfButton}
+                  innerContainerRef={innerContainerRef}
+                  outerContainerRef={outerContainerRef}
+                  imageRef={imageId}
+                  isDebug={isDebug}
+                  wrapColumns={table.wrapColumns}
+                />
+              )}
+
+              {general.footnotes && <section className='footnotes'>{parse(general.footnotes)}</section>}
+            </section>
+          )}
+
+          <div aria-live='assertive' className='cdcdataviz-sr-only'>
+            {accessibleStatus}
+          </div>
+        </Layout.Responsive>
+      </Layout.VisualizationWrapper>
     </ConfigContext.Provider>
   )
 }

package/src/components/BubbleList.jsx

@@ -1,10 +1,12 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useContext } from 'react'
 import { scaleLinear } from 'd3-scale'
 import { countryCoordinates } from '../data/country-coordinates'
 import stateCoordinates from '../data/state-coordinates'
+import ConfigContext from './../../src/context'
 
 export const BubbleList = ({ data: dataImport, state, projection, applyLegendToRow, applyTooltipsToGeo, handleCircleClick, runtimeData, displayGeoName }) => {
   const maxDataValue = Math.max(...dataImport.map(d => d[state.columns.primary.name]))
+  const { tooltipId } = useContext(ConfigContext)
   const hasBubblesWithZeroOnMap = state.visual.showBubbleZeros ? 0 : 1
   // sort runtime data. Smaller bubbles should appear on top.
   const sortedRuntimeData = Object.values(runtimeData).sort((a, b) => (a[state.columns.primary.name] < b[state.columns.primary.name] ? 1 : -1))
@@ -39,6 +41,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
@@ -61,12 +64,13 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
               }}
               transform={transform}
               style={{ transition: 'all .25s ease-in-out', cursor: 'pointer' }}
-              data-tooltip-id='tooltip'
+              data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={toolTip}
             />
 
             {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
@@ -88,14 +92,18 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
                 }}
                 transform={transform}
                 style={{ transition: 'all .25s ease-in-out', cursor: 'pointer' }}
-                data-tooltip-id='tooltip'
+                data-tooltip-id={`tooltip__${tooltipId}`}
                 data-tooltip-html={toolTip}
               />
             )}
           </>
         )
 
-        return <g key={`group-${countryName.replace(' ', '')}`}>{circle}</g>
+        return (
+          <g key={`group-${countryName.replace(' ', '')}`} tabIndex={-1}>
+            {circle}
+          </g>
+        )
       })
     return countries
   }
@@ -132,6 +140,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
@@ -154,11 +163,12 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
               }}
               transform={transform}
               style={{ transition: 'all .25s ease-in-out', cursor: 'pointer' }}
-              data-tooltip-id='tooltip'
+              data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={toolTip}
             />
             {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
@@ -181,7 +191,7 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
                 }}
                 transform={transform}
                 style={{ transition: 'all .25s ease-in-out', cursor: 'pointer' }}
-                data-tooltip-id='tooltip'
+                data-tooltip-id={`tooltip__${tooltipId}`}
                 data-tooltip-html={toolTip}
               />
             )}