fix(a11y): skip aria-labelledby when no label element exists#22729
Open
mixelburg wants to merge 1 commit intovuetifyjs:masterfrom
Open
fix(a11y): skip aria-labelledby when no label element exists#22729mixelburg wants to merge 1 commit intovuetifyjs:masterfrom
mixelburg wants to merge 1 commit intovuetifyjs:masterfrom
Conversation
When VTextField, VTextarea, VSelect, VAutocomplete, and VCombobox are used without a label prop (relying on aria-label instead), the aria-labelledby attribute was still emitted pointing to an element ID that doesn't exist in the DOM. This is an accessibility violation that WAVE and other audit tools flag as a 'broken ARIA reference'. Fix: set aria-labelledby to undefined when neither props.label nor slots.label is present, so the aria-label attribute provides the accessible name instead.
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
1 participant
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.
Fixes #22550
Problem
When VTextField, VTextarea, VSelect, VAutocomplete, or VCombobox are used without a
labelprop (relying onaria-labelinstead),aria-labelledbywas still emitted pointing to${id}-label— an element ID that doesn't exist in the DOM.This is an accessibility violation. WCAG requires that
aria-labelledbyreferences a real element ID. Screen readers may ignore the workingaria-labelwhen a brokenaria-labelledbyis present (browsers preferaria-labelledbyoveraria-label).Practical example:
VDataTableFooterusesVSelectwith onlyaria-label(nolabelprop), causing the "Items per page" combobox to have a broken ARIA reference that WAVE and browser DevTools flag.Fix
Conditionally emit
aria-labelledbyonly whenprops.labelorslots.labelis provided — i.e. when a corresponding label element will actually be rendered with that ID.Files changed
VTextField.tsx— input elementaria-labelledbyVTextarea.tsx— textarea elementaria-labelledbyVSelect.tsx— listbox dropdownaria-labelledbyVAutocomplete.tsx— listbox dropdownaria-labelledbyVCombobox.tsx— listbox dropdownaria-labelledby