Merge pull request #116 from granttchart/feature/94-modal-a11y

feat(94): focus() modal close button on open

src/components/Modal.js

@@ -1,10 +1,14 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import BusRouteDetails from "./BusRouteDetails";
 import { Link } from "react-router-dom";
 
 export default function Modal({ selectedRoute, closeModal, }) {
+  const modalCloseRef = useRef(null);
 
-
+  useEffect(() => {
+    const modalCloseBtn = modalCloseRef.current;
+    if (modalCloseBtn) modalCloseBtn.focus();
+  }, [modalCloseRef]);
 
   // take all the ratios from the data and average out each line's mean bus reliablility
 
@@ -86,7 +90,7 @@ export default function Modal({ selectedRoute, closeModal, }) {
   return (
     <div className="modal" onClick={closeModal}>
       <div className="modal-container" onClick={(e) => e.stopPropagation()}>
-        <button onClick={closeModal} className="close-btn">
+        <button onClick={closeModal} ref={modalCloseRef} className="close-btn" aria-label="Close">
           x
         </button>
         <BusRouteDetails

src/scss/_modal.scss

@@ -32,6 +32,8 @@
         cursor: pointer;
         border-radius: 50%;
         padding: 1em;
+        height: 3.25em;
+        width: 3.25em;
         @include transitionHover;
 
         &:hover {