focus-elements

Helpful utilities to determine which child elements are interactive according to the WHATWG spec.

This is especially useful to make accessible modals to:

1. Focus the first interactive element on show
2. Trap focus inside of an element (the modal)

Installation

npm install focus-elements

What's Included

getInteractiveChildElements(parent: HTMLElement): HTMLElement[]

Returns a collection of which child elements are interactive.

Usage

DOM structure

<div id="123">
  <button>Hello World</button>
  <div>
    <form>
      <input type="text" />
      <input type="number" disabled />
    </form>
  </div>
  <a href="https://www.website.com">Next Page</a>
</div>
<div tabindex="0">Goodbye</div>

JS File

import {getInteractiveChildElements} from 'focus-elements';

const focusElements = getInteractiveChildElements(document.getElementById('123'));
console.log(focusElements);
// Prints:
// <button>Hello World</button>
// <input type="text" />
// <a href="https://www.website.com">Next Page</a>

isElementInteractive(element: HTMLElement): boolean

Determines if a given element is interactive.

Usage

DOM structure

<div id="123" />
<button id="abc">Hello</button>
<div tabindex="0" id="xyz">World</div>

JS File

import {isElementInteractive} from 'focus-elements';

isElementInteractive(document.getElementById('123')); // false
isElementInteractive(document.getElementById('abc')); // true
isElementInteractive(document.getElementById('xyz')); // true

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.