Skip to content

Commit e7abc86

Browse files
committed
fix(ui): invalid html button markup
1 parent 15dffc2 commit e7abc86

File tree

4 files changed

+33
-33
lines changed

4 files changed

+33
-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">
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">{{ 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: 20 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">~{{ 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,10 @@ 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">@{{ atprotoUser.handle }}</span>
211+
<span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere') }}</span>
212+
</span>
213213
</button>
214214
</div>
215215

@@ -236,16 +236,16 @@ function openAuthModal() {
236236
/>
237237
<span v-else class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
238238
</span>
239-
<div class="flex-1 min-w-0">
240-
<div class="font-mono text-sm text-fg">
239+
<span class="flex-1 min-w-0">
240+
<span class="font-mono text-sm text-fg">
241241
{{
242242
isNpmConnecting
243243
? $t('account_menu.connecting')
244244
: $t('account_menu.connect_npm_cli')
245245
}}
246-
</div>
247-
<div class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</div>
248-
</div>
246+
</span>
247+
<span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</span>
248+
</span>
249249
</button>
250250

251251
<button
@@ -258,12 +258,12 @@ function openAuthModal() {
258258
<span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
259259
<span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
260260
</span>
261-
<div class="flex-1 min-w-0">
262-
<div class="font-mono text-sm text-fg">
261+
<span class="flex-1 min-w-0">
262+
<span class="font-mono text-sm text-fg">
263263
{{ $t('account_menu.connect_atmosphere') }}
264-
</div>
265-
<div class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere_desc') }}</div>
266-
</div>
264+
</span>
265+
<span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere_desc') }}</span>
266+
</span>
267267
</button>
268268
</div>
269269
</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">
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">
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)