Query dialogs: clear the AI badge + hints to AA contrast and size the dialog up a step

Polishes accessibility and readability of the Search and Select dialogs (M7), plus two latent bugs surfaced along the way.

- a11y contrast (the static `a11y-contrast` check is the only contrast gate; axe disables `color-contrast`):
  - Extend the check to model the Search/Select pairs the rule walker can't see (`query_dialog_states.go`, reusing the `dropdown_states.go` scenario type + accent-matrix sweep): the `ToggleGroup` "AI" badge, the shortcut hint, the under-cursor result row's muted columns on the accent-tinted cursor bg, and the footer shortcut hints (on the dialog surface and on the primary button). Added a `BgExpr` escape hatch alongside `FgExpr` so a pair can model an `opacity` composite or a tint-over-surface bg.
  - Fix the real violations these caught: the `.tg-hint` shortcut hint dropped to ~3:1 under `opacity: 0.7`, the under-cursor result columns fell to ~3.9-4.4:1 on the lightest accents, and the footer hints dropped below AA at `opacity: 0.8`. All now clear 4.5:1 by dropping the opacity crutch (`--color-text-tertiary` already reads quieter) and routing the under-cursor muted columns to `--color-text-primary`. No new token needed.
- Font bump: the dialog now runs one `--font-size-*` step larger across bar, mode chips, type toggle, filter chips, results rows, path pills, and footer, both dialogs. Shared `ToggleGroup` cells are bumped via scoped overrides so Settings keeps its sizing. The results list isn't virtualized (search caps at 30 rows, Selection lists one folder), so row height is content-driven with no constant to desync; PathPills and the Name column measure from the rendered font and self-adjust; `ch`-unit columns scale with it; the bump is rem-based so it composes with the system text-size watcher.
- Type toggle `aria-checked`: memoize the value array handed to Ark/zag (`$derived([value])`) so a same-value parent re-render (for example after a query runs) can't churn the controlled value and blip the single-select `aria-checked` state.
- Bug (caught by the slow E2E lane): the `search-modes` spec still asserted the pre-M5 "empty target buffer stays empty" behavior; updated it to the shipped M5 carry-over (empty target seeds the outgoing term, non-empty target preserved).
- Bug (caught by the Search-dialog a11y E2E): `.results-container` set `role="listbox"` whenever `results.length > 0`, so a reopened dialog re-running (spinner showing, persisted results still set) rendered an orphan listbox with no `option` children (axe `aria-required-children`, critical). Gated `role`/`aria-label` on a `showingRows` derived that mirrors when rows actually render.

Tests: contrast-check red->green captured in `query_dialog_states_test.go`; virtualization-free row-sizing + cursor-class tests; `aria-checked` attribute test; orphan-listbox a11y regression test. Full `pnpm check` green; affected Playwright specs (Search dialog light+dark a11y, modes, open-in-pane) verified green on a fresh data dir.

Author: vdavid

apps/desktop/src/lib/query-ui/AiPromptStrip.svelte

@@ -100,7 +100,7 @@
     .ai-prompt {
         margin: 0;
         color: var(--color-text-secondary);
-        font-size: var(--font-size-sm);
+        font-size: var(--font-size-md);
         line-height: 1.3;
         overflow: hidden;
         white-space: nowrap;
@@ -111,7 +111,7 @@
         display: flex;
         flex-direction: column;
         gap: var(--spacing-xxs);
-        font-size: var(--font-size-sm);
+        font-size: var(--font-size-md);
         line-height: 1.3;
     }
 
@@ -160,7 +160,7 @@
     .ai-caveat {
         margin: 0;
         color: var(--color-text-tertiary);
-        font-size: var(--font-size-sm);
+        font-size: var(--font-size-md);
         font-style: italic;
         line-height: 1.3;
         overflow: hidden;
@@ -171,7 +171,7 @@
     .refine-button {
         flex-shrink: 0;
         padding: var(--spacing-xxs) var(--spacing-sm);
-        font-size: var(--font-size-sm);
+        font-size: var(--font-size-md);
         font-weight: 500;
         line-height: 1;
         color: var(--color-text-secondary);

apps/desktop/src/lib/query-ui/CLAUDE.md

@@ -58,6 +58,11 @@ popover, and the `createQueryFilterState()` factory. Filter-chip internals live
   populated-results a11y test with a comment pointing at the rationale; don't "fix" it by retabbing.
 - **Status bar stays empty whenever the content area shows a state message** (Searching / No files match / Loading).
   When you add a content-area state in `QueryResults`, make `getStatusText()` return `''` for it, or it reads as broken.
+- **`.results-container` carries `role="listbox"` ONLY when option rows actually render** (the `showingRows` derived:
+  `isIndexAvailable && isIndexReady && !isSearching && results.length > 0`). Don't gate it on `results.length > 0`
+  alone: on reopen the dialog re-runs with the persisted `results` still set while the spinner shows, so a length-only
+  gate puts `role="listbox"` on a container with no `option` children = axe `aria-required-children` (critical). Pinned
+  by the "searching with stale results" test in `QueryResults.a11y.test.ts`.
 - **Content chip is visible-disabled with NO shortcut** (`⌘4` reserved): wiring a shortcut to a disabled control is
   hostile UX. When Content ships it claims `⌘3` and Regex moves to `⌘4`.
 - **AI mode never auto-applies** (cost); filename/regex auto-apply behind `search.autoApply` (default on, 1,000 ms

apps/desktop/src/lib/query-ui/ModeChips.svelte

@@ -87,4 +87,17 @@
         background: var(--color-bg-primary);
         flex-wrap: wrap;
     }
+
+    /* The query dialogs run one font-size step larger than Settings (the dialog is the
+       focal surface, not a settings row), so bump the shared `ToggleGroup` cells here only.
+       Scoped to `.mode-chips-wrap` so Settings' segmented controls keep their own sizing.
+       `:global` because `ToggleGroup` prints `.tg-*` via `:global` (see ToggleGroup.svelte). */
+    .mode-chips-wrap :global(.tg-root .tg-item) {
+        font-size: var(--font-size-md);
+    }
+
+    .mode-chips-wrap :global(.tg-root .tg-badge),
+    .mode-chips-wrap :global(.tg-root .tg-hint) {
+        font-size: var(--font-size-sm);
+    }
 </style>

apps/desktop/src/lib/query-ui/PathPills.svelte

@@ -271,9 +271,11 @@
 
     .sep {
         color: var(--color-text-tertiary);
-        /* Path text reads at --font-size-sm (matching Name) instead of --font-size-xs.
-           The eye reads the path as quickly as the filename, not as a footnote. */
-        font-size: var(--font-size-sm);
+        /* Path text reads at --font-size-md (matching Name in the dialog's one-step-larger
+           type). The eye reads the path as quickly as the filename, not as a footnote.
+           Widths are measured from the rendered font (`readFont` → pretext), so the collapse
+           layout self-adjusts to this size; no constant to keep in sync. */
+        font-size: var(--font-size-md);
         user-select: none;
     }
 
@@ -284,7 +286,7 @@
            vertical padding stays at 0 since the row padding handles vertical rhythm. */
         padding: 0 var(--spacing-xxs);
         border-radius: var(--radius-sm);
-        font-size: var(--font-size-sm);
+        font-size: var(--font-size-md);
         font-family: inherit;
         color: var(--color-text-tertiary);
         line-height: 1.2;

apps/desktop/src/lib/query-ui/QueryBar.svelte

@@ -143,7 +143,7 @@
 
     .query-input {
         flex: 1;
-        font-size: var(--font-size-lg);
+        font-size: var(--font-size-xl);
         border: 1px solid transparent;
         background: transparent;
         color: var(--color-text-primary);
@@ -170,7 +170,7 @@
     .run-hint {
         flex-shrink: 0;
         color: var(--color-text-tertiary);
-        font-size: var(--font-size-xs);
+        font-size: var(--font-size-sm);
         white-space: nowrap;
     }
 
@@ -189,7 +189,7 @@
         color: var(--color-text-secondary);
         cursor: default;
         line-height: 1;
-        font-size: var(--font-size-sm);
+        font-size: var(--font-size-md);
     }
 
     .run-label {

apps/desktop/src/lib/query-ui/QueryDialog.svelte

@@ -1037,7 +1037,7 @@
         background: var(--color-bg-primary);
         border-bottom: 1px solid var(--color-border-subtle);
         color: var(--color-text-tertiary);
-        font-size: var(--font-size-xs);
+        font-size: var(--font-size-sm);
         flex-shrink: 0;
     }
 
@@ -1068,16 +1068,19 @@
         padding: var(--spacing-sm) var(--spacing-lg);
     }
 
+    /* No `opacity` dimming on the shortcut hints: at `opacity: 0.8` the composited
+       tertiary gray (and the accent-fg on the primary button) dropped below WCAG AA on
+       the lighter accents. `--color-text-tertiary` already reads quieter than the button
+       label, and `--color-accent-fg` is auto-picked for max contrast on its accent.
+       The contrast checker models both pairs (`scripts/check-a11y-contrast/query_dialog_states.go`). */
     .shortcut-hint {
         margin-left: var(--spacing-xs);
         font-family: var(--font-mono);
-        font-size: var(--font-size-xs);
+        font-size: var(--font-size-sm);
         color: var(--color-text-tertiary);
-        opacity: 0.8;
     }
 
     .shortcut-hint.shortcut-on-primary {
         color: var(--color-accent-fg);
-        opacity: 0.8;
     }
 </style>

apps/desktop/src/lib/query-ui/QueryResults.a11y.test.ts

@@ -138,6 +138,41 @@ describe('SearchResults a11y', () => {
     await expectNoA11yViolations(target)
   })
 
+  // Regression: a reopened dialog re-runs (spinner showing) while `results` still holds the
+  // persisted prior set. The spinner replaces the rows, so `role="listbox"` must NOT be set
+  // (no `option` children = axe `aria-required-children` critical). Pre-fix the role gated on
+  // `results.length > 0` alone and tripped here; now it gates on actually-rendered rows.
+  it('searching with stale results still present has no a11y violations (no orphan listbox)', async () => {
+    const stale: SearchResultEntry[] = [
+      {
+        name: 'photo1.jpg',
+        path: '/Users/test/pictures/photo1.jpg',
+        parentPath: '/Users/test/pictures',
+        isDirectory: false,
+        size: 1_500_000,
+        modifiedAt: 1_710_000_000,
+        iconId: 'ext:jpg',
+      },
+    ]
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    mount(SearchResults, {
+      target,
+      props: {
+        ...defaultProps,
+        isSearching: true,
+        hasSearched: true,
+        query: '*.jpg',
+        results: stale,
+        totalCount: 1,
+      },
+    })
+    await tick()
+    // The container must not claim to be a listbox while it shows the spinner.
+    expect(target.querySelector('[role="listbox"]')).toBeNull()
+    await expectNoA11yViolations(target)
+  })
+
   // Populated rows are `role="option"` AND contain interactive children
   // (path-pill `<button>`s and the `…` row-menu `<button>`). The inner buttons
   // are mouse-only and intentionally outside the keyboard Tab order

apps/desktop/src/lib/query-ui/QueryResults.states.svelte.test.ts

@@ -212,3 +212,43 @@ describe('SearchResults round 2 states', () => {
     expect(status?.textContent ?? '').toBe('')
   })
 })
+
+describe('SearchResults row rendering (font-bump sizing)', () => {
+  function makeResults(n: number): SearchResultEntry[] {
+    return Array.from({ length: n }, (_, i) => ({
+      path: `/dir/file-${String(i)}.txt`,
+      name: `file-${String(i)}.txt`,
+      parentPath: '/dir',
+      isDirectory: false,
+      size: i,
+      modifiedAt: 0,
+      iconId: 'ext:txt',
+    }))
+  }
+
+  // The results list is plain DOM (no virtualization: Search caps at 30 rows, Selection
+  // lists a single folder), so the dialog's one-step-larger font can't desync from a
+  // fixed row-height constant — there is none. This pins the invariant the font bump
+  // relies on: every result renders its own `.result-row`, so the rendered count tracks
+  // the data exactly at any font size. If someone ever virtualizes this list, they'll
+  // have to re-derive the row height for the bumped font, and this count check guards it.
+  it('renders one row per result (no windowing, no clipped rows)', async () => {
+    const results = makeResults(30)
+    const target = mountWith({ results, hasSearched: true, query: '*.txt', totalCount: 30 })
+    await tick()
+    expect(target.querySelectorAll('.result-row').length).toBe(30)
+  })
+
+  // The under-cursor row routes the muted columns (path / size / modified) to
+  // `--color-text-primary` for AA contrast on the accent-tinted cursor bg. That CSS
+  // hangs off the `is-under-cursor` class, so pin that exactly one row carries it and
+  // it's the cursor row.
+  it('marks exactly the cursor row with is-under-cursor (drives the AA color override)', async () => {
+    const results = makeResults(5)
+    const target = mountWith({ results, hasSearched: true, query: '*.txt', totalCount: 5, cursorIndex: 2 })
+    await tick()
+    const cursorRows = target.querySelectorAll('.result-row.is-under-cursor')
+    expect(cursorRows.length).toBe(1)
+    expect(cursorRows[0].textContent).toContain('file-2.txt')
+  })
+})

apps/desktop/src/lib/query-ui/QueryResults.svelte

@@ -159,6 +159,13 @@
         return out
     }
 
+    // True only when the `{:else}` branch below actually renders option rows. `role="listbox"`
+    // requires `option` children, so it must NOT be set during the searching / loading / empty
+    // states (which replace the rows with a spinner or message) even when `results` still holds a
+    // stale set. Gating on `results.length > 0` alone tripped axe's `aria-required-children` when
+    // a reopened dialog re-ran (spinner showing, persisted results still in `results`).
+    const showingRows = $derived(isIndexAvailable && isIndexReady && !isSearching && results.length > 0)
+
     /** Scrolls the cursor row into view. Called by the parent after cursor changes. */
     export function scrollCursorIntoView(): void {
         void tick().then(() => {
@@ -185,8 +192,8 @@
 <div
     class="results-container"
     bind:this={resultsContainer}
-    role={results.length > 0 ? 'listbox' : undefined}
-    aria-label={results.length > 0 ? 'Search results' : undefined}
+    role={showingRows ? 'listbox' : undefined}
+    aria-label={showingRows ? 'Search results' : undefined}
 >
     {#if !isIndexAvailable}
         <div class="index-unavailable">
@@ -343,7 +350,7 @@
     }
 
     .col-label {
-        font-size: var(--font-size-sm);
+        font-size: var(--font-size-md);
         color: var(--color-text-tertiary);
         overflow: hidden;
         text-overflow: ellipsis;
@@ -410,7 +417,7 @@
         margin: 0;
         padding: 0 0 0 1.25em;
         color: var(--color-text-tertiary);
-        font-size: var(--font-size-sm);
+        font-size: var(--font-size-md);
         text-align: left;
     }
 
@@ -420,11 +427,13 @@
 
     .result-row {
         /* Vertical padding sits at --spacing-xxs (~4 px) instead of --spacing-xs
-           (~8 px) so the Path column can use --font-size-sm without growing the row.
+           (~8 px) to keep the row compact at the dialog's --font-size-md type.
            All cells vertically center via the grid's `align-items: center` rule above,
-           so the look stays clean with the tighter padding. */
+           so the look stays clean with the tighter padding. Rows aren't virtualized
+           (search caps at 30, Selection lists one folder), so the height is content-
+           driven: no row-height constant to keep in sync with the font. */
         padding: var(--spacing-xxs) var(--spacing-lg);
-        font-size: var(--font-size-sm);
+        font-size: var(--font-size-md);
         color: var(--color-text-primary);
     }
 
@@ -436,6 +445,17 @@
         background: var(--color-accent-subtle);
     }
 
+    /* Under the cursor the muted columns (path / size / modified) read at full
+       `--color-text-primary`: the tertiary / secondary tokens drop below WCAG AA
+       on the lightest accent tints of the cursor bg (verified by the contrast
+       checker, `scripts/check-a11y-contrast/query_dialog_states.go`). Full-contrast
+       text on the active row is also the expected "this row is focused" read. */
+    .result-row.is-under-cursor .result-path,
+    .result-row.is-under-cursor .result-size,
+    .result-row.is-under-cursor .result-modified {
+        color: var(--color-text-primary);
+    }
+
     .result-icon {
         display: flex;
         align-items: center;
@@ -499,7 +519,7 @@
         padding: var(--spacing-xs) var(--spacing-lg);
         background: var(--color-bg-secondary);
         border-top: 1px solid var(--color-border-subtle);
-        font-size: var(--font-size-sm);
+        font-size: var(--font-size-md);
         color: var(--color-text-tertiary);
         flex-shrink: 0;
     }
@@ -522,7 +542,7 @@
 
     .unavailable-progress {
         color: var(--color-text-tertiary);
-        font-size: var(--font-size-sm);
+        font-size: var(--font-size-md);
         margin: var(--spacing-xs) 0 0;
     }
 </style>

apps/desktop/src/lib/query-ui/filter-chips/FilterChip.svelte

@@ -130,7 +130,7 @@
         align-items: center;
         gap: var(--spacing-xs);
         padding: var(--spacing-xxs) var(--spacing-sm);
-        font-size: var(--font-size-sm);
+        font-size: var(--font-size-md);
         font-weight: 500;
         line-height: 1;
         color: var(--color-text-secondary);
@@ -191,7 +191,7 @@
         height: 14px;
         border-radius: var(--radius-full);
         color: var(--color-text-tertiary);
-        font-size: var(--font-size-sm);
+        font-size: var(--font-size-md);
         line-height: 1;
     }