|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
|
# 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`.
|