@appnest/focus-trap

A lightweight web component to trap 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 ```javascript npm i @appnest/focus-trap ``` ![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png) ## ➤ Usage Import `@appnest/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 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. getFocusableChildren: (() => HTMLElement[]); } ``` ![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png) ## ➤ License Licensed under [MIT](https://opensource.org/licenses/MIT).