This page is the demo for an article on how to create a roving tabindex in react.
We want to make our group of buttons remember the last focus similar to a radio group.
but this obviously doesn't work out of the box
get it working
(Note: until the last step only right arrow moves focus through the list of buttons)
getting order from the dom
tab now selects the first node when focusableId is null
shift+tab now works again (we broke it in the previous example)
Creating our abstraction
not much has changed but the code is cleaner
option 2 is initially selected since valueId is set
left arrow should now work!