From 1591a108f809a8a30d114fd2482372d1c98a3c13 Mon Sep 17 00:00:00 2001
From: Andrew Aquino <dawneraq@gmail.com>
Date: Sat, 28 Feb 2026 21:12:03 -0800
Subject: [PATCH 1/2] feat(ui): highlight slash keyboard shortcut on
 header/home search bars

---
 app/components/Header/SearchBox.vue | 6 +++---
 app/pages/index.vue                 | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index 9c12d635d3..1a2de9d351 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -38,11 +38,11 @@ defineExpose({ focus })
 
       <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
         <div class="search-box relative flex items-center">
-          <span
-            class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
+          <kbd
+            class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1 rounded"
           >
             /
-          </span>
+          </kbd>
 
           <InputBase
             id="header-search"
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 74d38d65d6..450881f9d6 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -69,11 +69,11 @@ defineOgImageComponent('Default', {
               />
 
               <div class="search-box relative flex items-center">
-                <span
-                  class="absolute inset-is-4 text-fg-subtle font-mono text-lg pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
+                <kbd
+                  class="absolute inset-is-4 text-fg-subtle font-mono text-lg pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1 rounded"
                 >
                   /
-                </span>
+                </kbd>
 
                 <InputBase
                   id="home-search"

From d0da65606ef1302c18efb1674b7222ad4d254e99 Mon Sep 17 00:00:00 2001
From: Andrew Aquino <dawneraq@gmail.com>
Date: Sat, 28 Feb 2026 21:35:07 -0800
Subject: [PATCH 2/2] feat(a11y): define slash kbd label as aria-keyshortcuts
 instead of static text

---
 app/components/Header/SearchBox.vue | 2 ++
 app/components/Input/Base.vue       | 5 +++++
 app/pages/index.vue                 | 2 ++
 3 files changed, 9 insertions(+)

diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index 1a2de9d351..ed35e629df 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -40,6 +40,7 @@ defineExpose({ focus })
         <div class="search-box relative flex items-center">
           <kbd
             class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1 rounded"
+            aria-hidden="true"
           >
             /
           </kbd>
@@ -56,6 +57,7 @@ defineExpose({ focus })
             @focus="isSearchFocused = true"
             @blur="isSearchFocused = false"
             size="small"
+            ariaKeyshortcuts="/"
           />
           <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
         </div>
diff --git a/app/components/Input/Base.vue b/app/components/Input/Base.vue
index e435d9d2c8..2154332617 100644
--- a/app/components/Input/Base.vue
+++ b/app/components/Input/Base.vue
@@ -14,6 +14,8 @@ const props = withDefaults(
      * @default true
      */
     noCorrect?: boolean
+    /** Keyboard shortcut hint */
+    ariaKeyshortcuts?: string
   }>(),
   {
     size: 'medium',
@@ -28,6 +30,8 @@ const emit = defineEmits<{
 
 const el = useTemplateRef('el')
 
+const keyboardShortcutsEnabled = useKeyboardShortcuts()
+
 defineExpose({
   focus: () => el.value?.focus(),
   blur: () => el.value?.blur(),
@@ -51,5 +55,6 @@ defineExpose({
       /** Catching Vue render-bug of invalid `disabled=false` attribute in the final HTML */
       disabled ? true : undefined
     "
+    :aria-keyshortcuts="keyboardShortcutsEnabled ? ariaKeyshortcuts : undefined"
   />
 </template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 450881f9d6..a823afc452 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -71,6 +71,7 @@ defineOgImageComponent('Default', {
               <div class="search-box relative flex items-center">
                 <kbd
                   class="absolute inset-is-4 text-fg-subtle font-mono text-lg pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1 rounded"
+                  aria-hidden="true"
                 >
                   /
                 </kbd>
@@ -87,6 +88,7 @@ defineOgImageComponent('Default', {
                   class="w-full ps-8 pe-24"
                   @focus="isSearchFocused = true"
                   @blur="isSearchFocused = false"
+                  ariaKeyshortcuts="/"
                 />
 
                 <ButtonBase