vuetify
vuetify copied to clipboard
[Bug Report][2.6.4] VSelect - a11y issue when hitting TAB if the listbox is opened
Environment
Vuetify Version: 2.6.4 Vue Version: 2.6.14 Browsers: Chrome 100.0.4896.88 OS: Windows 10
Steps to reproduce
- Use TAB to access the VSelect.
- Hit Enter the open the listbox
- Hit TAB to navigate away from listbox.
- The listbox closes instead of navigating away.
Additionally I have noticed also that the <input>
is the only element which receives focus. The <div role="listbox">
never receives focus.
These two behaviors are not compliant with this example: https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html
Expected Behavior
- Hitting TAB in VSelect should navigate away even when the list is open.
- When the listbox is open is should be focused instead of the input.
Actual Behavior
- Hitting TAB in VSelect closes the listbox when it is open.
- The
<input>
element is focused all the time even when the listbox is opened.
Reproduction Link
https://codepen.io/mikilll94/pen/rNpQRzL?editors=1011
Other comments
I think Vuetify should follow: https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html
as closely as possible.