Uds 2211- Modal Dialog Accessibility Review

README.md

@@ -1,5 +1,6 @@
 # ASU Unity Design System (UDS)
 
+
 ## Table of Contents
 
 - [ASU Unity Design System (UDS)](#asu-unity-design-system-uds)
@@ -441,3 +442,4 @@ Read contribution guide here: [CONTRIBUTING.md](./CONTRIBUTING.md)
 ### See [here](https://docs.github.com/en/actions/guides/publishing-nodejs-packages) for more information about publishing packages
 
 ### See [the top answer on this stackoverflow question](https://stackoverflow.com/questions/62819489/github-actions-why-build-with-different-node-versions) for why you may want to build against multiple node versions. Probably unnecessary for this workflow.
+

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

@@ -5,13 +5,19 @@ function initModals() {
     .getElementById("openModalButton")
     ?.addEventListener("click", function () {
       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/AnchorMenu/AnchorMenu.styles.js

@@ -10,13 +10,11 @@ const AnchorMenuWrapper = styled.div`
   .mobile-menu-toggler {
     background-color: transparent;
     border: none;
-    padding: 0;
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    text-align: inherit;
+    cursor: default;
+    h4,
+    h2 {
+      align-items: center;
+    }
     i {
       transition: all 0.3s;
     }

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

@@ -36,14 +36,62 @@ 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) => {
+      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
@@ -59,6 +107,9 @@ export const Modal: React.FC<ModalProps> = ({ open, gaData }) => {
 
       {(openState || isBootstrap) && (
         <div
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={modalTitle}
           id="uds-modal"
           className={classNames("uds-modal", { open: openState })}
         >
@@ -73,7 +124,7 @@ export const Modal: React.FC<ModalProps> = ({ open, gaData }) => {
                 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

packages/unity-react-core/src/components/TabbedPanels/components/TabHeader.tsx

@@ -14,10 +14,10 @@ interface TabHeaderProps {
   rightKeyPressed: () => void;
   icon?: [string, string];
   gaData?: GaEventData;
-  ref?: React.Ref<HTMLButtonElement>;
 }
 
-const TabHeader = ({ id, selected, isFocusEntry, title, selectTab, leftKeyPressed, rightKeyPressed, icon, gaData, ref }: TabHeaderProps) => {
+const TabHeader = React.forwardRef<HTMLButtonElement, TabHeaderProps>(
+  ({ id, selected, isFocusEntry, title, selectTab, leftKeyPressed, rightKeyPressed, icon, gaData }, ref) => {
     const { isReact } = useBaseSpecificFramework();
 
     const onKeyDown = (e: React.KeyboardEvent) => {
@@ -49,7 +49,10 @@ const TabHeader = ({ id, selected, isFocusEntry, title, selectTab, leftKeyPresse
         </button>
       </GaEventWrapper>
     );
-};
+  }
+);
+
+TabHeader.displayName = "TabHeader";
 
 export { TabHeader };
 export type { TabHeaderProps };