vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

[Bug Report][2.6.4] VSelect - a11y issue when hitting TAB if the listbox is opened

Open Mikilll94 opened this issue 2 years ago • 0 comments

Environment

Vuetify Version: 2.6.4 Vue Version: 2.6.14 Browsers: Chrome 100.0.4896.88 OS: Windows 10

Steps to reproduce

  1. Use TAB to access the VSelect.
  2. Hit Enter the open the listbox
  3. Hit TAB to navigate away from listbox.
  4. 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

  1. Hitting TAB in VSelect should navigate away even when the list is open.
  2. When the listbox is open is should be focused instead of the input.

Actual Behavior

  1. Hitting TAB in VSelect closes the listbox when it is open.
  2. 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.

Mikilll94 avatar Apr 17 '22 09:04 Mikilll94