From 666113b5cf6598b989ffac963154e23dfc1f58be Mon Sep 17 00:00:00 2001
From: Min Ji Choi <min@oxd.com>
Date: Wed, 4 Sep 2024 15:05:12 -0700
Subject: [PATCH] DBC22-2684: Tweaks to focuses hidden by modal

---
 .../shared/header/UserNavigation.js           | 13 ++++++++++++
 src/frontend/src/Modal.js                     | 21 ++++++++++++++++---
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/Components/shared/header/UserNavigation.js b/src/frontend/src/Components/shared/header/UserNavigation.js
index b035d0fc9..0ae20fcde 100644
--- 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
index ffbe690ae..b70383e88 100644
--- 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) => {