feat(a11y): give the context menu a keyboard, and the app a voice

The context menu was the only route to Play, Add to Queue, Play Next,
Add to Playlist, Favourite and Track Details, and it opened on
right-click alone: the panel had no role=menu, so its six menuitems were
orphaned, nothing moved focus into it, and nothing handled arrows or
Escape (a11y.3). Phase 1 deferred this deliberately so it would land
with the dialogs, as one focus-management implementation.

MenuKeyboard is that model. It is standalone rather than part of
ContextMenuController because playlist-view renders a menu without the
controller, and the only thing worse than a menu with no keyboard model
is two menus with two of them. Shift+F10 and the ContextMenu key open it
from a focused row, anchored to that row, and focus returns there.

Three lists had no focused row to open it from, so they gained a roving
tab stop (utils/roving-rows.ts, written once rather than three times).
track-list keeps its own: it predates this, carries selection semantics
the other three do not have, and is pinned by its own tests.

Also the ARIA tail this is one story with: aria-sort on the column
headers (role=columnheader arrived in Phase 1 without it), listbox and
option on the four selectable grids — aria-selected on role=button is
invalid and was being dropped, so the state the whole ctrl/shift
interaction exists to produce was invisible — and live regions on the
four async surfaces that changed in silence.

Two things a reproduction taught that reading could not: the
wa-dropdown-items have not set their role when the host's updateComplete
resolves, so querying by role then finds nothing and the menu opens
without taking focus; and focus() on a popup that has not positioned
itself is a silent no-op.

frontend/src/components/playlist-details/playlist-details.ts

@@ -31,8 +31,10 @@ import type { SelectionHost } from '@utils/selection-controller';
 import {
     ContextMenuController,
     contextMenuStyles,
+    isContextMenuKey,
 } from '@utils/context-menu-controller.js';
 import type { ContextMenuHost } from '@utils/context-menu-controller.js';
+import { focusRovingRow, nextRovingIndex } from '@utils/roving-rows';
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import { notificationStore } from '@store/notification-store';
 import { describeError } from '@utils/describe-error';
@@ -342,6 +344,51 @@ export class PlaylistDetails
         );
     }
 
+
+    /** The row holding the roving tab stop. Rows had no keyboard path at
+     *  all before this: not focusable, so Shift+F10 had nowhere to fire
+     *  from and the menu was right-click only (a11y.3). */
+    @state() private focusedIndex = 0;
+
+    private onRowKeydown(e: KeyboardEvent, trackIndex: number): void {
+        const count = this.tracks.length;
+
+        if (count === 0) return;
+
+        const row = e.currentTarget as HTMLElement | null;
+
+        if (isContextMenuKey(e) && row) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.selection.handleContextMenu(String(trackIndex));
+            this.ctxMenu.openFrom(row);
+
+            return;
+        }
+
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            this.handleTrackDblClick(trackIndex);
+
+            return;
+        }
+
+        const next = nextRovingIndex(e.key, this.focusedIndex, count);
+
+        if (next === null) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+        this.focusedIndex = next;
+        void focusRovingRow(
+            this,
+            this.virtualizer,
+            next,
+            (i) => `.track-item[data-index="${i}"]`,
+        );
+    }
+
     private handleTrackDblClick(trackIndex: number) {
         this.selection.clear();
 
@@ -1364,6 +1411,9 @@ export class PlaylistDetails
             </div>
             <lit-virtualizer
                 class="track-scroller"
+                role="listbox"
+                aria-label="Playlist tracks"
+                aria-multiselectable="true"
                 .items=${visibleTracks}
                 .renderItem=${this.renderRow}
                 .keyFunction=${this.rowKey}
@@ -1397,6 +1447,12 @@ export class PlaylistDetails
                     return html`
                         <div
                             class=${classes}
+                            role="option"
+                            aria-selected=${selected}
+                            data-index=${trackIndex}
+                            tabindex=${trackIndex === this.focusedIndex ? 0 : -1}
+                            @keydown=${(e: KeyboardEvent) =>
+                                this.onRowKeydown(e, trackIndex)}
                             draggable=${isPhantom
                                 ? 'false'
                                 : 'true'}
@@ -1526,7 +1582,7 @@ export class PlaylistDetails
                 ${this.ctxMenu.contextMenuOpen
                     ? this.isPhantomSelection()
                         ? html`
-                              <div class="context-menu-panel">
+                              <div class="context-menu-panel" role="menu" aria-label="Track actions">
                                   <wa-dropdown-item
                                       @click=${() =>
                                           this.onContextMenuAction(
@@ -1556,7 +1612,7 @@ export class PlaylistDetails
                               </div>
                           `
                         : html`
-                              <div class="context-menu-panel">
+                              <div class="context-menu-panel" role="menu" aria-label="Track actions">
                                   <wa-dropdown-item
                                       @click=${() =>
                                           this.onContextMenuAction(