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

Copy link
Copy Markdown
Contributor

⚠️ No changeset found

This PR changes packages/* source but has no changeset, so it won't be in the next release's version bump or notes. Add one:

pnpm changeset

Pick the affected package(s) — @vuetify/v0 carries @vuetify/paper automatically; @paper/genesis (and other @paper/* design systems) version separately — a bump type, and a short summary, then commit the generated .changeset/*.md. Docs-only, chore, or CI PRs can ignore this.

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.

1 participant