Focus Trap
Simple focus trap for trapping focus within a given element.
Install
$ npm install @rynpsc/focus-trap
API
FocusTrap(element: HTMLElement)
Creates a focusTrap instance.
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.
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.
trap.deactive();
trap.deactivate(document.getElementById('my-id'), true);
activated: boolean
Returns a boolean
indicating if the trap is activate.
getFocusableElements(element: HTMLElement): HTMLElement[]
Gets the focusable child elements within a given element.
import { getFocusableElements } from '@rynpsc/focus-trap';
let elements = getFocusableElements(HTMLElement);
Example
<button id="activate">Activate</button>
<div id="trap">
<a href="#">Link</a>
<label for="name">Name</label>
<input type="text" id="name">
<button id="deactivate">Deactivate</button>
</div>
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();
});
Browser support
Requires the following APIs:
- Array.from
- Array.prototype.filter
- Array.prototype.some
- DOMTokenList.contains
- Element.matches
- Element.querySelectorAll
- HTMLElement.dataset
License
MIT