You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Missing the aria-label causes the slider to fail axe accessibility audits. From what I've read on this MDN article about the slider role, the label is required.
I thought that perhaps using thumb-label="always" might solve the problem by using the aria-labelled-by attribute, but that didn't work either.
I would think a default aria-label would make sense here and then possibly allow users to add their own aria label through a prop. You can add an aria-label directly to the slider, but that doesn't solve the issue of the thumb missing the label.
The text was updated successfully, but these errors were encountered:
Environment
Vuetify Version: 3.5.16
Vue Version: 3.4.23
Browsers: Chrome 123.0.0.0
OS: Mac OS 10.15.7
Steps to reproduce
Simply put a v-slider on your page and then inspect the rendered html of the slider thumb element.
Expected Behavior
The slider thumb should have an aria-label.
Actual Behavior
The slider thumb doesn't have an aria-label. It has all the other necessary aria attributes, but not the label.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
Missing the aria-label causes the slider to fail axe accessibility audits. From what I've read on this MDN article about the slider role, the label is required.
I thought that perhaps using
thumb-label="always"
might solve the problem by using thearia-labelled-by
attribute, but that didn't work either.I would think a default aria-label would make sense here and then possibly allow users to add their own aria label through a prop. You can add an aria-label directly to the slider, but that doesn't solve the issue of the thumb missing the label.
The text was updated successfully, but these errors were encountered: