DBC22-2684: Making sign in/out modals more accessible

bcgov · Sep 4, 2024 · 23c9e88 · 23c9e88
1 parent 160c1dc
commit 23c9e88
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/src/frontend/src/Components/shared/header/UserNavigation.js b/src/frontend/src/Components/shared/header/UserNavigation.js
@@ -56,6 +56,18 @@ export default function UserNavigation(props) {
 
   /* Helpers */
   const toggleAuthModal = (action) => {
+    // Hide screen reader content behind the lightbox
+    const allFocuses = document.querySelectorAll("a, button, input");
+    allFocuses.forEach((element) => {
+      element.setAttribute("aria-hidden", "true");
+      element.setAttribute("tabindex", "-1");
+    });
+
+    const modalContent = document.getElementById("modal-content");
+    if (modalContent) {
+      modalContent.focus();
+    }
+
     setAuthContext((prior) => {
       if (!prior.showingModal) {
         return { ...prior, showingModal: true, action };

diff --git a/src/frontend/src/Modal.js b/src/frontend/src/Modal.js
@@ -41,6 +41,13 @@ export default function Modal() {
   };
 
   const resetAuthModal = () => {
+    // Reset focus and screen reader content
+    const allFocuses = document.querySelectorAll("a, button, input");
+    allFocuses.forEach((element) => {
+      element.removeAttribute("aria-hidden");
+      element.removeAttribute("tabindex");
+    });
+
     setAuthContext((prior) => {
       return { ...prior, showingModal: !prior.showingModal, action: null }
     });
@@ -75,21 +82,26 @@ export default function Modal() {
 
       <div
         tabIndex={0}
+        id="modal-content"
         className="content"
         onClick={(e) => { e.stopPropagation(); }}
         onKeyPress={(e) => { e.stopPropagation(); }}
+        role="alertdialog"
+        aria-modal="true"
       >
 
         <div className='header'>
-          <FontAwesomeIcon
+          <button
             id="modal-closer"
-            className="modal-closer"
-            icon={faXmark}
+            className="modal-closer close-panel"
+            aria-label="close modal"
             onClick={resetAuthModal}
-            onKeyPress={resetAuthModal}
-            tabIndex={0} />
+            onKeyPress={resetAuthModal}>
+            <FontAwesomeIcon icon={faXmark} />
+          </button>
 
           <div className='title'>{authContext.action}</div>
+
         </div>
 
         <div className='body'>