Build a moderately-accessible modal dialog in React that supports multiple ways to close and includes basic keyboard handling.
Requirements:
- A button opens the modal.
- Modal contains a title, content, and a close button.
- Users can close the modal by:
- Clicking the close button
- Clicking outside the modal
- Pressing the Escape key
- 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).