FrontendArk

Master Frontend Interviews

  • Practice
  • Playground
  • Resource
Medium

Modal Dialog III

50 mins

Build a moderately-accessible modal dialog in React that supports multiple ways to close and includes basic keyboard handling.

Requirements:

  1. A button opens the modal.
  2. Modal contains a title, content, and a close button.
  3. Users can close the modal by:
    • Clicking the close button
    • Clicking outside the modal
    • Pressing the Escape key
  4. Accessibility:
    • Use role="dialog" and aria-modal="true".
    • Connect title and description with aria-labelledby and aria-describedby.
    • Focus should move to the modal when opened.
    • Return focus to the trigger button when closed.
    • No need for advanced focus trapping (only basic focus management).

Code Editor

React Component

00:00
Loading...

Live Preview

See your React component