From 23c9e887b9f7ef60dd4c9da53db211918845751d Mon Sep 17 00:00:00 2001
From: Min Ji Choi <min@oxd.com>
Date: Wed, 4 Sep 2024 09:36:00 -0700
Subject: [PATCH] DBC22-2684: Making sign in/out modals more accessible

---
 .../shared/header/UserNavigation.js           | 12 ++++++++++
 src/frontend/src/Modal.js                     | 22 ++++++++++++++-----
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/Components/shared/header/UserNavigation.js b/src/frontend/src/Components/shared/header/UserNavigation.js
index 2b1df7713..b035d0fc9 100644
--- 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
index 92e916dd2..ffbe690ae 100644
--- 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'>