Reusable modal dialog component for a UI library

Build a reusable dialog (modal) component for a web component library. The caller sets the backdrop colour, a title, the body content and a list of action buttons; the dialog has a close button in its header. It is used all over the app, so it must be easy to reuse, style and extend, work on desktop and phone screens, and be accessible.

Interface

Unless you agree on a different interface with the interviewer, assume (React shown; Vue or plain JavaScript are fine):

• <Dialog isOpen={bool} onClose={fn} title="…" backdropColor="rgba(0,0,0,0.5)" actions={[…]}>body</Dialog>
• Each action is { label: string, variant: "primary" | "secondary" | "danger", onClick: () => void }.
• onClose(reason) is called with "close-button", "escape" or "backdrop"; the parent decides whether to set isOpen to false.

Example

<Dialog
  isOpen={confirming}
  title="Delete project?"
  onClose={() => setConfirming(false)}
  actions={[
    { label: "Cancel", variant: "secondary", onClick: () => setConfirming(false) },
    { label: "Delete", variant: "danger", onClick: deleteProject },
  ]}>
  This removes the project and its files.
</Dialog>

Clarifying questions

• Which framework does the library use?
• Should the dialog be controlled only (the parent owns isOpen) or also allow uncontrolled use?
• Must clicking the backdrop close it, or should that be optional (for example on forms with unsaved input)?
• Can dialogs be stacked on top of each other?

What a strong answer covers

• The DOM: a portal to the end of body, a backdrop element, and a dialog container with header (title and close button), body and footer (actions). The native <dialog> element with showModal() as an alternative that provides much of this.
• State: visibility controlled by the parent; focus and scroll locking internal to the dialog.
• Keyboard: Escape closes; Tab and Shift+Tab are trapped inside the dialog; focus moves to the first focusable element (or the dialog) on open and returns to the element that opened it on close.
• Accessibility: role="dialog", aria-modal="true", aria-labelledby pointing at the title, an accessible label on the close button, the rest of the page made inert.
• Backdrop clicks: close only when the click starts and ends on the backdrop, not when a text selection drags out of the dialog.
• Theming through CSS variables or class names, a responsive layout (full width with a maximum, full screen on small phones), and body scroll locked while open.

Follow-ups

• Support stacked dialogs: Escape closes only the top one.
• Animate opening and closing without breaking focus handling.
• How do you test the focus trap and the screen reader behaviour?