[react] Static Option on Listbox breaks keyboard accessibility

Not sure if this is a bug or if I’m misunderstanding the feature, but we’re running into an issue with the focus trap when using the static property.

The goal is to have an always open select menu, so, my first instinct was to simply not render the button and make the menu static. Example: https://codesandbox.io/s/jovial-sanne-2x7iz?file=/src/App.js

This works great, except we realized that the focus trap is still present, regardless of state, so if you use the static option, you can’t tab past the menu. Example: https://codesandbox.io/s/modest-wiles-id8qu?file=/src/App.js

Is there a plan for this sort of thing already? Are we just abusing this component? I guess I’m just trying to figure out whether this is an opportunity to improve the Listbox, if there’s something on the roadmap already for this use case, or if we should be making our own component for this.

[RobinMalfait]

Hey! I am going to close this issue now, because I don’t think it will be a good idea to provide an option to disable the focus trap (because of the aforementioned reasons). Thanks!

[matt-morris]

Yeah, a radio button group is actually what we’ve gone with for now, but it’s not ideal for a couple of reasons. First, when the group has focus, although you can navigate through it with arrow keys, each option is actually selected as you move through it.

We’re using it to set a current filter for a list of items with an animated layout, so if a user arrows through options quickly, the reflows begin to look a little jarring.

It’s not the end of the world, obviously, but it’s also not the best UX. It’s much smoother to be able to let the user navigate the options before selecting it.

The other reason we’re not thrilled with radio buttons is that it turns out there’s a surprising amount of cross-browser weirdness with them. I hadn’t ever realized until now how disjointed it actually is until I started looking into this issue. In Chrome, clicking one of the radio buttons focuses the group, but not in Safari or Firefox. Chrome and Firefox both cycle through the list while Safari stops at either end. Again, none of this is the absolute worst, but it’s enough to make think about a headless menu component where we can normalize and control this stuff.

The Listbox with a static menu is almost perfect for our use case, if we could just turn off the focus trap. No worries if that’s not in the cards right now. I just wanted to bring it up here. We’re very invested in the possibilities of this library, and so we’re looking to help out however we can. We build and manage hundreds of websites with similar content but different styles, so the headless approach is very freeing for us.