Focus Next Element In Tab Index

by

I’ve never implemented this, but I’ve looked into a similar problem, and here’s what I would try.

Referencing the jQuery implementation, you must:

  1. Listen for Tab and Shift+Tab
  2. Know which elements are tab-able
  3. Understand how tab order works

1. Listen for Tab and Shift+Tab

Listening for Tab and Shift+Tab are probably well-covered elsewhere on the web, so I’ll skip that part.

2. Know which elements are tab-able

Knowing which elements are tab-able is trickier. Basically, an element is tab-able if it is focusable and does not have the attribute tabindex="-1" set. So then we must ask which elements are focusable. The following elements are focusable:

  • input, select, textarea, button, and object elements that aren’t disabled.
  • a and area elements that have an href or have a numerical value for tabindex set.
  • any element that has a numerical value for tabindex set.

Furthermore, an element is focusable only if:

  • None of its ancestors are display: none.
  • The computed value of visibility is visible. This means that the nearest ancestor to have visibility set must have a value of visible. If no ancestor has visibility set, then the computed value is visible.

More details are in another Stack Overflow answer.

3. Understand how tab order works

The tab order of elements in a document is controlled by the tabindex attribute. If no value is set, the tabindex is effectively 0.

The tabindex order for the document is: 1, 2, 3, …, 0.

Initially, when the body element (or no element) has focus, the first element in the tab order is the lowest non-zero tabindex. If multiple elements have the same tabindex, you then go in document order until you reach the last element with that tabindex. Then you move to the next lowest tabindex and the process continues. Finally, finish with those elements with a zero (or empty) tabindex.

More Related Contents:

  1. Why does babel rewrite imported function call to (0, fn)(…)?
  2. Calculate distance between two points in google maps V3
  3. How to get the file name from a full path using JavaScript?
  4. How do I replace while loops with a functional programming alternative without tail call optimization?
  5. Sequelize model association won’t create a new column
  6. Remove All Event Listeners of Specific Type
  7. Convert blob URL to normal URL
  8. Manipulating innerHTML removes the event handler of a child element? [duplicate]
  9. Detect iPad users using jQuery?
  10. Replacing spaces with underscores in JavaScript?
  11. Convert object array to hash map, indexed by an attribute value of the Object
  12. Objects are not valid as a React child (found: [object Promise])
  13. jQuery: exclude children from .text() [duplicate]
  14. Displaying a byte array as an image using JavaScript
  15. shorthand http:// as // for script and link tags? anyone see / use this before?
  16. What does arguments[0] and arguments[1] mean when using executeScript method from JavascriptExecutor interface through Selenium WebDriver?
  17. Finding number of lines in an html textarea
  18. Regex to split camel case
  19. Eliminate 300ms delay on click events in mobile Safari
  20. how to reset module imported between tests
  21. Google Maps Api v3 – getBounds is undefined
  22. What does useCallback/useMemo do in React?
  23. How to hide bottom navigation bar on a specific screen in react native?
  24. Appending Blob data
  25. Using Express Handlebars and Angular JS
  26. Controlling a Firefox Extension via Javascript
  27. iframe not reading cookies in Chrome
  28. Pass Node.js environment variable with Windows PowerShell [duplicate]
  29. Emulate clicking a link with Javascript that works with IE
  30. How to convert a hexadecimal string to Uint8Array and back in JavaScript?

Leave a Comment