Returns an array of all tabbable DOM nodes within a containing node.
npm install tabbable

Small utility that returns an array of all\* tabbable DOM nodes within a containing node.
_\*all has some necessary caveats, which you'll learn about by reading below._
The following are considered tabbable:
- elements
- elements
- elements
- elements
- elements with an href attribute
- and elements with controls attributes
- the first element directly under a element
- element without a element
- elements with the [contenteditable] attribute
- anything with a non-negative tabindex attribute
Any of the above will _not_ be considered tabbable, though, if any of the following are also true about it:
- has a negative tabindex attribute
- has a disabled attribute
- either the node itself _or an ancestor of it_ is hidden via display: none (*see "Display check" below to modify this behavior)
- has visibility: hidden style
- is nested under a closed element (with the exception of the first element)
- is an element and a different radio in its group is checked
- is a form field (button, input, select, textarea) inside a disabled
- is inert or in an inert container
- ❗️ Only supported in newer browsers that support this new attribute)
- ⚠️ Notably __not (yet) supported__ on Firefox and Safari (Feb 2023)
If you think a node should be included in your array of tabbables _but it's not_, all you need to do is add tabindex="0" to deliberately include it. (Or if it is in your array but you don't want it, you can add tabindex="-1" to deliberately exclude it.) This will also result in more consistent cross-browser behavior. For information about why your special node might _not_ be included, see "More details", below.
- Accurate (or, as accurate as possible & reasonable)
- No dependencies
- Small
- Fast
As old and as broad as _reasonably_ possible, excluding browsers that are out of support or have nearly no user base.
Focused on desktop browsers, particularly Chrome, Edge, FireFox, Safari, and Opera.
Tabbable is not officially tested on any mobile browsers or devices.
> ⚠️ Microsoft no longer supports any version of IE, so IE is no longer supported by this library.
> 💬 Keep in mind that performance optimization and old browser support are often at odds, so tabbable may not always be able to use the most optimal (typically modern) APIs in all cases.
```
npm install tabbable
> 💬 Some very old browsers may need a polyfill for the CSS.escape API for tabbable to work properly with radio buttons that have name attributes containing special characters.
`js
import { tabbable } from 'tabbable';
tabbable(container, [options]);
`
- container: Node (Required)options
- :includeContainer: boolean
- All the common options.
- (default: false)true
- If set to , container will be included in the returned tabbable node array, if container is tabbable.container
- Note that whether this option is true or false, if the is inert, none of its children (deep) will be considered tabbable.
Returns an array of ordered tabbable nodes (i.e. in tab order) within the container.
Summary of ordering principles:
- First include any nodes with positive tabindex attributes (1 or higher), ordered by ascending tabindex and source order.tabindex
- Then include any nodes with a zero and any element that by default receives focus (listed above) and does not have a positive tabindex set, in source order.
`js
import { isTabbable } from 'tabbable';
isTabbable(node, [options]);
`
- node: Node (Required)options
- :
- All the common options.
Returns a boolean indicating whether the provided node is considered tabbable.
> 💬 If the node has an inert ancestor, it will not be tabbable.
`js
import { focusable } from 'tabbable';
focusable(container, [options]);
`
- container: Node: Requiredoptions
- :includeContainer: boolean
- All the common options.
- (default: false)true
- If set to , container will be included in the returned focusable node array, if container is focusable.container
- Note that whether this option is true or false, if the is inert, none of its children (deep) will be considered focusable.
Returns an array of focusable nodes within the container, in DOM order. This will not match the order in which tabbable() returns nodes.
`js
import { isFocusable } from 'tabbable';
isFocusable(node, [options]);
`
- node: Node (Required)options
- :
- All the common options.
Returns a boolean indicating whether the provided node is considered _focusable_.
> 💬 All tabbable elements are focusable, but not all focusable elements are tabbable. For example, elements with tabindex="-1" are focusable but not tabbable. Also note that if the node has aninert ancestor, it will not be focusable.
`js
import { getTabIndex } from 'tabbable';
getTabIndex(node);
`
- node: Element (Required)
Returns a negative, 0, or positive number that expresses the node's tab index in the DOM, with exceptions made where there are browser inconsistencies related to
The specific exceptions may change over time. See the implementation for specific behavior.
These options apply to all APIs.
Type: full | full-native | legacy-full | non-zero-area | none . Default: full.
Configures how to check if an element is displayed.
To reliably check if an element is tabbable/focusable, Tabbable defaults to the most reliable option to keep consistent with browser behavior, however this comes at a cost since every node needs to be validated as displayed using Web APIs that cause layout reflow.
For this reason Tabbable offers the ability of an alternative way to check if an element is displayed (or completely opt out of the check).
The displayCheck configuration accepts the following options:
- full: (default) resembles browser behavior via manual checks; this option checks that an element is displayed, which requires it to be attached to the DOM, and for all of his ancestors to be displayed (notice this doesn't exclude visibility: hidden or elements with zero size). This option will cause layout reflow, however. If that is a concern, consider the none option.tabbable()
- ⚠️ If the container given to or focusable(), or the node given to isTabbable() or isFocusable(), is not attached to the window's main document, the node will be considered hidden and neither tabbable nor focusable. This behavior is new as of v6.0.0.legacy-full
- If your code relies on the legacy behavior where detached nodes were considered visible, and you are unable to fix your code to use tabbable once the node is attached, use the option.full-native
- : uses the browser built-in Element#checkVisibility, with all of its options. This handles, for example, content-visibility auto states, visibility: hidden and elements with zero size.full
- If Element#checkVisibility is not supported, this strategy falls back to the behavior.legacy-full
- While each check is specified, it is possible that browsers will disagree with each other, or not support the full set of options.
- : Same as full but restores the __legacy behavior__ of treating detached nodes as visible. This means that if a node is detached, it's then treated as though the display check was set to none (see below for details).full
- ❗️ Since detached nodes are not treated as tabbable/focusable by browsers, using this option is __not recommended__ as it knowingly diverges from browser behavior.
- ⚠️ This option may be removed in the future. Tabbable will not maintain it at the expense of new features or if having it makes the code disproportionately more complex. It only exists to make the upgrade path to the correct behavior (i.e. the option) as long and smooth as reasonably possible.v6.0.0
- The APIs used to determine a node's display are not supported unless its attached (i.e. the browser does not calculate its display unless it is attached). This has effectively been tabbable's behavior for a _very_ long time (up until the release), and you may never have encountered an issue if the nodes with which you used tabbable were always displayed anyway (i.e. the none mode assumption was coincidentally correct).non-zero-area
- You may encounter the above situation if, for example, you render to a node via React, and this node is not attached to the document (or perhaps, due to timing, it is not _yet_ attached at the time you use tabbable's APIs on it).
- : This option checks display under the assumption that elements that are not displayed have zero area (width AND height equals zero). While not keeping true to browser behavior, this option may enhance accessibility, as zero-size elements with focusable content are considered a strong accessibility anti-pattern.full
- Like the option, this option also causes layout reflow, and should have basically the same performance. Consider the none option if reflow is a concern.full
- ⚠️ As with the option, there is a nuance in behavior depending on whether tabbable APIs are executed on attached vs detached nodes using this mode: Attached nodes that are actually displayed will be deemed visible. Detached nodes, _even though displayed_ will always be deemed __hidden__ because detached nodes always have a zero area as the browser does not calculate is dimensions.none
- : This completely opts out of the display check. This option is not recommended, as it might return elements that are not displayed, and as such not tabbable/focusable and can break accessibility. Make sure you know which elements in your DOM are not displayed and can filter them out yourself before using this option.
> ⚠️ __Testing in JSDom__ (e.g. with Jest): See notes about testing in JSDom.
By default, tabbable overlooks (i.e. does not consider) __all__ elements contained in shadow DOMs (whether open or closed). This has been the behavior since the beginning.
Setting this option to a _truthy_ value enables Shadow DOM support, which means tabbable will consider elements _inside_ web components as candidates, both open (automatically) and closed (provided this function returns the shadow root).
Type: boolean | (node: FocusableElement) => ShadowRoot | boolean | undefined
- boolean:true
- simply enables shadow DOM support for any __open__ shadow roots, but never presumes there is an undisclosed shadow. This is the equivalent of setting getShadowRoot: () => falsefalse
- (default) disables shadow DOM support in so far as calculated tab order and closed shadow roots are concerned. If a child of a shadow (open or closed) is given to isTabbable() or isFocusable(), the shadow DOM is still considered for visibility and display checks.function
- :node
- will be a descendent of the container given to tabbable(), isTabbable(), focusable(), or isFocusable().ShadowRoot
- Returns: The node's if available, true indicating a ShadowRoot is attached but not available (i.e. "undisclosed"), or a _falsy_ value indicating there is no shadow attached to the node.
> If set to a function, and if it returns true, Tabbable assumes a closed ShadowRoot is attached and will treat the node as a scope, iterating its children for additional tabbable/focusable candidates as though it was looking inside the shadow, but not. This will get tabbing order _closer_ to -- but not necessarily the same as -- browser order.true
>
> Returning from a function will also inform how the node's visibility check is done, causing tabbable to use the __non-zero-area__ Display Check when determining if it's visible, and so tabbable/focusable.
- Tabbable tries to identify elements that are reliably tabbable across (not dead) browsers. Browsers are inconsistent in their behavior, though — especially for edge-case elements like
> ⚠️ JSDom is not officially supported. Your mileage may vary, and tests may break from one release to the next (even a patch or minor release).
>
> This topic is just here to help with what we know may affect your tests.
Tabbable uses some DOM APIs such as Element.getClientRects() in order to determine node visibility, which helps in deciding whether a node is tabbable, focusable, or neither.
When using test engines such as Jest that use JSDom under the hood in order to run tests in Node.js (as opposed to using an automated browser testing tool like Cypress, Playwright, or Nightwatch where a full DOM is available), it is __highly recommended__ (if not _essential_) to set the displayCheck option to none when calling any of the APIs in this library that accept it.
Using any other displayCheck setting will likely lead to failed tests due to nodes expected to be tabbable/focusable being determined to be the opposite because JSDom doesn't fully support some of the DOM APIs being used (even old ones that have been around for a long time).
You can globally overwrite the diplayCheck property by including this file in your __mocks__ folder:
`jsx
// __mocks__/tabbable.js
const lib = jest.requireActual('tabbable');
const tabbable = {
...lib,
tabbable: (node, options) => lib.tabbable(node, { ...options, displayCheck: 'none' }),
focusable: (node, options) => lib.focusable(node, { ...options, displayCheck: 'none' }),
isFocusable: (node, options) => lib.isFocusable(node, { ...options, displayCheck: 'none' }),
isTabbable: (node, options) => lib.isTabbable(node, { ...options, displayCheck: 'none' }),
};
module.exports = tabbable;
``
Feedback and contributions more than welcome!
See CONTRIBUTING.
In alphabetical order: