Skip to content

fix(NumberField): default the spinbutton's accessible name - #763

Open
sridhar-3009 wants to merge 1 commit into
vuetifyjs:masterfrom
sridhar-3009:fix/numberfield-spinbutton-accessible-name-741
Open

fix(NumberField): default the spinbutton's accessible name#763
sridhar-3009 wants to merge 1 commit into
vuetifyjs:masterfrom
sridhar-3009:fix/numberfield-spinbutton-accessible-name-741

Conversation

@sridhar-3009

Copy link
Copy Markdown
Contributor

Closes #741.

NumberField's role="spinbutton" input reads aria-label from root.label, but that prop has no default — and aria-labelledby requires the consumer to point at an existing element. The shape NumberField's own @example documents supplies neither, so the spinbutton ships with no accessible name at all (axe label, critical).

This is not covered by #640 (labelledBy prop, merged) — that closes the case where a label element exists elsewhere in the DOM, but does nothing when the consumer supplies no naming mechanism at all, which is exactly the documented default shape.

Fix

NumberField.Control now falls back to locale.ti('NumberField.label') ?? 'Number' when neither label nor ariaLabelledby is set — matching the precedent already used by the increment/decrement buttons (NumberField.increment / NumberField.decrement), which are already named this way. A consumer-supplied label still wins, and ariaLabelledby still suppresses aria-label entirely.

Tests

  • Replaced the (now-incorrect) 'should not set aria-label when no label prop is provided' test with one asserting the default fallback.
  • Added a test confirming an explicit label prop still wins over the default.

139 existing + new component tests pass.

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.

[Bug] NumberField: spinbutton input has no accessible name in its documented shape

1 participant