Build a semi-accessible modal dialog component in React that follows basic ARIA roles and properties.
Requirements:
- A button opens the modal.
- Modal contains a title, content, and a close button.
- Clicking the close button or outside the modal closes it.
- Accessibility:
- Use
role="dialog" for the modal.
- Add
aria-modal="true".
- Connect modal title with
aria-labelledby.
- Connect modal description with
aria-describedby.
- No need for advanced focus trapping or keyboard navigation (semi-accessible).