StatusDot from @prepared911/ui-core 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.
- 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.
- The dot itself is hidden.
- Surrounding elements carry the state via visible text or
aria-label.
- The pulsing animation should pause or fade when
prefers-reduced-motion: reduce is set; a solid dot is still meaningful.
- 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.
