From 5b78010e3d7b8e29ce2a3aa809ce52ab94163c1b Mon Sep 17 00:00:00 2001 From: qnbs <155236708+qnbs@users.noreply.github.com> Date: Thu, 20 Aug 2026 10:20:01 +0200 Subject: [PATCH] fix(a11y): remove low-contrast translucency on command palette headings The "Suggested"/"All commands" section-heading rows in CommandPalette used bg-[var(--sc-surface-raised)]/95 backdrop-blur-sm. The raw --sc-text-muted / --sc-surface-raised token pair passes WCAG AA (~5.28:1) on every theme, but the 95%-opacity blend against whatever scrolls underneath drags the actually-rendered contrast down to 4.17:1 on the sepia theme - below the 4.5:1 AA threshold for 12px normal-weight text. Caught by @axe-core/playwright 4.13.0's stricter color-contrast check (dependabot/npm_and_yarn/axe-core/playwright-4.13.0, PR #415) failing tests/e2e/a11y.spec.ts's command-palette-open check; the older 4.11.3 didn't catch it. These heading rows aren't actually sticky (they're regular rows inside the react-virtual virtualized list, absolutely positioned and translated like every other row) - the translucency/blur served no functional "header floats over scrolling content" purpose, so making the background solid removes the failure mode entirely instead of re-tuning colors per theme. Co-Authored-By: Claude Sonnet 5 --- components/CommandPalette.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/CommandPalette.tsx b/components/CommandPalette.tsx index 716bb24b0..59f7fbe32 100644 --- a/components/CommandPalette.tsx +++ b/components/CommandPalette.tsx @@ -218,7 +218,7 @@ export const CommandPalette: React.FC = ({ {row.kind === 'heading' ? (
{row.label}