feat(ui): highlight slash keyboard shortcut on header/home search bars (#1960)

Author: aqandrew

app/components/Header/SearchBox.vue

@@ -44,11 +44,12 @@ 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"
+            aria-hidden="true"
           >
             /
-          </span>
+          </kbd>
 
           <InputBase
             id="header-search"
@@ -62,6 +63,7 @@ defineExpose({ focus })
             @focus="isSearchFocused = true"
             @blur="isSearchFocused = false"
             size="small"
+            ariaKeyshortcuts="/"
           />
           <button
             v-if="hasSearchQuery"

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>

app/pages/index.vue

@@ -71,11 +71,12 @@ 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"
+                  aria-hidden="true"
                 >
                   /
-                </span>
+                </kbd>
 
                 <InputBase
                   id="home-search"
@@ -90,6 +91,7 @@ defineOgImageComponent('Default', {
                   aria-describedby="instant-search-advisory"
                   @focus="isSearchFocused = true"
                   @blur="isSearchFocused = false"
+                  ariaKeyshortcuts="/"
                 />
 
                 <ButtonBase