Added arrow navigation inside of the shortcut guide. Fixed wrong CustomTranslations type import

Author: DiogoRDuarte

src/AutoVizuA11y.tsx

@@ -26,7 +26,7 @@ import { initToolTutorial } from "./utils/initToolTutorial";
 import { processData } from "./utils/processData";
 import { ShortcutGuideContainer } from "./components/shortcut_guide/index";
 import { toSafeClassName } from "./utils/toSafeClassname";
-import { CustomTranslations } from "./utils/customTranslations";
+import { CustomTranslations } from "./hooks/useIsolatedI18n";
 import { useIsolatedI18n } from "./hooks/useIsolatedI18n";
 
 type AutoDescriptionsProps = {

src/components/navigation/GuideKeyHandler.ts

@@ -5,10 +5,72 @@
  * Other licensing options may be available, please reach out to [email protected] for more information.
  */
 
+import * as constants from "../../constants";
+
 export interface ExtendedHTMLElement extends HTMLElement {
 	pastFocus?: HTMLElement | null;
 }
 
+/**
+ * Handles the pressing of right arrow key inside the Shortcut Guide
+ */
+function handleArrowRight(
+	event: React.KeyboardEvent,
+	shortcutGuideRef: React.RefObject<HTMLDialogElement>,
+): void {
+	event.preventDefault();
+
+	const shortcutGuide = shortcutGuideRef.current;
+	if (!shortcutGuide) return;
+
+	const rows = Array.from(
+		shortcutGuide.querySelectorAll(`.${constants.SHORTCUTGUIDE_CLASSES.shortcutGuideRow}`),
+	);
+	if (rows.length === 0) return;
+
+	const activeElement = document.activeElement as HTMLElement | null;
+	const currentRowIndex = rows.findIndex((row) => row === activeElement);
+
+	let nextIndex = currentRowIndex + 1;
+	if (currentRowIndex === -1) {
+		nextIndex = 0;
+	}
+
+	if (nextIndex < rows.length) {
+		(rows[nextIndex] as HTMLElement).focus();
+	}
+}
+
+/**
+ * Handles the pressing of left arrow key inside the Shortcut Guide
+ */
+function handleArrowLeft(
+	event: React.KeyboardEvent,
+	shortcutGuideRef: React.RefObject<HTMLDialogElement>,
+): void {
+	event.preventDefault();
+
+	const shortcutGuide = shortcutGuideRef.current;
+	if (!shortcutGuide) return;
+
+	const rows = Array.from(
+		shortcutGuide.querySelectorAll(`.${constants.SHORTCUTGUIDE_CLASSES.shortcutGuideRow}`),
+	);
+	if (rows.length === 0) return;
+
+	const activeElement = document.activeElement as HTMLElement | null;
+	const currentRowIndex = rows.findIndex((row) => row === activeElement);
+
+	let prevIndex = currentRowIndex - 1;
+	if (currentRowIndex === -1) {
+		prevIndex = rows.length - 1;
+	}
+
+	if (prevIndex >= 0) {
+		(rows[prevIndex] as HTMLElement).focus();
+	}
+}
+
 /**
  * Listens for shortcutGuide related keypresses and handles the outcomes.
  *
@@ -36,6 +98,12 @@ export function guideKeyHandler({
 				returnGuide(shortcutGuideRef, setIsShortcutGuideOpen);
 			}
 			break;
+		case "ArrowLeft":
+			handleArrowLeft(event, shortcutGuideRef);
+			break;
+		case "ArrowRight":
+			handleArrowRight(event, shortcutGuideRef);
+			break;
 		default:
 			break;
 	}