JarCastingfocus-trap-js
Trap focus inside specified HTML element. Vanilla JS with size <0.5kb. No dependencies.
Browser Support: IE 10, Firefox, Chrome.
Note
No event listeners, it is just handling the current event, and traps the focus if it is neccessary.
Instalation
npm i focus-trap-js
Usage
import focusTrap from "focus-trap-js";
const popupContainer = document.getElementById("popupId");
document.addEventListener("keydown", event => {
focusTrap(event, popupContainer);
});
The method focusTrap accepts two parameters, the event and HTML element container in which you want to trap your focus.
Usage in React
import React from "react";
import focusTrap from "focus-trap-js";
const Container = () => {
const contRef = React.useRef();
React.useEffect(() => {
const handleKeyEvent = event => {
focusTrap(event, contRef.current);
};
document.addEventListener("keydown", handleKeyEvent);
return () => {
document.removeEventListener("keydown", handleKeyEvent);
};
}, [contRef]);
return <div ref={contRef}></div>;
};
List of Tabbable Elements
const tabbableQuery = [
"input",
"select",
"textarea",
"a[href]",
"button",
"[tabindex]", //tabIndex > 0
"audio[controls]",
"video[controls]",
'[contenteditable]:not([contenteditable="false"])'
];