Merge branch 'modal-focus-trap' into 'dev'

Refactor Modal component to use useFocusTrap hook

See merge request turris/reforis/foris-js!237

src/bootstrap/Alert.js

@@ -5,10 +5,12 @@
  * See /LICENSE for more information.
  */
 
-import React from "react";
+import React, { useRef } from "react";
 
 import PropTypes from "prop-types";
 
+import { useFocusTrap } from "../utils/hooks";
+
 export const ALERT_TYPES = Object.freeze({
     PRIMARY: "primary",
     SECONDARY: "secondary",
@@ -37,11 +39,15 @@ Alert.defaultProps = {
 };
 
 function Alert({ type, onDismiss, children }) {
+    const alertRef = useRef();
+    useFocusTrap(alertRef, !!onDismiss);
     return (
         <div
+            ref={alertRef}
             className={`alert alert-${type} ${
                 onDismiss ? "alert-dismissible" : ""
             }`.trim()}
+            role="alert"
         >
             {onDismiss && (
                 <button

src/bootstrap/Modal.js

@@ -33,7 +33,7 @@ export function Modal({ shown, setShown, scrollable, size, children }) {
     let modalSize = "modal-";
 
     useClickOutside(modalRef, () => setShown(false));
-    useFocusTrap(modalRef);
+    useFocusTrap(modalRef, shown);
 
     useEffect(() => {
         const handleEsc = (event) => {
@@ -46,7 +46,7 @@ export function Modal({ shown, setShown, scrollable, size, children }) {
         return () => {
             window.removeEventListener("keydown", handleEsc);
         };
-    }, [shown]);
+    }, [setShown]);
 
     switch (size) {
         case "sm":

src/common/__tests__/__snapshots__/RebootButton.test.js.snap

@@ -6,6 +6,8 @@ exports[`<RebootButton/> Render modal. 1`] = `
     id="modal-container"
   >
     <div
+      aria-labelledby="modal-title"
+      aria-modal="true"
       class="modal fade show"
       role="dialog"
     >
@@ -19,11 +21,11 @@ exports[`<RebootButton/> Render modal. 1`] = `
           <div
             class="modal-header"
           >
-            <h5
-              class="modal-title"
+            <h1
+              class="modal-title fs-5"
             >
               Warning!
-            </h5>
+            </h1>
             <button
               aria-label="Close"
               class="btn-close"

src/context/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap

@@ -7,6 +7,7 @@ exports[`AlertContext should render alert 1`] = `
   >
     <div
       class="alert alert-danger alert-dismissible"
+      role="alert"
     >
       <button
         aria-label="Close"

src/utils/hooks.js

@@ -41,40 +41,39 @@ export function useClickOutside(element, callback) {
     });
 }
 
-/* Trap focus inside modal. */
-export function useFocusTrap(modalRef) {
+/* Trap focus inside element. */
+export function useFocusTrap(elementRef, condition = true) {
     useEffect(() => {
-        if (shown) {
-            const modal = modalRef.current;
-            const focusableElements = modal.querySelectorAll(
-                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-            );
-            const firstElement = focusableElements[0];
-            const lastElement = focusableElements[focusableElements.length - 1];
-
-            const handleTab = (event) => {
-                if (event.key === "Tab") {
-                    if (event.shiftKey) {
-                        if (document.activeElement === firstElement) {
-                            lastElement.focus();
-                            event.preventDefault();
-                        }
-                    } else {
-                        if (document.activeElement === lastElement) {
-                            firstElement.focus();
-                            event.preventDefault();
-                        }
-                    }
-                }
-            };
-
-            modal.addEventListener("keydown", handleTab);
-
-            firstElement.focus();
-
-            return () => {
-                modal.removeEventListener("keydown", handleTab);
-            };
+        if (!condition) {
+            return;
         }
-    }, [shown]);
+        const currentElement = elementRef.current;
+        const focusableElements = currentElement.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+
+        const handleTab = (event) => {
+            if (event.key === "Tab") {
+                if (event.shiftKey) {
+                    if (document.activeElement === firstElement) {
+                        lastElement.focus();
+                        event.preventDefault();
+                    }
+                } else if (document.activeElement === lastElement) {
+                    firstElement.focus();
+                    event.preventDefault();
+                }
+            }
+        };
+
+        currentElement.addEventListener("keydown", handleTab);
+
+        firstElement.focus();
+
+        return () => {
+            currentElement.removeEventListener("keydown", handleTab);
+        };
+    }, [elementRef, condition]);
 }