[Bug Report][3.5.2] Screenreader never gets information about the label of a V-TextField / V-Select / etc.

[Martin-Idel]

Environment

Vuetify Version: 3.5.2 Last working version: 2.7.1 Vue Version: 3.4.15 Browsers: Google Chrome, Mozilla Firefox OS: Linux, Windows

Steps to reproduce

Open playground link with Screenreader Tab to v-select and listen. This also affects at least V-Textarea and V-Autocomplete

Expected Behavior

The label is read and indicated as "name" of the combobox.

See e.g. when reading out the example box here: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/

Actual Behavior

Label is never read. Instead, I only get something like "Open editable combobox 'Hello selected'" <-- Open is the label if I see correctly. The "real" label is not indicated as such for the screenreader.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Partially related to https://github.com/vuetifyjs/vuetify/issues/19155

[Martin-Idel]

I did a bit more digging and here is what I see:

• aria-label has to be removed. It is also duplicate, because there is already a title, but even that doesn't make too much sense, once the label is correctly read
• instead, we need aria-labelledby and an ID on the label, even if it has a for attribute.

In addition, I think the following is a problem - and this is similar to what is written here: https://github.com/vuetifyjs/vuetify/issues/18125

• In principle, it should announce something about the state of the combobox, however it doesn't. Maybe (probably?) the aria-owns, role, and aria-expanded properties have to be present only on the input and not on some parent? If the title would be somewhat different (not "Open" or "Close") it seems it could play that role, because at least for me it seems to be announced announcing the content, which is where the state is announced here: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/

[JRBRFED]

Could a CSS solution similar to the d-sr-only class be used to maintain the labelling for Screenreaders? Does not fix the selection issue but does keep the input labelled: .v-field--active .v-field__field .v-label.v-field-label { visibility: initial !important; border: 0 !important; clip: rect(0, 0, 0, 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; }

[smajl]

Sidenote: having aria-label="Open" on the inner input element messes up things in tests like getByLabelText - it doesn't work because of it - we cannot search and target input/selects by labels. It makes no sense to me to put that aria-label on the input (would much rather put it on the caret icon), but I'm no accessibility expert.

[Martin-Idel]

@smajl I agree - I added a PR that solves this. If you want, you can check it out! The aria-label on the input is gone and replaced by "aria-labelledby" on a different correct component.

For us, this PR solves almost all accessibility issues with V-Selects and seems to have no side-effects for non-screenreaders.