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) => {