UI Recall

UI RECALL GUIDE

Modal focus and dismissal patterns in React

A modal interrupts the current surface, so opening, keyboard movement, dismissal, and return focus need one coherent interaction contract.

Reviewed Aug 15, 2026 · Practical guidance, not a ranking claim

Make the boundary real

While a modal is active, the content behind it is inert. Focus moves inside, Tab and Shift+Tab stay within the dialog, and Escape closes when dismissal is allowed.

  • Give the dialog an accessible name from a visible title.
  • Choose initial focus from the task and risk, not always the first button.
  • Keep a visible Close or Cancel control.
  • Return focus to the invoking control unless the completed workflow makes another destination more logical.

Treat outside click as dismissal, not activation

If outside click closes an idle dialog, consume that event so it cannot also activate the interface underneath. During an in-progress action, block incidental dismissal through every path that would lose work.

Primary sources