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

This should include

• <input>s,
• <select>s,
• <textarea>s,
• <button>s,
• <a>s with href attributes or non-negative tabindexes,
• anything else 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

Goals

• Accurate
• No dependencies
• Small
• Fast

Browser Support

Basically IE9+. See .zuul.yml for more details.

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

Automated testing is done with zuul and Open Suace.

Installation

npm install tabbable

Dependencies: none.

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

Usage

var tabbable = require('tabbable');
var arrayOfTabbableNodesInFoo = tabbable(document.getElementById('foo'));

Summary of ordering principles:

• First include any elements with positive tabindex attributes (1 or higher), ordered by ascending tabindex and source order.
• Then include any elements 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.

Differences from jQuery UI's :tabbable selector

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 <area> and <object> elements, which are focusable in some circumstances. (If you need them, maybe PR?)

Feedback more than welcome!

Development

Lint with npm run lint.

Test with npm run test-dev, which will give you a URL to open in your browser. Look at the console log for TAP output.

Changelog

1.0.3

• Further improvements to caching.