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:
@@ -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,
|
||||
) ?? ''}
|
||||
|
||||
Reference in New Issue
Block a user