From 22e3f67411023b4f719548e9b5bf504564240026 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 3 May 2026 22:23:20 -0400
Subject: [PATCH] feat(web/m7-364): drawer focus management + grip Enter/Space
 handling

---
 web/src/lib/components/QueueDrawer.svelte    | 16 ++++++++++++++++
 web/src/lib/components/QueueTrackRow.svelte  |  6 ++++++
 web/src/lib/components/QueueTrackRow.test.ts | 14 ++++++++++++++
 3 files changed, 36 insertions(+)

diff --git a/web/src/lib/components/QueueDrawer.svelte b/web/src/lib/components/QueueDrawer.svelte
index a69b41db..924b3f26 100644
--- a/web/src/lib/components/QueueDrawer.svelte
+++ b/web/src/lib/components/QueueDrawer.svelte
@@ -3,12 +3,27 @@
   import { player, closeQueueDrawer } from '$lib/player/store.svelte';
   import QueueTrackRow from './QueueTrackRow.svelte';
 
+  let previouslyFocused: HTMLElement | null = null;
+  let closeButton: HTMLButtonElement | undefined = $state();
+
   function totalDurationLabel(tracks: { duration_sec: number }[]): string {
     const totalSec = tracks.reduce((s, tr) => s + (tr.duration_sec ?? 0), 0);
     const m = Math.floor(totalSec / 60);
     const h = Math.floor(m / 60);
     return h > 0 ? `${h}h ${m % 60}m` : `${m} min`;
   }
+
+  $effect(() => {
+    if (player.queueDrawerOpen) {
+      previouslyFocused = document.activeElement as HTMLElement | null;
+      // Defer to next microtask so the close button is rendered + visible
+      // before we focus (the drawer may still be transitioning in).
+      Promise.resolve().then(() => closeButton?.focus());
+    } else if (previouslyFocused) {
+      previouslyFocused.focus();
+      previouslyFocused = null;
+    }
+  });
 </script>
 
 {#if player.queueDrawerOpen}
@@ -38,6 +53,7 @@
     </div>
     <button
       type="button"
+      bind:this={closeButton}
       aria-label="Close queue"
       onclick={() => closeQueueDrawer()}
       class="text-text-secondary hover:text-text-primary"
diff --git a/web/src/lib/components/QueueTrackRow.svelte b/web/src/lib/components/QueueTrackRow.svelte
index 4ebd78d5..6580ab9c 100644
--- a/web/src/lib/components/QueueTrackRow.svelte
+++ b/web/src/lib/components/QueueTrackRow.svelte
@@ -41,6 +41,11 @@
     } else if (e.key === 'ArrowDown') {
       e.preventDefault();
       moveQueueItem(index, index + 1);
+    } else if (e.key === ' ' || e.key === 'Enter') {
+      // Reorder activates via arrow keys, not Space/Enter. Prevent
+      // default so Space doesn't scroll the queue list and Enter doesn't
+      // fire the button's no-op click.
+      e.preventDefault();
     }
   }
 </script>
@@ -53,6 +58,7 @@
   <button
     type="button"
     aria-label="Reorder track (use arrow keys)"
+    aria-keyshortcuts="ArrowUp ArrowDown"
     onkeydown={handleHandleKeydown}
     class="cursor-grab text-text-secondary hover:text-text-primary flex-shrink-0"
   >
diff --git a/web/src/lib/components/QueueTrackRow.test.ts b/web/src/lib/components/QueueTrackRow.test.ts
index c2cb0c48..87117942 100644
--- a/web/src/lib/components/QueueTrackRow.test.ts
+++ b/web/src/lib/components/QueueTrackRow.test.ts
@@ -77,4 +77,18 @@ describe('QueueTrackRow', () => {
     await fireEvent.keyDown(handle, { key: 'ArrowUp' });
     expect(moveQueueItem).toHaveBeenCalledWith(3, 2);
   });
+
+  it('Enter on the drag handle prevents default but does not call moveQueueItem', async () => {
+    render(QueueTrackRow, { props: { track: sampleTrack, index: 3, isCurrent: false } });
+    const handle = screen.getByLabelText(/reorder track/i);
+    await fireEvent.keyDown(handle, { key: 'Enter' });
+    expect(moveQueueItem).not.toHaveBeenCalled();
+  });
+
+  it('Space on the drag handle prevents default but does not call moveQueueItem', async () => {
+    render(QueueTrackRow, { props: { track: sampleTrack, index: 3, isCurrent: false } });
+    const handle = screen.getByLabelText(/reorder track/i);
+    await fireEvent.keyDown(handle, { key: ' ' });
+    expect(moveQueueItem).not.toHaveBeenCalled();
+  });
 });