Focustrap

Focustrap, also known as a focus trap, is a user interface pattern that confines keyboard focus to a designated region while it is active, such as a modal dialog or a settings panel. The goal is to prevent focus from moving to content behind the active element, ensuring that keyboard and assistive technology users can complete tasks without losing context.

How it works: when the trap is activated, focus is moved to the first focusable element within the region. The trap keeps cycling focus inside by intercepting Tab and Shift+Tab; when the last focusable element is reached, focus returns to the first. Conversely, when at the first element and the user presses Shift+Tab, focus moves to the last element. Deactivation returns focus to a sensible element, often the control that opened the trap. Some implementations apply aria-modal="true" and set the rest of the page to aria-hidden to convey modality to assistive tech.

Common use cases include modal dialogs, overlays, side panels, and step-by-step wizards. Implementations can be built from scratch with keyboard event handlers or by using libraries that provide focus-trap functionality. These techniques typically involve making the trap region focusable, ensuring the initial focus is placed correctly, and restoring focus after dismissal.

Accessibility considerations: ensure that focus is moved to a logical starting point, provide a means to dismiss the trap, and restore focus to the calling element upon exit. Avoid trapping focus when the region is not visible, and ensure other UI controls remain operable when appropriate.

See also: keyboard navigation, modal dialog, ARIA, accessibility.