refactor(web): list navigation with keyboard (#7987)

web/src/lib/utils/list-navigation.ts

@@ -0,0 +1,32 @@
+import type { Action } from 'svelte/action';
+import { shortcuts } from './shortcut';
+
+export const listNavigation: Action<HTMLElement, HTMLElement> = (node, container: HTMLElement) => {
+  const moveFocus = (direction: 'up' | 'down') => {
+    const children = Array.from(container?.children);
+    if (children.length === 0) {
+      return;
+    }
+
+    const currentIndex = document.activeElement === null ? -1 : children.indexOf(document.activeElement);
+    const directionFactor = (direction === 'up' ? -1 : 1) + (direction === 'up' && currentIndex === -1 ? 1 : 0);
+    const newIndex = (currentIndex + directionFactor + children.length) % children.length;
+
+    const element = children.at(newIndex);
+    if (element instanceof HTMLElement) {
+      element.focus();
+    }
+  };
+
+  const { destroy } = shortcuts(node, [
+    { shortcut: { key: 'ArrowUp' }, onShortcut: () => moveFocus('up'), ignoreInputFields: false },
+    { shortcut: { key: 'ArrowDown' }, onShortcut: () => moveFocus('down'), ignoreInputFields: false },
+  ]);
+
+  return {
+    update(newContainer) {
+      container = newContainer;
+    },
+    destroy,
+  };
+};

web/src/lib/utils/shortcut.ts

@@ -10,6 +10,7 @@ export type Shortcut = {
 
 export type ShortcutOptions<T = HTMLElement> = {
   shortcut: Shortcut;
+  ignoreInputFields?: boolean;
   onShortcut: (event: KeyboardEvent & { currentTarget: T }) => unknown;
 };
 
@@ -50,11 +51,13 @@ export const shortcuts = <T extends HTMLElement>(
   options: ShortcutOptions<T>[],
 ): ActionReturn<ShortcutOptions<T>[]> => {
   function onKeydown(event: KeyboardEvent) {
-    if (shouldIgnoreShortcut(event)) {
-      return;
-    }
+    const ignoreShortcut = shouldIgnoreShortcut(event);
+
+    for (const { shortcut, onShortcut, ignoreInputFields = true } of options) {
+      if (ignoreInputFields && ignoreShortcut) {
+        continue;
+      }
 
-    for (const { shortcut, onShortcut } of options) {
       if (matchesShortcut(event, shortcut)) {
         event.preventDefault();
         onShortcut(event as KeyboardEvent & { currentTarget: T });