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.
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-byattribute, 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.