logan
1ed4167634
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.
30 lines
957 B
TypeScript
30 lines
957 B
TypeScript
import { css } from 'lit';
|
|
|
|
/**
|
|
* The visually-hidden class, and with it the rule for using one.
|
|
*
|
|
* A live region has to be **in the DOM before the text it announces
|
|
* is**: most screen readers announce a *change* to a region they are
|
|
* already watching, and ignore a region that appears with its content
|
|
* already in it. So these regions render unconditionally and empty, and
|
|
* only their text changes — which is why they are a class rather than a
|
|
* component that mounts on demand.
|
|
*
|
|
* `clip-path` rather than `display: none` or `visibility: hidden`, both
|
|
* of which take the element out of the accessibility tree along with the
|
|
* layout, which would defeat the point.
|
|
*/
|
|
export const srOnly = css`
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
`;
|