Selected states: one language per control family

Three different controls all wore the accent — a section tab, a view toggle and a sidebar facet — so the page gave the eye no way to tell them apart. The rule now is that an underline means "tab" and nothing else.

The three families

family	where	selected
Tabs	repobar (Files/Timeline/Tickets/Docs), Fleet (Stores/Mirrors/Operations/Exceptions), doc tabs	accent .ink underline, --fg text, weight 600
Segmented buttons	list/table/board, priority/recent, Open/Closed/All, name/recently-changed, diff unified/side-by-side	--code-bg fill, --fg text, weight 600
Rail facets	ticket and wiki sidebars	--surface fill, --fg text, weight 600

A selected segment is deliberately the same chip as the branch selector on the files page: --code-bg is the base button fill, so a toggle now looks like a pressed button rather than inventing a third vocabulary. Contrast is the pairing the branch selector already relies on in both themes — #e6dcc0 on #f3ecda light, #32302f on #1d2021 dark.

Every state

Segmented buttons

state	treatment
rest	--bg, --muted text
hover	--surface wash, --fg text
focus-visible	2px --muted outline, offset 1 (the site-wide rule)
selected	--code-bg fill, --fg, weight 600
selected + hover	unchanged — it is already current, so it must not move

Tabs — rest --muted, hover --fg, selected --fg + ink underline.

Rail facets — rest transparent, hover --surface, selected --surface + --fg + 600, and no marker down the side.

Why fill and weight

Selection never rests on colour alone (WCAG 1.4.1 Use of Colour). Every selected state above carries two signals — a fill and weight 600 — so it survives greyscale, colour-blindness and a dimmed screen. The previous accent-text-only treatment failed that on its own, which is part of why it read as decorative rather than as state.

Semantics

.here was a class and nothing more: a screen reader had no way to know which view was active. Selected links now carry aria-current — page for tabs, since they navigate to another section, and true for toggles and facets, which re-render the same page.

What still uses the accent

Only things that genuinely are accents: the primary action button, the praised chip, the server-errors chip, and links. Once selection stopped competing for it, those read as intentional again.

Pinned by TestSelectionSpeaksOneLanguagePerFamily and TestSelectedLinksAnnounceThemselves in internal/web/selection_test.go.