Accessibility: Keyboard focus with tab key is trapped within listbox

[gradyat]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.4.3 (issue also present in v2.0 demo site)

What browser are you using?

Chrome

Reproduction URL

https://headlessui.com/react/listbox

Describe your issue

When the Listbox is expanded, the tab key does not do anything. Keyboard users are required to either make a selection or hit the Escape key to collapse the Listbox. Per the ARIA Authoring Practices for a Select-only Combobox, the tab key should close the listbox and move focus to the next focusable element on the page.

Tab

• Sets the value to the content of the focused option in the listbox.
• Closes the listbox.
• Performs the default action, moving focus to the next focusable element. Note: the native <select> element closes the listbox but does not move focus on tab. This pattern matches the behavior of the other comboboxes rather than the native element in this case.

Steps to repro

1. Open Listbox demo
2. Collapse it with mouse
3. Tab to collapsed Listbox
4. Press spacebar to expand the listbox
5. Press tab to attempt to collapse listbox and move to next focusable item on page

[RobinMalfait]

Hey!

When we originally built the Listbox component then we did model it after the native <select>. But now that we also have other components that do allow using your tab key it makes sense to normalise this behavior.

So this has now been fixed by #3284 which will allow you to use the tab and shift+tab keys to move the focus to the next and previous elements respectively.

This will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.