[Bug Report][2.6.4] VSelect accessibility, wrong role

[apfrod]

Environment

Vuetify Version: 2.6.4 Vue Version: 2.6.12 Browsers: Safari OS: Mac OS 10.15.7

Steps to reproduce

When using Vselect component, HTML is produced using role="button".

Expected Behavior

The Voiceover interaction using v-select should be clear and follow the conventions of a combobox, with instructions provided.

Actual Behavior

The VoiceOver interaction is confusing when using role="button" on v-select component, and instructions are only 'you are on a button'.

Reproduction Link

https://codepen.io/apfrod/pen/OJxdLEw

Other comments

Fix is to swap role value 'button' for 'combobox' which seems to work better. As a bonus, the below diff also fixes all of the aria-related HTML validation issues on #14615

diff --git a/packages/vuetify/src/components/VSelect/VSelect.ts b/packages/vuetify/src/components/VSelect/VSelect.ts
index 7de1a7027..27b39e19e 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.ts
+++ b/packages/vuetify/src/components/VSelect/VSelect.ts
@@ -462,7 +462,6 @@ export default baseMixins.extend<options>().extend({
         attrs: {
           readonly: true,
           type: 'text',
-          'aria-readonly': String(this.isReadonly),
           'aria-activedescendant': getObjectValueByPath(this.$refs.menu, 'activeTile.id'),
           autocomplete: getObjectValueByPath(input.data!, 'attrs.autocomplete', 'off'),
           placeholder: (!this.isDirty && (this.persistentPlaceholder || this.isFocused || !this.hasLabel)) ? this.placeholder : undefined,
@@ -486,7 +485,7 @@ export default baseMixins.extend<options>().extend({
 
       render.data!.attrs = {
         ...render.data!.attrs,
-        role: 'button',
+        role: 'combobox',
         'aria-haspopup': 'listbox',
         'aria-expanded': String(this.isMenuActive),
         'aria-owns': this.computedOwns,

[bjornnorlen]

The role problem is still an issue in Vuetify 3.0.0-beta.9 which can be viewed in their examples in the documentation: https://next.vuetifyjs.com/en/components/selects/. The field now has role="textbox" which causes accessibility issues for screen reader users. It should instead have the role="combobox" and the items in the combobox should have role="option" along with aria-selected="{value}" attribute where {value} is true if the item is selected and false otherwise.

An example can be viewed here: https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html.

More about combobox role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role

[ijklim]

The role problem is still an issue in Vuetify 3.0.0-beta.9 which can be viewed in their examples in the documentation: https://next.vuetifyjs.com/en/components/selects/. The field now has role="textbox" which causes accessibility issues for screen reader users. It should instead have the role="combobox" and the items in the combobox should have role="option" along with aria-selected="{value}" attribute where {value} is true if the item is selected and false otherwise.

An example can be viewed here: https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html.

More about combobox role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role

Using Vuetify 3.3.2, problem still exists. Ran the test using Chrome extension axe DevTools - Web Accessibility Testing, this problem was tagged as Critical.