Returns an array of all tabbable DOM nodes within a containing node, in their actual tab order (cf. Sequential focus navigation and the tabindex attribute).
This should include
hrefattributes or non-negative
- anything else with a non-negative
Any of the above will not be added to the array, though, if any of the following are also true about it:
- either the node itself or an ancestor of it is hidden via
Note: Though browsers allow tabbing into elements marked
contenteditable, outstanding bugs in the
tabIndex API prevents
tabbable from registering them. If you have
contenteditable elements that you need included in the array, you’ll have to additionally specify
- No dependencies
npm install tabbable
You’ll need to be compiling CommonJS (via browserify or webpack).
var tabbable = require('tabbable'); var arrayOfTabbableNodesInFoo = tabbable(document.getElementById('foo'));
Summary of ordering principles:
- First include any elements with positive
tabindexattributes (1 or higher), ordered by ascending
tabindexand source order.
- Then include any elements with a zero
tabindexand any element that by default receives focus (listed above) and does not have a positive
tabindexset, in source order.
Differences from jQuery UI’s
Doesn’t need jQuery. Also: doesn’t support all the old IE’s.
Also: The array accounts for actual tab order.
Also: jQuery UI’s
:tabbable selector ignores elements with height and width of
0. I’m not sure why — because I’ve found that I can still tab to those elements. So I kept them in. Only elements hidden with
display: none or
visibility: hidden are left out.
Also: This plugin ignores the rarely used
<object> elements, which are focusable in some circumstances. (If you need them, maybe PR?)
Feedback more than welcome!