title: Control order of TAB with javascript (react)
body: <p>I'm making one of these e-commerce menus and I need it to fully keyboard-accessible. For that I need to interrupt the natural tabindex order but I'm not sure what the best approach here is. I figured I have 3 options</p>
  
  <ul>
  <li>set the tabindex of everything I want to ignore to -1 (while I want to ignore it)</li>
  <li>Set the tabindex of the next item I want to focus to 1 (which did not work)</li>
  <li>Focus the next element I want to focus by using the <code>.focus()</code> method (this would mean a lot of edge cases to handle)</li>
  </ul>
  
  <p>I've added a sketch of what I want to achieve below, the top box is the normal menu with each of the links opening its own sub-menu (like for example on <a href="https://www.zalando.nl/heren-home/" rel="nofollow noreferrer">zalando</a>)
  <a href="https://i.stack.imgur.com/NivK0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NivK0.jpg" alt="sketch of intended tabindex order"></a></p>
  
  <p>Is there a simple approach to handle this scenario? I read the wai-aria pattern and am aware of all the roles and labels I need to assign, it's just the focus that's giving me trouble.</p>