Combobox with a Tree Popup

How it works

A combobox is a role on an input (editable) or a button (select-only) that controls a popup, which can be a listbox, grid or tree. Its one mandatory state is aria-expanded; aria-haspopup, aria-controls, aria-autocomplete and aria-activedescendant are used as the implementation needs.

In the tree popup a treeitem is a direct descendant of the tree. Children go in a role="group", aria-expanded exists only on items that have children and aria-selected marks the current item.

DOM focus should stays always on the input and on the popup we are going to use an aria-activedescendant focus management to to manage a virtual focus on each active item based on the id. When the item is activated and it has a second level, the group expands. Moving real focus into the list would stop the user from typing.

Announcements go through a debounced live region so the screen reader is not interrupted as the user types.