[Bug Report][3.7.16] v-autocomplete, v-select accessibility problem, #21097
Description
Environment
Vuetify Version: 3.7.16
Vue Version: 3.5.13
Browsers: Mozilla Firefox, Google Chrome, Microsoft Edge
OS: Windows
Steps to reproduce
In our projects, we use the Laravel framework on the backend, while Vue and Vuetify handle component management on the frontend. On the site, users can select different values from a dropdown field. However, after selection, the field only presents the associated code (key) to screen readers, rather than the full textual description.
This poses an accessibility issue because the visually displayed value is not available to users relying on screen readers. As a result, users cannot verify which value they have actually selected.
The issue contradicts multiple principles of the WCAG (Web Content Accessibility Guidelines) 2.1 standard, particularly:
• 1.3.1 Info and Relationships – Information and relationships must be programmatically determinable.
• 4.1.2 Name, Role, Value – User interface components must have programmatically determinable names and states so that assistive technologies can interpret them correctly.
As a solution, a modification is needed to ensure that the full textual value is accessible to screen readers, rather than just the key or identifier.
Expected Behavior
If you navigate on to the component, any try to read up the selected value of the component with screanreader, it should read up the selected text instead of the value.
Actual Behavior
If you navigate on to the component, any try to read up the selected value of the component with screanreader, its read only the value.