feat(a11y): define slash kbd label as aria-keyshortcuts instead of

static text

Author: aqandrew

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>

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,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