accessibility fixup

make focus go back to map when info box closes previously keyboard-only users would get stuck after opening infobox
spacehackers · Jul 30, 2022 · c9fe848 · c9fe848
1 parent c64a411
commit c9fe848
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 20 deletions.
diff --git a/src/components/InfoBox.js b/src/components/InfoBox.js
@@ -12,55 +12,77 @@ import "./InfoBox.scss";
 const TRANSITION_SPEED = 500;
 
 export default function InfoBox({ desc, displayMode, title, url }) {
-  const [hidden, setHidden] = useState(true);
+  const [closed, setClosed] = useState(true);
 
   const ref = useRef(null);
 
+  const setKeyboardUser = (e) => {
+    const body = document.body;
+
+    if (e.keyCode === 9) {
+      body.classList.add("using-keyboard");
+    }
+  };
+
+  useEffect(() => {
+    const map = document.getElementsByClassName("leaflet-container")[0];
+
+    map.addEventListener("keyup", setKeyboardUser);
+
+    return () => {
+      map.removeEventListener("keyup", setKeyboardUser);
+    };
+  }, []);
+
   useEffect(() => {
     const intro = document.querySelector(".leaflet-control-zoom");
     const height = ref.current.clientHeight;
 
     if (!height || !intro) return;
 
-    if (hidden) {
+    if (closed) {
       intro.style.transition = "margin 300ms";
       intro.style.marginBottom = "80px"; // .leaflet-bottom .leaflet-control in App.scss
     } else {
       intro.style.transition = "margin 300ms 200ms";
       intro.style.marginBottom = `${height + 64}px`;
     }
-  }, [hidden]);
+  }, [closed]);
 
   useEffect(() => {
     const body = document.body;
     body.classList.add("overflow-hidden");
 
     const map = document.getElementsByClassName("leaflet-container")[0];
 
-    const handleClick = () => {
-      setHidden(!hidden);
+    const handleMapClick = () => {
+      setClosed(!closed);
     };
 
-    if (hidden) {
-      map.removeEventListener("click", handleClick);
-      map.removeEventListener("touchstart", handleClick);
-      map.removeEventListener("touchmove", handleClick);
-      return;
+    if (closed) {
+      document.querySelector(".leaflet-container").focus();
+      map.removeEventListener("click", handleMapClick);
+      map.removeEventListener("touchstart", handleMapClick);
+      map.removeEventListener("touchmove", handleMapClick);
+    } else {
+      map.addEventListener("click", handleMapClick);
+      map.addEventListener("touchstart", handleMapClick);
+      map.addEventListener("touchmove", handleMapClick);
     }
 
-    window.setTimeout(() => {
-      map.addEventListener("click", handleClick);
-      map.addEventListener("touchstart", handleClick);
-      map.addEventListener("touchmove", handleClick);
-    }, 100);
-  }, [hidden]);
+    return () => {
+      map.removeEventListener("click", handleMapClick);
+      map.removeEventListener("touchstart", handleMapClick);
+      map.removeEventListener("touchmove", handleMapClick);
+    };
+  }, [closed]);
 
   return (
-    <CSSTransition in={!hidden} timeout={TRANSITION_SPEED}>
+    <CSSTransition in={!closed} timeout={TRANSITION_SPEED}>
       <div>
         <InfoButton
           displayMode={displayMode}
-          handleClick={() => setHidden(!hidden)}
+          handleClick={() => setClosed(!closed)}
         />
         <div ref={ref} className={classNames("info-wrapper", displayMode)}>
           <div className="info-title">

diff --git a/src/components/InfoButton.scss b/src/components/InfoButton.scss
@@ -6,7 +6,7 @@
   border: 0;
   outline: 0;
   width: 340px;
-  position: absolute;
+  position: fixed;
   left: 0;
   right: 0;
   bottom: -20px; // this svg has extra padding in the image
@@ -15,13 +15,16 @@
   text-align: center;
   z-index: $z-index-map;
 
+
   @media (min-width: $mobile_breakpoint) {
     bottom: -40px; // this svg has extra padding in the image
 
   }
 }
 
-
+.using-keyboard .info-button:focus {
+  border: 1px solid blue;
+}
 
 .info-button:hover {
   cursor: pointer;