[Bug Report][3.1.2] Accessibility issue on form components

Chris-McQuiggan commented 1 year ago

Environment

Vuetify Version: 3.1.2 Vue Version: 3.2.45 Browsers: Chrome 109.0.0.0 OS: Windows 10, Mac OSX

Steps to reproduce

Steps:

Install axe dev tools
Go to reproduction link
Run axe dev tools scan
OBSERVE issues on the form components

Expected Behavior

All accessibility tests to pass

Actual Behavior

2 categories of failures on the form components

ARIA input fields must have accessible name
Elements must only use allowed ARIA attributes

Reproduction Link

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

Other comments

"ARIA input fields must have accessible name" This problem seems to be caused by a role of "textbox" being defined on a parent div and the defined aria label being attached to the input. Affected components:

v-text-field
v-combobox
v-select
v-autocomplete
v-textarea
v-slider
v-range-slider
v-color-picker
v-data-table

"Elements must only use allowed ARIA attributes" Caused by aria-expanded being defined on unexpected element's role Affected components:

v-combobox
v-select
v-autocomplete
v-expansion-panel

Other failures of note

"Buttons must have discernible text"
- v-color-picker
- v-data-table
"Form elements must have labels"
- v-color-picker
- v-data-table

Harm-Nullix commented 1 year ago

I find there are some issues we cannot resolve ourselves using Vuetify, especially with forms and dialog/menu's.

I find myself not being able to inject all the needed attributed and orders into the components without rewriting them myself, which is a bummer.

How can I help in a efficient way?

@KaelWD , @johnleider , I do not really know who to target for these things, but is there an easy way to move in and help on these accessibility problems? Accessibility is a major +1 on using Vuetify as a framework if implemented correctly and I find it should pass the wcag (https://www.w3.org/TR/WCAG21/) from the Axe core with a breeze.

johnleider commented 1 year ago

I find there are some issues we cannot resolve ourselves using Vuetify, especially with forms and dialog/menu's.

I find myself not being able to inject all the needed attributed and orders into the components without rewriting them myself, which is a bummer.

How can I help in a efficient way?

@KaelWD , @johnleider , I do not really know who to target for these things, but is there an easy way to move in and help on these accessibility problems? Accessibility is a major +1 on using Vuetify as a framework if implemented correctly and I find it should pass the wcag (w3.org/TR/WCAG21) from the Axe core with a breeze.

Reach out to me on Discord

djurdjen commented 1 year ago

Any news on whether this is being looked at or not? I'm also finding myself in the situation where i'm forced to rewrite the component myself without vuetify because of the AXE tests output. Which is a shame because Vuetify offers a lot of great functionality I would like to keep using!

If there's any way I can help, let me know!

johnleider commented 1 year ago

Any news on whether this is being looked at or not? I'm also finding myself in the situation where i'm forced to rewrite the component myself without vuetify because of the AXE tests output. Which is a shame because Vuetify offers a lot of great functionality I would like to keep using!

If there's any way I can help, let me know!

Reach out to me on Discord

vuetifyjs / vuetify