Tab strip — accessibility

Keyboard

Tabs are real <button role="tab"> inside role="tablist": Tab moves focus into the strip, Enter and Space switch.
Single tab stop (roving tabindex): Tab lands on the active tab. ←/→ move focus with wrap-around, Home/End jump to the ends; arrows do not switch — Enter or Space does. Activation is manual, because a panel loads its data when it mounts, so switching on every arrow would fire a request per keystroke. Arrows with Alt, Ctrl, Meta or Shift are left to the browser (NAV-3, 11 Sep 2026).
The overflow chevrons are aria-hidden and only clickable when the edge is on — they are a pointer affordance, not a keyboard one. Keyboard users reach hidden tabs by tabbing, which scrolls them into view.

The strip is role="tablist", each tab role="tab" with aria-selected.
Optional panelId: every tab gets id="<panelId>-tab-<key>" and the active tab gets aria-controls; the consumer marks the panel role="tabpanel" with aria-labelledby. Only the active tab points at the panel, because only its panel is rendered. Wired in Trash and Project detail; not in Record tabs (the strip and the panels live in different components) or Meeting detail.
The count .cnt is plain text inside the button, so it is read as part of the tab's name ("Úkoly 3") — which is the intended reading.
Nothing announces that the content below changed after a switch.

.acrm-tab is a <button> with role="tab", so the foundation ring from ds.css applies (outline: 2px solid var(--accent); outline-offset: 1px) — the selector list covers both button and [role='tab'], and the tabs CSS does not switch the outline off.
Focus follows the click; switching does not move focus elsewhere.
A tab scrolled out of view is scrolled back by the browser when it takes focus.

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

Inactive tab label: muted ink on the page surface — readable, but the active tab is the one carrying weight.
Active tab: ink label plus the 2px accent underline (--accent on --surface-100 = 4.44:1 light, 3.83:1 dark) — the state is carried by both colour and the underline, not by colour alone.
Count .cnt: muted pill; the number repeats in the accessible name, so it is not the only carrier.
Fade edges are decorative gradients over the background; they carry no information that the chevron does not.

aria-controls is not wired where the panel lives outside the strip's component.
No disabled state at all (neither prop nor CSS).
The overflow chevrons are pointer-only.
Switching a tab is silent for assistive technology.