Banner accessibility

WCAG 2.1 AA requirements

Semantics

• Banner renders with role="status" so assistive tech announces updates politely without interrupting.
• For urgent messages (errors), consider overriding to role="alert" via the role prop.

Dismiss button

• The dismiss button has aria-label="Dismiss" for screen readers.
• It is focusable via Tab and activates on Enter or Space.
• Focus ring is visible on keyboard focus.

Colour is never the only signal

• Every tone uses both a background colour and a default icon. The message text must also convey the severity.
• The error tone should include descriptive text like "Error" or "Failed".

Contrast

• All tone colours meet 4.5:1 contrast against their backgrounds in both light and dark themes.
• Custom className overrides must be verified for contrast manually.

Audit checklist

• Banner message text conveys meaning without relying on colour alone
• 4.5:1 contrast on every tone in light and dark
• Dismiss button has aria-label="Dismiss"
• Dismiss button is keyboard-reachable with visible focus ring
• role="status" is appropriate (or role="alert" for urgent messages)