test(frontend): cover the lifecycle, the voice and the repaints

Component and store cases for everything in this series, several of
which exist because the thing they pin is invisible everywhere else:

- `view-lifecycle` and `keyboard-reach` — a document listener count
  that does not grow across a simulated navigate cycle, and a tab
  sequence that reaches the sidebar and plays a row without a mouse.
- `notifications`, `notification-store`, `confirm-dialog`,
  `empty-states` — the four levels, the (level, region, key)
  coalescing window, and loading/failed/empty as three states.
- `card-grid-repaint` — fails if `artists-view`'s or `genres-view`'s
  per-render arrow functions are hoisted to stable fields, which is
  the audit's own recommendation and takes the cards from 1 highlighted
  to 0. It exists for no other reason.
- `lazy-track-details` — reads the five sources and fails on a
  returning static import, the same shape as `TestNoDirectRuntimeEmits`
  and for the same reason: the invariant is about what the code does
  *not* say.
- `now-playing` — a position report that changes nothing must not
  touch the DOM again, and a track change must. The first fails
  against the old unconditional `updated()`.
- `playlist-virtualization`, `list-render-cost`, `selection`, `icons`,
  and the store cases for the library-filter race, the never-settling
  waiter and the per-playlist patch.

frontend/test/components/keyboard-reach.test.ts

@@ -0,0 +1,115 @@
+/**
+ * Keyboard reachability.
+ *
+ * Tabbing through the whole app used to yield fourteen stops, every one
+ * of them chrome: the sidebar was a list of `<li @click>`, a track list
+ * had no tab stop at all, and the *closed* queue panel still had two
+ * (`.planning/audits/2026-08-11-ui/hands-on.md`, H-5).
+ */
+import { describe, expect, it, beforeEach } from 'vitest';
+
+import '@components/sidebar/app-sidebar';
+import '@components/queue-panel/queue-panel';
+import '@components/track-list/track-list';
+import { stub } from '@test/support/harness';
+import { fixture, shadow, shadowAll, update } from '@test/support/render';
+
+/** Two fixture tracks, enough to move a focus ring between. */
+const TRACKS = [
+  {
+    FilePath: '/music/a.mp3',
+    TrackName: 'Alpha',
+    ArtistName: 'One',
+    Album: 'First',
+    Duration: 100,
+  },
+  {
+    FilePath: '/music/b.mp3',
+    TrackName: 'Beta',
+    ArtistName: 'Two',
+    Album: 'First',
+    Duration: 120,
+  },
+] as never[];
+
+describe('<app-sidebar> is reachable', () => {
+  it('renders every destination as a button, not a bare list item', async () => {
+    const el = await fixture('app-sidebar');
+
+    const items = shadowAll(el, 'li button');
+
+    expect(items).toHaveLength(11);
+    expect(items.every((item) => item.tagName === 'BUTTON')).toBe(true);
+  });
+
+  it('puts the nav in a landmark, so it can be jumped to', async () => {
+    const el = await fixture('app-sidebar');
+
+    expect(shadow(el, 'nav')?.getAttribute('aria-label')).toBe('Main');
+  });
+});
+
+describe('<queue-panel> when closed', () => {
+  it('is inert, so its buttons are not tab stops', async () => {
+    const el = await fixture('queue-panel');
+
+    expect(el.inert).toBe(true);
+  });
+
+  it('is not inert once opened', async () => {
+    const el = await fixture('queue-panel');
+
+    await update(el, { open: true });
+
+    expect(el.inert).toBe(false);
+  });
+});
+
+describe('<track-list> roving tabindex', () => {
+  beforeEach(() => {
+    stub('library.Library.GetAllTracks', TRACKS);
+  });
+
+  it('offers exactly one tab stop, however many rows there are', async () => {
+    const el = await fixture('track-list', { externalTracks: TRACKS });
+
+    const stops = shadowAll(el, '.track-row[tabindex="0"]');
+
+    expect(stops).toHaveLength(1);
+  });
+
+  it('gives the rows grid semantics rather than none', async () => {
+    const el = await fixture('track-list', { externalTracks: TRACKS });
+
+    const row = shadow(el, '.track-row');
+
+    expect({
+      row: row?.getAttribute('role'),
+      grid: shadow(el, '.table-container')?.getAttribute('role'),
+      cell: shadow(el, '.track-row .cell')?.getAttribute('role'),
+    }).toEqual({ row: 'row', grid: 'grid', cell: 'gridcell' });
+  });
+
+  it('moves the tab stop with the arrow keys', async () => {
+    const el = await fixture('track-list', { externalTracks: TRACKS });
+
+    shadow(el, '.table-container')?.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        key: 'ArrowDown',
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    await el.updateComplete;
+
+    expect(
+      shadow(el, '.track-row[tabindex="0"]')?.getAttribute('data-index'),
+    ).toBe('1');
+  });
+
+  it('claims the tracklist shortcut scope while it is on screen', async () => {
+    const el = await fixture('track-list', { externalTracks: TRACKS });
+
+    expect(el.dataset['shortcutScope']).toBe('tracklist');
+  });
+});