tabbable

What is tabbable?

The tabbable npm package is used to identify DOM elements that are tabbable or focusable. This is useful for accessibility concerns, such as when creating keyboard navigation or managing focus within modal dialogs, dropdowns, and custom widgets. It helps ensure that keyboard users can navigate through all interactive elements on the page in a logical order.

What are tabbable's main functionalities?

Finding all tabbable elements

This feature allows you to get a list of all elements that are tabbable (can be focused using the Tab key) within a specified DOM node.

var tabbable = require('tabbable');
var tabbableElements = tabbable(document);
console.log(tabbableElements);

Finding all focusable elements

This feature provides a list of all elements that are focusable, including those that are not tabbable but can still receive focus, such as elements with a tabindex='-1'. The option `{ includeContainer: true }` includes the container itself if it is focusable.

var tabbable = require('tabbable');
var focusableElements = tabbable(document, { includeContainer: true });
console.log(focusableElements);

Other packages similar to tabbable

focus-trap

The focus-trap package is designed to trap focus within a DOM element, preventing the user from tabbing out of it. This is particularly useful for modal dialogs. It is similar to tabbable in that it deals with focus management, but it provides a higher-level API specifically for creating a focus trap rather than just identifying focusable elements.

ally.js

ally.js is a JavaScript library that simplifies certain accessibility features, including focus management. It provides a broader range of accessibility utilities compared to tabbable, including the ability to find and manipulate focusable elements, but also extends to other areas such as accessible hiding of elements and maintaining disabled state across shadow DOM boundaries.

README

tabbable

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).

* "all" has some necessary caveats, which you'll learn about by reading below.

The array of tabbable nodes should include the following:

• <button>s,
• <input>s,
• <select>s,
• <textarea>s,
• <a>s and <area>s with href attributes,
• <audio>s and <videos>s with controls attributes,
• anything with a non-negative tabindex

Any of the above will not be added to the array, though, if any of the following are also true about it:

• negative tabindex
• disabled
• either the node itself or an ancestor of it is hidden via display: none or visibility: hidden
• it's an <input type="radio"> and a different radio in its group is checked.

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. 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.

Goals

• Accurate
• No dependencies
• Small
• Fast

Browser Support

Basically IE9+.

Why? It uses Element.querySelectorAll() and Window.getComputedStyle().

Installation

npm install tabbable

Dependencies: none.

You'll need to be compiling CommonJS (via browserify or webpack).

API

tabbable(rootNode, [options])

Returns an array of ordered tabbable node within the rootNode.

Summary of ordering principles:

• First include any nodes with positive tabindex attributes (1 or higher), ordered by ascending tabindex and source order.
• Then include any nodes with a zero tabindex and any element that by default receives focus (listed above) and does not have a positive tabindex set, in source order.

rootNode

Type: Node. Required.

options

includeContainer

Type: boolean. Default: false.

If set to true, rootNode will be included in the returned tabbable node array, if rootNode is tabbable.

More details

• Tabbable tries to identify elements that are reliably tabbable across (not dead) browsers. Browsers are stupidly inconsistent in their behavior, though — especially for edge-case elements like <object> and <iframe> — so this means some elements that you can tab to in some browsers will be left out of the results. (To learn more about that stupid inconsistency, see this amazing table). To provide better consistency across browsers and ensure the elements you want in your tabbables list show up there, try adding tabindex="0" to edge-case elements that Tabbable ignores.
• (As an example of the above:) Although 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 tabindex="0". (See issue #7.)
• Although Tabbable tries to deal with positive tabindexes, you should not use positive tabindexes. Accessibility experts seem to be in (rare) unanimous and clear consent about this: rely on the order of elements in the document.
• If you're thinking, "Why not just use the right querySelectorAll?", you may be on to something ... but, as with most "just" statements, you're probably not. For example, a simple querySelectorAll approach will not figure out whether an element is hidden, and therefore not actually tabbable. (That said, if you do think Tabbable can be simplified or otherwise improved, I'd love to hear your idea.)
• 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.
• Radio groups have some edge cases, which you can avoid by always having a checked one in each group (and that is what you should usually do anyway). If there is no checked radio in the radio group, all of the radios will be considered tabbable. (Some browsers do this, otherwise don't — there's not consistency.)

Feedback and contributions more than welcome!