Merge branch 'focus-trap' of Arnei/opencast-admin-interface into r/17.x

Pull request #1339
Fixes #600
  Add focus trap to modal

Author: gregorydlogan

package-lock.json

@@ -15,6 +15,7 @@
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "dompurify": "^3.2.5",
+    "focus-trap-react": "^11.0.4",
     "font-awesome": "^4.7.0",
     "formik": "^2.4.6",
     "http-proxy-middleware": "^3.0.5",

package.json

@@ -4,10 +4,7 @@ import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../../configs/hotkeysConfig";
 import { useTranslation } from "react-i18next";
 import ButtonLikeAnchor from "../ButtonLikeAnchor";
-// TODO: Implement focus trapping
-// Attempted to do that with focus-trap-react, but it would not focus
-// the correct element in e.g. the new event modal
-// import { FocusTrap } from "focus-trap-react";
+import { FocusTrap } from "focus-trap-react";
 
 export type ModalProps = {
 	open?: boolean
@@ -63,26 +60,28 @@ export const Modal = forwardRef<ModalHandle, PropsWithChildren<ModalProps>>(({
 
 	return ReactDOM.createPortal(
 		isOpen &&
-			<div>
-				<div className="modal-animation modal-overlay" />
-				<section
-					id={classId}
-					className={className ? className : "modal wizard modal-animation"}
-				>
-					<header>
-						<ButtonLikeAnchor
-							extraClassName="fa fa-times close-modal"
-							onClick={close}
-							tabIndex={0}
-						/>
-						<h2>
-							{header}
-						</h2>
-					</header>
+			<FocusTrap>
+				<div>
+					<div className="modal-animation modal-overlay" />
+					<section
+						id={classId}
+						className={className ? className : "modal wizard modal-animation"}
+					>
+						<header>
+							<ButtonLikeAnchor
+								extraClassName="fa fa-times close-modal"
+								onClick={close}
+								tabIndex={0}
+							/>
+							<h2>
+								{header}
+							</h2>
+						</header>
 
-						{children}
-				</section>
-			</div>,
+							{children}
+					</section>
+				</div>
+			</FocusTrap>,
 		document.body,
 	);