[Listbox/Combobox] Accessible keyboard navigation for multiple selection tags

[kosciolek]

The vast majority of Listboxes and Comboboxes use a tag list to display multiple values. Tags can be navigated with the keyboard and deleted. Example from react-select:

Since this is really common, I think it deserves a section in the docs.

Is there a pattern available for implementing an accessible tag list for the Listbox and the Combobox components? As far as I'm concerned, libraries generally use one of three approaches to make it screen-reader friendly:

1. If tags are being navigated, point aria-activedescendant to the tag (rather than to the entry in the listbox)
   • Seems to be dangerous, as headlessui already manages aria-activedescendant on its own, and uses it to point to the currently active option in the listbox.
2. Straight up focus the selected tag (MUI does it)
   • AFAIK this is a bit of an antipattern, as only components should be focusable, and sub-components should use aria-activedescendant instead
   • Not sure yet how it'd integrate with headlessui.
3. Implement raw keyboard navigation and announce events (such as the currently selected tag) with aria-live (react-select does it)