A11y: red selection — bg, hairline, cursor outline

Iterates the selection visual to address tester feedback that the previous gold and the early deep-red were both hard to tell apart from regular rows. Lands as one cohesive design pass:

- **Three-tier selection-fg**: `--color-selection-fg-primary` (strong, applied on the selection bg), `--color-selection-fg-cursor` (slightly tamed for cursor-on-selected), `--color-selection-fg-fallback` (text-primary for the dark + tinted + cursor-active corner). Light primary `#cc0000`, cursor `#b80808`. Dark primary `#ff4040`, cursor `#ff8c8c`. The cursor tier swaps in via `.is-selected.is-under-cursor`; the existing fallback rule still wins for the tinted-dark + cursor-active corner via higher specificity.
- **Selection bg in both modes**: `#f2f2f2` light, `#141414` dark. Light reads as one shade darker than white (distinct from the warm cursor highlight by hue, distinct from the stripe by luminance); dark reads as a noticeably darker block than the pane.
- **Hairline between consecutive selected rows**: `inset` `box-shadow` so row height is unchanged. Fixed faint gray — `rgba(0,0,0,0.03)` light, `rgba(255,255,255,0.025)` dark. Suppressed on the cursor row's top (cursor's own outline carries the signal there).
- **Cursor outline**: faint accent-colored 1px `inset` box-shadow on every cursor row (focused and unfocused). New token `--color-cursor-outline` at 35% accent alpha. Restores cursor distinguishability against the gray selection bg.
- **Zebra stripes** auto-disabled on selected rows (selection-bg wins over stripe by cascade order).

Synthesizer + docs updated:

- `row_state_matrix.go` models the three-tier cascade via `selectionFgTokenFor()` + `withSelectionFgVariant()`, replacing the old binary-fallback predicate. Resolves `--color-selection-bg` for the non-cursor row variants so primary red is evaluated against the real selected-row bg.
- `dropdown_states.go` `ancestorBgScenario` gains an `FgExpr` field for scenarios whose fg is an inline CSS expression rather than a single var. Tightened to the post-fix dropdown rule.
- README: full Architecture section listing every file, a "Row state matrix" + "Dropdown ancestor-bg matrix" subsection, the parser-normalization note (strip `@supports not`, descend every `@media (prefers-color-scheme: dark)`), and an "Add a new scenario" recipe under Extending.

All 1070 contrast pairs clear AA. Full check suite green (50 checks, 4008 tests).

Author: vdavid

apps/desktop/src/app.css

@@ -66,6 +66,13 @@
   /* === Cursor (row highlight in file lists) === */
   --color-cursor-inactive: color-mix(in srgb, var(--color-bg-tertiary), transparent 60%);
   --color-cursor-active: color-mix(in oklch, var(--color-accent), transparent 80%);
+  /* Faint accent-colored hairline painted as an `inset` box-shadow around
+     the row under the cursor (in both focused and unfocused states). It
+     differentiates the cursor row from a selected row whose background is
+     a similar luminance and helps the user keep track of position
+     regardless of pane tint or selection state. Subtle by design — 35%
+     alpha. */
+  --color-cursor-outline: color-mix(in oklch, var(--color-accent), transparent 65%);
 
   /* === Semantic Colors === */
   --color-allow: #2e7d32;
@@ -142,19 +149,20 @@
    * where no AA-clearing red exists. The CSS rule that switches between
    * them lives further down (search for "selection-fg fallback"). The
    * contrast checker's `row_state_matrix.go` synthesizer mirrors it. */
-  --color-selection-fg-primary: #b60000;
+  --color-selection-fg-primary: #cc0000;
+  --color-selection-fg-cursor: #b80808;
   --color-selection-fg-fallback: var(--color-text-primary);
   --color-selection-fg: var(--color-selection-fg-primary);
-  /* Selection background and border — dark mode only (the light-mode
-   * red on white reads cleanly enough without a bg layer). The bg is a
-   * touch darker than `--color-bg-primary`, applied via a scoped rule
-   * in `FullList.svelte`. The border is a faint fixed gray (no accent
-   * relationship) that draws as an inset `box-shadow` between
-   * consecutive selected rows — purely there to keep dense selections
-   * visually countable. Both default to transparent so they're a no-op
-   * in light mode. */
-  --color-selection-bg: transparent;
-  --color-selection-border: transparent;
+  /* Selection background and hairline border applied to selected rows in
+   * both modes. Light mode: faint gray bg a touch darker than
+   * `--color-bg-primary` (lower than the stripe color, more distinct from
+   * the warm cursor highlight by luminance) and a faint dark hairline
+   * between consecutive selected rows. Dark mode: darker bg, faint white
+   * hairline. Border draws as `inset` box-shadow so row height doesn't
+   * change. Both axes are purely there to keep dense selections visually
+   * countable on top of the red text identity. */
+  --color-selection-bg: #f2f2f2;
+  --color-selection-border: rgba(0, 0, 0, 0.03);
 
   /* === Git portal ===
      * Distinct from `--color-accent` to keep the "you're in history-land" feel
@@ -384,6 +392,7 @@
     --color-accent-subtle: rgba(212, 160, 6, 0.15);
     --color-cursor-inactive: rgba(232, 232, 232, 0.4);
     --color-cursor-active: rgba(212, 160, 6, 0.2);
+    --color-cursor-outline: rgba(212, 160, 6, 0.35);
     --color-warning-bg-solid: #f3e5dc;
     --color-disk-ok: #74a376;
     --color-disk-warning: #e47b42;
@@ -415,6 +424,7 @@
   --color-accent-subtle: rgba(212, 160, 6, 0.15);
   --color-cursor-inactive: rgba(232, 232, 232, 0.4);
   --color-cursor-active: rgba(212, 160, 6, 0.2);
+  --color-cursor-outline: rgba(212, 160, 6, 0.35);
   --color-warning-bg-solid: #f3e5dc;
   --color-disk-ok: #74a376;
   --color-disk-warning: #e47b42;
@@ -512,10 +522,11 @@
        In dark mode we also paint a slightly darker bg on selected rows and a
        faint hairline between consecutive selected rows; the tokens default
        to transparent in light so they're effectively dark-mode-only. */
-    --color-selection-fg-primary: #ff8c8c;
+    --color-selection-fg-primary: #ff4040;
+    --color-selection-fg-cursor: #ff8c8c;
     --color-selection-fg-fallback: var(--color-text-primary);
     --color-selection-bg: #141414;
-    --color-selection-border: rgba(255, 255, 255, 0.1);
+    --color-selection-border: rgba(255, 255, 255, 0.025);
 
     /* Git portal: brighter teal in dark mode for readability against
        the dark background. */
@@ -569,6 +580,7 @@
       --color-accent-subtle: rgba(255, 194, 6, 0.15);
       --color-cursor-inactive: rgba(51, 51, 51, 0.4);
       --color-cursor-active: rgba(255, 194, 6, 0.2);
+      --color-cursor-outline: rgba(255, 194, 6, 0.35);
       --color-warning-bg-solid: #483d29;
       --color-disk-ok: #588b5b;
       --color-disk-warning: #bf892d;
@@ -596,6 +608,7 @@
     --color-accent-subtle: rgba(255, 194, 6, 0.15);
     --color-cursor-inactive: rgba(51, 51, 51, 0.4);
     --color-cursor-active: rgba(255, 194, 6, 0.2);
+    --color-cursor-outline: rgba(255, 194, 6, 0.35);
     --color-warning-bg-solid: #483d29;
     --color-disk-ok: #588b5b;
     --color-disk-warning: #bf892d;

apps/desktop/src/lib/file-explorer/views/BriefList.svelte

@@ -999,13 +999,21 @@
         background-color: var(--color-bg-stripe);
     }
 
-    /* Selected rows: darker bg (dark mode only — see FullList.svelte and
-       app.css). Cursor rules win by specificity, so cursor-on-selected
-       still shows the cursor highlight. */
+    /* Selected rows: darker bg (light `#e6e6e6`, dark `#141414`); see
+       FullList.svelte and app.css for the cascade rationale. Cursor
+       rules win by specificity, so cursor-on-selected still shows the
+       cursor highlight. */
     .file-entry.is-selected {
         background-color: var(--color-selection-bg);
     }
 
+    /* Cursor-on-selected: swap the selection text color to the cursor
+       variant (AA-safe against the cursor bg). See FullList.svelte for
+       the full rationale. */
+    .file-entry.is-selected.is-under-cursor {
+        --color-selection-fg: var(--color-selection-fg-cursor);
+    }
+
     /* Faint hairline between two consecutive selected rows. `box-shadow:
        inset` draws on top of `background-color` and takes zero layout
        space. Skipped when the row is under the cursor. */
@@ -1015,6 +1023,9 @@
 
     .file-entry.is-under-cursor {
         background-color: var(--color-cursor-inactive);
+        /* Faint accent-colored hairline outlining the cursor row. See
+           FullList.svelte for the rationale. */
+        box-shadow: inset 0 0 0 1px var(--color-cursor-outline);
     }
 
     .brief-list-container.is-focused .file-entry.is-under-cursor {

apps/desktop/src/lib/file-explorer/views/FullList.svelte

@@ -1003,14 +1003,24 @@
         background-color: var(--color-bg-stripe);
     }
 
-    /* Selected rows: darker bg (dark mode only — tokens default to
-       transparent in light) overrides the stripe so the selection reads
-       as a single block. Cursor rules win by specificity (see below), so
-       cursor-on-selected still shows the cursor highlight. */
+    /* Selected rows: darker bg (in both modes — light's `#e6e6e6`, dark's
+       `#141414`) overrides the stripe so the selection reads as a single
+       block. Cursor rules win by specificity (see below), so cursor-on-
+       selected still shows the cursor highlight. */
     .file-entry.is-selected {
         background-color: var(--color-selection-bg);
     }
 
+    /* When the cursor is on a selected row, the text color shifts from
+       the primary (strong red, AA-safe against `--color-selection-bg`)
+       to the cursor variant (slightly darker/lighter red, AA-safe
+       against the translucent cursor bg). The tinted-dark + cursor-active
+       corner has its own fallback rule in app.css that wins over this
+       via higher specificity. */
+    .file-entry.is-selected.is-under-cursor {
+        --color-selection-fg: var(--color-selection-fg-cursor);
+    }
+
     /* Faint hairline between two consecutive selected rows so dense
        selections stay countable. `box-shadow: inset` draws on top of
        `background-color` and takes zero layout space, so row height
@@ -1023,6 +1033,11 @@
 
     .file-entry.is-under-cursor {
         background-color: var(--color-cursor-inactive);
+        /* Faint accent-colored hairline outlining the cursor row. `inset`
+           draws inside the row with no layout shift. Visible in both the
+           focused (`is-focused`) and unfocused states so the cursor stays
+           distinguishable from the selection bg. */
+        box-shadow: inset 0 0 0 1px var(--color-cursor-outline);
     }
 
     .full-list-container.is-focused .file-entry.is-under-cursor {

scripts/check-a11y-contrast/README.md

@@ -46,6 +46,25 @@ both a text color and a background, the tool:
    the static `app.css` fallback (`#d4a006`) and silently miss issues that surface when the user's macOS accent is Apple
    Blue, Purple, Graphite, etc. See `accent_matrix.go` for the variant list.
 
+In addition to the rule walker, two scenario synthesizers cover cases where the text color and the background are set on
+different selectors — cases the walker can't pair on its own:
+
+- **Row state matrix** (`row_state_matrix.go`): the file-list selected-row text colors (`--color-selection-fg` and the
+  `--color-size-*-selected` mixes) are set on `.is-selected` descendants while the row bg is set elsewhere (the pane,
+  the stripe rule, or the cursor rules). The synthesizer composites the bg the row will actually render with — pane tint
+  × stripe × cursor state × accent variant — and pairs each text role against it. About 1000 pairs evaluated;
+  worst-case-per-(role, mode, tint, variant) reported. Mirrors the three-tier selection-fg cascade in `app.css` (primary
+  → cursor → fallback) so the synthesizer's verdict matches what the runtime actually paints.
+- **Dropdown ancestor-bg matrix** (`dropdown_states.go`): hand-listed `(descendant-text-var, ancestor-bg-var)` tuples
+  for cases where bg comes from an ancestor selector and `[data-highlighted]` (the dropdown options today; designed for
+  easy extension). Runs every entry against the accent matrix + both modes.
+
+The parser also normalizes `app.css` before extracting vars: every `@supports not (color: color-mix(...))` block is
+stripped (those carry old-WebKit hex fallbacks that would otherwise overwrite the modern `color-mix` formulas), and
+**every** `@media (prefers-color-scheme: dark)` block is descended into rather than only the first (the codebase has
+more than one — for example a small block carrying the selection-fg fallback rule sits before the main dark token
+table).
+
 ## Output
 
 ```
@@ -78,16 +97,30 @@ matrix), resolved fg hex, resolved bg hex, actual ratio, required threshold, and
 ## Architecture
 
 ```
-main.go       Entry, walks `apps/desktop/src/**/*.svelte`, orchestrates.
-parser.go     Parses app.css (light + dark var tables) and Svelte <style>
-              blocks into Rule structs.
-resolver.go   Resolves a CSS value string (literal / var() / color-mix()) to
-              RGBA per mode.
-contrast.go   sRGB parsing, hex/rgb()/named literals, sRGB + OKLCH mixing
-              (premultiplied alpha), WCAG 2.2 contrast math.
-analyzer.go   Walks parsed rules per mode, tracks cascade state by compound
-              class set, emits Finding per (selector, mode) pair.
-reporter.go   Pretty prints violations and optional warnings.
+main.go              Entry, walks `apps/desktop/src/**/*.svelte`, orchestrates
+                     the rule walker + scenario synthesizers.
+parser.go            Parses app.css (light + dark var tables) and Svelte <style>
+                     blocks into Rule structs. Strips `@supports not (...)` and
+                     descends into every `@media (prefers-color-scheme: dark)`.
+resolver.go          Resolves a CSS value string (literal / var() / color-mix())
+                     to RGBA per mode. Tracks visited var names in `Deps` so
+                     callers can decide whether to sweep the accent matrix.
+contrast.go          sRGB parsing, hex/rgb()/named literals, sRGB + OKLCH mixing
+                     (premultiplied alpha), WCAG 2.2 contrast math.
+analyzer.go          Walks parsed rules per mode, tracks cascade state by
+                     compound class set, emits Finding per (selector, mode) pair.
+                     Uses `evaluateAt` to run worst-case across accent variants
+                     when the pair is accent-sensitive.
+reporter.go          Pretty prints violations and optional warnings.
+accent_matrix.go     Runtime accent variants (the 8 macOS system accents +
+                     Cmdr gold) and the per-variant VarTable override.
+size_tiers.go        `.size-*` utility classes × known container bgs, since
+                     they're only `color:` rules with no paired bg.
+row_state_matrix.go  Selected-row text × (pane tint × stripe × cursor state ×
+                     accent variant) bg composition. Models the three-tier
+                     `--color-selection-fg` cascade.
+dropdown_states.go   Hand-listed (descendant-text-var, ancestor-bg-var) tuples
+                     for "secondary text on accent-bg" cases.
 ```
 
 Tests:
@@ -96,6 +129,16 @@ Tests:
 - `resolver_test.go`: var() fallbacks, nested color-mix, dark overrides.
 - `parser_test.go`: app.css + Svelte parsing, selector extraction.
 - `analyzer_test.go`: cascade inheritance, known false-positive cases.
+- `accent_matrix_test.go`: variant sweep + per-variant resolution.
+
+Diagnostic helpers (skipped by default; gated on env vars):
+
+- `before_after_test.go` (`CMDR_PRINT_BEFORE_AFTER=1`): prints a curated before/after comparison table for the
+  selected-row text-role × bg matrix. Useful when iterating on selection colors to see how a change affects every
+  meaningful combination.
+- `diff_test.go` (`CMDR_PRINT_SELECTION_DIFF=1`, `CMDR_PRINT_RED_CANDIDATES=1`): prints the contrast ratio between the
+  selected-row text color and the unselected-row text color across modes + accents (differentiation, not the AA-vs-bg
+  question), plus a sweep of candidate red hexes against the worst- case bgs for picking a new selection color.
 
 ## Extending
 
@@ -117,6 +160,21 @@ WCAG AA (current) uses 4.5:1 / 3:1. For AAA, change the constants in `analyzer.e
 Not built yet. If the team decides certain findings are acceptable (marketing badges, subtle hover tints), add a JSON
 allowlist alongside this README and filter in `main.go` before calling `Report`.
 
+### Add a new "text from one selector, bg from another" scenario
+
+When the rule walker can't pair a text role with its actual bg (the bg lives on an ancestor or sibling selector that the
+walker doesn't traverse), reach for one of the synthesizers:
+
+- For file-list selected-row text colors, add a new entry to `rowSelectedTextRoles` in `row_state_matrix.go`.
+- For "secondary text on accent-bg" cases like dropdown options, append a new entry to `dropdownScenarios` in
+  `dropdown_states.go`.
+- For a one-off pair (specific descendant + specific ancestor bg) that's not in either bucket, mirror the
+  `dropdown_states.go` pattern in a new `<thing>_states.go` and wire it into `main.go` alongside the other
+  `Analyzer.AnalyzeXxx` calls.
+
+If the scenario depends on the active accent, you don't need to do anything special — the synthesizers iterate
+`AccentVariants` automatically.
+
 ## Known trade-offs
 
 - No support for `light-dark()`. If Cmdr adopts that token pattern later, add parsing in resolver.go.

scripts/check-a11y-contrast/before_after_test.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"fmt"
+	"maps"
 	"os"
 	"path/filepath"
 	"sort"
@@ -168,12 +169,8 @@ func passStr(p bool) string {
 
 func cloneVars(v *VarTable) *VarTable {
 	out := NewVarTable()
-	for k, val := range v.Light {
-		out.Light[k] = val
-	}
-	for k, val := range v.Dark {
-		out.Dark[k] = val
-	}
+	maps.Copy(out.Light, v.Light)
+	maps.Copy(out.Dark, v.Dark)
 	return out
 }
 
@@ -255,8 +252,8 @@ func evalScenario(base *VarTable, sc beforeAfterScenario, applyFallback bool) (F
 			vars = withAccentOverride(vars, AccentVariant{Name: "yellow", Light: "#ffc601", Dark: "#ffc601"})
 		}
 	}
-	if applyFallback && shouldUseSelectionFgFallback(sc.mode, sc.tint, sc.variant) {
-		vars = withSelectionFgFallback(vars)
+	if applyFallback {
+		vars = withSelectionFgVariant(vars, selectionFgTokenFor(sc.mode, sc.tint, sc.variant))
 	}
 	bg, ok := resolveRowBg(vars, sc.mode, sc.tint, sc.variant)
 	if !ok {

scripts/check-a11y-contrast/diff_test.go

@@ -143,8 +143,8 @@ func selectionDiffRatio(vars *VarTable, mode Mode, tint paneTintHue, variant str
 	if !accent.IsDefault {
 		work = withAccentOverride(work, accent)
 	}
-	if applyFallback && shouldUseSelectionFgFallback(mode, tint, variant) {
-		work = withSelectionFgFallback(work)
+	if applyFallback {
+		work = withSelectionFgVariant(work, selectionFgTokenFor(mode, tint, variant))
 	}
 	fg, _ := resolveTextRole(work, mode, "color-selection-fg")
 	textPrimary, _ := resolveTextRole(work, mode, "color-text-primary")

scripts/check-a11y-contrast/row_state_matrix.go

@@ -260,13 +260,10 @@ func (a *Analyzer) evalRowCellForAccent(
 	if !accent.IsDefault {
 		vars = withAccentOverride(a.Vars, accent)
 	}
-	// Mirror the `selection-fg fallback` rule in `app.css`: in dark mode,
-	// when the pane is tinted AND the row is cursor-active + selected,
-	// `--color-selection-fg` swaps to `--color-selection-fg-fallback`.
-	// The resolver doesn't model rule-level CSS overrides; apply by hand.
-	if shouldUseSelectionFgFallback(mode, tint, variant) {
-		vars = withSelectionFgFallback(vars)
-	}
+	// Mirror the three-tier `--color-selection-fg` cascade from `app.css`
+	// + `FullList.svelte`. The resolver doesn't model rule-level CSS
+	// overrides, so apply the right tier by hand per scenario.
+	vars = withSelectionFgVariant(vars, selectionFgTokenFor(mode, tint, variant))
 	bg, ok := resolveRowBg(vars, mode, tint, variant)
 	if !ok {
 		return 0
@@ -318,30 +315,39 @@ func evalRowText(
 	}, true
 }
 
-// shouldUseSelectionFgFallback mirrors the `app.css` rule that swaps
-// `--color-selection-fg` to its fallback. Keep this predicate in sync with
-// the CSS selector (see the "selection-fg fallback" block in `app.css`).
+// selectionFgTokenFor picks which `--color-selection-fg-*` variant applies
+// to a given scenario, mirroring the three-tier cascade in `app.css` +
+// `FullList.svelte`. Keep this in sync with the CSS rules: the order from
+// least- to most-specific is primary → cursor → fallback.
 //
-// Today the rule triggers when ALL of these hold:
-//   - dark mode (light mode's primary value is dark enough to clear AA on
-//     every tinted bg without help)
-//   - the pane has a tint applied
-//   - the row is the focused cursor-active row (`.is-under-cursor` +
-//     focused container, in our matrix terms: `variant == "cursor-active"`).
-func shouldUseSelectionFgFallback(mode Mode, tint paneTintHue, variant string) bool {
-	return mode == ModeDark && tint.VarName != "" && variant == "cursor-active"
+// The cascade today:
+//   - default: `--color-selection-fg-primary` (the strong red, AA-safe vs
+//     `--color-selection-bg`).
+//   - row is under cursor: `--color-selection-fg-cursor` (a hair darker
+//     red in light, lighter in dark, AA-safe vs the translucent cursor bg).
+//   - dark + tinted pane + cursor-active: `--color-selection-fg-fallback`
+//     (= `--color-text-primary`), because no red variant clears AA there.
+func selectionFgTokenFor(mode Mode, tint paneTintHue, variant string) string {
+	if mode == ModeDark && tint.VarName != "" && variant == "cursor-active" {
+		return "color-selection-fg-fallback"
+	}
+	if variant == "cursor-active" || variant == "cursor-inactive" {
+		return "color-selection-fg-cursor"
+	}
+	return "color-selection-fg-primary"
 }
 
-// withSelectionFgFallback returns a VarTable derived from v with
-// `--color-selection-fg` pointing at `--color-selection-fg-fallback` so the
-// `--color-size-*-selected` mixes (which reference `--color-selection-fg`)
-// pick up the swap automatically.
-func withSelectionFgFallback(v *VarTable) *VarTable {
+// withSelectionFgVariant returns a VarTable derived from v with
+// `--color-selection-fg` pointing at the named variant token. Both modes
+// get the override so the `--color-size-*-selected` mixes (which reference
+// `--color-selection-fg`) pick up the right tier automatically.
+func withSelectionFgVariant(v *VarTable, tokenName string) *VarTable {
 	out := NewVarTable()
 	maps.Copy(out.Light, v.Light)
 	maps.Copy(out.Dark, v.Dark)
-	out.Light["color-selection-fg"] = "var(--color-selection-fg-fallback)"
-	out.Dark["color-selection-fg"] = "var(--color-selection-fg-fallback)"
+	expr := fmt.Sprintf("var(--%s)", tokenName)
+	out.Light["color-selection-fg"] = expr
+	out.Dark["color-selection-fg"] = expr
 	return out
 }