From 60f656b0ec46a4bbe61f877036385ec3af64a9ff Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Thu, 27 Aug 2026 22:07:37 +0530
Subject: [PATCH] fix(theme): keep the search keycap glyphs out of the DOM text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

axe's label-content-name-mismatch rule flags the search button
(#5401): its visible text is "Search ⌘ K" while its accessible name
is "Search". aria-hidden on the keys does not help — the rule counts
visually rendered text, since WCAG 2.5.3 is about what sighted
speech-input users see and say.

The button was arguably conformant as it was: 2.5.3 constrains the
label, and the keycaps are a shortcut hint, not the label. Nobody
says "click Search command K". The glyphs move to CSS anyway because
it costs nothing visible and layers things right: the DOM text now
contains exactly the label, so speech software gets no stray "K"
target, strict audits pass without a human ruling them false
positives, and the decorative hint lives in the presentation layer
where decorative content belongs. Screen readers are unaffected — the
keys were already aria-hidden — and aria-keyshortcuts keeps carrying
the shortcut semantics.

Also folds the two display-toggled kbd elements into one whose
content switches per platform.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/VPNavBarSearchButton.vue       | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/client/theme-default/components/VPNavBarSearchButton.vue b/src/client/theme-default/components/VPNavBarSearchButton.vue
index a9f7e42c..106fbd55 100644
--- a/src/client/theme-default/components/VPNavBarSearchButton.vue
+++ b/src/client/theme-default/components/VPNavBarSearchButton.vue
@@ -9,9 +9,8 @@ defineProps<{
     <span class="vpi-search" aria-hidden="true"></span>
     <span class="text">{{ text }}</span>
     <span class="keys" aria-hidden="true">
-      <kbd class="key-cmd">&#x2318;</kbd>
-      <kbd class="key-ctrl">Ctrl</kbd>
-      <kbd>K</kbd>
+      <kbd class="key-mod"></kbd>
+      <kbd class="key-k"></kbd>
     </span>
   </button>
 </template>
@@ -27,9 +26,7 @@ defineProps<{
 }
 
 .text,
-.keys,
-:root.mac .key-ctrl,
-:root:not(.mac) .key-cmd {
+.keys {
   display: none;
 }
 
@@ -38,6 +35,18 @@ kbd {
   font-weight: 500;
 }
 
+.key-mod::before {
+  content: 'Ctrl';
+}
+
+:root.mac .key-mod::before {
+  content: '\2318';
+}
+
+.key-k::before {
+  content: 'K';
+}
+
 @media (min-width: 48rem) {
   .VPNavBarSearchButton {
     height: auto;