get-focusables

Get focusable or tabbable elements within a DOM node

Usage no npm install needed!

<script type="module">
  import getFocusables from 'https://cdn.skypack.dev/get-focusables';
</script>

README

get-focusables

Get focusable or tabbable elements within a DOM node

Versions

The package includes versions for ES6+ and ES5, both as an ESM module (browser-compatible) and a CJS module (npm-compatible).

Here's the included file variants:

CJS ESM importing
ES6 index.js index.mjs const getFocusableElements = require('get-focusables')
ES5 es5.js es5.mjs import getFocusableElements from 'get-focusables'

Each version gives you the getFocusableElements function.

get-focusables is written in ES6 syntax and packaged node-style.
It is converted to ES5/ESM for wider distribution.
The default is therefore the ES6 CJS variant index.js.

NOTE
In order to get a non-default version, you will need to tell your bundler to use index.mjs/es5.js/es5.mjs instead of index.js.
For webpack, that's { resolve: { alias: { 'get-focusables': 'get-focusables/es5.mjs } } }'

API

Table of Contents

getFocusableElements

Retrieves all focusable descendents of the given DOM element.

Parameters

  • context Element The DOM Element in which to look for focusable elements (optional, default document)
  • tabbable boolean Restrict to tabbable elements (optional, default true)

Returns (NodeList | NodeListDummy)

getFocusableElements.asArray

Same as getFocusableElements but returns an Array

Parameters

  • context Element The DOM Element in which to look for focusable elements (optional, default document)
  • tabbable boolean Restrict to tabbable elements (optional, default true)

Returns Array

NodeListDummy

The NodeListDummy is an object with a length property of 0. This ensures that the result of getFocusableElements can always be used and checked for length. That makes checks for a truthy/falsy return value unnecessary.

Type: Object

Properties