focus-trap

What the module does

Focus trap is a little, modular vanilla JavaScript solution for trapping focus within a DOM node. The README frames the need clearly: there are times when it matters that a user hitting Tab, Shift Tab or clicking around cannot escape a certain cycle of focusable elements, and this is a definite requirement when building accessible modals. On activation, some element inside the trap receives focus, by default the first in tab order as determined by the tabbable dependency, though a specific initial element can be set. Tab and Shift Tab then cycle through the trap's tabbable elements but never leave it, clicks inside behave normally while clicks outside are blocked, and the Escape key deactivates the trap. On deactivation, focus returns to whichever element had it when the trap activated, such as the button that opened the modal, and tabbing and clicking behave normally everywhere again. The project links to focus trap react as a light wrapper for React users.

Installation and API shape

Installation is through npm with a package named focus-trap, and a UMD build is published to unpkg as dist files. The README warns that the UMD build does not bundle the tabbable dependency, so that must be included separately and before focus trap. A basic usage example imports the module as ESM or requires it as CJS, or relies on the global when using UMD, then calls createFocusTrap with an element and options. The element can be a DOM node, a selector string passed to querySelector, or an array of nodes or selector strings where order decides where focus goes after the last tabbable element of one node is reached. The module supports focus traps within focus traps and can pause behavior without fully deactivating, then unpause. The README notes that a trap must contain at least one container with at least one tabbable node or it throws an error, though nodes can be added or removed at runtime.

Browser support and community

Browser support aims to be as old and broad as reasonably possible while excluding out of support browsers and those with nearly no user base, with a desktop focus on Chrome, Edge, Firefox, Safari and Opera. The README is explicit that focus trap is not officially tested on mobile browsers or devices. Safari needs a specific setting enabled, Press Tab to highlight each item on a webpage, or traps will not work as expected because Safari does not tab through all elements by default. Internet Explorer is no longer supported because Microsoft retired it. The library relies on tabbable for its browser support floor, and the README notes that performance optimization and old browser support are often at odds, so tabbable may not always use the most modern API. The project carries 1,563 stars and 123 forks with 4 open issues, lists 40 contributors, and is licensed under MIT on the master branch.

Editorial conclusion

Focus trap is an MIT licensed vanilla JavaScript module on the master branch with 1,563 stars and 40 contributors that traps focus for accessible modals, depends on tabbable, and ships both an npm package and a UMD build on unpkg.