From db5aa6fa6826863199e0fedbd8b953055e832e26 Mon Sep 17 00:00:00 2001
From: Nathan Knowler <nathan@knowler.dev>
Date: Mon, 2 Mar 2026 12:05:49 -0600
Subject: [PATCH 1/6] fix(a11y): add instant search advisory to homepage search
 field

---
 app/app.vue          |  7 +++++++
 app/pages/index.vue  | 43 ++++++++++++++++++++++++++++++++++++++++---
 i18n/locales/en.json |  4 +++-
 i18n/schema.json     |  6 ++++++
 4 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 1f7e40b414..5916e3e328 100644
--- a/app/app.vue
+++ b/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()
 
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 3bf21e21ef..39742baa77 100644
--- a/app/pages/index.vue
+++ b/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>
 
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 85a04883e9..2d632d520b 100644
--- a/i18n/locales/en.json
+++ b/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",
diff --git a/i18n/schema.json b/i18n/schema.json
index 0ac06e1cd4..2d8a93ff70 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -198,6 +198,12 @@
             }
           },
           "additionalProperties": false
+        },
+        "instant_search": {
+          "type": "string"
+        },
+        "instant_search_advisory": {
+          "type": "string"
         }
       },
       "additionalProperties": false

From 76070c16f52ff91aa4867458bc9687d9efc49a6d Mon Sep 17 00:00:00 2001
From: Nathan Knowler <nathan@knowler.dev>
Date: Mon, 2 Mar 2026 18:05:41 -0600
Subject: [PATCH 2/6] fix: only apply aria-describedby when instant search
 advisory is visible

---
 app/pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 39742baa77..64dcbf2037 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -89,7 +89,7 @@ defineOgImageComponent('Default', {
                   no-correct
                   size="large"
                   class="w-full ps-8 pe-24"
-                  aria-describedby="instant-search-advisory"
+                  :aria-describedby="settings.instantSearch ? 'instant-search-advisory' : undefined"
                   @focus="isSearchFocused = true"
                   @blur="isSearchFocused = false"
                 />

From 824e1521b3533a35eb6791b21e671eb7036b69f8 Mon Sep 17 00:00:00 2001
From: Alex Savelyev <91429106+alexdln@users.noreply.github.com>
Date: Tue, 3 Mar 2026 09:36:31 +0000
Subject: [PATCH 3/6] fix: correct hydration for instant search (#1866)

---
 app/components/InstantSearch.vue | 43 ++++++++++++++++++++++++++++++++
 app/pages/index.vue              | 29 +--------------------
 2 files changed, 44 insertions(+), 28 deletions(-)
 create mode 100644 app/components/InstantSearch.vue

diff --git a/app/components/InstantSearch.vue b/app/components/InstantSearch.vue
new file mode 100644
index 0000000000..7f56259bcb
--- /dev/null
+++ b/app/components/InstantSearch.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useSettings } from '~/composables/useSettings'
+
+const { settings } = useSettings()
+
+onPrehydrate(el => {
+  const settingsSaved = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
+  const enabled = settingsSaved.instantSearch
+  if (enabled === false) {
+    el.classList.add('hidden')
+  }
+})
+</script>
+
+<template>
+  <p
+    id="instant-search-advisory"
+    class="text-fg-muted text-sm text-pretty"
+    :class="settings.instantSearch ? '' : 'hidden'"
+  >
+    <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>
+</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 64dcbf2037..ee0d283e7b 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -107,34 +107,7 @@ defineOgImageComponent('Default', {
               </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>
+            <InstantSearch />
           </form>
         </search>
 

From ed977dc1404ea87fdcaa8466535b0d13b4df1988 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Tue, 3 Mar 2026 09:44:38 +0000
Subject: [PATCH 4/6] test: add a11y test for instant-search

---
 test/nuxt/a11y.spec.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 4774a5ce64..1986138d40 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -156,6 +156,7 @@ import {
   HeaderAccountMenu,
   HeaderConnectorModal,
   HeaderSearchBox,
+  InstantSearch,
   InputBase,
   LicenseDisplay,
   LoadingSpinner,
@@ -2657,6 +2658,14 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('InstantSearch', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(InstantSearch)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('SearchProviderToggle', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(SearchProviderToggle)

From 87fe071995f9bdb9d78ad6736230310172d56863 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 3 Mar 2026 11:49:30 +0000
Subject: [PATCH 5/6] chore: simplify and always keep tagline

---
 app/components/InstantSearch.vue | 57 +++++++++++++++++++-------------
 app/pages/index.vue              |  2 +-
 i18n/locales/en.json             |  6 +++-
 i18n/schema.json                 | 12 +++++++
 4 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/app/components/InstantSearch.vue b/app/components/InstantSearch.vue
index 7f56259bcb..ae721f8376 100644
--- a/app/components/InstantSearch.vue
+++ b/app/components/InstantSearch.vue
@@ -7,37 +7,48 @@ onPrehydrate(el => {
   const settingsSaved = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
   const enabled = settingsSaved.instantSearch
   if (enabled === false) {
-    el.classList.add('hidden')
+    el.querySelector('[data-instant-search-on]')!.className = 'hidden'
+    el.querySelector('[data-instant-search-off]')!.className = ''
   }
 })
 </script>
 
 <template>
-  <p
-    id="instant-search-advisory"
-    class="text-fg-muted text-sm text-pretty"
-    :class="settings.instantSearch ? '' : 'hidden'"
-  >
+  <p 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>
+    />
+    <span data-instant-search-on :class="settings.instantSearch ? '' : 'hidden'">
+      <i18n-t keypath="search.instant_search_advisory">
+        <template #label>
+          {{ $t('search.instant_search') }}
+        </template>
+        <template #state>
+          <strong>{{ $t('search.instant_search_on') }}</strong>
+        </template>
+        <template #action>
+          <button type="button" class="underline" @click="settings.instantSearch = false">
+            {{ $t('search.instant_search_turn_off') }}
+          </button>
+        </template>
+      </i18n-t>
+    </span>
+    <span data-instant-search-off :class="settings.instantSearch ? 'hidden' : ''">
+      <i18n-t keypath="search.instant_search_advisory">
+        <template #label>
+          {{ $t('search.instant_search') }}
+        </template>
+        <template #state>
+          <strong>{{ $t('search.instant_search_off') }}</strong>
+        </template>
+        <template #action>
+          <button type="button" class="underline" @click="settings.instantSearch = true">
+            {{ $t('search.instant_search_turn_on') }}
+          </button>
+        </template>
+      </i18n-t>
+    </span>
   </p>
 </template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index ee0d283e7b..9a1e5e9dad 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -89,7 +89,7 @@ defineOgImageComponent('Default', {
                   no-correct
                   size="large"
                   class="w-full ps-8 pe-24"
-                  :aria-describedby="settings.instantSearch ? 'instant-search-advisory' : undefined"
+                  aria-describedby="instant-search-advisory"
                   @focus="isSearchFocused = true"
                   @blur="isSearchFocused = false"
                 />
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 2d632d520b..a40d6de259 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -66,7 +66,11 @@
       "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}."
+    "instant_search_on": "on",
+    "instant_search_off": "off",
+    "instant_search_turn_on": "turn on",
+    "instant_search_turn_off": "turn off",
+    "instant_search_advisory": "{label} {state} — {action}"
   },
   "nav": {
     "main_navigation": "Main",
diff --git a/i18n/schema.json b/i18n/schema.json
index 2d8a93ff70..6e61d4d3e7 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -202,6 +202,18 @@
         "instant_search": {
           "type": "string"
         },
+        "instant_search_on": {
+          "type": "string"
+        },
+        "instant_search_off": {
+          "type": "string"
+        },
+        "instant_search_turn_on": {
+          "type": "string"
+        },
+        "instant_search_turn_off": {
+          "type": "string"
+        },
         "instant_search_advisory": {
           "type": "string"
         }

From 1579638b6f3b1f75d30fc16f566beb7f346316fd Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 3 Mar 2026 11:55:53 +0000
Subject: [PATCH 6/6] chore: remove call

---
 app/pages/index.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 9a1e5e9dad..1b12b60c3f 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
 
-const { settings } = useSettings()
-
 const { model: searchQuery, startSearch } = useGlobalSearch()
 const isSearchFocused = shallowRef(false)