focus-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
; const popupContainer = document; document;
The method focusTrap
accepts two parameters, the event
and HTML element
container in which you want to trap your focus.
Usage in React
;; const Container = { const contRef = React; React; 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"])';