@souvinivieira/focus-trap · demo

Keep keyboard focus where it belongs

Put the mouse aside and use Tab, Shift+Tab and Esc. When an overlay is open, focus cycles inside it and goes back to where you were when it closes. Source on GitHub.

1. A form in a dialog

Includes the tricky cases: a radio group (one tab stop, arrows inside), a disabled fieldset and a collapsed <details>. Escape or a click on the backdrop closes it.

2. A dialog that opens another

The confirmation pauses the first trap. Closing it hands focus back to the button that opened it, and the first trap takes over again.

3. A navigation drawer

Drawers are rarely a native <dialog>, which is exactly where a focus trap earns its place.