feat: accessibility, reenable selection using keyboard

public-convenience-ltd · Feb 12, 2022 · c883c2e · c883c2e
1 parent 29282bb
commit c883c2e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/src/components/LooMap/LooMap.tsx b/src/components/LooMap/LooMap.tsx
@@ -20,6 +20,8 @@ import AccessibilityList from './AccessibilityList';
 import VisuallyHidden from '../VisuallyHidden';
 import { Loo } from '../../api-client/graphql';
 import { CompressedLooObject } from '../../lib/loo';
+import React from 'react';
+import router from 'next/router';
 
 const MapTracker = () => {
   const [, setMapState] = useMapState();
@@ -60,11 +62,24 @@ const LooMap: React.FC<LooMapProps> = ({
   const [hydratedToilets, setHydratedToilets] = useState<CompressedLooObject[]>(
     []
   );
+  const [announcement, setAnnouncement] = React.useState(null);
   const [intersectingToilets, setIntersectingToilets] = useState([]);
   const [renderAccessibilityOverlays, setRenderAccessibilityOverlays] =
     useState(false);
 
-  console.log(intersectingToilets);
+  const keyboardSelectionHandler = React.useCallback(
+    (selectionIndex: string | number) => {
+      const toilet = intersectingToilets[selectionIndex];
+
+      if (!toilet) {
+        return;
+      }
+
+      setAnnouncement(`${toilet.name || 'Unnamed toilet'} selected`);
+      router.push(`/loos/${toilet.id}`);
+    },
+    [intersectingToilets]
+  );
 
   useEffect(() => {
     const loadedLooValues = Array.from(loadedToilets.values()).flatMap(
@@ -249,17 +264,17 @@ const LooMap: React.FC<LooMapProps> = ({
               className="accessibility-box"
               toilets={hydratedToilets}
               onIntersection={setIntersectingToilets}
-              onSelection={() => undefined}
+              onSelection={keyboardSelectionHandler}
               center={center}
             />
 
-            {/* <AccessibilityList
+            <AccessibilityList
               toilets={intersectingToilets.map(
                 (toilet: { name: any }) => toilet.name
               )}
-            /> */}
+            />
 
-            {/* <VisuallyHidden>
+            <VisuallyHidden>
               <div
                 role="status"
                 aria-atomic="true"
@@ -268,7 +283,7 @@ const LooMap: React.FC<LooMapProps> = ({
               >
                 {announcement}
               </div>
-            </VisuallyHidden> */}
+            </VisuallyHidden>
           </>
         )}
       </MapContainer>

diff --git a/src/components/LooMap/Markers.tsx b/src/components/LooMap/Markers.tsx
@@ -49,8 +49,6 @@ const Markers: React.FC<{
   const surroundingTiles = neighbours.flatMap((n) => ngeohash.neighbors(n));
   const neighbourSet = new Set([...surroundingTiles]);
 
-  const [mapState] = useMapState();
-
   useEffect(() => {
     setLoadedToilets(neighbourSet);
     // eslint-disable-next-line react-hooks/exhaustive-deps