Modal Dialogs: The Focus Trap Pattern

Why it exists

Modals exist to interrupt a user's workflow and demand their full attention for a specific, isolated task. This pattern prevents them from interacting with the rest of the application until the action in the modal is completed or dismissed, ensuring critical steps are not missed.

The mental model

Think of a modal as a temporary, mandatory overlay that hijacks user input. It creates a "focus trap," meaning all keyboard interactions, like Tab and Shift + Tab, are confined within its boundaries. The underlying page is inert until the modal is closed.

How it works

When a modal opens, focus moves to an element inside it. The Tab key cycles forward through its focusable elements, and Shift + Tab cycles backward, looping within the modal instead of escaping to the page behind it. The Escape key must always provide a way to close the dialog. Upon closing, focus should return to the element that originally opened the modal, restoring the user's context. The background content is typically dimmed to visually reinforce its inactive state.

When to use it

Use modals for tasks that require user confirmation before proceeding, especially for destructive actions like deleting data. They are also effective for self-contained sub-flows that need user input, such as a login form or a date picker, where context-switching would be disruptive.

When not to use it

Avoid modals for non-essential information or notifications that don't require immediate action, as they can be frustratingly disruptive. If content is purely informational, consider a less intrusive pattern like a toast notification. A key footgun is setting initial focus on a destructive action; always default to the safest choice, like a "Cancel" button.

One canonical example

A "Delete Item" confirmation dialog. When a user clicks "Delete," a modal appears asking "Are you sure?" with two buttons: "Confirm Delete" and "Cancel." By default, focus is set on "Cancel," the least destructive action. If the user hits Escape or clicks "Cancel," the modal closes and focus returns to the original "Delete" button. Tabbing only cycles between the two buttons inside the modal.