Design a reusable Modal for a shared component library used by multiple teams. Apply RADIO.
API design, accessibility, and composability — directly your Domo component-library work.
Requirements: any content, controlled open/close, closes on Esc/backdrop, focus-trapped, accessible, themeable. Architecture: a Portal renders the modal at the document root (escapes overflow/z-index); Backdrop + Dialog + optional Header/Body/Footer via composition (children/slots), not a hundred boolean props. Data model: `isOpen` owned by the parent (controlled). Interface: props isOpen, onClose, children, ariaLabel, size; use composition for content. Optimizations/a11y: role=dialog + aria-modal, focus trap, restore focus to the trigger on close, lock body scroll, render nothing when closed, Esc + backdrop-click to close. Composition over configuration is the key senior signal for library work. Why a Portal: rendering into document.body escapes ancestor overflow:hidden, transform, and z-index stacking contexts that would otherwise clip or mis-layer the dialog. The accessibility details that separate a real answer from a toy: role=dialog + aria-modal=true, initial focus moved into the dialog, a focus trap that cycles Tab within it, and focus restored to the triggering element on close (save document.activeElement before opening). Prefer a controlled API (parent owns `isOpen`) so the modal composes with routing, forms, and confirmation flows; expose content via children/slots (Header/Body/Footer) rather than a title/body/footer/showClose prop explosion. Render nothing when closed to keep the tree light, and lock body scroll while open so the background doesn't scroll under the overlay.
Any 'design a <widget>' prompt (dropdown, tooltip, tabs, date-picker) for a design system.