fix(a11y): ESC kbd contrast in command palette (sepia AA gate)

[qnbs]

User description

Problem

The command-palette ESC <kbd> hint used --sc-text-muted on --sc-surface-overlay. Over the panel's /90 translucent backdrop (bg-[var(--sc-surface-raised)]/90 backdrop-blur-xl), axe composites this to ~4.05–4.29:1 in the sepia theme — below the 4.5:1 WCAG 2 AA threshold — so the command-palette axe scan in E2E flakes intermittently (it red-flagged PR #172's E2E run; a rerun went green because the composited value drifts around the threshold depending on backdrop content).

Raw tokens give ~4.84:1 (passes), but the translucent-panel compositing pulls it under, with no margin.

Fix

Switch the ESC <kbd> to --sc-text-secondary, which is darker / higher-contrast in every theme (light/dark/sepia/dark-amber) and already matches the footer kbds in the same component. Clears 4.5:1 with comfortable margin.

One-line className change; no token edits → no Visual Regression snapshot churn.

Verification

• biome check components/CommandPalette.tsx → clean
• No unit test asserts on the kbd className (only the generic a11y.spec.ts axe scan covers it)
• Theme check: --sc-text-secondary is higher-contrast than --sc-text-muted against the overlay in all four themes

🤖 Generated with Claude Code

---

CodeAnt-AI Description

Fix the command palette ESC hint contrast in sepia and other themes

What Changed

• The ESC key hint in the command palette now uses a darker text color so it stays readable on the translucent panel background
• This removes the low-contrast case that could fail accessibility checks in sepia
• The hint now matches the footer key hints in the same component

Impact

✅ Clearer command palette key hints
✅ Fewer accessibility test failures in sepia
✅ Consistent contrast across light, dark, sepia, and dark-amber themes

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
worldscript-studio	Ready	Preview, Comment	Jun 17, 2026 3:05pm