feat: modal accessibility and escape key features for unity react and…

packages/unity-bootstrap-theme/src/js/modals.js

@@ -4,14 +4,20 @@ function initModals() {
   document
     .getElementById("openModalButton")
     ?.addEventListener("click", function () {
-      document.getElementById("uds-modal").classList.add("open");
+      document.getElementById("uds-modal")?.classList.add("open");
+      document.getElementById("closeModalButton")?.focus();
     });
 
   document
     .getElementById("closeModalButton")
     ?.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);

packages/unity-react-core/src/components/Modal/Modal.tsx

@@ -44,13 +44,70 @@ export const Modal: React.FC<ModalProps> = ({ open, gaData }) => {
     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]);
+
+  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 (
     <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,20 +117,23 @@ 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">
             <GaEventWrapper gaData={{ ...defaultGaData, ...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