Skip to content

fix(NumberField): add labelledBy prop for aria-labelledby on spinbutton - #640

Open
sridhar-3009 wants to merge 2 commits into
vuetifyjs:masterfrom
sridhar-3009:fix/numberfield-aria-labelledby-accessible-name
Open

fix(NumberField): add labelledBy prop for aria-labelledby on spinbutton#640
sridhar-3009 wants to merge 2 commits into
vuetifyjs:masterfrom
sridhar-3009:fix/numberfield-aria-labelledby-accessible-name

Conversation

@sridhar-3009

Copy link
Copy Markdown
Contributor

Summary

  • NumberField.Control only supports accessible naming via the label string prop (rendered as aria-label). Consumers who render a visible <label> element outside the component cannot wire it to the spinbutton, and omitting label silently produces a spinbutton with no accessible name — a WCAG 4.1.2 failure
  • Adds labelledBy string prop to NumberField.Root that flows through context to NumberField.Control and renders as aria-labelledby on the spinbutton
  • When labelledBy is set, aria-label is suppressed to avoid redundant or conflicting accessible names

What changed

  • NumberFieldRoot.vue: labelledBy?: string added to NumberFieldRootProps and NumberFieldRootContext; destructured in defineProps and threaded through context
  • NumberFieldControl.vue: aria-label is now conditional on labelledBy being absent; aria-labelledby set from root.labelledBy when present
  • index.test.ts: three new tests — aria-labelledby set from prop, aria-label suppressed when labelledBy is present, aria-label absent when neither prop is provided

Test plan

  • labelledBy="my-label"aria-labelledby="my-label" on the spinbutton
  • label="Quantity" labelledBy="my-label"aria-labelledby wins, no aria-label
  • No props → no aria-label on spinbutton
  • All 138 NumberField tests pass

Fixes a WCAG 4.1.2 gap where consumers with visible external labels had no way to wire them to the spinbutton.

NumberField.Control exposed aria-label only through the label string
prop, making it impossible for consumers with a visible external
<label> element to produce a correct aria-labelledby association.

Add a labelledBy prop to NumberField.Root (and context) that renders
as aria-labelledby on the spinbutton; when labelledBy is set, aria-label
is suppressed to avoid redundant or conflicting accessible names.

New tests cover: aria-labelledby set from prop, aria-label suppressed
when labelledBy is present, and aria-label absent when neither prop
is provided.
@github-actions

github-actions Bot commented Jul 18, 2026

Copy link
Copy Markdown
Contributor

Changeset found — this change will be included in the next release. Thanks!

@sridhar-3009

Copy link
Copy Markdown
Contributor Author

Retriggering CI — the failing checks were GitHub Actions runner-capacity timeouts ("job was not acquired by Runner of type hosted after multiple attempts"), not content-related.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

C: NumberField T: bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants