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

Refactor Modal component to use useFocusTrap hook

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

CHANGELOG.md

@@ -8,19 +8,6 @@ and this project adheres to
 
 ## [Unreleased]
 
-## [6.2.0] - 2024-09-20
-
-### Added
-
--   Added useFocusTrap hook
--   Added extendSession endpoint
-
-### Changed
-
--   Refactored Spinner.css to use CSS variable for color
--   Refactored Modal component to use useFocusTrap hook
--   Refactored Alert component to use useFocusTrap hook
-
 ## [6.1.1] - 2024-08-30
 
 ### Added
@@ -374,8 +361,7 @@ and this project adheres to
 ## [0.0.7] - 2019-09-02
 
 [unreleased]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.2.0...dev
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.1.1...master
-[6.2.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.1.1...v6.2.0
 [6.1.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.1.0...v6.1.1
 [6.1.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.0.3...v6.1.0
 [6.0.3]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.0.2...v6.0.3

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "foris",
-    "version": "6.2.0",
+    "version": "6.1.1",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "foris",
-            "version": "6.2.0",
+            "version": "6.1.1",
             "license": "GPL-3.0",
             "dependencies": {
                 "@fortawesome/fontawesome-svg-core": "^6.6.0",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "6.2.0",
+    "version": "6.1.1",
     "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {

src/bootstrap/Alert.js

@@ -5,12 +5,10 @@
  * See /LICENSE for more information.
  */
 
-import React, { useRef } from "react";
+import React from "react";
 
 import PropTypes from "prop-types";
 
-import { useFocusTrap } from "../utils/hooks";
-
 export const ALERT_TYPES = Object.freeze({
     PRIMARY: "primary",
     SECONDARY: "secondary",
@@ -39,15 +37,11 @@ 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, shown);
+    useFocusTrap(modalRef);
 
     useEffect(() => {
         const handleEsc = (event) => {
@@ -46,7 +46,7 @@ export function Modal({ shown, setShown, scrollable, size, children }) {
         return () => {
             window.removeEventListener("keydown", handleEsc);
         };
-    }, [setShown]);
+    }, [shown]);
 
     switch (size) {
         case "sm":

src/bootstrap/Spinner.css

@@ -9,7 +9,7 @@
 .spinner-wrapper .spinner-border {
     width: 4rem;
     height: 4rem;
-    color: var(--bs-primary);
+    color: #00a2e2;
 }
 
 .spinner-fs-background {

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

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

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

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

src/utils/forisUrls.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -9,10 +9,8 @@ export const REFORIS_URL_PREFIX = "/reforis";
 export const REFORIS_API_URL_PREFIX = `${REFORIS_URL_PREFIX}/api`;
 
 export const ForisURLs = {
-    // turris-auth
     login: `/login?${REFORIS_URL_PREFIX}/`,
     logout: `/logout`,
-    extendSession: `/extend-session`,
 
     static: `${REFORIS_URL_PREFIX}/static/reforis`,
     wifi: `${REFORIS_URL_PREFIX}/network-settings/wifi`,

src/utils/hooks.js

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