Merge pull request #5713 from dfe-analytical-services/EES-5910-tab-through-maps-tooltips-visibility

EES-5910 Ensure tooltips visible when tabbing through map regions

Author: Guy-HiveIT

src/explore-education-statistics-common/src/modules/charts/components/MapGeoJSON.tsx

@@ -88,8 +88,7 @@ export default function MapGeoJSON({
 
   useEffect(() => {
     if (!selectedFeature) {
-      // reset zoom
-      map.setZoom(5);
+      resetZoom();
       return;
     }
 
@@ -107,6 +106,8 @@ export default function MapGeoJSON({
     }
   }, [map, selectedFeature]);
 
+  const resetZoom = () => map.setZoom(5);
+
   // We have to assign our `onEachFeature` callback to a ref
   // as `onEachFeature` forms an internal closure which
   // prevents us from updating the callback's dependencies.
@@ -206,6 +207,20 @@ export default function MapGeoJSON({
                 onSelectFeature(feature);
               }
             },
+            keydown: e => {
+              if (e.originalEvent.code === 'Tab') {
+                // https://dfedigital.atlassian.net/browse/EES-5910
+                // Reset the map zoom when user tabs through regions
+                // to ensure tooltips that appear are in bounds and visible
+                resetZoom();
+              } else if (e.originalEvent.code === 'Enter') {
+                // Also allow a feature to be 'selected' by pressing Enter
+                const { feature } = e.sourceTarget;
+                if (feature.properties && feature.id) {
+                  onSelectFeature(feature);
+                }
+              }
+            },
           }}
         />
       )}