Trap JS
The trap component make you able to create a focus trap on an element.
js
import Trap from "@natachah/vanilla-frontend/js/utilities/_trap"Javascript
This component is only in javascript, to use it you must import the script file and create a new Trap object.
You can pass the element, an array of exclusions (= element that should not be inert) and an array of inclusions (= element that should be included into the trap) when initiate the component.
js
import Trap from "@natachah/vanilla-frontend/js/utilities/_trap"
new Trap(document.getElementById('drawer'), ['#backdrop','#toggleMenu'], ['#toggleMenu'])Methods
| Method | Description |
|---|---|
| focusOnFirst() | This will focus on the first focusable element |
| activate() | This method will activate the trap, it will also set inert and aria-hidden attributes on other HTMLElements |
| desactivate() | This method will desactivate the trap and remove related attributes |
| handleKeydown(e) | This method will keep the TAB focus inside the element |
| getFocusableElements() | This method will return an array of focusable items inside the element |
| getSiblingsOutside() | This method will return an array of HTMLElements outside of the element |