logan
5830b1ba17
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.
116 lines
3.3 KiB
TypeScript
116 lines
3.3 KiB
TypeScript
/**
|
|
* 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');
|
|
});
|
|
});
|