fix(VTextField): remove redundant aria-labelledby from input - #23076
Open
waterWang wants to merge 1 commit into
Open
fix(VTextField): remove redundant aria-labelledby from input#23076waterWang wants to merge 1 commit into
waterWang wants to merge 1 commit into
Conversation
The input had aria-labelledby referencing the main label, which is aria-hidden=true when the field is active. The floating label already provides the accessible name via the native <label for> association. This dual association caused screen readers, especially Safari VoiceOver, to read the label text multiple times (up to 5x). Fixes vuetifyjs#21914
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.
Description
Fixes #21914
The input element had an
aria-labelledbyattribute referencing the main label by id. When the field is active, the main label hasaria-hidden="true"while the floating label already provides the accessible name via the native<label for>association.This dual association caused screen readers, especially Safari VoiceOver, to read the label text multiple times — up to 5× for a single text field.
Root Cause
In
VField.tsx, two label elements are rendered:for={id}id={id}-labelThe
aria-labelledby=\{id}-label\on the input always references the main label. When the field is active, the main label isaria-hidden="true", making thearia-labelledbyreference redundant — the native<label for>association already provides the correct accessible name.Fix
Removed the
aria-labelledbyattribute from the<input>element inVTextField.tsx. The native<label for>association on the label that is currently visible (floating when active, main when inactive) handles the accessible name correctly.Testing