[Bug Report][3.3.14] v-select accessibility is not working very well

funkyvisions commented 1 year ago

Environment

Vuetify Version: 3.3.14 Vue Version: 3.3.4 Browsers: Google Chrome OS: Mac OS 10.15.7

Steps to reproduce

Using VoiceOver I get a reading something to the effect of "You are currently in a text field in a button...". It's thinking it's a text input field and that I can type something in it. It doesn't give me any indication that it is a dropdown with selectable items. If I drop the list down, it does read them properly.

Expected Behavior

Don't read out that it's a text input field

Actual Behavior

Reading out that it's a text input field

Reproduction Link

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

Other comments

From Discord:

Kael — Today at 10:57 AM aria-label="Open" overrides , is redundant because screenreaders already say the open state, and is also backwards as it should say what the current state is role=combobox helped but the label thing needs to go it should have aria-expanded to indicate the menu status

Kael — Today at 11:01 AM validators are all shit, did you test it with an actual screenreader? nvda is free on windows, or enable talkback/voiceover on your phone

Kael — Today at 11:10 AM kinda tricky, we need the labels to target this element instead and the input should be aria-hidden in VSelect but not the other two Image

MikalaiPatapovichTR commented 3 months ago

I debugged the v-select component and when custom values are used for items, for example item-title, item-value like: items: [ { state: 'Florida', id: '1' }, { state: 'Georgia', id: '2' }] and then configure item-title="state" and item-value="id" then the item-value (id) values are added as static text in accessibility elements and it turns out that the reader (NVDA screen reader) pronounces not only the title as it was before in version 2, but also the item-value="id", which does not look quite right. StaticText

Perhaps it is possible to add some property to add item-value for reading by screen readers only if it is necessary, for example if item-value is a text value and need to reading for screen reader and disable item-value from accessibility static text if it is necessary.

funkyvisions commented 1 week ago

I reproduced this (see video attachment in next message)

Goto playground link below Turn on screen reader (VoiceOver on iOS) Swipe right until you get to the combobox Double Tap to activate (menu/list appears) Try to swipe right. Combobox closes and switch is focused. (If the switch is removed, then the dropdown list is navigable)

https://play.vuetifyjs.com/#eNp9Ustu2zAQ/BWCF7WAZR9yM5wCbZFDe2iDJLcwB0Jc23QokiCXsgPD/55dKnIeCAIIEjk7Gg5n9/4oc+oWP2OcDwXkUq4Q+ug0wg/lhVgNrY6xLuumCx619ZBeoApmcNChGNo+GHCXSo6ADV5JsbQkmAm8b0wom2Ymml3Yev4+anDNA3EW79T2FrvtGVstPp7KyGhqtXhjlra5SzaiyIBl9Gz7GBKKo0iwFiexTqEXDd2zYboQpJuZ/uJWXDLv2+jzO8uPgiQlZxIz0dd2M9/l4CmoIyso2YU+Wgfpf2SJrORS1ArXtHNh/7dimArMJrzbQvf4Cb7LB8aUvE6QIQ2g5LmGOm0Ax/LV7T840PpcpOCLI/YXxRvIwZWxKUz7Vbwh22941e2fmpj1m7t8dUDweboUG2XmqfKVpBR/f3H1V7sX84v6n/L0UI48brc18mnipgli2qCT1R5pXkJBRz03SjJu2Ao+Ec6BayJXGJNmnI6nig+eMmB4aw20BmhoXOZ9D760lvpHrN7YlhowpOBbE/YUh/J1liYb3O7TzBfn6uvhGT6CCl8=

If I add any other controls after the v-select, then it starts malfunctioning. I cannot get into the list.

I think you almost need to make everything behind the overlay inert. I'm trying this with limited success.

<v-select :menu-props="{ onAfterEnter: onAfterEnter, onAfterLeave: onAfterLeave }" ...>

function onAfterEnter() {
    const vlist = document.querySelector(".v-overlay--active.v-menu .v-list")
    vlist?.focus()
    document.querySelector(".v-application").setAttribute("inert", "true")
}

function onAfterLeave() {
    document.querySelector(".v-application").removeAttribute("inert")
}

funkyvisions commented 1 week ago

This is a recording of what VoiceOver on iOS is doing.

https://github.com/user-attachments/assets/479fc099-bb1e-45e8-b98d-27e77b1adf22

vuetifyjs / vuetify