tab order and tab navigation simulation

This is a follow up of tab order and tabindex post, simulating tab order and tab navigation using left and right arrows.

In tab navigation, one uses

• tab for forward navigation
• shift + tab for backward navigation

Let’s simulate tab navigation like so:

• right arrow for forward navigation
• left arrow for backward navigation

In order to simulate tab navigation we need to first simulate a tab order.

tab order simulation

Let’s simulate tab order like so:

• traverse the DOM in preorder, depth-first traversal to find the all the focusable elements.
  • use Document.querySelectorAll(), as it returns a list of the elements within the document (using depth-first pre-order traversal of the document’s nodes) that match the specified group of selectors.
  • use 'input:not([type=hidden]), select, textarea, button, a[href], tabindex=0' as the selector for querySelectorAll
  • filter the returned node list against the presence of disabled and tabindex=1 attribute.
• a variable to keep track of the current tabable index.

tab navigation simulation

Once the tab order is simulated, we can simulate simulate tab navigation like so:

• whenever right arrow is pressed, increment this index by 1 and focus the corresponding node.
  • if the value of the index is more then the number of focusable element; reset it to 0.
• whenever left arrow is pressed, decrement this index by 1 and focus the corresponding node.
  • if the value of the index is less then 0; reset it to the number of focusable element.

For the sake of simplicity, tabindex=X is not considered.

Whenever a focusable element is either added or removed from the DOM, we need to update the simulated tab order and corresponding current tabable index.

Refer CodePen example - tab navigation simulation to experience simulated tab navigation.

See the Pen tab navigation simulation by Sarbbottam Bandyopadhyay (@sarbbottam) on CodePen.

For convenience, I have also embedded the corresponding JavaScript below.

See the Pen tab navigation simulation by Sarbbottam Bandyopadhyay (@sarbbottam) on CodePen.

Do browsers facilitate tab navigation in similar fashion?

I have no idea :)