Call Card

Accessibility

Import CallCard, CallCardHost, CallCardIncidentPlacement, CallCardLineKind, CallCardList from @prepared911/ui/blocks/call-card.

A list of cards is a named ul, so a screen reader announces the set and its size.
A pressable card is one native button named by its own text, in reading order: the line, the channel, the phone number, the elapsed minutes, the address, the incident type, and the caller's name. The card holds no other control, so there is one tab stop per card and nothing is nested. Without onClick the card has no role.
The line, the channel, and the incident type are text. The badge fill and the glyph support the text and never carry the meaning alone. The glyph is aria-hidden; the channel's name is visually hidden text.
The call being worked is marked with aria-current="true", not only with a wash. Under forced colors a bar on the inline-start edge marks it.
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 elapsed time is a time element with a machine-readable duration.
The phone number and the timer read left to right inside right-to-left text.
Focus shows a ring on :focus-visible only, inset so it does not cross the next row. Hover, press, and selection fade on --motion-state.
Under forced colors the badge and the tag keep a visible edge. Under increased contrast they gain one.
Layout uses logical properties, so the card mirrors under dir="rtl".

Accessibility

Import CallCard, CallCardHost, CallCardIncidentPlacement, CallCardLineKind, CallCardList from @prepared911/ui/blocks/call-card.

A list of cards is a named ul, so a screen reader announces the set and its size.
A pressable card is one native button named by its own text, in reading order: the line, the channel, the phone number, the elapsed minutes, the address, the incident type, and the caller's name. The card holds no other control, so there is one tab stop per card and nothing is nested. Without onClick the card has no role.
The line, the channel, and the incident type are text. The badge fill and the glyph support the text and never carry the meaning alone. The glyph is aria-hidden; the channel's name is visually hidden text.
The call being worked is marked with aria-current="true", not only with a wash. Under forced colors a bar on the inline-start edge marks it.
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 elapsed time is a time element with a machine-readable duration.
The phone number and the timer read left to right inside right-to-left text.
Focus shows a ring on :focus-visible only, inset so it does not cross the next row. Hover, press, and selection fade on --motion-state.
Under forced colors the badge and the tag keep a visible edge. Under increased contrast they gain one.
Layout uses logical properties, so the card mirrors under dir="rtl".