forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: remove compare icon from header, add `c` shortcut (#571)
authored by
Philippe Serhal
and committed by
GitHub
9b63f04f
980c47ba
+88
-3
+26
-2
app/components/AppHeader.vue
+26
-2
app/components/AppHeader.vue
···
72
72
},
73
73
{ dedupe: true },
74
74
)
75
+
76
+
onKeyStroke(
77
+
'c',
78
+
e => {
79
+
// Allow more specific handlers to take precedence
80
+
if (e.defaultPrevented) return
81
+
82
+
// Don't trigger if user is typing in an input
83
+
const target = e.target as HTMLElement
84
+
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
85
+
return
86
+
}
87
+
88
+
e.preventDefault()
89
+
navigateTo('/compare')
90
+
},
91
+
{ dedupe: true },
92
+
)
75
93
</script>
76
94
77
95
<template>
···
156
174
<!-- Desktop: Compare link -->
157
175
<NuxtLink
158
176
to="/compare"
159
-
class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
177
+
class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
178
+
aria-keyshortcuts="c"
160
179
>
161
-
<span class="i-carbon:compare w-4 h-4" aria-hidden="true" />
162
180
{{ $t('nav.compare') }}
181
+
<kbd
182
+
class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
183
+
aria-hidden="true"
184
+
>
185
+
c
186
+
</kbd>
163
187
</NuxtLink>
164
188
165
189
<!-- Desktop: Settings link -->
+2
-1
app/pages/[...package].vue
+2
-1
app/pages/[...package].vue
+60
test/e2e/interactions.spec.ts
+60
test/e2e/interactions.spec.ts
···
76
76
await expect(headerSearchInput).toBeFocused()
77
77
})
78
78
})
79
+
80
+
test.describe('Keyboard Shortcuts', () => {
81
+
test('"c" navigates to /compare', async ({ page, goto }) => {
82
+
await goto('/settings', { waitUntil: 'hydration' })
83
+
84
+
await page.keyboard.press('c')
85
+
86
+
await expect(page).toHaveURL(/\/compare/)
87
+
})
88
+
89
+
test('"c" on package page navigates to /compare with package pre-filled', async ({
90
+
page,
91
+
goto,
92
+
}) => {
93
+
await goto('/vue', { waitUntil: 'hydration' })
94
+
95
+
await page.keyboard.press('c')
96
+
97
+
// Should navigate to /compare with the package in the query
98
+
await expect(page).toHaveURL(/\/compare\?packages=vue/)
99
+
})
100
+
101
+
test('"c" does not navigate when search input is focused', async ({ page, goto }) => {
102
+
await goto('/settings', { waitUntil: 'hydration' })
103
+
104
+
const searchInput = page.locator('#header-search')
105
+
await searchInput.focus()
106
+
await expect(searchInput).toBeFocused()
107
+
108
+
await page.keyboard.press('c')
109
+
110
+
// Should still be on settings, not navigated to compare
111
+
await expect(page).toHaveURL(/\/settings/)
112
+
// The 'c' should have been typed into the input
113
+
await expect(searchInput).toHaveValue('c')
114
+
})
115
+
116
+
test('"," navigates to /settings', async ({ page, goto }) => {
117
+
await goto('/compare', { waitUntil: 'hydration' })
118
+
119
+
await page.keyboard.press(',')
120
+
121
+
await expect(page).toHaveURL(/\/settings/)
122
+
})
123
+
124
+
test('"," does not navigate when search input is focused', async ({ page, goto }) => {
125
+
await goto('/compare', { waitUntil: 'hydration' })
126
+
127
+
const searchInput = page.locator('#header-search')
128
+
await searchInput.focus()
129
+
await expect(searchInput).toBeFocused()
130
+
131
+
await page.keyboard.press(',')
132
+
133
+
// Should still be on compare, not navigated to settings
134
+
await expect(page).toHaveURL(/\/compare/)
135
+
// The ',' should have been typed into the input
136
+
await expect(searchInput).toHaveValue(',')
137
+
})
138
+
})