Build an Accessible Modal with Focus Trap & Scroll Lock

Question

Accepted Answer

**Requirements**
- Trigger button opens modal via portal; overlay click and Esc close; `aria-modal="true"` + `role="dialog"`.
- Focus trap: Tab / Shift+Tab cycles inside modal; initial focus on first focusable; restore focus to trigger on close.
- Body scroll lock (prevent background scroll) and handle stacked modals (incremental lock count).
- Close animation (fade + scale) before unmount.

**Architecture**
- Portal via `ReactDOM.createPortal(children, document.body)`.
- Focus trap: collect `focusable = modal.querySelectorAll("a,button,input,[tabindex]:not([tabindex='-1'])")`; on `keydown` Tab, wrap.
- Scroll lock: `document.body.style.overflow="hidden"` + padding compensation for scrollbar width; ref-count for stacking.

**What interviewers look for:** portal, trap logic, restore focus ref, scroll lock with compensation, Esc listener cleanup, animation sequencing.

**Reference implementation**
```jsx
export function Modal({ open, onClose, children }) {
  const triggerRef = React.useR

Build an Accessible Modal with Focus Trap & Scroll Lock

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THE
STREAK ALIVE.

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THESTREAK ALIVE.

KEEP THE
STREAK ALIVE.