tabbable
Advanced tools
Package description
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.
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);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 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.
Changelog
3.1.2
Readme
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:
<button>s<input>s<select>s<textarea>s<a>s with href or xlink:href attributes<audio>s and <videos>s with controls attributes[contenteditable] elementstabindexAny of the above will not be considered tabbable, though, if any of the following are also true about it:
tabindexdisableddisplay: none or visibility: hidden<input type="radio"> and a different radio in its group is checkedIf 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.
Basically IE9+.
Why? It uses Element.querySelectorAll() and Window.getComputedStyle().
npm install tabbable
Dependencies: none.
You'll need to be compiling CommonJS (via browserify or webpack).
tabbable(rootNode, [options])
Returns an array of ordered tabbable node within the rootNode.
Summary of ordering principles:
tabindex attributes (1 or higher), ordered by ascending tabindex and source order.tabindex and any element that by default receives focus (listed above) and does not have a positive tabindex set, in source order.Type: Node. Required.
Type: boolean. Default: false.
If set to true, rootNode will be included in the returned tabbable node array, if rootNode is tabbable.
tabbable.isTabbable(node)
Returns a boolean indicating whether the provided node is considered tabbable.
tabbable.isFocusable(node)
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.
<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.<iframe>s, <embed>s, <object>s, and <svg>s is inconsistent across browsers, so if you need an accurate read on one of these elements you should try giving it a tabindex. (You'll also need to pay attention to the focusable attribute on SVGs in IE & Edge.) But you also might not be able to get an accurate read — so you should avoid relying on it.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.)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.):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.<a> elements by default: you have to change a setting to get the standard behavior. Tabbable does not know whether you've changed that setting or not, so it will include <a> elements in its list.Feedback and contributions more than welcome!
FAQs
Returns an array of all tabbable DOM nodes within a containing node.
The npm package tabbable receives a total of 3,246,617 weekly downloads. As such, tabbable popularity was classified as popular.
We found that tabbable demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A hospital in Mobile, Alabama, agreed to a settlement in a landmark ransomware death lawsuit, but is now reportedly reconsidering the agreement and refusing to pay.
Security News
A new report explores how advancements in LLMs are enhancing cyber threats, including polymorphic malware, personalized spearphishing, and the risk of hijacking customer service bots.
Security News
ESLint has approved an RFC that adds support for TypeScript configuration files, which is aimed at improving the developer experience and recognizing changes in the evolving JavaScript ecosystem.