forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix(ui): invalid html button markup (#1274)
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
Joaquín Sánchez
Daniel Roe
and committed by
GitHub
b21b58c0
b4f7c2d6
+35
-33
+7
-7
app/components/Compare/PackageSelector.vue
+7
-7
app/components/Compare/PackageSelector.vue
···
178
178
:aria-label="$t('compare.no_dependency.add_column')"
179
179
@click="addPackage(NO_DEPENDENCY_ID)"
180
180
>
181
-
<div class="text-sm text-accent italic flex items-center gap-2">
181
+
<span class="text-sm text-accent italic flex items-center gap-2 block">
182
182
<span class="i-carbon:clean w-4 h-4" aria-hidden="true" />
183
183
{{ $t('compare.no_dependency.typeahead_title') }}
184
-
</div>
185
-
<div class="text-xs text-fg-muted truncate mt-0.5">
184
+
</span>
185
+
<span class="text-xs text-fg-muted truncate mt-0.5">
186
186
{{ $t('compare.no_dependency.typeahead_description') }}
187
-
</div>
187
+
</span>
188
188
</ButtonBase>
189
189
190
190
<div v-if="isSearching" class="px-4 py-3 text-sm text-fg-muted">
···
196
196
class="block w-full text-start"
197
197
@click="addPackage(result.name)"
198
198
>
199
-
<div class="font-mono text-sm text-fg">{{ result.name }}</div>
200
-
<div v-if="result.description" class="text-xs text-fg-muted truncate mt-0.5">
199
+
<span class="font-mono text-sm text-fg block">{{ result.name }}</span>
200
+
<span v-if="result.description" class="text-xs text-fg-muted truncate mt-0.5">
201
201
{{ result.description }}
202
-
</div>
202
+
</span>
203
203
</ButtonBase>
204
204
</div>
205
205
</Transition>
+22
-20
app/components/Header/AccountMenu.client.vue
+22
-20
app/components/Header/AccountMenu.client.vue
···
65
65
class="border-none"
66
66
>
67
67
<!-- Stacked avatars when connected -->
68
-
<div
68
+
<span
69
69
v-if="hasAnyConnection"
70
70
class="flex items-center"
71
71
:class="hasBothConnections ? '-space-x-2' : ''"
···
103
103
>
104
104
<span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
105
105
</span>
106
-
</div>
106
+
</span>
107
107
108
108
<!-- "connect" text when not connected -->
109
109
<span v-if="!hasAnyConnection" class="font-mono text-sm">
···
163
163
>
164
164
<span class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
165
165
</span>
166
-
<div class="flex-1 min-w-0">
167
-
<div class="font-mono text-sm text-fg truncate">~{{ npmUser }}</div>
168
-
<div class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli') }}</div>
169
-
</div>
166
+
<span class="flex-1 min-w-0">
167
+
<span class="font-mono text-sm text-fg truncate block">~{{ npmUser }}</span>
168
+
<span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli') }}</span>
169
+
</span>
170
170
<span
171
171
v-if="operationCount > 0"
172
172
class="px-1.5 py-0.5 font-mono text-xs rounded"
···
206
206
>
207
207
<span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
208
208
</span>
209
-
<div class="flex-1 min-w-0">
210
-
<div class="font-mono text-sm text-fg truncate">@{{ atprotoUser.handle }}</div>
211
-
<div class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere') }}</div>
212
-
</div>
209
+
<span class="flex-1 min-w-0">
210
+
<span class="font-mono text-sm text-fg truncate block"
211
+
>@{{ atprotoUser.handle }}</span
212
+
>
213
+
<span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere') }}</span>
214
+
</span>
213
215
</button>
214
216
</div>
215
217
···
236
238
/>
237
239
<span v-else class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
238
240
</span>
239
-
<div class="flex-1 min-w-0">
240
-
<div class="font-mono text-sm text-fg">
241
+
<span class="flex-1 min-w-0">
242
+
<span class="font-mono text-sm text-fg block">
241
243
{{
242
244
isNpmConnecting
243
245
? $t('account_menu.connecting')
244
246
: $t('account_menu.connect_npm_cli')
245
247
}}
246
-
</div>
247
-
<div class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</div>
248
-
</div>
248
+
</span>
249
+
<span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</span>
250
+
</span>
249
251
</button>
250
252
251
253
<button
···
258
260
<span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
259
261
<span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
260
262
</span>
261
-
<div class="flex-1 min-w-0">
262
-
<div class="font-mono text-sm text-fg">
263
+
<span class="flex-1 min-w-0">
264
+
<span class="font-mono text-sm text-fg block">
263
265
{{ $t('account_menu.connect_atmosphere') }}
264
-
</div>
265
-
<div class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere_desc') }}</div>
266
-
</div>
266
+
</span>
267
+
<span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere_desc') }}</span>
268
+
</span>
267
269
</button>
268
270
</div>
269
271
</div>
+2
-2
app/components/Package/DeprecatedTree.vue
+2
-2
app/components/Package/DeprecatedTree.vue
···
53
53
aria-controls="deprecated-tree-details"
54
54
@click="isExpanded = !isExpanded"
55
55
>
56
-
<div class="flex items-center gap-2 min-w-0">
56
+
<span class="flex items-center gap-2 min-w-0 block">
57
57
<span class="i-carbon-warning-hex w-4 h-4 shrink-0" aria-hidden="true" />
58
58
<span class="font-mono text-sm font-medium truncate">
59
59
{{ $t('package.deprecated.tree_found', analysisData!.deprecatedPackages.length) }}
60
60
</span>
61
-
</div>
61
+
</span>
62
62
<span
63
63
class="i-carbon-chevron-down w-4 h-4 transition-transform duration-200 shrink-0"
64
64
:class="{ 'rotate-180': isExpanded }"
+4
-4
app/components/Package/VulnerabilityTree.vue
+4
-4
app/components/Package/VulnerabilityTree.vue
···
83
83
aria-controls="vuln-tree-details"
84
84
@click="isExpanded = !isExpanded"
85
85
>
86
-
<div class="flex items-center gap-2 min-w-0">
86
+
<span class="flex items-center gap-2 min-w-0 block">
87
87
<span class="i-carbon:warning-alt w-4 h-4 shrink-0" aria-hidden="true" />
88
88
<span class="font-mono text-sm font-medium truncate">
89
89
{{
···
98
98
)
99
99
}}
100
100
</span>
101
-
</div>
102
-
<div class="flex items-center gap-2 shrink-0">
101
+
</span>
102
+
<span class="flex items-center gap-2 shrink-0">
103
103
<span class="text-xs opacity-80 hidden sm:inline">{{ summaryText }}</span>
104
104
<span
105
105
class="i-carbon:chevron-down w-4 h-4 transition-transform duration-200"
106
106
:class="{ 'rotate-180': isExpanded }"
107
107
aria-hidden="true"
108
108
/>
109
-
</div>
109
+
</span>
110
110
</button>
111
111
112
112
<!-- Expandable details -->