Need to set tabIndex=0 to enable tab navigation

selfnote, a11y, react

Photo by Abigail Lynn on Unsplash

Self note again...

Answered a Stack Overflow question, React focus items list in child component after action from a different child component and learned that to enable HTML element navigation using tabs, you need to set tabindex values to 0.

I have researched for the question and replied.

What I still don't get is why it's not recommended to use tabindex value greater than 0.

Following articles urges you not use any values other than 0 & -1.

I've googled again and again but can't find any satisfactory answers, yet.

At least I was able to answer the question and provided the Sandbox.

Used React.forwardRef for the first time and worked like a charm.