Roving Tabindex

This page is the demo for an article on how to create a roving tabindex in react.

Intro

We want to make our group of buttons remember the last focus similar to a radio group.

Select your favorite fruit:

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

helloworld

good api

helloworld

tab

tab now selects the first node when focusableId is null

shift+tab

shift+tab now works again (we broke it in the previous example)

Creating our abstraction

not much has changed but the code is cleaner

ValueId

option 2 is initially selected since valueId is set

Selectors

left arrow should now work!