Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. System Message
  5. Accessibility

System Message

Accessibility

Import SystemMessage from @prepared911/ui/system-message.
Structure
  • SystemMessage renders div or li and adds no role. Inside a list the caller passes as="li" and owns the list.
  • It is in the reading order of the transcript, between the messages around it. It is never aria-hidden: a screen reader user needs to know someone joined as much as a sighted one.
  • The time slot takes a Time, so the machine-readable instant is in dateTime.
The log belongs to the container
A system line carries no log role, aria-live, or aria-atomic. The scroll container that holds the transcript is the role="log" region (ChatScroll). A per-line live region would announce every event twice.
Not by position alone
The line is centered, but its meaning does not depend on where it sits. The event is its text, so it reads the same without the layout.
Contrast and forced colors
The caption is at the subtle foreground tier, which clears WCAG 2.2 AA at 12px in light and dark (checked with axe in both). It draws no color other than text, so under forced-colors: active it takes the system text color and loses nothing.
Motion
animated fades and slides the line in with the glide enter tokens. Under reduced motion the slide collapses and the fade remains; the text is already in place.
Previous
System Message / API and Development
Next
Tab Menu / Usage
On this page
Structure
The log belongs to the container
Not by position alone
Contrast and forced colors
Motion