Basic focus trap
npm install @rynpsc/focus-trapSimple focus trap for trapping focus within a given element.
!npm version
!npm bundle size (minified and gzipped)
```
$ npm install @rynpsc/focus-trap
Creates a focusTrap instance.
`js
import { FocusTrap } from '@rynpsc/focus-trap';
let trap = FocusTrap(HTMLElement);
`
#### .activate(element: HTMLElement | undefined | null , scroll: boolean)
Active the trap and set focus to the given element. If element is undefined the first focuable element will be focused. Set to null to disable focusing any element.
Pass true as the second parameter to scroll element into view, by default this is set to false.
`js`
trap.activate();
trap.activate(document.getElementById('my-id'), true);
#### .deactivate(element: HTMLElement | undefined | null, scroll: boolean)
Deactivate the trap and set focus to the given element. If element is undefined the element that had focus before calling activate will be focused. Set to null to disable focusing any element.
Pass true as the second parameter to scroll element into view, by default this is set to false.
`js`
trap.deactive();
trap.deactivate(document.getElementById('my-id'), true);
#### activated: boolean
Returns a boolean indicating if the trap is activate.
Gets the focusable child elements within a given element.
`js
import { getFocusableElements } from '@rynpsc/focus-trap';
let elements = getFocusableElements(HTMLElement);
`
`html
`js
import { FocusTrap } from '@rynpsc/focus-trap';const trap = FocusTrap(document.getElementById('trap'));
document.getElementById('activate').addEventListener('click', function() {
trap.activate();
});
document.getElementById('deactivate').addEventListener('click', function() {
trap.deactivate();
});
``Requires the following APIs:
- Array.from
- Array.prototype.filter
- Array.prototype.some
- DOMTokenList.contains
- Element.matches
- Element.querySelectorAll
- HTMLElement.dataset
MIT