JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 7671872
  • Score
    100M100P100Q260885F
  • License MIT

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

Package Exports

  • tabbable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tabbable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

tabbable

Build Status

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

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 tabindex="0".

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.

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!