fix(a11y): add instant search advisory to homepage search field

Author: knowler

app/app.vue

@@ -48,10 +48,17 @@ if (import.meta.server) {
 }
 
 const keyboardShortcuts = useKeyboardShortcuts()
+const { settings } = useSettings()
 
 onKeyDown(
   '/',
   e => {
+    if (e.ctrlKey) {
+      e.preventDefault()
+      settings.value.instantSearch = !settings.value.instantSearch
+      return
+    }
+
     if (!keyboardShortcuts.value || isEditableElement(e.target)) return
     e.preventDefault()
 

app/pages/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
 
+const { settings } = useSettings()
+
 const { model: searchQuery, startSearch } = useGlobalSearch()
 const isSearchFocused = shallowRef(false)
 
@@ -52,15 +54,20 @@ defineOgImageComponent('Default', {
           {{ $t('tagline') }}
         </p>
         <search
-          class="w-full max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
+          class="w-full max-w-2xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
           style="animation-delay: 0.2s"
         >
-          <form method="GET" action="/search" class="relative" @submit.prevent.trim="search">
+          <form
+            method="GET"
+            action="/search"
+            class="relative grid justify-items-center gap-4"
+            @submit.prevent.trim="search"
+          >
             <label for="home-search" class="sr-only">
               {{ $t('search.label') }}
             </label>
 
-            <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
+            <div class="relative group w-full max-w-xl" :class="{ 'is-focused': isSearchFocused }">
               <div
                 class="absolute z-1 -inset-px pointer-events-none rounded-lg bg-gradient-to-r from-fg/0 to-accent/5 opacity-0 transition-opacity duration-500 blur-sm group-[.is-focused]:opacity-100"
               />
@@ -82,6 +89,7 @@ defineOgImageComponent('Default', {
                   no-correct
                   size="large"
                   class="w-full ps-8 pe-24"
+                  aria-describedby="instant-search-advisory"
                   @focus="isSearchFocused = true"
                   @blur="isSearchFocused = false"
                 />
@@ -98,6 +106,35 @@ defineOgImageComponent('Default', {
                 </ButtonBase>
               </div>
             </div>
+
+            <p
+              v-if="settings.instantSearch"
+              id="instant-search-advisory"
+              class="text-fg-muted text-sm text-pretty"
+            >
+              <span
+                class="i-lucide:zap align-middle text-fg relative top-[-0.1em] me-1"
+                style="font-size: 0.8em"
+                aria-hidden="true"
+              ></span>
+              <i18n-t keypath="search.instant_search_advisory">
+                <template #label>
+                  <strong>{{ $t('search.instant_search') }}</strong>
+                </template>
+                <template #settings>
+                  <LinkBase to="/settings">{{ $t('settings.title') }}</LinkBase>
+                </template>
+                <template #shortcut>
+                  <kbd class="text-xs"
+                    ><kbd class="text-fg bg-bg-muted border border-border px-1 py-[2px] rounded-sm"
+                      >Ctrl</kbd
+                    >+<kbd class="text-fg bg-bg-muted border border-border px-1 py-[2px] rounded-sm"
+                      >/</kbd
+                    ></kbd
+                  >
+                </template>
+              </i18n-t>
+            </p>
           </form>
         </search>
 

i18n/locales/en.json

@@ -64,7 +64,9 @@
       "org": "org",
       "view_user_packages": "View packages by this user",
       "view_org_packages": "View packages by this organization"
-    }
+    },
+    "instant_search": "Instant search",
+    "instant_search_advisory": "{label}: navigate to results as you type. Turn off in {settings} or press {shortcut}."
   },
   "nav": {
     "main_navigation": "Main",

i18n/schema.json

@@ -198,6 +198,12 @@
             }
           },
           "additionalProperties": false
+        },
+        "instant_search": {
+          "type": "string"
+        },
+        "instant_search_advisory": {
+          "type": "string"
         }
       },
       "additionalProperties": false