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.
This commit is contained in:
@@ -11,6 +11,7 @@ import {
|
||||
import { PlayerController } from '@store/controllers/player-controller';
|
||||
import { FavoritesController } from '@store/controllers/favorites-controller';
|
||||
import { designTokens } from '../../styles/tokens.css';
|
||||
import { srOnly } from '../../styles/sr-only.css';
|
||||
|
||||
// H-17: at 200 px the artist truncated to "The Orchestra Of" while
|
||||
// ~400 px of empty space sat between it and the transport controls.
|
||||
@@ -74,7 +75,7 @@ export class NowPlaying extends LitElement {
|
||||
private lastGeometryKey = '';
|
||||
private geometryDirty = true;
|
||||
|
||||
static override styles = [designTokens, exploreLinkStyles, css`
|
||||
static override styles = [designTokens, srOnly, exploreLinkStyles, css`
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
@@ -287,9 +288,16 @@ export class NowPlaying extends LitElement {
|
||||
|
||||
override render() {
|
||||
const track = this.player.currentTrack;
|
||||
// Auto-advance changes the track with no announcement of any
|
||||
// kind (a11y.12). The region is in both branches because it has
|
||||
// to already exist when the *first* track arrives.
|
||||
const announcement = track
|
||||
? `Now playing: ${track.title}${track.artist ? ` by ${track.artist}` : ''}`
|
||||
: '';
|
||||
|
||||
if (!track) {
|
||||
return html`
|
||||
<div class="sr-only" role="status" aria-live="polite">${announcement}</div>
|
||||
<div class="now-playing">
|
||||
<div class="cover-art">
|
||||
<div class="cover-placeholder"><wa-icon name="music"></wa-icon></div>
|
||||
@@ -311,6 +319,7 @@ export class NowPlaying extends LitElement {
|
||||
const artistScrolling = this.shouldScroll('artist');
|
||||
|
||||
return html`
|
||||
<div class="sr-only" role="status" aria-live="polite">${announcement}</div>
|
||||
<div class="now-playing">
|
||||
<div class="cover-art-wrapper">
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user