Call Status Card

Accessibility

Import CallStatusCard, CallStatusDevice, CallStatusQueueClass, CallStatusState from @prepared911/ui/blocks/call-status-card.

The card is a section named by label, so it is a landmark region that a screen reader can list.
The state is visible text (statusLabel) in every state. The wash and the edge support the text and never carry the state alone; both are dropped under increased contrast and forced colors, and the text remains.
The device glyph is aria-hidden; the device's name is visually hidden text read before the number. An unknown device draws neither.
The queue badge shows the queue's own text, so the queue is named by text and not by the badge color.
The timer's digits are aria-hidden and update every second. Their place for assistive technology is a visually hidden sentence with the whole minutes, refreshed once a minute. It is plain text, not a live region, so nothing is announced as the call goes on.
The number and the timer read left to right inside right-to-left text. Layout uses logical properties, so the card mirrors under dir="rtl", and the wash mirrors with it.
A long number or caller name truncates with its full value in the title, and the card keeps its height at 320 CSS px.

Accessibility

Import CallStatusCard, CallStatusDevice, CallStatusQueueClass, CallStatusState from @prepared911/ui/blocks/call-status-card.

The card is a section named by label, so it is a landmark region that a screen reader can list.
The state is visible text (statusLabel) in every state. The wash and the edge support the text and never carry the state alone; both are dropped under increased contrast and forced colors, and the text remains.
The device glyph is aria-hidden; the device's name is visually hidden text read before the number. An unknown device draws neither.
The queue badge shows the queue's own text, so the queue is named by text and not by the badge color.
The timer's digits are aria-hidden and update every second. Their place for assistive technology is a visually hidden sentence with the whole minutes, refreshed once a minute. It is plain text, not a live region, so nothing is announced as the call goes on.
The number and the timer read left to right inside right-to-left text. Layout uses logical properties, so the card mirrors under dir="rtl", and the wash mirrors with it.
A long number or caller name truncates with its full value in the title, and the card keeps its height at 320 CSS px.