Import Queue, QueueMaxHeight from @prepared911/ui/queue.
Structure
The header is one native button with aria-expanded and aria-controls that points at the entries. Its name is the label and the tally, so a screen reader says "Queued 4, collapsed, button" before the entries are read.
The entries are one ul with role="list" and li rows, so a screen reader announces the count of entries on entering the list. An empty queue renders no list.
The icon before the label and the ring before a pending entry are decorative (aria-hidden).
Completed entries
A completed entry shows a check in place of the dashed ring, and a strike-through. Neither is read by a screen reader, and color alone must not carry the state, so the check is an image named by completedLabel: "Completed, Read the chart components". Pass the label whenever an entry can be completed. Development builds warn once when an entry is completed and the label is missing.
Actions
Every action is a real button named by its label, in the tab order after the entry's text.
On a hover-capable pointer the actions are transparent and ignore the pointer until the row is hovered or has focus within. Tabbing to an action reveals it, so a keyboard user never lands on an invisible control. A screen reader reads them at all times.
An action's touch target is 24 by 24px on a fine pointer and larger under a coarse pointer, as Button defines. On touch the actions are always visible, because there is no hover.
Keyboard
Key
Action
Tab
Moves through the header, then each action in the open list
Enter, Space
Toggle on the header; press on an action
Contrast, forced colors and motion
Text and marks use the subtle foreground and icon tiers, which clear WCAG 2.2 AA in light and dark (asserted with axe in the browser test).
Under forced-colors: active text takes the system text color, and the header icon and the marks are set to CanvasText, because an SVG keeps its author color otherwise.
The action reveal is an opacity fade and stays under reduced motion. Collapsible's height and chevron movement collapse and its fades stay.
Not covered by a gate
A screen reader pass (AC-8) is manual: header name and state, completed entries, and the actions' names.