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.