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:
2026-08-13 01:52:08 -04:00
parent b7831e3f15
commit f00d0c4655
4 changed files with 171 additions and 5 deletions
@@ -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,
) ?? ''}