fix(a11y): name every form control in Settings
Measured with Accessibility.getFullAXTree against the running app with all seven sections expanded: 24 of 93 controls computed an empty name. Every config-field select and toggle, and all eighteen track-list column checkboxes, had a <label> sitting right beside them with nothing associating the two. Now 0 of 93. Not in the audit, and a11y.6 says why in its own line: it scanned every <button>, and none of these is one. Same shape as the count that sent Phase 1 looking for an unnamed sort control — the claim was answering a narrower question than it reads as. The fields use `for`/`id` rather than aria-label, for what it buys beyond the name: the label text becomes a click target for the control. A fixed id is safe only because each config-field is its own shadow root. Two more are named but identify nothing, which is a11y.32's complaint one page over: three shortcut buttons announced themselves as "S", and thirty-six column arrows as "Move up".
This commit is contained in:
@@ -1,6 +1,26 @@
|
||||
import { LitElement, html, css, nothing } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
|
||||
/**
|
||||
* The id every field's control carries, so its `<label>` can name it.
|
||||
*
|
||||
* The label was a *sibling* of the control with no `for`, which names
|
||||
* nothing — so every select, toggle and text field in Settings computed
|
||||
* an empty accessible name. Measured on the expanded Settings page:
|
||||
* **24 of 93 controls unnamed**, six of them here and the rest the
|
||||
* column toggles in `config-page`. `a11y.6` is not wrong about this;
|
||||
* it says in the same line that it scanned every `<button>`, and none
|
||||
* of these is one.
|
||||
*
|
||||
* A fixed id is safe, and only because each `config-field` is its own
|
||||
* shadow root — the whole page renders a dozen elements with
|
||||
* `id="control"` and each `for` resolves within its own root. It is
|
||||
* preferred over `aria-label` for what it buys beyond the name: a real
|
||||
* label association also makes the label text a click target for the
|
||||
* control, which is behaviour, not annotation.
|
||||
*/
|
||||
const CONTROL_ID = 'control';
|
||||
|
||||
/**
|
||||
* Schema describing a single config field.
|
||||
*
|
||||
@@ -225,7 +245,9 @@ export class ConfigField extends LitElement {
|
||||
${this.schema.type === 'toggle'
|
||||
? this.renderToggle()
|
||||
: html`
|
||||
<label>${this.schema.label}</label>
|
||||
<label for=${CONTROL_ID}>
|
||||
${this.schema.label}
|
||||
</label>
|
||||
${this.renderInput()}
|
||||
`}
|
||||
${this.schema.description
|
||||
@@ -257,6 +279,7 @@ export class ConfigField extends LitElement {
|
||||
private renderText() {
|
||||
return html`
|
||||
<input
|
||||
id=${CONTROL_ID}
|
||||
type="text"
|
||||
.value=${String(this.value ?? '')}
|
||||
?disabled=${this.schema.disabled}
|
||||
@@ -268,6 +291,7 @@ export class ConfigField extends LitElement {
|
||||
private renderNumber() {
|
||||
return html`
|
||||
<input
|
||||
id=${CONTROL_ID}
|
||||
type="number"
|
||||
.value=${String(this.value ?? '')}
|
||||
?disabled=${this.schema.disabled}
|
||||
@@ -281,6 +305,7 @@ export class ConfigField extends LitElement {
|
||||
|
||||
return html`
|
||||
<select
|
||||
id=${CONTROL_ID}
|
||||
?disabled=${this.schema.disabled}
|
||||
@change=${this.onSelectChange}
|
||||
>
|
||||
@@ -304,6 +329,7 @@ export class ConfigField extends LitElement {
|
||||
return html`
|
||||
<div class="color-wrapper">
|
||||
<input
|
||||
id=${CONTROL_ID}
|
||||
type="color"
|
||||
.value=${hex}
|
||||
?disabled=${this.schema.disabled}
|
||||
@@ -318,11 +344,13 @@ export class ConfigField extends LitElement {
|
||||
return html`
|
||||
<div class="input-row">
|
||||
<input
|
||||
id=${CONTROL_ID}
|
||||
type="text"
|
||||
.value=${String(this.value ?? '')}
|
||||
readonly
|
||||
/>
|
||||
<button
|
||||
aria-label="Browse for ${this.schema.label}"
|
||||
?disabled=${this.schema.disabled}
|
||||
@click=${this.onBrowseClick}
|
||||
>
|
||||
@@ -337,9 +365,10 @@ export class ConfigField extends LitElement {
|
||||
|
||||
return html`
|
||||
<div class="toggle-row">
|
||||
<label>${this.schema.label}</label>
|
||||
<label for=${CONTROL_ID}>${this.schema.label}</label>
|
||||
<label class="toggle-switch">
|
||||
<input
|
||||
id=${CONTROL_ID}
|
||||
type="checkbox"
|
||||
?checked=${checked}
|
||||
?disabled=${this.schema.disabled}
|
||||
|
||||
@@ -1693,6 +1693,9 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
|
||||
const isLast =
|
||||
idx === order.length - 1;
|
||||
|
||||
const columnLabel =
|
||||
COLUMN_DEFS[id]?.label ?? id;
|
||||
|
||||
return html`
|
||||
<li
|
||||
class="column-item ${checked ? 'enabled' : 'disabled'}"
|
||||
@@ -1700,6 +1703,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
|
||||
<input
|
||||
type="checkbox"
|
||||
class="column-toggle"
|
||||
aria-label="Show the ${columnLabel} column"
|
||||
.checked=${checked}
|
||||
?disabled=${onlyOne}
|
||||
@change=${() =>
|
||||
@@ -1710,9 +1714,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
|
||||
<span
|
||||
class="column-label"
|
||||
>
|
||||
${COLUMN_DEFS[id]
|
||||
?.label ??
|
||||
id}
|
||||
${columnLabel}
|
||||
</span>
|
||||
<span
|
||||
class="column-arrows"
|
||||
@@ -1723,6 +1725,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
|
||||
<button
|
||||
class="column-arrow-btn"
|
||||
title="Move up"
|
||||
aria-label="Move ${columnLabel} up"
|
||||
@click=${() =>
|
||||
this.handleColumnMove(
|
||||
id,
|
||||
@@ -1738,6 +1741,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
|
||||
<button
|
||||
class="column-arrow-btn"
|
||||
title="Move down"
|
||||
aria-label="Move ${columnLabel} down"
|
||||
@click=${() =>
|
||||
this.handleColumnMove(
|
||||
id,
|
||||
@@ -1812,6 +1816,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
|
||||
</span>
|
||||
<shortcut-capture
|
||||
.action=${action}
|
||||
.label=${meta.label}
|
||||
.currentKey=${bindings.get(
|
||||
action,
|
||||
) ?? ''}
|
||||
|
||||
@@ -8,6 +8,17 @@ export class ShortcutCapture extends LitElement {
|
||||
@property() currentKey = '';
|
||||
@property() defaultKey = '';
|
||||
|
||||
/**
|
||||
* What the binding does, for the name.
|
||||
*
|
||||
* The button's text is the *key* — so the shortcuts list rendered
|
||||
* three buttons called "S", two called "Down" and one called "?",
|
||||
* beside a visible label that named none of them (it is a sibling,
|
||||
* in another shadow root, and nothing associated the two). The
|
||||
* label is what a control is for; the key is its value.
|
||||
*/
|
||||
@property() label = '';
|
||||
|
||||
@state() private recording = false;
|
||||
|
||||
static override styles = css`
|
||||
@@ -134,6 +145,9 @@ export class ShortcutCapture extends LitElement {
|
||||
: this.currentKey
|
||||
? ''
|
||||
: 'not-set'}
|
||||
aria-label=${this.label
|
||||
? `${this.label} shortcut: ${this.currentKey || 'not set'}`
|
||||
: ''}
|
||||
@click=${this.handleClick}
|
||||
@keydown=${this.handleKeydown}
|
||||
@blur=${this.handleBlur}
|
||||
@@ -148,6 +162,8 @@ export class ShortcutCapture extends LitElement {
|
||||
class="reset-btn"
|
||||
@click=${this.handleReset}
|
||||
title="Reset to default (${this.defaultKey})"
|
||||
aria-label="Reset ${this.label ||
|
||||
this.action} to ${this.defaultKey}"
|
||||
>
|
||||
\u21BA
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user