Alerts
Component Behavior
Used to confirm actions. This example is adapted from W3C's Alert Dialog documentation
Opens an alert component with semi-transparent overlay to display information about an action being taken and options for what to do regarding that action. Can be dismissed by clicking the overlay or the close button in the upper right corner.
Accessibility Guidelines
Key accessibility guidelines include:
- Keyboard Navigation:
- Escape key closes the alert
- Focus Management: Component receives focus when it opens. Acts as a "focus trap" and cannot be tabbed out of while it is active.
- Screen Reader Compatibility: Use semantic HTML and ARIA roles to ensure that assistive technologies
accurately interpret the alert.
- Alert header has an ID so it can be used as aria-labelledby for the component
- Alert content has an ID so it can be used as aria-describedby for the component
- Has role="alertdialog"
- Has aria-modal="true"