Accessibility: Keyboard focus with tab key is trapped within listbox

[Grady Thompson]

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