Skip to content

fix(VTextField): remove redundant aria-labelledby from input - #23076

Open
waterWang wants to merge 1 commit into
vuetifyjs:masterfrom
waterWang:fix/21914-vtextfield-a11y-label-duplication
Open

fix(VTextField): remove redundant aria-labelledby from input#23076
waterWang wants to merge 1 commit into
vuetifyjs:masterfrom
waterWang:fix/21914-vtextfield-a11y-label-duplication

Conversation

@waterWang

Copy link
Copy Markdown
Contributor

Description

Fixes #21914

The input element had an aria-labelledby attribute referencing the main label by id. When the field is active, the main label has aria-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:

  1. Floating label (visible when active) — has for={id}
  2. Main label (visible when inactive) — has id={id}-label

The aria-labelledby=\{id}-label\ on the input always references the main label. When the field is active, the main label is aria-hidden="true", making the aria-labelledby reference redundant — the native <label for> association already provides the correct accessible name.

Fix

Removed the aria-labelledby attribute from the <input> element in VTextField.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

  • ✅ Vuetify build passes
  • ✅ All 9 VTextField unit tests pass
  • ✅ No visual changes

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
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 Report][3.9.5] VTextField: a11y issues with labels

1 participant