Skip to content

Commit e9eb0ef

Browse files
jellydeckjellydeck
committed
fix: cleanup unnecessary focus-visible classes
1 parent 760f29d commit e9eb0ef

33 files changed

Lines changed: 139 additions & 134 deletions

‎app/components/AppHeader.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -163,11 +163,11 @@ onKeyStroke(
163163
</div>
164164

165165
<!-- End: Desktop nav items + Mobile menu button -->
166-
<div class="flex-shrink-0 flex items-center gap-4 sm:gap-6">
166+
<div class="flex-shrink-0 flex items-center gap-0.5 sm:gap-2">
167167
<!-- Desktop: Compare link -->
168168
<NuxtLink
169169
to="/compare"
170-
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/70 rounded"
170+
class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 focus-visible:outline-accent/70 rounded"
171171
aria-keyshortcuts="c"
172172
>
173173
{{ $t('nav.compare') }}
@@ -182,7 +182,7 @@ onKeyStroke(
182182
<!-- Desktop: Settings link -->
183183
<NuxtLink
184184
to="/settings"
185-
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/70 rounded"
185+
class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 focus-visible:outline-accent/70 rounded"
186186
aria-keyshortcuts=","
187187
>
188188
{{ $t('nav.settings') }}
@@ -202,7 +202,7 @@ onKeyStroke(
202202
<!-- Mobile: Menu button (always visible, toggles menu) -->
203203
<button
204204
type="button"
205-
class="sm:hidden flex items-center p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
205+
class="sm:hidden flex items-center p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
206206
:aria-label="showMobileMenu ? $t('common.close') : $t('nav.open_menu')"
207207
:aria-expanded="showMobileMenu"
208208
@click="showMobileMenu = !showMobileMenu"

‎app/components/CollapsibleSection.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ useHead({
7676

7777
<template>
7878
<section class="scroll-mt-20" :data-anchor-id="id">
79-
<div class="flex items-center justify-between mb-3">
79+
<div class="flex items-center justify-between mb-3 px-1">
8080
<component
8181
:is="headingLevel"
8282
:id="headingId"
@@ -85,7 +85,7 @@ useHead({
8585
<button
8686
:id="buttonId"
8787
type="button"
88-
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
88+
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-accent/70 rounded"
8989
:aria-expanded="isOpen"
9090
:aria-controls="contentId"
9191
:aria-label="ariaLabel"

‎app/components/Compare/FacetSelector.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ function isCategoryNoneSelected(category: string): boolean {
7777
:disabled="facet.comingSoon"
7878
:aria-pressed="isFacetSelected(facet.id)"
7979
:aria-label="facet.label"
80-
class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
80+
class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200 focus-visible:outline-accent/70"
8181
:class="
8282
facet.comingSoon
8383
? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'

‎app/components/Compare/PackageSelector.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ function handleBlur() {
7171
</NuxtLink>
7272
<button
7373
type="button"
74-
class="text-fg-subtle hover:text-fg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
74+
class="text-fg-subtle hover:text-fg transition-colors focus-visible:outline-accent/70 rounded"
7575
:aria-label="$t('compare.selector.remove_package', { package: pkg })"
7676
@click="removePackage(pkg)"
7777
>
@@ -101,7 +101,7 @@ function handleBlur() {
101101
? $t('compare.selector.search_first')
102102
: $t('compare.selector.search_add')
103103
"
104-
class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle motion-reduce:transition-none duration-200 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
104+
class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle motion-reduce:transition-none duration-200 focus:border-accent focus-visible:outline-accent/70"
105105
aria-autocomplete="list"
106106
@focus="isInputFocused = true"
107107
@blur="handleBlur"

‎app/components/Header/AccountMenu.client.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ function openAuthModal() {
5959
<div ref="accountMenuRef" class="relative flex min-w-24 justify-end">
6060
<button
6161
type="button"
62-
class="relative flex items-center justify-end gap-2 px-2 py-1.5 min-w-24 rounded-md transition-colors duration-200 hover:bg-bg-subtle hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
62+
class="relative flex items-center gap-2 px-2 py-1.5 rounded-md transition-colors duration-200 hover:bg-bg-subtle focus-visible:outline-accent/70"
6363
:aria-expanded="isOpen"
6464
aria-haspopup="true"
6565
@click="isOpen = !isOpen"

‎app/components/Header/AuthModal.client.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ async function handleLogin() {
3434
</div>
3535
</div>
3636
<button
37-
class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
37+
class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
3838
@click="logout"
3939
>
4040
{{ $t('auth.modal.disconnect') }}
@@ -61,7 +61,7 @@ async function handleLogin() {
6161
:placeholder="$t('auth.modal.handle_placeholder')"
6262
autocomplete="off"
6363
spellcheck="false"
64-
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
64+
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
6565
/>
6666
</div>
6767

@@ -99,21 +99,21 @@ async function handleLogin() {
9999
<button
100100
type="submit"
101101
:disabled="!handleInput.trim()"
102-
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
102+
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
103103
>
104104
{{ $t('auth.modal.connect') }}
105105
</button>
106106
<button
107107
type="button"
108-
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
108+
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
109109
@click="handleCreateAccount"
110110
>
111111
{{ $t('auth.modal.create_account') }}
112112
</button>
113113
<hr />
114114
<button
115115
type="button"
116-
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
116+
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
117117
@click="handleBlueskySignIn"
118118
>
119119
{{ $t('auth.modal.connect_bluesky') }}

‎app/components/Header/ConnectorModal.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ function handleDisconnect() {
7070

7171
<button
7272
type="button"
73-
class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
73+
class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
7474
@click="handleDisconnect"
7575
>
7676
{{ $t('connector.modal.disconnect') }}
@@ -114,7 +114,7 @@ function handleDisconnect() {
114114
<button
115115
type="button"
116116
:aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
117-
class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
117+
class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
118118
@click="copy('pnpm npmx-connector')"
119119
>
120120
<span v-if="!copied" class="i-carbon:copy w-5 h-5" aria-hidden="true" />
@@ -136,7 +136,7 @@ function handleDisconnect() {
136136
:aria-label="
137137
copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
138138
"
139-
class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
139+
class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
140140
@click="copyCommand"
141141
>
142142
<span v-if="!copied" class="i-carbon:copy w-5 h-5" aria-hidden="true" />
@@ -167,7 +167,7 @@ function handleDisconnect() {
167167
name="connector-token"
168168
:placeholder="$t('connector.modal.token_placeholder')"
169169
v-bind="noCorrect"
170-
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
170+
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
171171
/>
172172
</div>
173173

@@ -191,7 +191,7 @@ function handleDisconnect() {
191191
name="connector-port"
192192
inputmode="numeric"
193193
autocomplete="off"
194-
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
194+
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
195195
/>
196196
</div>
197197
</details>
@@ -222,7 +222,7 @@ function handleDisconnect() {
222222
<button
223223
type="submit"
224224
:disabled="!tokenInput.trim() || isConnecting"
225-
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
225+
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
226226
>
227227
{{ isConnecting ? $t('connector.modal.connecting') : $t('connector.modal.connect') }}
228228
</button>

‎app/components/Header/MobileMenu.client.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ onUnmounted(deactivate)
9191
<span class="font-mono text-sm text-fg-muted">{{ $t('nav.menu') }}</span>
9292
<button
9393
type="button"
94-
class="p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
94+
class="p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
9595
:aria-label="$t('common.close')"
9696
@click="closeMenu"
9797
>

‎app/components/Modal.client.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ defineExpose({
2525
<dialog
2626
ref="dialogRef"
2727
closedby="any"
28-
class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-fg"
28+
class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-fg focus-visible:outline focus-visible:outline-accent/70"
2929
:aria-labelledby="modalTitleId"
3030
v-bind="$attrs"
3131
>
@@ -36,7 +36,7 @@ defineExpose({
3636
</h2>
3737
<button
3838
type="button"
39-
class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
39+
class="text-fg-subtle w-5 h-5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
4040
:aria-label="$t('common.close')"
4141
@click="handleModalClose"
4242
>

0 commit comments

Comments
 (0)