Inline Notification
A static inline banner that communicates contextual feedback — informational, success, warning, or error. Renders as a live region so screen readers are notified automatically.
Live regions
The component's content div carries an ARIA live region role that is determined by the state prop. Screen readers announce the content automatically when it is inserted into or changed in the DOM.
| State | role | aria-live | Behaviour |
|---|---|---|---|
| info | status | polite | Waits for the user to finish the current task before announcing. |
| success | status | polite | Waits for the user to finish the current task before announcing. |
| warning | status | polite | Waits for the user to finish the current task before announcing. |
| error | alert | assertive | Interrupts the user immediately. Use only for critical issues that require immediate attention. |
Avoid using state="error" for warnings or informational messages — the assertive live region will interrupt the screen reader user mid-sentence.
Screen reader behaviour
| Attribute | Element | Description |
|---|---|---|
| role="alert" | role="status" | .content (inner div) | Live region role. Determined by the state prop. |
| aria-live="assertive" | "polite" | .content (inner div) | Live politeness. Assertive for error state, polite for all others. |
| aria-hidden="true" | .icon-wrap | Hides the decorative status icon from screen readers. The semantic meaning is conveyed entirely via heading, description, and the live region role. |
Keyboard interaction
| Key | Action |
|---|---|
| Tab | Move focus to the action button (if present), then to the dismiss button (if present). |
| Shift + Tab | Move focus in reverse order. |
| Enter / Space | Activate the focused button — emits action or dismiss event respectively. |
WCAG 2.2 compliance
1.3.3 Sensory Characteristics — APass
Meaning is not conveyed by colour or icon alone — the state is communicated via the live region role and the heading/description text.
1.4.1 Use of Colour — APass
The status icon and text provide non-colour cues in addition to the background and border colour.
2.1.1 Keyboard — APass
All interactive buttons (dismiss, action) are reachable and activatable via keyboard.
2.4.7 Focus Visible — AAPass
Dismiss and action buttons inherit the diwa focus ring (var(--diwa-focus-ring-width) solid --diwa-border-focus, 3:1+ contrast).
4.1.3 Status Messages — AAPass
Live region roles (role="status" / role="alert") ensure changes are announced to assistive technology without requiring focus.
Best practices
- Choose the right urgency — use
state="error"only for critical failures that require immediate attention; for informational or success messages preferstate="info"orstate="success"to avoid alert fatigue. - Do not hide the container — if the notification is not yet shown, keep the component out of the DOM rather than setting
aria-hidden="true"on it; live regions must be present before content is injected to fire reliably in all browsers. - Reduced motion — all CSS transitions inside the shadow DOM respond to
prefers-reduced-motion: reduceand are suppressed automatically.