From d43c6b31f491fe6d3ad908d6e8eff0c0591c06fe Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 3 May 2026 22:26:09 -0400
Subject: [PATCH] chore(web/lint): clear svelte-check warnings + fix
 QueueDrawer test query

CI svelte-check was blocking on:

- 1 ERROR I introduced in the previous cleanup: QueueDrawer.test.ts
  passed { hidden: true } to getByLabelText, but that option only
  exists on getByRole. Fixed by switching to a direct
  document.querySelector for the aria-hidden assertion.

- 13 WARNINGS pre-existing in the codebase from M7 #352/#372/#349
  era, never surfaced because earlier CI runs failed before reaching
  type-check. Now that CI gets that far, they accumulate. Cleared:

  - FlagPopover, RemoveTrackPopover, AddToPlaylistMenu, TrackMenu:
    interactive role divs gain tabindex="-1" + onkeydown that stops
    propagation and closes on Escape (functional, not just warning-
    suppression).

  - FlagPopover state-from-props: $state(untrack(() => prop ?? default))
    for explicit initial-snapshot semantics; const isUpdate switched
    to $derived so it reacts to prop changes.

  - PlaylistTrackRow drag-div: role="listitem" added.

  - playlists/+page.svelte: autofocus replaced with bind:this + $effect.
---
 web/src/lib/components/AddToPlaylistMenu.svelte  | 2 ++
 web/src/lib/components/FlagPopover.svelte        | 9 ++++++---
 web/src/lib/components/PlaylistTrackRow.svelte   | 1 +
 web/src/lib/components/QueueDrawer.test.ts       | 5 +++--
 web/src/lib/components/RemoveTrackPopover.svelte | 2 ++
 web/src/lib/components/TrackMenu.svelte          | 2 ++
 web/src/routes/playlists/+page.svelte            | 7 ++++++-
 7 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/components/AddToPlaylistMenu.svelte b/web/src/lib/components/AddToPlaylistMenu.svelte
index 9d39420d..0504c4d3 100644
--- a/web/src/lib/components/AddToPlaylistMenu.svelte
+++ b/web/src/lib/components/AddToPlaylistMenu.svelte
@@ -67,9 +67,11 @@
 
 <div
   role="menu"
+  tabindex="-1"
   aria-label="Add to playlist"
   class="absolute right-full bottom-0 z-30 mr-1 w-56 rounded-md border border-border bg-surface p-1 shadow-lg"
   onclick={(e) => e.stopPropagation()}
+  onkeydown={(e) => { e.stopPropagation(); if (e.key === 'Escape') onClose?.(); }}
 >
   {#each ownPlaylists as p (p.id)}
     <TrackMenuItem
diff --git a/web/src/lib/components/FlagPopover.svelte b/web/src/lib/components/FlagPopover.svelte
index 0cf0c613..a19a2890 100644
--- a/web/src/lib/components/FlagPopover.svelte
+++ b/web/src/lib/components/FlagPopover.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from 'svelte';
   import { Flag } from 'lucide-svelte';
   import { useQueryClient } from '@tanstack/svelte-query';
   import { flagTrack } from '$lib/api/quarantine';
@@ -17,12 +18,12 @@
     initialNotes?: string;
   } = $props();
 
-  let reason: LidarrQuarantineReason = $state(initialReason ?? 'bad_rip');
-  let notes = $state(initialNotes ?? '');
+  let reason: LidarrQuarantineReason = $state(untrack(() => initialReason ?? 'bad_rip'));
+  let notes = $state(untrack(() => initialNotes ?? ''));
   let submitting = $state(false);
   let error = $state<string | null>(null);
 
-  const isUpdate = !!initialReason;
+  const isUpdate = $derived(!!initialReason);
   const client = useQueryClient();
 
   async function submit() {
@@ -42,10 +43,12 @@
 
 <div
   role="dialog"
+  tabindex="-1"
   aria-modal="false"
   aria-labelledby="flag-popover-title"
   class="absolute right-0 z-30 mt-1 w-72 rounded-lg border border-border bg-surface p-3 shadow-xl"
   onclick={(e) => e.stopPropagation()}
+  onkeydown={(e) => { e.stopPropagation(); if (e.key === 'Escape') onClose(); }}
 >
   <h4 id="flag-popover-title" class="text-sm font-medium text-text-primary">
     Flag this track as broken
diff --git a/web/src/lib/components/PlaylistTrackRow.svelte b/web/src/lib/components/PlaylistTrackRow.svelte
index 8697b5fb..e14566ab 100644
--- a/web/src/lib/components/PlaylistTrackRow.svelte
+++ b/web/src/lib/components/PlaylistTrackRow.svelte
@@ -49,6 +49,7 @@
 </script>
 
 <div
+  role="listitem"
   class="flex items-center gap-3 px-3 py-2 text-sm transition-colors hover:bg-surface-hover
          {isUnavailable ? 'text-text-muted' : 'text-text-primary'}"
   draggable={isOwner && !isUnavailable}
diff --git a/web/src/lib/components/QueueDrawer.test.ts b/web/src/lib/components/QueueDrawer.test.ts
index dcf09c70..abeae2e4 100644
--- a/web/src/lib/components/QueueDrawer.test.ts
+++ b/web/src/lib/components/QueueDrawer.test.ts
@@ -79,8 +79,9 @@ describe('QueueDrawer', () => {
     openValue = false;
     queueValue = [t('a')];
     render(QueueDrawer);
-    const aside = screen.getByLabelText(/playback queue/i, { hidden: true });
-    expect(aside).toHaveAttribute('aria-hidden', 'true');
+    const aside = document.querySelector('aside[aria-label="Playback queue"]');
+    expect(aside).not.toBeNull();
+    expect(aside!.getAttribute('aria-hidden')).toBe('true');
   });
 
   it('drawer has inert attribute when closed', () => {
diff --git a/web/src/lib/components/RemoveTrackPopover.svelte b/web/src/lib/components/RemoveTrackPopover.svelte
index e3e0060e..180351aa 100644
--- a/web/src/lib/components/RemoveTrackPopover.svelte
+++ b/web/src/lib/components/RemoveTrackPopover.svelte
@@ -55,10 +55,12 @@
 
 <div
   role="dialog"
+  tabindex="-1"
   aria-modal="false"
   aria-labelledby="remove-track-popover-title"
   class="absolute right-0 z-30 mt-1 w-72 rounded-lg border border-border bg-surface p-3 shadow-xl"
   onclick={(e) => e.stopPropagation()}
+  onkeydown={(e) => { e.stopPropagation(); if (e.key === 'Escape') onClose(); }}
 >
   <h4 id="remove-track-popover-title" class="text-sm font-medium text-text-primary">
     Remove "{track.title}" from your library?
diff --git a/web/src/lib/components/TrackMenu.svelte b/web/src/lib/components/TrackMenu.svelte
index 71beab18..dbcbdb53 100644
--- a/web/src/lib/components/TrackMenu.svelte
+++ b/web/src/lib/components/TrackMenu.svelte
@@ -155,9 +155,11 @@
   {#if menuOpen}
     <div
       role="menu"
+      tabindex="-1"
       class="absolute right-0 z-20 w-56 rounded-md border border-border bg-surface p-1 shadow-lg
              {direction === 'up' ? 'bottom-full mb-1' : 'top-full mt-1'}"
       onclick={(e) => e.stopPropagation()}
+      onkeydown={(e) => { e.stopPropagation(); if (e.key === 'Escape') menuOpen = false; }}
     >
       {#if !hideQueueActions}
         <TrackMenuItem icon={ListPlus} label="Play next" onclick={onPlayNext} />
diff --git a/web/src/routes/playlists/+page.svelte b/web/src/routes/playlists/+page.svelte
index 61b7ae7d..32f02663 100644
--- a/web/src/routes/playlists/+page.svelte
+++ b/web/src/routes/playlists/+page.svelte
@@ -16,6 +16,11 @@
   let newName = $state('');
   let creatingBusy = $state(false);
   let createError = $state<string | null>(null);
+  let inputEl: HTMLInputElement | undefined = $state();
+
+  $effect(() => {
+    inputEl?.focus();
+  });
 
   async function submitCreate() {
     if (!newName.trim()) {
@@ -59,9 +64,9 @@
         Name
         <input
           type="text"
+          bind:this={inputEl}
           bind:value={newName}
           placeholder="Saturday morning"
-          autofocus
           class="mt-1 w-full rounded border border-border bg-background px-3 py-1.5 text-sm text-text-primary"
           onkeydown={(e) => { if (e.key === 'Enter') submitCreate(); if (e.key === 'Escape') creating = false; }}
         />