Control Island

Accessibility

Import ControlIsland, ControlIslandStatus, ControlIslandVariant from @prepared911/ui/blocks/control-island.

The island is a role="group" named by label. The Supervisor variant gets its group from the Expanding ButtonGroup, with the same name.
Supervisor: the ButtonGroup's own model. Each role is a toggle button (aria-pressed) named by its label whether or not the label is visible. Tab visits each in DOM order; arrows do nothing. A collapsed role's label also shows in a visual-only tooltip on hover and keyboard focus (announce={false}, so a screen reader reads the name once and the tooltip adds no description); the selected role shows its label and has no tooltip, and touch shows none.
The role badge is an image named by roleLabel. The queue label is plain text, so a screen reader reads "Calltaker, All queues".
The separator dot is aria-hidden.
Raise hand is a toggle Button with aria-pressed. Its name does not change with the state, so the pressed state is the only thing that changes. It has a tooltip with the same text.
The Busy and Ready pill is a Button with aria-haspopup="menu" and aria-expanded, named by its visible label and described by statusMenuLabel. Enter, Space, or a press opens the menu on its first row; Escape closes it and returns focus to the pill. The menu is a radio group named by statusMenuLabel, and its rows are menuitemradio with aria-checked.
Ringing is a static pill and takes no focus. A visually hidden <output> (role="status", polite) is mounted from the first render and empty until the status becomes Ringing, so entering Ringing is announced once with ringingAnnouncement, and leaving it clears the region.
When the status becomes Ringing while the pill has focus, the pill is replaced by a static element and focus returns to the document. The host that rings the island owns where focus goes next, normally the incoming call.
Reduced motion (the operating system setting or data-motion="reduced"): the chevron still turns over when the menu opens, without animating, and the Supervisor segments change width instantly. Nothing is shown only by movement.
Forced colors: the solid fills and the accent badge fill are dropped. Every pill keeps a 1px edge in ButtonBorder, reserved and transparent outside forced colors so no size changes. The badge becomes Highlight. Busy, Ready, and Ringing stay told apart by their labels and the Ringing glyph, not by color.
Contrast: each pill label uses its accent ramp's on-solid text on its solid (dusty red for Busy, cool green for Ready, cobalt for Ringing), and the ramp certifies the label on the solid, hover and pressed fills in light and dark; the queue label is default foreground on the raised surface; the dot is decorative.

Control Island / API and Development

Dashboard Layout / Usage

Control Island

Accessibility

Import ControlIsland, ControlIslandStatus, ControlIslandVariant from @prepared911/ui/blocks/control-island.

The island is a role="group" named by label. The Supervisor variant gets its group from the Expanding ButtonGroup, with the same name.
Supervisor: the ButtonGroup's own model. Each role is a toggle button (aria-pressed) named by its label whether or not the label is visible. Tab visits each in DOM order; arrows do nothing. A collapsed role's label also shows in a visual-only tooltip on hover and keyboard focus (announce={false}, so a screen reader reads the name once and the tooltip adds no description); the selected role shows its label and has no tooltip, and touch shows none.
The role badge is an image named by roleLabel. The queue label is plain text, so a screen reader reads "Calltaker, All queues".
The separator dot is aria-hidden.
Raise hand is a toggle Button with aria-pressed. Its name does not change with the state, so the pressed state is the only thing that changes. It has a tooltip with the same text.
The Busy and Ready pill is a Button with aria-haspopup="menu" and aria-expanded, named by its visible label and described by statusMenuLabel. Enter, Space, or a press opens the menu on its first row; Escape closes it and returns focus to the pill. The menu is a radio group named by statusMenuLabel, and its rows are menuitemradio with aria-checked.
Ringing is a static pill and takes no focus. A visually hidden <output> (role="status", polite) is mounted from the first render and empty until the status becomes Ringing, so entering Ringing is announced once with ringingAnnouncement, and leaving it clears the region.
When the status becomes Ringing while the pill has focus, the pill is replaced by a static element and focus returns to the document. The host that rings the island owns where focus goes next, normally the incoming call.
Reduced motion (the operating system setting or data-motion="reduced"): the chevron still turns over when the menu opens, without animating, and the Supervisor segments change width instantly. Nothing is shown only by movement.
Forced colors: the solid fills and the accent badge fill are dropped. Every pill keeps a 1px edge in ButtonBorder, reserved and transparent outside forced colors so no size changes. The badge becomes Highlight. Busy, Ready, and Ringing stay told apart by their labels and the Ringing glyph, not by color.
Contrast: each pill label uses its accent ramp's on-solid text on its solid (dusty red for Busy, cool green for Ready, cobalt for Ringing), and the ramp certifies the label on the solid, hover and pressed fills in light and dark; the queue label is default foreground on the raised surface; the dot is decorative.

Control Island / API and Development

Dashboard Layout / Usage