fix(a11y): remove low-contrast translucency on command palette headings

[qnbs]

User description

Summary

• The Command Palette's "Suggested"/"All commands" section-heading rows used a 95%-opacity + backdrop-blur background over --sc-text-muted text. The raw token pair passes WCAG AA (~5.28:1) on every theme, but the opacity blend drags the actually-rendered contrast down to 4.17:1 on the sepia theme, below the 4.5:1 AA threshold.
• These rows aren't actually sticky — they're regular rows inside the react-virtual virtualized list — so the translucency served no functional purpose. Made the background solid instead of re-tuning per-theme colors.

Why now

Caught by @axe-core/playwright 4.13.0's stricter color-contrast detection (dependabot PR #415, currently blocked on this) failing tests/e2e/a11y.spec.ts's "command palette open has no serious axe violations" check. The older 4.11.3 didn't catch it — this is a real pre-existing bug the version bump exposed, not a false positive.

Test plan

• pnpm exec biome check components/CommandPalette.tsx — clean
• pnpm exec vitest run tests/unit/CommandPalette.test.tsx — 7/7 pass
• CI green (E2E a11y suite validates the actual fix, still on the old axe-core version on this PR — real proof comes from re-running build(deps-dev): bump @axe-core/playwright from 4.11.3 to 4.13.0 #415 after this merges)

Summary by Sourcery

Bug Fixes:

• Fix low-contrast command palette section headings by using a solid raised-surface background.

---

CodeAnt-AI Description

Improve command palette heading readability across themes

What Changed

• Command palette section headings now use a solid background instead of a translucent, blurred background
• Heading text maintains accessible contrast while commands scroll behind or around the list

Impact

✅ Higher-contrast command palette headings
✅ Reliable accessibility checks across 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.

[qodo-code-review]

ⓘ Qodo reviews are paused because your trial has ended. Ask your workspace admin to add credits to resume reviews. Manage billing

[sourcery-ai]

Sorry @qnbs, you have reached your weekly rate limit of 500000 diff characters.

Please try again later or upgrade to continue using Sourcery

[codeant-ai]

🤖 CodeAnt AI — Review Status

Status	Commit	Started (UTC)	Finished (UTC)
✅ Reviewed your PR	5b78010	Aug 20, 2026 · 08:20	08:23

[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	Aug 20, 2026 8:21am

[coderabbitai]

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your current included review allowance is based on your included PR review attempts over the past 7 days.

Next review available in: 38 minutes

Limit details: You’ve used the included review currently available. Your 60 included PR review attempts over the past 7 days set your current allowance at 1 review per hour.

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

Wait for the limit to reset, then comment @coderabbitai review or push new commits to the PR.

An organization admin can change what happens after included review limits in Billing.

How do review limits work?

CodeRabbit enforces per-developer PR review limits within each organization.

For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d1ae4624-1858-4972-b19f-ab2205e16bbf

📥 Commits

Reviewing files that changed from the base of the PR and between d00286f and 5b78010.

📒 Files selected for processing (1)

• components/CommandPalette.tsx

---

_{Comment @coderabbitai help to get the list of available commands.}

[sourcery-ai]

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Adjusts the command palette heading row styling to use a solid raised-surface background instead of a translucent blurred one, resolving an axe-core-detected color-contrast accessibility issue.

Flow diagram for CommandPalette heading row rendering change

flowchart TD
  A[render CommandPalette row] --> B{row.kind === 'heading'}
  B -- yes --> C[render div role=presentation]
  C --> D["apply class bg-[var(--sc-surface-raised)]"]
  B -- no --> E[render non-heading row as before]

Loading

File-Level Changes

Change	Details	Files
Fix low-contrast, translucent background on command palette heading rows by using a solid raised-surface background to meet WCAG AA contrast.	Updated the heading row container’s CSS classes to remove 95% opacity from the raised-surface background token. Removed the backdrop-blur effect from heading rows, since they are not sticky elements and blur provided no functional value. Ensured heading text continues using the muted text token while relying on a fully opaque background for acceptable contrast.	components/CommandPalette.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[codeant-ai]

🏁 CodeAnt Quality Gate Results

Commit: 5b78010e
Scan Time: 2026-08-20 08:23:16 UTC

✅ Overall Status: PASSED

Quality Gate Details

Quality Gate	Status	Details
Secrets	✅ PASSED	0 secrets found
Duplicate Code	✅ PASSED	0.0% duplicated
SAST	✅ PASSED	No security issues
Bugs	✅ PASSED	Rating S: No bugs
IAC	✅ PASSED	No IAC issues

View Full Results

[amazon-q-developer]

This accessibility fix correctly addresses the WCAG AA contrast issue by removing unnecessary translucency from command palette section headings. The change is minimal, focused, and resolves the 4.17:1 contrast ratio issue in the sepia theme by making the background solid. The fix is appropriate since these rows are not sticky and the translucency served no functional purpose.

---

You can now have the agent implement changes and create commits directly on your pull request's source branch. Simply comment with /q followed by your request in natural language to ask the agent to make changes.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!