@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! [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#installation) ## ➤ Installation ```javascript npm i @a11y/focus-trap ``` [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#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 ``` [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#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[]); } ``` [![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#license) ## ➤ License Licensed under [MIT](https://opensource.org/licenses/MIT).