Notifications

Last updated on 2026-04-14

The notifications page demonstrates accessible modal dialogs, alert patterns, and toast notifications using ARIA live regions.

Page URL

/notifications

Key Features

Notification list with proper semantic structure
Modal dialogs with focus trapping
Alert dialogs for destructive actions
Toast notifications via ARIA live regions
Keyboard-dismissible overlays

Accessibility Patterns

When a modal opens, the useFocusTrap hook:

Moves focus to the first focusable element inside the modal
Traps Tab/Shift+Tab within the modal boundaries
Returns focus to the trigger element on close
Closes on Escape key

const modalRef = useFocusTrap(isOpen);

return (
    <div ref={modalRef} role="dialog" aria-modal="true" aria-labelledby="modal-title">
        <h2 id="modal-title">Notification Details</h2>
        {/* Modal content */}
        <button onClick={onClose}>Close</button>
    </div>
);

Toast Announcements

Toast notifications use the useAnnounce hook which writes to an ARIA live region:

const announce = useAnnounce();

// Polite announcement (waits for current speech to finish)
announce('Settings saved successfully');

// Assertive announcement (interrupts current speech)
announce('Error: Failed to save', 'assertive');

The LiveRegion component renders a visually hidden <div aria-live="polite"> that screen readers monitor for changes.

Alert Dialogs

Destructive actions (delete, dismiss all) use role="alertdialog":

<div role="alertdialog" aria-modal="true" aria-labelledby="alert-title" aria-describedby="alert-desc">
    <h2 id="alert-title">Delete notification?</h2>
    <p id="alert-desc">This action cannot be undone.</p>
    <button>Cancel</button>
    <button>Delete</button>
</div>

Focus moves to the least destructive action (Cancel) by default.

Notification List

The notification list uses semantic <ul> and <li> elements with:

Unread indicators with aria-label (e.g., "Unread notification")
Action buttons with descriptive labels
Timestamps with <time datetime="..."> elements

Customization

Connect to your notification API or WebSocket feed
Modify toast duration and positioning
Add notification categories and filtering
Customize the notification detail modal content

Settings