@a11y/focus-trap

A lightweight web component that traps focus within a DOM node

_{A focus trap ensures that tab and shift + tab keys will cycle through the focus trap's tabbable elements but not leave the focus trap. This is great for making accessible modals. Go here to see a demo https://appnest-demo.firebaseapp.com/focus-trap/.}

* Does one things very very well - it traps the focus!
* Pierces through the shadow roots when looking for focusable elements.
* Works right out of the box (just add it to your markup)
* Created using only vanilla js - no dependencies and framework agnostic!


➤ Installation

``javascript
npm i @a11y/focus-trap
`



![-----------------------------------------------------](#usage)



➤ Usage

Import @a11y/focus-trap somewhere in your code and you're ready to go! Simply add the focus trap to your html and it'll be working without any more effort from your part.

`html

Focus 1
Focus 2
Focus 3
Focus 4
Focus 5

`



![-----------------------------------------------------](#api)



➤ API

The focus-trap element implements the following interface.

`typescript
interface IFocusTrap {
// Returns whether or not the focus trap is inactive.
inactive: boolean;

// Returns whether the focus trap currently has focus.
readonly focused: boolean;

// Focuses the first focusable element in the focus trap.
focusFirstElement: (() => void);

// Focuses the last focusable element in the focus trap.
focusLastElement: (() => void);

// Returns a list of the focusable children found within the element.
getFocusableElements: (() => HTMLElement[]);
}
``


➤ License

Licensed under MIT.