Queue

Accessibility

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.

Queue / API and Development

On this page

Contrast, forced colors and motion

Not covered by a gate

Queue

Accessibility

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

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.

Queue / API and Development

On this page

Contrast, forced colors and motion

Not covered by a gate