- Improve tabs keyboard controls 2

Team-BTMC · Nov 3, 2024 · d072a68 · d072a68
1 parent 2baf4fb
commit d072a68
Showing 1 changed file with 29 additions and 3 deletions.
diff --git a/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts b/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts
@@ -59,7 +59,33 @@ export function useRovingFocusGroup(props: Params = {}) {
     setCurrentStopId(firstNode.getAttribute(ITEM_DATA_ATTR)!);
   };
 
-  const handleKeyUp = (
+  const handleListKeyUp = (
+    event: KeyboardEvent & {
+      currentTarget: DOMElement;
+      target: DOMElement;
+    },
+  ) => {
+    if (!event.currentTarget.isSameNode(event.target)) {
+      return;
+    }
+
+    switch (event.key) {
+      case "ArrowUp":
+      case "ArrowLeft":
+      case "ArrowDown":
+      case "ArrowRight": {
+        event.preventDefault();
+        tryFocusFirstItem();
+        break;
+      }
+
+      default: {
+        break;
+      }
+    }
+  };
+
+  const handleItemKeyUp = (
     event: KeyboardEvent & {
       currentTarget: DOMElement;
       target: DOMElement;
@@ -150,7 +176,7 @@ export function useRovingFocusGroup(props: Params = {}) {
     tryFocusFirstItem,
     value: currentStopId,
     attrs: {
-      onKeyUp: handleKeyUp,
+      onKeyUp: handleListKeyUp,
       ref: (node: HTMLElement) => {
         container = node;
       },
@@ -212,7 +238,7 @@ export function useRovingFocusGroup(props: Params = {}) {
         isSelected,
         tabIndex,
         attrs: {
-          onKeyUp: handleKeyUp,
+          onKeyUp: handleItemKeyUp,
           onClick: handleClick,
           onPointerMove: handlePointerMove,
           [ITEM_DATA_ATTR]: tabStopId ?? "fallback",