Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. Status Dot
  5. Accessibility

Status dot

Accessibility

StatusDot from @prepared911/ui/status-dot is a purely decorative colored dot. The component hides itself from assistive tech; your job is to ensure the surrounding control carries the state in text, and to reserve the pulse animation for genuine urgency.
What the component handles
  • Decorative markup. aria-hidden="true" on the dot so screen readers ignore it.
  • Color tokens. Consistent color pairing for success, warning, error, info, and neutral states.
What you must provide
  • State in text. A status label beside the dot, a tooltip, or an aria-label on the parent control. The dot is never the only state signal.
  • Non-color cue for critical states. Pair a red dot with an icon or explicit word ("Offline") for users who can't distinguish color.
  • Restraint on pulse. The pulsing variant signals "act now". Use it for live incidents and required attention only.
Semantics and roles
  • The dot itself is hidden.
  • Surrounding elements carry the state via visible text or aria-label.
Reduced motion
  • The pulsing animation should pause or fade when prefers-reduced-motion: reduce is set; a solid dot is still meaningful.
Known caveats
  • Inside avatars. Presence dots on avatars must duplicate the state in a screen-reader-accessible string nearby (next line, tooltip on the avatar, or row-level label).
  • On dark backgrounds. Ensure dot contrast remains sufficient against the surface; the neutral variant in particular can fall below 3:1 on mid-toned backgrounds.
Previous
Status dot / API and Development
Next
Stepper / Usage
On this page
What the component handles
What you must provide
Semantics and roles
Reduced motion
Known caveats