diff --git a/src/components/configuration/partials/wizard/ThemeDetailsModal.tsx b/src/components/configuration/partials/wizard/ThemeDetailsModal.tsx index db8d9ca570..2b0e6f1178 100644 --- a/src/components/configuration/partials/wizard/ThemeDetailsModal.tsx +++ b/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 = ({
diff --git a/src/components/users/partials/modal/UserDetailsModal.tsx b/src/components/users/partials/modal/UserDetailsModal.tsx index 82529bcb48..e4a2f4fb21 100644 --- a/src/components/users/partials/modal/UserDetailsModal.tsx +++ b/src/components/users/partials/modal/UserDetailsModal.tsx @@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next"; import UserDetails from "./UserDetails"; import { useHotkeys } from "react-hotkeys-hook"; import { availableHotkeys } from "../../../../configs/hotkeysConfig"; +import { focusTrap } from "../../../../utils/modalUtils"; /** * This component renders the modal for displaying user details @@ -13,12 +14,19 @@ const UserDetailsModal = ({ }: any) => { const { t } = useTranslation(); + const userDetailsModalRef = React.useRef(null); + const [focusEneabled, setFocusEneabled] = React.useState(false); + React.useEffect(() => { + focusTrap(userDetailsModalRef, focusEneabled, setFocusEneabled); + }); + useHotkeys( availableHotkeys.general.CLOSE_MODAL.sequence, () => close(), { description: t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined }, [close], ); + const handleClose = () => { close(); @@ -36,6 +44,7 @@ const UserDetailsModal = ({ id="user-details-modal" className="modal wizard modal-animation" style={modalStyle} + ref={userDetailsModalRef} >