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] Incorrect aria roles assigned to v-list-item #13125

Closed
mattgrande opened this issue Feb 17, 2021 · 3 comments · Fixed by #13126, elirehema/nbs-web#87, elirehema/authx#10 or EuanRiggans/ukpetition.info#159
Closed

[Bug Report] Incorrect aria roles assigned to v-list-item #13125

mattgrande opened this issue Feb 17, 2021 · 3 comments · Fixed by #13126, elirehema/nbs-web#87, elirehema/authx#10 or EuanRiggans/ukpetition.info#159
Labels
a11y Accessibility issue C: VList C: VListGroup T: bug Functionality that does not work as intended/expected
Milestone
v2.4.x

Comments

@mattgrande
Copy link
Contributor

Environment

Vuetify Version: 2.4.4
Vue Version: 2.6.12
Browsers: Firefox 85.0, Google Chrome
OS: Windows 10

Steps to reproduce

Create a v-list-item within a v-list-item-group

Expected Behavior

The aria-tags are valid

Actual Behavior

The aria-tags are currently incorrect

Reproduction Link

https://codepen.io/mattgrande/pen/qBqmgXo

Other comments

This was discovered while running a lighthouse audit on my site.

Currently, when a VListItem is in a group, we attach the role of listitem, and set aria-selected to an appropriate value.

Unfortunately, a listitem should not use aria-selected (see here for listitem documentation and here for aria-selected documentation).

I think the right call in a situation like this is to use a role of option or perhaps treeitem (and I'm willing to make a PR to that effect), but I wanted to get some sort of agreement before doing so.

See here:

vuetify/packages/vuetify/src/components/VList/VListItem.ts

Lines 142 to 143 in 34a37a0

attrs.role = 'listitem'
attrs['aria-selected'] = String(this.isActive)

@ghost ghost added the S: triage label Feb 17, 2021
@KaelWD KaelWD added a11y Accessibility issue C: VList C: VListGroup pending review The issue is still pending disposition and removed S: triage labels Feb 17, 2021
@KaelWD
Copy link
Member

KaelWD commented Feb 17, 2021

Makes sense, check how this actually behaves in NVDA though.

@KaelWD KaelWD added T: bug Functionality that does not work as intended/expected and removed pending review The issue is still pending disposition labels Feb 17, 2021
@mattgrande
Copy link
Contributor Author

Will do; thanks for the prompt response!

mattgrande pushed a commit to mattgrande/vuetify that referenced this issue Feb 17, 2021
fix(VListItem): fix aria role issue
cc05b29 
A `listitem` should not contain an `aria-selected` attribute, and a
`listbox` should only have `option`s as children.

See also:

*
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Listbox_role
*
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Listitem_role

fixes vuetifyjs#13125
@mattgrande mattgrande mentioned this issue Feb 17, 2021
Merged
8 tasks
KaelWD pushed a commit that referenced this issue Feb 18, 2021
@mattgrande
fix(VListItem): use item role when in a group (#13126)
4974d74 
fixes #13125
@KaelWD KaelWD added this to the v2.4.x milestone Feb 18, 2021
This was referenced Mar 10, 2021
Closed
Closed
Merged
Merged
Closed
Closed
Closed
Closed
Merged
Closed
Closed
Closed
Closed
Closed
Closed
This was referenced Mar 17, 2021
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
@rudolfbyker
Copy link

rudolfbyker commented Sep 13, 2022 •
edited
Loading

Some feedback on this fix: Vue-Axe now complains about the role="options" again. This seems like a catch-22.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a11y Accessibility issue C: VList C: VListGroup T: bug Functionality that does not work as intended/expected
Projects
None yet
Milestone
v2.4.x
3 participants
@mattgrande @rudolfbyker @KaelWD