yonlu/yellowjacket
1
1
Fork 0
Code Issues 52 Pull Requests 4 Actions Packages Projects Releases 12 Wiki Activity

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

Browse Source 
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.
This commit is contained in:
logan
2026-08-12 11:07:34 -04:00
parent 7912cdf23f
commit 1ed4167634
16 changed files with 1160 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/track-list/track-list.ts
+60 -3
View File
@@ -1,6 +1,7 @@
import { library } from '@go/models';
import { LitElement, html, svg, css, nothing } from 'lit';
import { designTokens } from '../../styles/tokens.css';
import { srOnly } from '../../styles/sr-only.css';
import {
customElement,
property,
@@ -13,6 +14,7 @@ import { ViewLifecycleMixin } from '@utils/view-lifecycle';
import {
ContextMenuController,
contextMenuStyles,
isContextMenuKey,
} from '@utils/context-menu-controller.js';
import type { ContextMenuHost } from '@utils/context-menu-controller.js';
@@ -231,6 +233,24 @@ export class TrackList
let next = this.focusedIndex;
// The menu is most of what a row can do, and it was reachable
// only by right-click (a11y.3).
if (isContextMenuKey(e)) {
const track = this.cachedSortedTracks[this.focusedIndex];
const row = e.target instanceof HTMLElement
? e.target.closest<HTMLElement>('[role="row"]')
: null;
if (!track || !row) return;
e.preventDefault();
e.stopPropagation();
this.selection.handleContextMenu(track.FilePath);
this.ctxMenu.openFrom(row);
return;
}
switch (e.key) {
case 'ArrowDown':
next = Math.min(this.focusedIndex + 1, last);
@@ -877,7 +897,7 @@ export class TrackList
this.requestUpdate();
};
static override styles = [designTokens, contextMenuStyles, exploreLinkStyles, css`
static override styles = [designTokens, srOnly, contextMenuStyles, exploreLinkStyles, css`
:host {
display: flex;
flex-direction: column;
@@ -1316,6 +1336,28 @@ export class TrackList
}
}
/**
* What a screen reader is told about this list, in a sentence.
*
* Loading, failed, empty and "n results for a search" were all
* silent — the list said them in text nobody was watching (a11y.12).
*/
private liveStatus(visible: number): string {
if (this.loadError) return this.loadError;
if (this.loadingTracks) return 'Loading tracks…';
if (this.tracks.length === 0) return 'No tracks.';
const term = this.searchCtrl.term.trim();
if (term === '') return '';
return visible === 0
? `No tracks match “${term}”.`
: `${visible} track${visible === 1 ? '' : 's'} match “${term}”.`;
}
/** Loading / failed / genuinely empty, said apart. */
private renderPlaceholder() {
if (this.loadError) {
@@ -1858,6 +1900,9 @@ export class TrackList
return html`
${this.renderPageHeader()}
<div class="sr-only" role="status" aria-live="polite">
${this.liveStatus(visibleTracks.length)}
</div>
${this.tracks.length === 0
? this.renderPlaceholder()
: html`
@@ -1866,19 +1911,31 @@ export class TrackList
role="grid"
aria-label="Tracks"
aria-rowcount=${visibleTracks.length}
aria-busy=${this.loadingTracks}
@keydown=${this.onListKeydown}
>
<div class="header-row" role="row">
<div role="columnheader"></div>
<div role="columnheader" aria-label="Favourite"></div>
${cols.map(
(col) => html`
<div
role="columnheader"
tabindex="0"
aria-sort=${this.sortField === col.id
? (this.sortDirection === 'asc' ? 'ascending' : 'descending')
: 'none'}
class="header-cell ${col.align === 'right' ? 'cell-right' : ''}"
@click=${() =>
this.onHeaderCellClick(
col.id,
)}
@keydown=${(e: KeyboardEvent) => {
if (e.key !== 'Enter' && e.key !== ' ') return;
e.preventDefault();
e.stopPropagation();
this.onHeaderCellClick(col.id);
}}
>
<span>${col.label}</span>
${this.sortField === col.id
@@ -1930,7 +1987,7 @@ export class TrackList
>
${this.ctxMenu.contextMenuOpen
? html`
<div class="context-menu-panel">
<div class="context-menu-panel" role="menu" aria-label="Track actions">
<wa-dropdown-item
@click=${() => this.onContextMenuAction('play')}
@mouseenter=${() => this.ctxMenu.closePlaylistSubmenu()}