improvement: make search shortcut less visually distracting

[Jenil1105]

Summary

This PR reduces the visual prominence of the Ctrl K shortcut inside the DocSearch search bar.

Previously, the shortcut keys appeared highly contrasted and button-like, which made them visually distracting and could give the impression that they were clickable elements rather than passive keyboard hints.

This update softens the styling by:

• reducing contrast,
• using subtler borders,
• improving blending with the search bar background,
• and keeping the shortcut discoverable without dominating the visual hierarchy.

Fixes #8254

---

Before

• Shortcut keys appeared visually dominant and button-like
• High contrast drew attention away from the search input

After

• Shortcut keys blend more naturally with the search bar
• Softer borders and reduced contrast improve visual hierarchy
• Maintains discoverability while feeling less distracting

---

What kind of change does this PR introduce?

style

---

Did you add tests for your changes?

No. This change is purely visual/UI-related and does not affect functionality.

---

Does this PR introduce a breaking change?

No.

---

If relevant, what needs to be documented once your changes are merged or what have you already documented?

No additional documentation is required.

---

Use of AI

AI assistance was used for wording refinement and discussion around UI/UX considerations.
The implementation, styling decisions, testing, and final modifications were reviewed and adjusted manually.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
webpack-js-org	Ready	Preview, Comment	Jun 12, 2026 6:40am

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: Jenil1105 / name: Jenil1105 (a79d60a)

[github-actions]

👋 Hi there! This PR was automatically flagged and closed by our quality checks.

If you believe this was a mistake, please review our contributing guidelines
and leave a comment explaining why this is a mistake.

[Jenil1105]

I forgot to complete the CLA authorization before opening the PR, so it was likely auto-closed by the checks. The authorization has been completed now. Would it be possible to reopen the PR for review?

[github-actions]

👋 Hi there! This PR was automatically flagged and closed by our quality checks.

If you believe this was a mistake, please review our contributing guidelines
and leave a comment explaining why this is a mistake.

[evenstensberg]

@Jenil1105 could you run an lighthouse audit?

[Jenil1105]

@Jenil1105 could you run an lighthouse audit?

I ran Lighthouse on the Vercel preview deployment. The SEO score is reduced because the preview URL is served with x-robots-tag: noindex, causing the "Page is blocked from indexing" audit to fail. The accessibility audit identified a couple of color contrast issues in the search button styling, which I'm currently looking into.

[Jenil1105]

@evenstensberg

I ran a Lighthouse audit on the latest preview deployment after incorporating the requested changes from the previous audit and attached the generated HTML report for reference.

webpack-js-mxvjjqjjg-openjs.vercel.app-20260612T121218.html

From the audit results, I did not observe any regressions introduced by this PR. The search bar styling changes do not appear to negatively impact performance, accessibility, SEO, or overall functionality.

There are still a few Lighthouse findings present in the report, but these appear to be existing project-level/browser-level observations rather than issues introduced by the changes in this PR. The audit did not identify any new problems directly related to the updated DocSearch styling.

Please let me know if there are any additional checks you would like me to run.