Chat thread — Accessibility

Roles

• ChatThread renders role="log" with aria-label set by the host (the other party's name). A log announces new children as they arrive. An e-mail conversation view that does not use ChatThread should give its own container role="list" with role="listitem" rows.
• ChatBubble renders plain divs (no role override, no aria-label on the bubble: it would replace the real multi-line DOM text and break "Find on page" and browser translation).

Reading order inside a message row

1. A visually-hidden (.acrm-sr) sender label (fromLabel) — "Já" / the contact's name — BEFORE the bubble, so a reader reaching a single message knows whose it is. A visible senderName in the meta row is aria-hidden to avoid reading the name twice.
2. The message text, as real DOM content.
3. Attachments (host-rendered Attachment / .cht-att; links and buttons keep their own roles).
4. The meta row: time, then — for outgoing messages with a state — the status icon (decorative) followed by a visually-hidden stateLabel ("přečteno"/"read"), then host actions.

Keyboard

ChatBubble has no interactive elements of its own. Host actions are real <button>s (.cht-link) in the meta row: reachable by Tab in reading order, visible :focus-visible (colour change + underline), toggles expose aria-expanded (e.g. "Original"). A clamped long message offers "Show all" / "Show less" (.cht-more, inside the bubble, aria-expanded) as such a button; clamped text stays fully available to assistive technology (the clamp is visual) once expanded.

Touch

Host actions in the meta row are text buttons. Where the host needs the 44 px target (--tap-min) on touch it extends the hit area with an invisible pseudo-element, without changing the look.

Icons

check / checks / clock / alert-circle come from the DS icon set. They convey state, so WCAG 1.4.11 (non-text contrast, 3:1) applies. read uses --accent on the page (4.29:1 light, 4.04:1 dark).

Contrast (WCAG 2.1, measured (L1+0.05)/(L2+0.05))

The meta tone is the owner-approved quiet metadata colour (--fg-muted); the outgoing text pair is the accent / on-accent pair used app-wide. Both are flagged for a token-level decision, not fixed per component.