[Bug Report][3.3.4] VSelect: poor accessibility with NVDA and Firefox

[paul-thebaud]

Environment

Vuetify Version: 3.3.4 Vue Version: 3.3.4 Browsers: Mozilla Firefox OS: Windows 10

Steps to reproduce

• Install and open NVDA. I'm using default configuration on the french version of the software.
• Open playground in Firefox.
• Try to use the select input using keyboard and listen for audio feedback.

Expected Behavior

Select input should be treated as any classical select input. Just check the other native HTML select to see the normal behavior.

Actual Behavior

There are a lot of problems:

• When NVDA is running, user cannot switch selected item using Arrow Up/Down keys
• The input is stated a readonly text input by NVDA instead of a select list (probably due to internal input HTML element used by Vuetify)
• When a value is selected, NVDA will pronounce the item's value as the selected value instead of the item's title (or real select content).

Reproduction Link

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

Other comments

Because most users using NVDA are also using Firefox, this currently makes the select input unusable by any of those users. I don't know if there are other screen readers impacted.

[paul-thebaud]

Some additional information which might help you with this one: Here is a listbox tutorial from MDN docs. Maybe it will be a good idea to follow their recommandations.

[paul-thebaud]

Adding details about VAutocomplete. Since the VList and VSelect update, the focus is moved out from select when choosing item inside the list, and restored. Because of this, when a user select an item, he must unfocus the field (tab) and refocus to be able to input text inside again. A suggestion: VList should not handle focus anymore, and events should be at the input level to avoid those problems. This will also allow to implement correct role listbox.

[paul-thebaud]

Adding details again: problem is also occuring with Orca+Chrome on Ubuntu.

[cmooreDT]

I'm having a similar issue. The Mac OS VoiceOver is reading the value of the select rather than the title. It also isn't announcing the label. For example, if a user tabs to a select box labeled "Sort by" with the default selected option being "A to Z"/internal value "atoz", the screen reader reads "atoz". It's also not announcing the label at any point.

When keyboard scrolling through the select menu options, the screen reader does announce the correct text/selected option (ie "A to Z").