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:
- Focus the first interactive element on show
- 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
Hello World Next PageGoodbye
JS File
; ;console.logfocusElements;// 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
HelloWorld
JS File
; isElementInteractivedocument.getElementById'123'; // falseisElementInteractivedocument.getElementById'abc'; // trueisElementInteractivedocument.getElementById'xyz'; // true
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.