How to build an accessible TypingIndicator in React
role="status" with an accessible name ("Assistant is typing") is announced once when the indicator mounts; the dots are aria-hidden. They bounce only under prefers-reduced-motion: no-preference and otherwise rest as a static ellipsis; forced colours paint them CanvasText
When to use a TypingIndicator
- Holding the place of an assistant reply between sending a prompt and the first token arriving
- Showing that another participant in a conversation is composing a message
When not to use it
- Naming what the AI is doing ("Searching…", "Generating…") or offering Stop — use AiStatus
- Once text has started streaming — render the text; the dots mean nothing has arrived yet
- Non-conversational loading — use Spinner or Skeleton
Accessibility
Role status, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Keeping TypingIndicator below a reply that is already streaming
Prefer: Swap TypingIndicator for the message content when the first token arrives
Two progress signals at once compete, and the status region would keep claiming nothing has been written
Example
<TypingIndicator />