| Comment: | selection: underline means tab; toggles wear the button chip
See the wiki page [Selected states] for the states and the reasoning. |
|---|---|
| Timelines: | family | ancestors | descendants | both | trunk |
| Files: | files | file ages | folders |
| SHA3-256: |
baecdf846066db901bb8d026c0343134 |
| User & Date: | quarry on 2026-08-31 20:49:52.432 |
| Other Links: | manifest | tags |
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.
|
2026-08-31
| ||
| 21:00 | reap orphaned zit serve children at startup check-in: 0cb8f48a5f user: quarry tags: trunk | |
| 20:49 |
selection: underline means tab; toggles wear the button chip
See the wiki page [Selected states] for the states and the reasoning. check-in: baecdf8460 user: quarry tags: trunk | |
| 20:33 | pin the nonce alphabet: a + in the attribute silently kills CSP mode check-in: 47064a1033 user: quarry tags: trunk | |