Snippet: An Accessible Dialog Component

This snippet demonstrates how to build a fully accessible modal dialog component in React from scratch. The component includes critical accessibility features often overlooked in custom dialog implementations, such as focus trapping, background scroll locking, and proper ARIA attributes.

The dialog is built using styled-components for maintainable styling and leverages the native HTML <dialog> element for better semantics and built-in modal behaviors. It demonstrates practical accessibility considerations including:

• Focus management (trapping, initial focus, and restoration)
• Keyboard navigation support
• Screen reader compatibility
• Visual design that signals modal context

This implementation balances a clean, minimalist design with comprehensive accessibility features, making it suitable for production use in professional applications.