Accessibility

Visible on both light and dark backgrounds. Uses ring-offset to prevent clipping.

Subtle but clear — the entire border lights up, not just an outline.

Uses focus-within so child interactions highlight the container.

Matches hover state for consistency. No outline — fill is sufficient.

The chat container uses role="log" so screen readers announce new messages. Individual messages use aria-live="polite" to avoid interrupting the user.

Streaming dots are purely visual. The ARIA label communicates state to assistive tech. Updates to "Response complete" when streaming ends.

Expandable content uses aria-expanded on the toggle button. The content region is labeled with the artifact title.

Errors and confirmations use assertive live regions. Info toasts use polite. Auto-dismiss toasts must also be accessible via a notification log.

Focus traps inside the modal. Escape key closes. Focus returns to the trigger element on close.

Screen readers should announce "Loading" once, not repeat for every skeleton element. Use a single status container.

Respect prefers-reduced-motion

All animations must check the prefers-reduced-motion media query. When reduced motion is preferred, replace animations with instant state changes.

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}

No motion-only information

Streaming dots, loading spinners, and progress bars must have text alternatives. Motion should enhance, never be the sole communicator of state.

/* Streaming indicator */
<div aria-label="Generating response">
  <span className="animate-bounce" />
  <span className="sr-only">Generating...</span>
</div>

Limit animation duration

No animation should exceed 300ms for UI transitions. Loading animations (pulse, bounce) loop but must be stoppable when content arrives.

transition-colors duration-150
transition-transform duration-200