From 04bdeea87d74c3ab1fd47a7f272504a843129aad Mon Sep 17 00:00:00 2001
From: Michael Webber <mawebbe1@asu.edu>
Date: Thu, 23 Jul 2026 13:26:46 -0700
Subject: [PATCH 1/4] feat: modal accessibility and escape key features for
 unity react and bootstrap

---
 .../unity-bootstrap-theme/src/js/modals.js    |  6 ++
 .../src/components/Modal/Modal.tsx            | 62 ++++++++++++++++++-
 2 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/packages/unity-bootstrap-theme/src/js/modals.js b/packages/unity-bootstrap-theme/src/js/modals.js
index 50b9b6c816..324335d3bb 100644
--- a/packages/unity-bootstrap-theme/src/js/modals.js
+++ b/packages/unity-bootstrap-theme/src/js/modals.js
@@ -5,6 +5,7 @@ function initModals() {
     .getElementById("openModalButton")
     ?.addEventListener("click", function () {
       document.getElementById("uds-modal").classList.add("open");
+      document.getElementById("closeModalButton").focus();
     });
 
   document
@@ -12,6 +13,11 @@ function initModals() {
     ?.addEventListener("click", function () {
       document.getElementById("uds-modal").classList.remove("open");
     });
+
+  document?.addEventListener("keydown", function (event) {
+    event.key === "Escape" &&
+      document.getElementById("uds-modal").classList.remove("open");
+  });
 }
 
 EventHandler.on(window, "load.uds.modals", initModals);
diff --git a/packages/unity-react-core/src/components/Modal/Modal.tsx b/packages/unity-react-core/src/components/Modal/Modal.tsx
index cf043a551d..7fb0d0ffd7 100644
--- a/packages/unity-react-core/src/components/Modal/Modal.tsx
+++ b/packages/unity-react-core/src/components/Modal/Modal.tsx
@@ -36,21 +36,74 @@ export const Modal: React.FC<ModalProps> = ({ open, gaData }) => {
   const { isReact, isBootstrap } = useBaseSpecificFramework();
   const [openState, setOpen] = React.useState(open);
 
+  const focusOnModalInput = () => {
+    //source: https://stackoverflow.com/questions/4195616/how-to-set-the-focus-on-a-javascript-modal-window
+    const focusableElements =
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    const modal = document.getElementsByClassName("uds-modal-container")[0];
+    const firstFocusableElement = modal?.querySelectorAll(focusableElements)[0];
+    const focusableContent = modal?.querySelectorAll(focusableElements);
+    const lastFocusableElement = focusableContent
+      ? focusableContent[focusableContent?.length - 1]
+      : undefined;
+
+    if (lastFocusableElement && firstFocusableElement) {
+      document.addEventListener("keydown", function (e) {
+        let isTabPressed = e.key === "Tab" || e.keyCode === 9;
+
+        if (!isTabPressed) {
+          return;
+        }
+
+        if (e.shiftKey) {
+          // if shift key pressed for shift + tab combination
+          if (document.activeElement === firstFocusableElement) {
+            (lastFocusableElement as HTMLElement)?.focus(); // add focus for the last focusable element
+            e.preventDefault();
+          }
+        } else {
+          // if tab key is pressed
+          if (document.activeElement === lastFocusableElement) {
+            // if focused has reached to last focusable element then focus first focusable element after pressing tab
+            (firstFocusableElement as HTMLElement)?.focus(); // add focus for the first focusable element
+            e.preventDefault();
+          }
+        }
+      });
+      (firstFocusableElement as HTMLElement)?.focus();
+    }
+  };
+
   const handleOpen = () => {
     setOpen(true);
+    focusOnModalInput();
   };
 
   const handleClose = () => {
     setOpen(false);
   };
 
+  useEffect(() => {
+    const handleKeyDown = (event: any) => {
+      if (event.key === "Escape") setOpen(false); // Close on Esc key
+    };
+
+    if (openState) {
+      document.addEventListener("keydown", handleKeyDown);
+    }
+
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [openState, setOpen]);
+
+  const modalTitle = "Content";
+
   return (
     <div className="container-fluid">
       <button
         type="button"
         // data-bs-toggle={isBootstrap && "modal"}
         // data-bs-target={isBootstrap && "#uds-modal"}
-        onClick={isReact && handleOpen}
+        onClick={isReact ? handleOpen : undefined}
         id="openModalButton"
         className="btn btn-dark"
       >
@@ -60,6 +113,9 @@ export const Modal: React.FC<ModalProps> = ({ open, gaData }) => {
       {(openState || isBootstrap) && (
         <div
           id="uds-modal"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={modalTitle}
           className={classNames("uds-modal", { open: openState })}
         >
           <div className="uds-modal-container">
@@ -67,13 +123,13 @@ export const Modal: React.FC<ModalProps> = ({ open, gaData }) => {
               <ButtonIconOnly
                 // @ts-ignore
                 id="closeModalButton"
-                onClick={isReact && handleClose}
+                onClick={isReact ? handleClose : undefined}
                 // data-bs-dismiss={isBootstrap && "modal"}
                 className="uds-modal-close-btn"
                 icon={["fas", "times"]}
               />
             </GaEventWrapper>
-            <h1>Content</h1>
+            <h1>{modalTitle}</h1>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
               eiusmod incididuntåç ut labore et dolore magna aliqua eiusmod

From b25ab851381632a9d825d83c607f8036f9eeb93a Mon Sep 17 00:00:00 2001
From: Michael Webber <mawebbe1@asu.edu>
Date: Tue, 28 Jul 2026 16:53:05 -0700
Subject: [PATCH 2/4] perf(unity-react-core): useEffect update for React js
 async key listener handling

---
 .../unity-bootstrap-theme/src/js/modals.js    |  6 +-
 .../src/components/Modal/Modal.tsx            | 82 ++++++++++---------
 2 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/packages/unity-bootstrap-theme/src/js/modals.js b/packages/unity-bootstrap-theme/src/js/modals.js
index 324335d3bb..622eb6d204 100644
--- a/packages/unity-bootstrap-theme/src/js/modals.js
+++ b/packages/unity-bootstrap-theme/src/js/modals.js
@@ -4,8 +4,8 @@ function initModals() {
   document
     .getElementById("openModalButton")
     ?.addEventListener("click", function () {
-      document.getElementById("uds-modal").classList.add("open");
-      document.getElementById("closeModalButton").focus();
+      document.getElementById("uds-modal")?.classList.add("open");
+      document.getElementById("closeModalButton")?.focus();
     });
 
   document
@@ -16,7 +16,7 @@ function initModals() {
 
   document?.addEventListener("keydown", function (event) {
     event.key === "Escape" &&
-      document.getElementById("uds-modal").classList.remove("open");
+      document.getElementById("uds-modal")?.classList.remove("open");
   });
 }
 
diff --git a/packages/unity-react-core/src/components/Modal/Modal.tsx b/packages/unity-react-core/src/components/Modal/Modal.tsx
index 7fb0d0ffd7..73a1d11827 100644
--- a/packages/unity-react-core/src/components/Modal/Modal.tsx
+++ b/packages/unity-react-core/src/components/Modal/Modal.tsx
@@ -36,47 +36,8 @@ export const Modal: React.FC<ModalProps> = ({ open, gaData }) => {
   const { isReact, isBootstrap } = useBaseSpecificFramework();
   const [openState, setOpen] = React.useState(open);
 
-  const focusOnModalInput = () => {
-    //source: https://stackoverflow.com/questions/4195616/how-to-set-the-focus-on-a-javascript-modal-window
-    const focusableElements =
-      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-    const modal = document.getElementsByClassName("uds-modal-container")[0];
-    const firstFocusableElement = modal?.querySelectorAll(focusableElements)[0];
-    const focusableContent = modal?.querySelectorAll(focusableElements);
-    const lastFocusableElement = focusableContent
-      ? focusableContent[focusableContent?.length - 1]
-      : undefined;
-
-    if (lastFocusableElement && firstFocusableElement) {
-      document.addEventListener("keydown", function (e) {
-        let isTabPressed = e.key === "Tab" || e.keyCode === 9;
-
-        if (!isTabPressed) {
-          return;
-        }
-
-        if (e.shiftKey) {
-          // if shift key pressed for shift + tab combination
-          if (document.activeElement === firstFocusableElement) {
-            (lastFocusableElement as HTMLElement)?.focus(); // add focus for the last focusable element
-            e.preventDefault();
-          }
-        } else {
-          // if tab key is pressed
-          if (document.activeElement === lastFocusableElement) {
-            // if focused has reached to last focusable element then focus first focusable element after pressing tab
-            (firstFocusableElement as HTMLElement)?.focus(); // add focus for the first focusable element
-            e.preventDefault();
-          }
-        }
-      });
-      (firstFocusableElement as HTMLElement)?.focus();
-    }
-  };
-
   const handleOpen = () => {
     setOpen(true);
-    focusOnModalInput();
   };
 
   const handleClose = () => {
@@ -95,6 +56,49 @@ export const Modal: React.FC<ModalProps> = ({ open, gaData }) => {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [openState, setOpen]);
 
+  useEffect(() => {
+    if (!openState) return;
+
+    //source: https://stackoverflow.com/questions/4195616/how-to-set-the-focus-on-a-javascript-modal-window
+    const focusableElements =
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    const modal = document.getElementsByClassName("uds-modal-container")[0];
+    const firstFocusableElement = modal?.querySelectorAll(focusableElements)[0];
+    const focusableContent = modal?.querySelectorAll(focusableElements);
+    const lastFocusableElement = focusableContent
+      ? focusableContent[focusableContent?.length - 1]
+      : undefined;
+
+    const handleTabKey = (e: KeyboardEvent) => {
+      let isTabPressed = e.key === "Tab"; // || e.keyCode === 9;
+
+      if (!isTabPressed) {
+        return;
+      }
+
+      if (e.shiftKey) {
+        // if shift key pressed for shift + tab combination
+        if (document.activeElement === firstFocusableElement) {
+          (lastFocusableElement as HTMLElement)?.focus(); // add focus for the last focusable element
+          e.preventDefault();
+        }
+      } else {
+        // if tab key is pressed
+        if (document.activeElement === lastFocusableElement) {
+          // if focused has reached to last focusable element then focus first focusable element after pressing tab
+          (firstFocusableElement as HTMLElement)?.focus(); // add focus for the first focusable element
+          e.preventDefault();
+        }
+      }
+    };
+
+    if (lastFocusableElement && firstFocusableElement) {
+      document.addEventListener("keydown", handleTabKey);
+      (firstFocusableElement as HTMLElement)?.focus();
+      return () => document.removeEventListener("keydown", handleTabKey);
+    }
+  }, [openState]);
+
   const modalTitle = "Content";
 
   return (

From eeaebeff45a85e308ac510f398995b6af708697f Mon Sep 17 00:00:00 2001
From: Michael Webber <mawebbe1@asu.edu>
Date: Wed, 29 Jul 2026 12:01:22 -0700
Subject: [PATCH 3/4] feat(unity-react-core): aria-label update

---
 packages/unity-react-core/src/components/Modal/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/unity-react-core/src/components/Modal/Modal.tsx b/packages/unity-react-core/src/components/Modal/Modal.tsx
index 73a1d11827..8c945d703d 100644
--- a/packages/unity-react-core/src/components/Modal/Modal.tsx
+++ b/packages/unity-react-core/src/components/Modal/Modal.tsx
@@ -119,7 +119,7 @@ export const Modal: React.FC<ModalProps> = ({ open, gaData }) => {
           id="uds-modal"
           role="dialog"
           aria-modal="true"
-          aria-labelledby={modalTitle}
+          aria-label={modalTitle}
           className={classNames("uds-modal", { open: openState })}
         >
           <div className="uds-modal-container">

From c288469935d3daca33d5d5381c6ea41857304e43 Mon Sep 17 00:00:00 2001
From: david ornelas <davidornelas_11@hotmail.com>
Date: Wed, 29 Jul 2026 13:03:38 -0700
Subject: [PATCH 4/4] fix(unity-bootstrap-theme): fix modal close button focus
 style issue

---
 packages/unity-bootstrap-theme/src/scss/extends/_modals.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_modals.scss b/packages/unity-bootstrap-theme/src/scss/extends/_modals.scss
index a3e6eba659..6bcace67f7 100644
--- a/packages/unity-bootstrap-theme/src/scss/extends/_modals.scss
+++ b/packages/unity-bootstrap-theme/src/scss/extends/_modals.scss
@@ -53,6 +53,11 @@
       background-color: $uds-color-background-white;
       opacity: .7;
     }
+
+    &:focus,
+    &:focus-visible {
+      background-color: $uds-color-background-white;
+    }
   }
 }