Modal does not have a focus trap #600

src/components/configuration/partials/wizard/ThemeDetailsModal.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import ThemeDetails from "./ThemeDetails";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component renders the modal for displaying theme details
@@ -12,6 +13,12 @@ const ThemeDetailsModal = ({
 }: any) => {
 	const { t } = useTranslation();
 
+	const themeDetailsModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(themeDetailsModalRef,focusEneabled, setFocusEneabled);
+	});
+
 	const close = () => {
 		handleClose();
 	};
@@ -22,6 +29,7 @@ const ThemeDetailsModal = ({
 			<section
 				id="theme-details-modal"
 				className="modal wizard modal-animation"
+				ref={themeDetailsModalRef}
 			>
 				<header>
 					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />

src/components/events/partials/modals/DeleteEventsModal.tsx

@@ -7,6 +7,7 @@ import { useAppDispatch } from "../../../../store";
 import { deleteMultipleEvent } from "../../../../slices/eventSlice";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component manages the delete bulk action
@@ -21,6 +22,12 @@ const DeleteEventsModal = ({
 	const [allChecked, setAllChecked] = useState(true);
 	const [selectedEvents, setSelectedEvents] = useState(selectedRows);
 
+	const deleteEventsModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(deleteEventsModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -81,6 +88,7 @@ const DeleteEventsModal = ({
 				className="modal active modal-open"
 				id="delete-events-status-modal"
 				style={{ display: "block" }}
+				ref={deleteEventsModalRef}
 			>
 				<header>
 					<button onClick={close} className="button-like-anchor fa fa-times close-modal" />

src/components/events/partials/modals/DeleteSeriesModal.tsx

@@ -11,6 +11,7 @@ import {
 } from "../../../../slices/seriesSlice";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component manges the delete series bulk action
@@ -24,6 +25,12 @@ const DeleteSeriesModal = ({ close, selectedRows }) => {
 	const [selectedSeries, setSelectedSeries] = useState(selectedRows);
 	const [deleteWithSeriesAllowed, setDeleteWithSeriesAllowed] = useState(false);
 
+	const deleteSeriesModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(deleteSeriesModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -127,6 +134,7 @@ const DeleteSeriesModal = ({ close, selectedRows }) => {
 				className="modal active modal-open"
 				id="delete-series-status-modal"
 				style={{ display: "block" }}
+				ref={deleteSeriesModalRef}
 			>
 				<header>
 					<button onClick={() => close()} className="button-like-anchor fa fa-times close-modal" />

src/components/events/partials/modals/EditMetadataEventsModal.tsx

@@ -19,6 +19,7 @@ import {
 import { unwrapResult } from "@reduxjs/toolkit";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component manges the edit metadata bulk action
@@ -47,6 +48,12 @@ const EditMetadataEventsModal = ({
 	const [fetchedValues, setFetchedValues] = useState(null);
 
 	const user = useAppSelector(state => getUserInformation(state));
+
+	const editMetadataEventsModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(editMetadataEventsModalRef, focusEneabled, setFocusEneabled);
+	});
 
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
@@ -148,7 +155,7 @@ const EditMetadataEventsModal = ({
 	return (
 		<>
 			<div className="modal-animation modal-overlay" />
-			<section className="modal wizard modal-animation">
+			<section className="modal wizard modal-animation" ref={editMetadataEventsModalRef}>
 				<header>
 					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
 					<h2>{t("BULK_ACTIONS.EDIT_EVENTS_METADATA.CAPTION")}</h2>

src/components/events/partials/modals/EditScheduledEventsModal.tsx

@@ -22,6 +22,7 @@ import {
 import { fetchRecordings } from "../../../../slices/recordingSlice";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component manages the pages of the edit scheduled bulk action
@@ -56,6 +57,12 @@ const EditScheduledEventsModal = ({
 
 	const user = useAppSelector(state => getUserInformation(state));
 
+	const editScheduledEventsModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(editScheduledEventsModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -123,7 +130,7 @@ const EditScheduledEventsModal = ({
 	return (
 		<>
 			<div className="modal-animation modal-overlay" />
-			<section className="modal wizard modal-animation">
+			<section className="modal wizard modal-animation" ref={editScheduledEventsModalRef}>
 				<header>
 					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
 					<h2>{t("BULK_ACTIONS.EDIT_EVENTS.CAPTION")}</h2>

src/components/events/partials/modals/EmbeddingCodeModal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { getSourceURL } from "../../../../utils/embeddedCodeUtils";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component renders the embedding code modal
@@ -18,6 +19,12 @@ const EmbeddingCodeModal = ({
 	const [currentSize, setCurrentSize] = useState("0x0");
 	const [showCopySuccess, setCopySuccess] = useState(false);
 
+	const embeddingCodeModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(embeddingCodeModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -90,7 +97,7 @@ const EmbeddingCodeModal = ({
 	return (
 		<>
 			<div className="modal-animation modal-overlay" />
-			<section className="modal modal-animation" id="embedding-code">
+			<section className="modal modal-animation" id="embedding-code" ref={embeddingCodeModalRef}>
 				<header>
 					<button
 						className="button-like-anchor fa fa-times close-modal"

src/components/events/partials/modals/EventDetailsModal.tsx

@@ -5,6 +5,7 @@ import { useAppDispatch } from "../../../../store";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component renders the modal for displaying event details
@@ -39,6 +40,12 @@ const EventDetailsModal = ({
 		}
 	};
 
+	const eventDetailsModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(eventDetailsModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -53,8 +60,8 @@ const EventDetailsModal = ({
 				<div className="modal-animation modal-overlay" />
 				<section
 					id="event-details-modal"
-					tabIndex={tabIndex}
 					className="modal wizard modal-animation"
+					ref={eventDetailsModalRef}
 				>
 					<header>
 						<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />

src/components/events/partials/modals/SeriesDetailsModal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import SeriesDetails from "./SeriesDetails";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component renders the modal for displaying series details
@@ -28,6 +29,12 @@ const SeriesDetailsModal = ({
 		}
 	};
 
+	const seriesDetailsModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(seriesDetailsModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -39,7 +46,7 @@ const SeriesDetailsModal = ({
 	return (
 		<>
 			<div className="modal-animation modal-overlay" />
-			<section className="modal modal-animation" id="series-details-modal">
+			<section className="modal modal-animation" id="series-details-modal" ref={seriesDetailsModalRef}>
 				<header>
 					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
 					<h2>

src/components/events/partials/modals/StartTaskModal.tsx

@@ -12,6 +12,7 @@ import { usePageFunctions } from "../../../../hooks/wizardHooks";
 import { checkValidityStartTaskEventSelection } from "../../../../utils/bulkActionUtils";
 import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component manages the pages of the task start bulk action
@@ -34,6 +35,12 @@ const StartTaskModal = ({
 		setPageCompleted,
 	} = usePageFunctions(0, initialValues);
 
+	const startTaskModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(startTaskModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -85,7 +92,7 @@ const StartTaskModal = ({
 	return (
 		<>
 			<div className="modal-animation modal-overlay" />
-			<section className="modal wizard modal-animation">
+			<section className="modal wizard modal-animation" ref={startTaskModalRef}>
 				<header>
 					<button className="button-like-anchor fa fa-times close-modal" onClick={() => close()} />
 					<h2>{t("BULK_ACTIONS.SCHEDULE_TASK.CAPTION")}</h2>

src/components/recordings/partials/modal/RecordingDetailsModal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import RecordingsDetails from "./RecordingsDetails";
 import { availableHotkeys } from "../../../../configs/hotkeysConfig";
 import { useHotkeys } from "react-hotkeys-hook";
+import { focusTrap } from "../../../../utils/modalUtils";
 
 /**
  * This component renders the modal for displaying recording details
@@ -13,6 +14,12 @@ const RecordingDetailsModal = ({
 }: any) => {
 	const { t } = useTranslation();
 
+	const recordingDetailsModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(recordingDetailsModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -31,6 +38,7 @@ const RecordingDetailsModal = ({
 			<section
 				id="capture-agent-details-modal"
 				className="modal wizard modal-animation"
+				ref={recordingDetailsModalRef}
 			>
 				<header>
 					<button

src/components/shared/ConfirmModal.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useTranslation } from "react-i18next";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
+import { focusTrap } from "../../utils/modalUtils";
 
 const ConfirmModal = ({
 // @ts-expect-error TS(7031): Binding element 'close' implicitly has an 'any' ty... Remove this comment to see the full error message
@@ -21,6 +22,13 @@ const ConfirmModal = ({
 }) => {
 	const { t } = useTranslation();
 
+	const confirmModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(confirmModalRef, focusEneabled, setFocusEneabled);
+	});
+
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -44,6 +52,7 @@ const ConfirmModal = ({
 				className="modal modal-animation"
 				id="confirm-modal"
 				style={{ fontSize: "14px" }}
+				ref={confirmModalRef}
 			>
 				<header>
 					<button

src/components/shared/EditTableViewModal.tsx

@@ -11,6 +11,7 @@ import {
 import { DragDropContext, Droppable, OnDragEndResponder, Draggable as Draggablee } from "@hello-pangea/dnd";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { useHotkeys } from "react-hotkeys-hook";
+import { focusTrap } from "../../utils/modalUtils";
 
 /**
  * This component renders the modal for editing which columns are shown in the table
@@ -48,6 +49,12 @@ const EditTableViewModal = ({
 		}
 	}, [activeColumns, deactivatedColumns, isColsLoaded]);
 
+	const editTableViewModalRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(editTableViewModalRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => handleClose(),
@@ -109,6 +116,7 @@ const EditTableViewModal = ({
 					<section
 						className="modal active modal-animation"
 						id="edit-table-view-modal"
+						ref={editTableViewModalRef}
 					>
 						<header>
 							<button

src/components/shared/HotKeyCheatSheet.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { useHotkeys, useHotkeysContext } from "react-hotkeys-hook";
 import { Hotkey } from "react-hotkeys-hook/dist/types";
+import { focusTrap } from "../../utils/modalUtils";
 
 /**
  * This component renders the hotkey cheat sheet showing all available hotkeys
@@ -14,6 +15,12 @@ const HotKeyCheatSheet: React.FC<{
 }) => {
 	const { t } = useTranslation();
 
+	const hotKeyCheatSheetRef = React.useRef(null);
+	const [focusEneabled, setFocusEneabled] = React.useState(false);
+	React.useEffect(() => {
+		focusTrap(hotKeyCheatSheetRef, focusEneabled, setFocusEneabled);
+	});
+
 	useHotkeys(
 		availableHotkeys.general.CLOSE_MODAL.sequence,
 		() => close(),
@@ -42,7 +49,7 @@ const HotKeyCheatSheet: React.FC<{
 	return (
 		<>
 			<div className="modal-animation modal-overlay" />
-			<div className="modal modal-animation">
+			<div className="modal modal-animation" ref={hotKeyCheatSheetRef}>
 				<header>
 					<button
 						className="button-like-anchor fa fa-times close-modal"