Skip to content

Commit b21b58c

Browse files
userquindanielroe
userquin
and
danielroe
authored
fix(ui): invalid html button markup (#1274)
Co-authored-by: Daniel Roe <daniel@roe.dev>
1 parent b4f7c2d commit b21b58c

File tree

4 files changed

+35
-33
lines changed

4 files changed

+35
-33
lines changed

‎app/components/Compare/PackageSelector.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -178,13 +178,13 @@ function handleBlur() {
178178
:aria-label="$t('compare.no_dependency.add_column')"
179179
@click="addPackage(NO_DEPENDENCY_ID)"
180180
>
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">
182182
<span class="i-carbon:clean w-4 h-4" aria-hidden="true" />
183183
{{ $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">
186186
{{ $t('compare.no_dependency.typeahead_description') }}
187-
</div>
187+
</span>
188188
</ButtonBase>
189189

190190
<div v-if="isSearching" class="px-4 py-3 text-sm text-fg-muted">
@@ -196,10 +196,10 @@ function handleBlur() {
196196
class="block w-full text-start"
197197
@click="addPackage(result.name)"
198198
>
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">
201201
{{ result.description }}
202-
</div>
202+
</span>
203203
</ButtonBase>
204204
</div>
205205
</Transition>

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

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ function openAuthModal() {
6565
class="border-none"
6666
>
6767
<!-- Stacked avatars when connected -->
68-
<div
68+
<span
6969
v-if="hasAnyConnection"
7070
class="flex items-center"
7171
:class="hasBothConnections ? '-space-x-2' : ''"
@@ -103,7 +103,7 @@ function openAuthModal() {
103103
>
104104
<span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
105105
</span>
106-
</div>
106+
</span>
107107

108108
<!-- "connect" text when not connected -->
109109
<span v-if="!hasAnyConnection" class="font-mono text-sm">
@@ -163,10 +163,10 @@ function openAuthModal() {
163163
>
164164
<span class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
165165
</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>
170170
<span
171171
v-if="operationCount > 0"
172172
class="px-1.5 py-0.5 font-mono text-xs rounded"
@@ -206,10 +206,12 @@ function openAuthModal() {
206206
>
207207
<span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
208208
</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>
213215
</button>
214216
</div>
215217

@@ -236,16 +238,16 @@ function openAuthModal() {
236238
/>
237239
<span v-else class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
238240
</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">
241243
{{
242244
isNpmConnecting
243245
? $t('account_menu.connecting')
244246
: $t('account_menu.connect_npm_cli')
245247
}}
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>
249251
</button>
250252

251253
<button
@@ -258,12 +260,12 @@ function openAuthModal() {
258260
<span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
259261
<span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
260262
</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">
263265
{{ $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>
267269
</button>
268270
</div>
269271
</div>

‎app/components/Package/DeprecatedTree.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,12 @@ function getDepthStyle(depth: DependencyDepth) {
5353
aria-controls="deprecated-tree-details"
5454
@click="isExpanded = !isExpanded"
5555
>
56-
<div class="flex items-center gap-2 min-w-0">
56+
<span class="flex items-center gap-2 min-w-0 block">
5757
<span class="i-carbon-warning-hex w-4 h-4 shrink-0" aria-hidden="true" />
5858
<span class="font-mono text-sm font-medium truncate">
5959
{{ $t('package.deprecated.tree_found', analysisData!.deprecatedPackages.length) }}
6060
</span>
61-
</div>
61+
</span>
6262
<span
6363
class="i-carbon-chevron-down w-4 h-4 transition-transform duration-200 shrink-0"
6464
:class="{ 'rotate-180': isExpanded }"

‎app/components/Package/VulnerabilityTree.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ function getDepthStyle(depth: string | undefined) {
8383
aria-controls="vuln-tree-details"
8484
@click="isExpanded = !isExpanded"
8585
>
86-
<div class="flex items-center gap-2 min-w-0">
86+
<span class="flex items-center gap-2 min-w-0 block">
8787
<span class="i-carbon:warning-alt w-4 h-4 shrink-0" aria-hidden="true" />
8888
<span class="font-mono text-sm font-medium truncate">
8989
{{
@@ -98,15 +98,15 @@ function getDepthStyle(depth: string | undefined) {
9898
)
9999
}}
100100
</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">
103103
<span class="text-xs opacity-80 hidden sm:inline">{{ summaryText }}</span>
104104
<span
105105
class="i-carbon:chevron-down w-4 h-4 transition-transform duration-200"
106106
:class="{ 'rotate-180': isExpanded }"
107107
aria-hidden="true"
108108
/>
109-
</div>
109+
</span>
110110
</button>
111111

112112
<!-- Expandable details -->

0 commit comments

Comments
 (0)