Record picker keyboard navigation

assets/js/app.js

@@ -25,6 +25,7 @@ import topbar from "../vendor/topbar";
 import { Hooks as FluxonHooks, DOM as FluxonDOM } from "fluxon";
 import FormatNumberHook from "./hooks/format-number";
 import UniversalSearchNavigationHook from "./hooks/universal-search-navigation";
+import RecordPickerNavigationHook from "./hooks/record-picker-navigation";
 import confetti from "canvas-confetti";
 import { createLiveToastHook } from "live_toast";
 import banner from "./banner";
@@ -32,6 +33,7 @@ import banner from "./banner";
 let Hooks = FluxonHooks;
 Hooks.FormatNumber = FormatNumberHook;
 Hooks.UniversalSearchNavigation = UniversalSearchNavigationHook;
+Hooks.RecordPickerNavigation = RecordPickerNavigationHook;
 Hooks.LiveToast = createLiveToastHook();
 
 const csrfToken = document

assets/js/hooks/record-picker-navigation.js

@@ -0,0 +1,113 @@
+export default {
+  mounted() {
+    this.selectedIndex = -1; // -1 means search input is focused
+
+    this.keydownHandler = (event) => {
+      const modal = document.getElementById("record-picker-modal");
+      if (!modal) return;
+
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          this.navigateDown();
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          this.navigateUp();
+          break;
+        case "Enter":
+          if (this.selectedIndex >= 0) {
+            event.preventDefault();
+            this.selectCurrentResult();
+          }
+          break;
+      }
+    };
+
+    document.addEventListener("keydown", this.keydownHandler);
+  },
+
+  updated() {
+    // Reset selection when results change
+    this.selectedIndex = -1;
+    this.updateSelection();
+  },
+
+  destroyed() {
+    if (this.keydownHandler) {
+      document.removeEventListener("keydown", this.keydownHandler);
+    }
+  },
+
+  navigateDown() {
+    const results = this.getResultElements();
+
+    if (results.length === 0) return;
+
+    if (this.selectedIndex < results.length - 1) {
+      this.selectedIndex++;
+    } else {
+      this.selectedIndex = -1;
+    }
+
+    this.updateSelection();
+  },
+
+  navigateUp() {
+    const results = this.getResultElements();
+
+    if (results.length === 0) return;
+
+    if (this.selectedIndex > -1) {
+      this.selectedIndex--;
+    } else {
+      this.selectedIndex = results.length - 1;
+    }
+
+    this.updateSelection();
+  },
+
+  selectCurrentResult() {
+    const results = this.getResultElements();
+
+    if (this.selectedIndex >= 0 && this.selectedIndex < results.length) {
+      results[this.selectedIndex].click();
+
+      if (this.selectedIndex === 0) {
+        this.navigateDown();
+      } else {
+        this.naigateUp();
+      }
+    }
+  },
+
+  updateSelection() {
+    const results = this.getResultElements();
+
+    results.forEach((result) => {
+      result.removeAttribute("aria-selected");
+    });
+
+    if (this.selectedIndex === -1) {
+      const searchInput = document.getElementById("record-picker-search-input");
+      if (searchInput) {
+        searchInput.focus();
+      }
+    } else if (this.selectedIndex >= 0 && this.selectedIndex < results.length) {
+      const selectedResult = results[this.selectedIndex];
+      selectedResult.setAttribute("aria-selected", "true");
+
+      selectedResult.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  },
+
+  getResultElements() {
+    const container = this.el;
+    if (!container) return [];
+
+    return Array.from(container.querySelectorAll('[role="option"]'));
+  }
+};

lib/music_library_web/live/record_set_live/record_picker.ex

@@ -7,7 +7,7 @@ defmodule MusicLibraryWeb.RecordSetLive.RecordPicker do
   @impl true
   def render(assigns) do
     ~H"""
-    <div>
+    <div id="record-picker-navigation" phx-hook="RecordPickerNavigation">
       <header class="mb-6">
         <h1 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
           {@title}
@@ -26,7 +26,7 @@ defmodule MusicLibraryWeb.RecordSetLive.RecordPicker do
         <.input
           type="search"
           size="sm"
-          id={:query}
+          id="record-picker-search-input"
           name={:query}
           value={@query}
           placeholder={gettext("Search")}
@@ -48,7 +48,11 @@ defmodule MusicLibraryWeb.RecordSetLive.RecordPicker do
         </li>
         <li
           :for={record <- @results}
-          class="flex items-center gap-3 py-3 px-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 cursor-pointer rounded-lg"
+          role="option"
+          class={[
+            "flex items-center gap-3 py-3 px-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 cursor-pointer rounded-lg",
+            "aria-selected:bg-zinc-100 dark:aria-selected:bg-zinc-700"
+          ]}
           phx-click="add_record"
           phx-target={@myself}
           phx-value-record-id={record.id}