Photo by Abigail Lynn on Unsplash
Note to self + Question
I recently 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.
Question
Does anyone know why using tabindex value greater than 0 is not recommended?
Top comments (2)
One thing comes to mind -
If you use a tabindex greater than 0 then you run the risk of disrupting the tab order.
Tabbing through the following example would navigate you from the first to the third back to the second, which in most cases isn't what you would want.
Keeping everything at 0 would ensure the order remains in a semantic order
Thank you Taylor.
That makes sense.
How about when a site is responsive, and you need to have a different tab indexes (as layout can change)?
If tabindex is set to 0 everywhere, tabbing might jump around depending on the layout...