- Improve tabs keyboard controls 3

Team-BTMC · Nov 3, 2024 · 4e0d32e · 4e0d32e
1 parent d072a68
commit 4e0d32e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 30 deletions.
diff --git a/src/renderer/src/components/tabs/TabsList.tsx b/src/renderer/src/components/tabs/TabsList.tsx
@@ -1,6 +1,6 @@
 import { useTabs } from "./Tabs";
 import { cn } from "@renderer/lib/css.utils";
-import { JSX, onMount, ParentComponent, splitProps } from "solid-js";
+import { createMemo, JSX, onMount, ParentComponent, splitProps } from "solid-js";
 
 type Props = JSX.IntrinsicElements["div"];
 export const TabsList: ParentComponent<Props> = (_props) => {
@@ -9,11 +9,16 @@ export const TabsList: ParentComponent<Props> = (_props) => {
 
   onMount(state.onListmounted);
 
+  const hasSelectedValue = createMemo(() => {
+    return state.registeredTabs.has(state.value());
+  });
+
   return (
     <div
       {...state.attrs}
       {...rest}
-      tabindex={0}
+      tabindex={hasSelectedValue() ? -1 : 0}
+      onFocus={state.tryFocusFirstItem}
       class={cn(
         "relative flex rounded-xl bg-thin-material p-1 gap-1 ring-1 ring-stroke",
         props.class,

diff --git a/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts b/src/renderer/src/lib/roving-focus-group/rovingFocusGroup.ts
@@ -1,6 +1,6 @@
 import { DOMElement } from "solid-js/jsx-runtime";
 import useControllableState from "../controllable-state";
-import { Accessor, createMemo, createSignal, onMount } from "solid-js";
+import { Accessor, createMemo, createSignal, onCleanup, onMount } from "solid-js";
 
 const ITEM_DATA_ATTR = "data-item";
 const DEFAULT_SELECTED_VALUE = "";
@@ -26,6 +26,9 @@ type Params = {
 };
 export function useRovingFocusGroup(props: Params = {}) {
   let container!: HTMLElement;
+
+  const registeredTabs = new Set<string>();
+
   const [hasMounted, setHasMounted] = createSignal(false);
   const [currentStopId, setCurrentStopId] = useControllableState({
     defaultProp: props.defaultProp || DEFAULT_SELECTED_VALUE,
@@ -59,32 +62,6 @@ export function useRovingFocusGroup(props: Params = {}) {
     setCurrentStopId(firstNode.getAttribute(ITEM_DATA_ATTR)!);
   };
 
-  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;
@@ -171,12 +148,12 @@ export function useRovingFocusGroup(props: Params = {}) {
   });
 
   return {
+    registeredTabs,
     currentlyActiveElement,
     onListmounted,
     tryFocusFirstItem,
     value: currentStopId,
     attrs: {
-      onKeyUp: handleListKeyUp,
       ref: (node: HTMLElement) => {
         container = node;
       },
@@ -234,6 +211,17 @@ export function useRovingFocusGroup(props: Params = {}) {
         return isSelected() ? 0 : -1;
       });
 
+      onMount(() => {
+        if (!tabStopId) {
+          return;
+        }
+
+        registeredTabs.add(tabStopId);
+        onCleanup(() => {
+          registeredTabs.delete(tabStopId);
+        });
+      });
+
       return {
         isSelected,
         tabIndex,