A tiny focus trapping utility that respects shadow DOMs and slots.
npm install focus-hunterFocus trapping made easy for things like Dialogs.
Because focus trapping sucks. But its a necessary evil.
- Focus Trap was attempted to be used, but was quite big (~5kb) and didn't handle multiple levels of shadow DOM. It is however a big inspiration for this library.
- This solution has been largely extracted from Shoelace
Focus Hunter doesn't aim to do everything. It tries its best to keep a small minimal API and get out of your way.
This is reflected in bundle size.
focus-hunter is ~1.5kb minified + gzipped.focus-trap is ~5.5kb minified + gzipped.
``bash`
npm install focus-hunter
`js
// Create a trap
const trap = new Trap({ rootElement: document.querySelector("my-trap") })
// Start the trap
trap.start()
// Stop the trap
trap.stop()
`
`jselement.focus({ preventScroll })
const trap = new Trap({
rootElement,
preventScroll, // Passed to for programmatically focused elements`
})
Focus Trap is allowed to have multiple traps. It keeps track of the stacks using window.focusHunter.trapStack whichSet
is implemented via a .
There is also a stack of rootElements at window.focusHunter.rootElementStack
There 2 stacks are checked when you call trap.start() to ensure the rootElement isn't already being trapped and that
the trap isn't already active.
`js`
window.focusHunter.trapStack // => Set
window.focusHunter.rootElementStack // => Set
While the focus trap can get to an