Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug Report][3.3.21] Accessibility: v-autocomplete needs to announce number of potential matches #18492

Closed
kmmerc18 opened this issue Oct 18, 2023 · 0 comments · Fixed by #18898
Closed

[Bug Report][3.3.21] Accessibility: v-autocomplete needs to announce number of potential matches #18492

kmmerc18 opened this issue Oct 18, 2023 · 0 comments · Fixed by #18898
Assignees
@johnleider
Labels
a11y Accessibility issue C: VList VList T: bug Functionality that does not work as intended/expected
Milestone
v3.4.x

Comments

@kmmerc18
Copy link

Environment

Vuetify Version: 3.3.21
Vue Version: 3.3.4
Browsers: Chrome 117.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

Go to the example page and use a screen reader (such as VoiceOver for Mac) and begin typing in a v-autocomplete. The screen reader does not announce how many matches appear in the autocomplete list, and there is no way to select/navigate the options without a mouse.

Expected Behavior

It should be possible using up and down arrows to explore the list, and a screen reader should read out the number of options, as well as each individual option

Actual Behavior

The screen reader only reads the letters you've typed, and has no indication of a change to the autocomplete list. There is no way to navigate the autocomplete list with a keyboard

Reproduction Link

https://play.vuetifyjs.com/#...
@johnleider johnleider self-assigned this Nov 30, 2023
tmasrat added a commit to tmasrat/vuetify that referenced this issue Dec 14, 2023
@tmasrat
fix(VIcon): readout the list options
d150eb3 
fixes vuetifyjs#18492 vuetifyjs#18459
tmasrat added a commit to tmasrat/vuetify that referenced this issue Dec 14, 2023
@tmasrat
fix(VIcon): update snapshot
3ee2c8f 
fixes vuetifyjs#18492 vuetifyjs#18459
@tmasrat tmasrat mentioned this issue Dec 18, 2023
Merged
@johnleider johnleider added T: bug Functionality that does not work as intended/expected a11y Accessibility issue C: VList VList labels Dec 18, 2023
@johnleider johnleider added this to the v3.4.x milestone Dec 18, 2023
tmasrat added a commit to tmasrat/vuetify that referenced this issue Dec 21, 2023
@tmasrat
fix(VAutocomplete): add the live region in VAutocomplete instead
f880550 
fixes vuetifyjs#18459 and vuetifyjs#18492
tmasrat added a commit to tmasrat/vuetify that referenced this issue Dec 29, 2023
@tmasrat
fix(Select): add the live region in VCombobox & VSelect
6599708 
fixes vuetifyjs#18459 and vuetifyjs#18492
johnleider added a commit that referenced this issue Jan 8, 2024
@tmasrat @johnleider
fix(VList): add live region for a11y (#18898)
98d1ee6 
fixes #18459
fixes #18492

Co-authored-by: John Leider <john@vuetifyjs.com>
tmasrat added a commit to tmasrat/vuetify that referenced this issue Jan 22, 2024
@tmasrat @johnleider
fix(VList): add live region for a11y (vuetifyjs#18898)
7291ed1 
fixes vuetifyjs#18459
fixes vuetifyjs#18492

Co-authored-by: John Leider <john@vuetifyjs.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@johnleider johnleider

Labels
a11y Accessibility issue C: VList VList T: bug Functionality that does not work as intended/expected
Projects
None yet
Milestone
v3.4.x
Development

Successfully merging a pull request may close this issue.

fix(VList): add live region for a11y tmasrat/vuetify
2 participants
@johnleider @kmmerc18