DBC22-2684: Tweaks to focuses hidden by modal

bcgov · Sep 4, 2024 · 666113b · 666113b
1 parent 23c9e88
commit 666113b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/src/frontend/src/Components/shared/header/UserNavigation.js b/src/frontend/src/Components/shared/header/UserNavigation.js
@@ -59,6 +59,19 @@ export default function UserNavigation(props) {
     // Hide screen reader content behind the lightbox
     const allFocuses = document.querySelectorAll("a, button, input");
     allFocuses.forEach((element) => {
+      element.classList.add("hidden-by-modal");
+
+      if (element.hasAttribute("tabindex") ) {
+
+        if (element.getAttribute("tabindex") === "0") {
+          element.classList.add("restore-tabindex");
+        }
+
+        if (element.getAttribute("tabindex") === "-1") {
+          element.classList.add("already-hidden");
+        }
+      }
+
       element.setAttribute("aria-hidden", "true");
       element.setAttribute("tabindex", "-1");
     });

diff --git a/src/frontend/src/Modal.js b/src/frontend/src/Modal.js
@@ -42,10 +42,25 @@ export default function Modal() {
 
   const resetAuthModal = () => {
     // Reset focus and screen reader content
-    const allFocuses = document.querySelectorAll("a, button, input");
-    allFocuses.forEach((element) => {
+    const allHidden = document.querySelectorAll(".hidden-by-modal");
+    allHidden.forEach((element) => {
       element.removeAttribute("aria-hidden");
-      element.removeAttribute("tabindex");
+
+      if (element.classList.contains("already-hidden")) {
+        element.classList.remove("already-hidden");
+      }
+
+      else if (element.classList.contains("restore-tabindex")) {
+        element.setAttribute("tabindex", "0");
+        element.classList.remove("restore-tabindex");
+      }
+
+      else {
+        element.removeAttribute("tabindex");
+      }
+
+      element.removeAttribute("aria-hidden");
+      element.classList.remove("hidden-by-modal");
     });
 
     setAuthContext((prior) => {