Chain Of Thought

Accessibility

Import ChainOfThought, ChainOfThoughtStep, ChainOfThoughtStatus from @prepared911/ui/chain-of-thought.

Trigger. A native button from Collapsible, named by its visible label, with aria-expanded and, while the region is mounted, aria-controls. The sparkle and the chevron are aria-hidden.
Steps. An ordered list (ol with role="list") of list items, so a screen reader announces the number of steps and the position of each. The marker and the connector are decorative (aria-hidden).
Status. A marker's color is never the only cue (WCAG 1.4.1). A step without an icon marks its status by shape: an hourglass for Pending, a pulsing dot for Active and a check for Complete, and its required statusLabel is visually hidden text after the label and description, so the status is read with the step. An icon step paints no status; its optional statusLabel is read the same way.
Motion. The pulse of the Active dot is StatusDot's and stops under reduced motion; the dot, the hourglass and the check stay distinct without it. The open and close fades remain under reduced motion.
Forced colors. The connector is a border, so it stays visible in system colors; backgrounds are not relied on.
Reflow. A long or unbroken label and description wrap inside the step.

Accessibility

Import ChainOfThought, ChainOfThoughtStep, ChainOfThoughtStatus from @prepared911/ui/chain-of-thought.

Trigger. A native button from Collapsible, named by its visible label, with aria-expanded and, while the region is mounted, aria-controls. The sparkle and the chevron are aria-hidden.
Steps. An ordered list (ol with role="list") of list items, so a screen reader announces the number of steps and the position of each. The marker and the connector are decorative (aria-hidden).
Status. A marker's color is never the only cue (WCAG 1.4.1). A step without an icon marks its status by shape: an hourglass for Pending, a pulsing dot for Active and a check for Complete, and its required statusLabel is visually hidden text after the label and description, so the status is read with the step. An icon step paints no status; its optional statusLabel is read the same way.
Motion. The pulse of the Active dot is StatusDot's and stops under reduced motion; the dot, the hourglass and the check stay distinct without it. The open and close fades remain under reduced motion.
Forced colors. The connector is a border, so it stays visible in system colors; backgrounds are not relied on.
Reflow. A long or unbroken label and description wrap inside the step.