feat: add e2e and unit for kbd shortcuts disabled

Author: alex-key

app/components/AppHeader.vue

@@ -4,6 +4,8 @@ import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
 import { isEditableElement } from '~/utils/input'
 import { NPMX_DOCS_SITE } from '#shared/utils/constants'
 
+const keyboardShortcuts = useKeyboardShortcuts()
+
 withDefaults(
   defineProps<{
     showLogo?: boolean
@@ -175,7 +177,7 @@ function handleSearchFocus() {
 
 onKeyStroke(
   e => {
-    if (isEditableElement(e.target)) {
+    if (!keyboardShortcuts.value || isEditableElement(e.target)) {
       return
     }
 

test/e2e/interactions.spec.ts

@@ -223,19 +223,52 @@ test.describe('Keyboard Shortcuts', () => {
     await page.keyboard.press('ControlOrMeta+Shift+,')
     await expect(page).toHaveURL(/\/settings/)
   })
+})
 
-  test('"," does not navigate when search input is focused', async ({ page, goto }) => {
-    await goto('/compare', { waitUntil: 'hydration' })
+test.describe('Keyboard Shortcuts disabled', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.addInitScript(() => {
+      localStorage.setItem('npmx-settings', JSON.stringify({ keyboardShortcuts: false }))
+    })
+  })
 
-    const searchInput = page.locator('#header-search')
-    await searchInput.focus()
-    await expect(searchInput).toBeFocused()
+  test('"," (header) does not navigate to /settings when shortcuts are disabled', async ({
+    page,
+    goto,
+  }) => {
+    await goto('/compare', { waitUntil: 'hydration' })
 
     await page.keyboard.press(',')
 
-    // Should still be on compare, not navigated to settings
     await expect(page).toHaveURL(/\/compare/)
-    // The ',' should have been typed into the input
-    await expect(searchInput).toHaveValue(',')
+  })
+
+  test('"/" (global) does not focus search input when shortcuts are disabled', async ({
+    page,
+    goto,
+  }) => {
+    await goto('/search?q=vue', { waitUntil: 'hydration' })
+
+    await expect(page.locator('text=/found \\d+|showing \\d+/i').first()).toBeVisible({
+      timeout: 15000,
+    })
+
+    // Focus a non-input element so "/" would normally steal focus to search
+    await page.locator('[data-result-index="0"]').first().focus()
+
+    await page.keyboard.press('/')
+
+    await expect(page.locator('input[type="search"]')).not.toBeFocused()
+  })
+
+  test('"d" (package) does not navigate to docs when shortcuts are disabled', async ({
+    page,
+    goto,
+  }) => {
+    await goto('/package/vue', { waitUntil: 'hydration' })
+
+    await page.keyboard.press('d')
+
+    await expect(page).toHaveURL(/\/package\/vue$/)
   })
 })

test/nuxt/composables/use-settings.spec.ts

@@ -0,0 +1,66 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+
+describe('useSettings - keyboardShortcuts', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  afterEach(() => {
+    // Reset the singleton so the next test gets a fresh instance
+    localStorage.clear()
+  })
+
+  describe('default value', () => {
+    it('should default keyboardShortcuts to true', () => {
+      const { settings } = useSettings()
+      expect(settings.value.keyboardShortcuts).toBe(true)
+    })
+  })
+
+  describe('useKeyboardShortcuts composable', () => {
+    it('should return true by default', () => {
+      const enabled = useKeyboardShortcuts()
+      expect(enabled.value).toBe(true)
+    })
+
+    it('should reflect changes made via settings', () => {
+      const { settings } = useSettings()
+      const enabled = useKeyboardShortcuts()
+
+      settings.value.keyboardShortcuts = false
+      expect(enabled.value).toBe(false)
+
+      settings.value.keyboardShortcuts = true
+      expect(enabled.value).toBe(true)
+    })
+
+    it('should be reactive', () => {
+      const { settings } = useSettings()
+      const enabled = useKeyboardShortcuts()
+
+      expect(enabled.value).toBe(true)
+
+      settings.value.keyboardShortcuts = false
+      expect(enabled.value).toBe(false)
+    })
+  })
+
+  describe('persistence', () => {
+    it('should persist keyboardShortcuts=false to localStorage', () => {
+      const { settings } = useSettings()
+      settings.value.keyboardShortcuts = false
+
+      const stored = JSON.parse(localStorage.getItem('npmx-settings') ?? '{}')
+      expect(stored.keyboardShortcuts).toBe(false)
+    })
+
+    it('should persist keyboardShortcuts=true to localStorage', () => {
+      const { settings } = useSettings()
+      settings.value.keyboardShortcuts = false
+      settings.value.keyboardShortcuts = true
+
+      const stored = JSON.parse(localStorage.getItem('npmx-settings') ?? '{}')
+      expect(stored.keyboardShortcuts).toBe(true)
+    })
+  })
+})