Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Reasoning
  3. Accessibility

Reasoning

Accessibility

Import Reasoning from @prepared911/ui/reasoning.
  • Trigger. A native button from Collapsible, named by its visible label, with aria-expanded and, while the region is mounted, aria-controls. The chevron and the sparkle are aria-hidden.
  • State change. The label changes from the streaming label to the completed label in place. Reasoning adds no live region: announcing every streamed token, or the end of streaming, belongs to the conversation that holds it.
  • Motion. The streaming label is Shimmer with the Readable base: the label rests at the subtle tier and a highlight lifts it to the default tier, so it never dims under its resting contrast. The sweep runs while isStreaming is true. It stops under reduced motion (the system setting or data-motion="reduced"), increased contrast and forced colors; the label then paints the default foreground, or the system text color under forced colors. The open and close fades from Collapsible remain under reduced motion.
  • Name. Shimmer adds no role, name or live region, so the trigger's name is the streaming label whether or not the sweep runs.
  • Contrast. The label and the region use the subtle tier.
  • Reflow. A long or unbroken label and reasoning wrap inside the row; nothing scrolls sideways.
  • Forced colors. The focus ring uses system colors, and the label and region repaint with the text color.
Previous
Reasoning / API and Development
Next
Response / Usage