How do I build a custom list that implements the W...

# compose

[Janne Mareike Koschinski]

How do I build a custom list that implements the WCAG composite component keyboard navigation patterns?
Specifically, one tab enters the list, one tab exists the list, arrow keys move focus within of the list.

As an example for that'd look like, consider the room list of Slack or Teams, or listboxes in Win32/Qt/HTML5.

Requirements:
• All list items are focusable (e.g., via 2D focus movement or screenreaders)
• The list acts as one item for the tab navigation, when tab enters the list the selected item is considered focused for screenreaders
• I need to be able to use a custom key event handler to move focus within of the list (up/down one item, up/down a page of items, to the start of the list, to the end of the list).
We're building a chat app, and the room list needs to follow these guidelines https://www.w3.org/WAI/ARIA/apg/patterns/listbox/ in our compose desktop and compose web clients:
> A primary keyboard navigation convention common across all platforms is that the tab and shift + tab keys move focus from one UI component to another while other keys, primarily the arrow keys, move focus inside of components that include multiple focusable elements. The path that the focus follows when pressing the tab key is known as the tab sequence or tab ring.
For that I was planning on using the roving tab index pattern https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex

Things I've tried:
1. Setting focusProperties { next = ..., previous = ... }. But that requires me to know the UI layout of my app ahead of time, and it's modular so that enterprise clients can customize it, some of which add their own UI widgets before/after the room list.
2. Intercepting key presses. Doesn't really work, as it's the tab key press on the last UI element before my list that I'd need to intercept, with the same issues as #1
3. Adding focusRequesters to all items, storing those in a list, setting all except for one item as not focusable and updating the focusable state and using requestFocus to move the focus position. But then the focus flickers for a moment, the other items are not visible as focusable to screen readers, and focus movement via screen readers doesn't work as expected anymore
4. I've also tried intercepting the onFocusEvent event, to immediately move the focus to the selected list item when my list is selected, but that doesn't work reliably and still doesn't allow me to move the focus back out of the list again.
I've got a simple demo app for how this behaviour should work here: https://public.s3.kuschku.de/demo.html and a simple demo struggling to implement this behaviour in compose here: https://github.com/justjanne/compose-list-navigation/

(I've previously asked this question in #C01D6HTPATV here, but was told I might get more answers here)