A11y: Fix color contrast and keyboard focus issues

vdavid · vdavid · commit 4380469ef08f · 2026-04-07T00:02:17.000+02:00
- `.size-scanning`: `--color-text-tertiary` → `--color-text-secondary` for sufficient contrast on cursor-highlighted gold rows in dark mode (3.96:1 → 4.67:1)
- `.ai-label`: `--color-cmdr-gold` → `--color-accent-text` for WCAG-compliant foreground gold on light backgrounds
- Command palette `.results-container`: add `tabindex="-1"` to satisfy `scrollable-region-focusable` rule
- Axe tests: exclude `[disabled]` elements (WCAG-exempt) from color-contrast checks
- `setTheme()`: replace fixed 500ms sleep with `pollUntil` verifying `--color-bg-primary` matches expected value — fixes false positives from WKWebView theme-switch lag
diff --git a/apps/desktop/src/lib/command-palette/CommandPalette.svelte b/apps/desktop/src/lib/command-palette/CommandPalette.svelte
@@ -155,7 +155,7 @@
             autocapitalize="off"
         />
 
-        <div class="results-container" bind:this={resultsContainer} role="listbox" aria-label="Commands">
+        <div class="results-container" bind:this={resultsContainer} role="listbox" aria-label="Commands" tabindex="-1">
             {#if results.length === 0 && query.trim()}
                 <div class="no-results">No commands found</div>
             {:else}
diff --git a/apps/desktop/src/lib/file-explorer/views/FullList.svelte b/apps/desktop/src/lib/file-explorer/views/FullList.svelte
@@ -657,7 +657,7 @@
     }
 
     .size-scanning {
-        color: var(--color-text-tertiary);
+        color: var(--color-text-secondary);
         font-size: var(--font-size-xs);
         white-space: nowrap;
     }
diff --git a/apps/desktop/src/lib/search/AiSearchRow.svelte b/apps/desktop/src/lib/search/AiSearchRow.svelte
@@ -115,7 +115,7 @@
     }
 
     .ai-label {
-        color: var(--color-cmdr-gold);
+        color: var(--color-accent-text);
     }
 
     .name-input {
diff --git a/apps/desktop/test/e2e-playwright/accessibility.spec.ts b/apps/desktop/test/e2e-playwright/accessibility.spec.ts
@@ -77,7 +77,15 @@ async function runAxeAudit(
 }> {
   await injectAxe(tauriPage)
 
-  const axeCall = scope ? `axe.run(document.querySelector(${JSON.stringify(scope)}))` : 'axe.run()'
+  // Exclude disabled elements from color-contrast checks — WCAG exempts them
+  const axeConfig = JSON.stringify({
+    rules: { 'color-contrast': { enabled: true } },
+    checks: [{ id: 'color-contrast', options: { contrastRatio: { normal: { expected: 4.5 } } } }],
+    exclude: [['[disabled]'], [':disabled']],
+  })
+  const axeCall = scope
+    ? `axe.run(document.querySelector(${JSON.stringify(scope)}), ${axeConfig})`
+    : `axe.run(${axeConfig})`
   const results = await tauriPage.evaluate<AxeResults>(axeCall)
 
   const critical = results.violations.filter((v) => v.impact === 'critical')
@@ -136,10 +144,22 @@ async function openSearchDialog(tauriPage: PageLike): Promise<void> {
   await tauriPage.waitForSelector('.search-overlay', 5000)
 }
 
-/** Switch the app theme via Tauri's setTheme API. */
+/** Switch the app theme via Tauri's setTheme API and verify it applied. */
 async function setTheme(tauriPage: PageLike, mode: 'dark' | 'light'): Promise<void> {
   await tauriPage.evaluate(`window.__TAURI_INTERNALS__.invoke('plugin:app|set_app_theme', { theme: '${mode}' })`)
-  await sleep(500) // Let the theme transition settle
+  // Verify the theme actually applied by checking a CSS variable value.
+  // WKWebView on macOS can be slow to update prefers-color-scheme after set_app_theme.
+  const expectedBg = mode === 'light' ? '#ffffff' : '#1e1e1e'
+  await pollUntil(
+    tauriPage,
+    async () => {
+      const bg = await tauriPage.evaluate<string>(
+        `getComputedStyle(document.documentElement).getPropertyValue('--color-bg-primary').trim()`,
+      )
+      return bg === expectedBg
+    },
+    3000,
+  )
 }
 
 // ── Tests ───────────────────────────────────────────────────────────────────

Original file line number	Diff line number	Diff line change
`@@ -657,7 +657,7 @@`
`657`	`657`	`}`
`658`	`658`
`659`	`659`	`.size-scanning {`
`660`		`- color: var(--color-text-tertiary);`
	`660`	`+ color: var(--color-text-secondary);`
`661`	`661`	`font-size: var(--font-size-xs);`
`662`	`662`	`white-space: nowrap;`
`663`	`663`	`}`
Original file line number	Diff line number	Diff line change
`@@ -115,7 +115,7 @@`
`115`	`115`	`}`
`116`	`116`
`117`	`117`	`.ai-label {`
`118`		`- color: var(--color-cmdr-gold);`
	`118`	`+ color: var(--color-accent-text);`
`119`	`119`	`}`
`120`	`120`
`121`	`121`	`.name-input {`