Feature Add next/previous tab hotkeys

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

@@ -49,6 +49,8 @@ import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
 import { NOTIFICATION_CONTEXT } from "../../../../configs/modalConfig";
 import { unwrapResult } from "@reduxjs/toolkit";
 import { ParseKeys } from "i18next";
+import { useHotkeys } from "react-hotkeys-hook";
+import { availableHotkeys } from "../../../../configs/hotkeysConfig";
 
 export enum EventDetailsPage {
 	Metadata,
@@ -228,6 +230,46 @@ const EventDetails = ({
 		        dispatch(openModalTab(tabNr, "workflow-details", "entry"));
 		}
 	};
+	const wizardTabs = tabs.filter(tab =>
+	  !tab.hidden && tab.page !== EventDetailsPage.Tobira && tab.page !== EventDetailsPage.Statistics,
+	);
+
+	const goNextStep = () => {
+	  const currentIndex = wizardTabs.findIndex(tab => tab.page === page);
+	  if (currentIndex === -1) { return; } // not in wizard, do nothing
+	  const nextIndex = currentIndex + 1;
+	  if (nextIndex >= wizardTabs.length) { return; } // already at last step (Comments)
+	  openTab(wizardTabs[nextIndex].page);
+	};
+
+	const goPrevStep = () => {
+	  const currentIndex = wizardTabs.findIndex(tab => tab.page === page);
+	  if (currentIndex <= 0) { return; }
+	  openTab(wizardTabs[currentIndex - 1].page);
+	};
+	// NEXT STEP
+	useHotkeys(
+	  availableHotkeys.general.NEXT_STEP.sequence,
+	  event => {
+	    const target = event.target as HTMLElement;
+	    if (!["INPUT", "TEXTAREA"].includes(target.tagName)) {
+	      goNextStep();
+	    }
+	  },
+	  [goNextStep],
+	);
+
+	// PREVIOUS STEP
+	useHotkeys(
+	  availableHotkeys.general.PREVIOUS_STEP.sequence,
+	  event => {
+	    const target = event.target as HTMLElement;
+	    if (!["INPUT", "TEXTAREA"].includes(target.tagName)) {
+	      goPrevStep();
+	    }
+	  },
+	  [goPrevStep],
+	);
 
 	return (
 		<>

src/components/shared/modals/Modal.tsx

@@ -69,7 +69,7 @@ export const Modal = forwardRef<ModalHandle, PropsWithChildren<ModalProps>>(
 
 	return ReactDOM.createPortal(
 		isOpen &&
-			<FocusTrap>
+			<FocusTrap focusTrapOptions={{ escapeDeactivates: false }}>
 				<div>
 					<div className="modal-animation modal-overlay" />
 					<section

src/components/shared/modals/ModalContentTable.tsx

@@ -1,3 +1,4 @@
+import { useRef } from "react";
 import ModalContent from "./ModalContent";
 
 /**
@@ -15,14 +16,24 @@ const ModalContentTable = ({
 	children: React.ReactNode
 }) => {
 
-
+	 // Store the last blurred/focused element
+  	const lastFocusedRef = useRef<HTMLElement | null>(null);
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const active = document.activeElement as HTMLElement | null;
+      if (event.key === "Escape") {
+        if (active && event.currentTarget.contains(active)) {
+          lastFocusedRef.current = active; // store the last focused element
+          active.blur();
+        }
+      }
+    };
   return (
 		<ModalContent
 			modalContentChildren={modalContentChildren}
 			modalContentClassName={modalContentClassName}
 		>
 			{modalBodyChildren}
-			<div className="full-col">
+			<div className="full-col" onKeyDown={handleKeyDown}>
 				{children}
 			</div>
 		</ModalContent>

src/configs/hotkeysConfig.ts

@@ -59,6 +59,16 @@ export const availableHotkeys: HotkeyMapType = {
             action: 'keyup',
             allowIn: ['INPUT', 'SELECT', 'TEXTAREA']
         },*/
+		NEXT_STEP: {
+    		name: "next_step",
+    		description: "HOTKEYS.DESCRIPTIONS.GENERAL.NEXT_STEP",
+    		sequence: ["alt+enter"], // Alt + Enter moves forward
+  		},
+  		PREVIOUS_STEP: {
+    		name: "previous_step",
+    		description: "HOTKEYS.DESCRIPTIONS.GENERAL.PREVIOUS_STEP",
+    		sequence: ["alt+backspace"], // Alt + Backspace moves backward
+  		},
 		REMOVE_FILTERS: {
 			name: "remove_filters",
 			description: "HOTKEYS.DESCRIPTIONS.GENERAL.REMOVE_FILTERS",

src/i18n/org/opencastproject/adminui/languages/lang-en_US.json

@@ -2086,6 +2086,8 @@
 				"SERIES_VIEW": "Series",
 				"NEW_EVENT": "Add event",
 				"NEW_SERIES": "Add series",
+				"NEXT_STEP": "Go to next step",
+        		"PREVIOUS_STEP": "Go to previous step",
 				"CHEAT_SHEET": "Keyboard shortcuts",
 				"CLOSE_MODAL": "Close dialog"
 			}