Design an Accessible Dialog – Frontend System Design

We’ll walk through the frontend system design for a reusable modal dialog. Our goal is a component that opens from a trigger, traps focus, locks the page behind it, and restores the user’s place on close. This is not a “draw a centered card” interview. Interviewers treat it as an accessibility and state-machine problem. Put simply, the task is to design an accessible dialog that keyboard and screen reader users can trust.

You’ll see the public API, the open/close workflow, how we make the rest of the page inert, and the edge cases that separate a styled overlay from a real dialog. We’ll stay at component scale — one top-layer dialog, a handful of focusable nodes, and a scroll lock — not a fake Netflix backend.

Problem Statement

Design a modal / dialog that overlays the page.

Requirements:

• Opens from a button, closes via X, Cancel, Escape, or (optionally) backdrop click
• Focus is trapped inside while open and restored on close
• The rest of the page is inert (no... premium content.