fix(NumberField): add labelledBy prop for aria-labelledby on spinbutton#640
Open
sridhar-3009 wants to merge 2 commits into
Open
Conversation
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.
Contributor
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
NumberField.Controlonly supports accessible naming via thelabelstring prop (rendered asaria-label). Consumers who render a visible<label>element outside the component cannot wire it to the spinbutton, and omittinglabelsilently produces a spinbutton with no accessible name — a WCAG 4.1.2 failurelabelledBystring prop toNumberField.Rootthat flows through context toNumberField.Controland renders asaria-labelledbyon the spinbuttonlabelledByis set,aria-labelis suppressed to avoid redundant or conflicting accessible namesWhat changed
NumberFieldRoot.vue:labelledBy?: stringadded toNumberFieldRootPropsandNumberFieldRootContext; destructured indefinePropsand threaded through contextNumberFieldControl.vue:aria-labelis now conditional onlabelledBybeing absent;aria-labelledbyset fromroot.labelledBywhen presentindex.test.ts: three new tests —aria-labelledbyset from prop,aria-labelsuppressed whenlabelledByis present,aria-labelabsent when neither prop is providedTest plan
labelledBy="my-label"→aria-labelledby="my-label"on the spinbuttonlabel="Quantity" labelledBy="my-label"→aria-labelledbywins, noaria-labelaria-labelon spinbuttonFixes a WCAG 4.1.2 gap where consumers with visible external labels had no way to wire them to the spinbutton.