Email list — accessibility

Keyboard

• The row is an Item list row: a real <button>, so Tab reaches it and Enter opens the message.
• The star is its own control inside the row and stops the click from bubbling, so starring never opens the message by accident.
• The category tabs are buttons; there is no arrow-key movement between them (the same gap as the Tab strip).

ARIA

• The list is role="list" with role="listitem" wrappers, from Item list.
• The star is a button whose name says what it will do (Označit hvězdou / Odebrat hvězdu).
• Read and unread differ by tone; the state is not otherwise exposed, so a screen-reader user cannot tell them apart — a real limit of the current row.
• The attachment icon carries a title; the count is not spoken.

Focus

• Row and star take the foundation ring from ds.css.
• Hover actions appear on hover or focus within the row, so tabbing to them does not press an invisible control.

Contrast

Computed from packages/ui/src/tokens/tokens.css:

• Unread subject in ink — above AA in both themes.
• A read row drops to the muted tone (--fg-muted = 2.85:1 light) — below AA, and by design, since it marks "already seen".
• Sender, date and the attachment icon sit at the same muted level.
• The star when on uses the amber tone; when off it is muted.

Known limits

• Read vs unread is carried by tone alone and is not exposed programmatically.
• The empty state is inline text rather than the DS empty state.
• Loading is plain text, not the DS skeleton.
• Secondary text sits below AA in light theme.