Skip to content

[6.x] Associate ui/Field labels with nested controls - #15573

Merged
jackmcdade merged 3 commits into
6.xfrom
fix/15389-field-label-association
Oct 13, 2026
Merged

jackmcdade merged 3 commits into
6.xfrom
fix/15389-field-label-association

Conversation

@jaygeorge

Copy link
Copy Markdown
Contributor

Description of the Problem

ui/Field passed :for="props.id" to its label, but id was optional and omitted on most call sites (including login). Nested controls generated their own ids via useId(), so the label’s for pointed at nothing and the control had no accessible name.

axe-core reported critical label violations on login, password reset, and other CP screens. WCAG 2.1 SC 1.3.1 and 4.1.2.

What this PR Does

  • Auto-generates a Field id when none is provided, wires it to the label’s for, and exposes a label id for aria-labelledby
  • Lets the first nested control (Input, Textarea, Combobox/Select, Switch, Slider) claim that id via useUiFieldId
  • Does not inject explicit Field ids (e.g. Publish’s field_*), so nested controls inside fieldtypes don’t share duplicate ids
  • Puts Combobox/Select association on the trigger (id + aria-labelledby) when the search input isn’t rendered; puts Slider id on the thumb
  • Adds unit coverage for association, single-claim, explicit-id isolation, and Combobox labelling

Fixes #15389

How to Reproduce

  1. Visit /cp/auth/login (before this PR)
  2. Inspect the Email input: id="v-0" (or similar) while the “Email” label has for=""
  3. Or run axe-core and observe the label violation on both inputs

After this PR, the label’s for matches the input’s id.

Field now generates an id for its label and lets the first nested control
claim it, so screens like login get a proper for/id association without
call-site changes. Explicit Field ids (Publish) are not injected, avoiding
duplicate ids inside fieldtypes.
@jackmcdade

Copy link
Copy Markdown
Member

@copilot resolve the merge conflicts in this pull request

Co-authored-by: jackmcdade <44739+jackmcdade@users.noreply.github.com>

Copilot AI commented Oct 13, 2026

Copy link
Copy Markdown
Contributor

@copilot resolve the merge conflicts in this pull request

Resolved the 6.x merge conflict in Switch.vue, preserving both Field id association and the newer standalone accessible-name behavior. Merge commit: $(git rev-parse --short HEAD). The focused Field/Switch tests pass.

@jackmcdade
jackmcdade enabled auto-merge (squash) October 13, 2026 21:19
@jackmcdade
jackmcdade merged commit fbb8169 into 6.x Oct 13, 2026
63 of 64 checks passed
@jackmcdade
jackmcdade deleted the fix/15389-field-label-association branch October 13, 2026 21:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ui/Field label is not associated with its control on 37 of 48 call sites, including login

3 participants