Feature/#375 make modal accessible

src/App.tsx

@@ -1,13 +1,24 @@
 import { MainScene } from '@/scenes';
-import { useThemeContext } from './core/providers';
+import {
+  CanvasSchemaProvider,
+  CanvasViewSettingsProvider,
+  ModalDialogProvider,
+  useThemeContext,
+} from './core/providers';
 
 function App() {
   const { theme } = useThemeContext();
 
   return (
-    <div className={theme.themeMode}>
-      <MainScene />
-    </div>
+    <CanvasViewSettingsProvider>
+      <CanvasSchemaProvider>
+        <ModalDialogProvider>
+          <div className={theme.themeMode}>
+            <MainScene />
+          </div>
+        </ModalDialogProvider>
+      </CanvasSchemaProvider>
+    </CanvasViewSettingsProvider>
   );
 }
 

src/common/components/modal-dialog/modal-dialog.component.tsx

@@ -2,19 +2,42 @@ import React from 'react';
 import styles from './modal-dialog.styles.module.css';
 import { useModalDialogContext } from '@/core/providers/modal-dialog-provider';
 import { AnimatePresence, motion } from 'framer-motion';
+import {
+  handleEscapeKeyDown,
+  handleFocus,
+  handleNextFocus,
+  handleTabsInsideDialog,
+} from './modal.dialog.bussines';
 
 export const ModalDialog: React.FC = () => {
   const { closeModal, modalDialog } = useModalDialogContext();
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const previousFocusedElement = React.useRef<Element | null>(null);
+
   const handleClick = () => {
     closeModal();
   };
 
+  const handleEscapeKeyDownEvent = (e: KeyboardEvent) =>
+    handleEscapeKeyDown(e, closeModal);
+
+  const handleTabsInsideDialogEvent = (e: KeyboardEvent) =>
+    handleTabsInsideDialog(e, containerRef);
+
   React.useEffect(() => {
     if (modalDialog.isOpen) {
       document.body.classList.add('overflow-hidden');
+      document.addEventListener('keydown', handleEscapeKeyDownEvent);
+      document.addEventListener('keydown', handleTabsInsideDialogEvent);
+      handleFocus(previousFocusedElement, containerRef);
+    } else {
+      handleNextFocus(previousFocusedElement);
     }
+
     return () => {
       document.body.classList.remove('overflow-hidden');
+      document.removeEventListener('keydown', handleEscapeKeyDownEvent);
+      document.removeEventListener('keydown', handleTabsInsideDialogEvent);
     };
   }, [modalDialog.isOpen]);
 
@@ -36,10 +59,19 @@ export const ModalDialog: React.FC = () => {
             animate={{ opacity: 1, scale: 1 }}
             exit={{ opacity: 0, scale: 0.8 }}
             transition={{ duration: 0.4 }}
+            ref={containerRef}
+            tabIndex={-1}
+            aria-labelledby="modal-modal-title"
           >
             <div className={styles.dialogHeader}>
-              <h2 className={styles.dialogTitle}>{modalDialog.title}</h2>
-              <button className={styles.dialogButton} onClick={handleClick}>
+              <h2 className={styles.dialogTitle} id="modal-modal-title">
+                {modalDialog.title}
+              </h2>
+              <button
+                className={styles.dialogButton}
+                onClick={handleClick}
+                aria-label="close modal dialog"
+              >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="1em"

src/common/components/modal-dialog/modal.dialog.bussines.ts

@@ -0,0 +1,58 @@
+export const handleTabsInsideDialog = (
+  e: KeyboardEvent,
+  containerRef: React.RefObject<HTMLDivElement>
+) => {
+  const focusableElements = containerRef.current?.querySelectorAll(
+    'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'
+  );
+  const lastFocusableElement =
+    focusableElements?.[focusableElements.length - 1];
+
+  if (
+    e.key === 'Tab' &&
+    !e.shiftKey &&
+    document.activeElement === lastFocusableElement
+  ) {
+    e.preventDefault();
+    containerRef.current?.focus();
+  }
+};
+
+export const handleEscapeKeyDown = (
+  e: KeyboardEvent,
+  closeModal: () => void
+) => {
+  e.key === 'Escape' && closeModal();
+};
+
+export const handleFocus = (
+  previousFocusedElement: React.MutableRefObject<Element | null>,
+  containerRef: React.RefObject<HTMLDivElement>
+) => {
+  previousFocusedElement.current = document.activeElement;
+  containerRef.current?.focus();
+  const focusableElements = document.querySelectorAll(
+    'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'
+  );
+  focusableElements.forEach((element: Element) => {
+    element.setAttribute('tabindex', '-1');
+  });
+  const focusableElementsInside = containerRef.current?.querySelectorAll(
+    'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'
+  );
+  focusableElementsInside?.forEach((element: Element) => {
+    element.removeAttribute('tabindex');
+  });
+};
+
+export const handleNextFocus = (
+  previousFocusedElement: React.MutableRefObject<Element | null>
+) => {
+  const focusableElements = document.querySelectorAll(
+    'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'
+  );
+  focusableElements.forEach((element: Element) => {
+    element.removeAttribute('tabindex');
+  });
+  (previousFocusedElement.current as HTMLElement)?.focus();
+};

src/scenes/main.scene.tsx

@@ -1,27 +1,21 @@
 import { CanvasPod } from '@/pods/canvas/canvas.pod';
 import { ToolbarPod } from '@/pods/toolbar/toolbar.pod';
-import {
-  CanvasViewSettingsProvider,
-  ModalDialogProvider,
-} from '@/core/providers';
+import { useModalDialogContext } from '@/core/providers';
 import { ModalDialog } from '@/common/components';
-import { CanvasSchemaProvider } from '@/core/providers/canvas-schema';
+
 import classes from './main.scene.module.css';
 import { FooterPod } from '@/pods/footer';
 
 export const MainScene: React.FC = () => {
+  const { modalDialog } = useModalDialogContext();
   return (
-    <div className={classes.container}>
-      <CanvasViewSettingsProvider>
-        <CanvasSchemaProvider>
-          <ModalDialogProvider>
-            <ToolbarPod />
-            <CanvasPod />
-            <ModalDialog />
-            <FooterPod />
-          </ModalDialogProvider>
-        </CanvasSchemaProvider>
-      </CanvasViewSettingsProvider>
-    </div>
+    <>
+      <div className={classes.container} aria-hidden={modalDialog.isOpen}>
+        <ToolbarPod />
+        <CanvasPod />
+        <FooterPod />
+      </div>
+      <ModalDialog />
+    </>
   );
 };