forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix(a11y): use semantic html for keyword list (#1401)
Co-authored-by: Nathan Knowler <nathan@knowler.dev>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
authored by
Alexander Lichter
Nathan Knowler
autofix-ci[bot]
and committed by
GitHub
7125e507
4db33e93
+24
-21
+24
-21
app/components/Package/Card.vue
+24
-21
app/components/Package/Card.vue
···
160
160
</div>
161
161
</div>
162
162
163
-
<div
163
+
<ul
164
+
role="list"
164
165
v-if="result.package.keywords?.length"
165
166
:aria-label="$t('package.card.keywords')"
166
167
class="relative z-10 flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-border list-none m-0 p-0 pointer-events-none items-center"
167
168
>
168
-
<ButtonBase
169
-
v-for="keyword in result.package.keywords.slice(0, 5)"
170
-
class="pointer-events-auto"
171
-
size="small"
172
-
:key="keyword"
173
-
:aria-pressed="props.filters?.keywords.includes(keyword)"
174
-
:title="`Filter by ${keyword}`"
175
-
:data-result-index="index"
176
-
@click.stop="emit('clickKeyword', keyword)"
177
-
>
178
-
{{ keyword }}
179
-
</ButtonBase>
180
-
<span
181
-
v-if="result.package.keywords.length > 5"
182
-
class="text-fg-subtle text-xs pointer-events-auto"
183
-
:title="result.package.keywords.slice(5).join(', ')"
184
-
>
185
-
+{{ numberFormatter.format(result.package.keywords.length - 5) }}
186
-
</span>
187
-
</div>
169
+
<li v-for="keyword in result.package.keywords.slice(0, 5)" :key="keyword">
170
+
<ButtonBase
171
+
class="pointer-events-auto"
172
+
size="small"
173
+
:aria-pressed="props.filters?.keywords.includes(keyword)"
174
+
:title="`Filter by ${keyword}`"
175
+
:data-result-index="index"
176
+
@click.stop="emit('clickKeyword', keyword)"
177
+
>
178
+
{{ keyword }}
179
+
</ButtonBase>
180
+
</li>
181
+
<li>
182
+
<span
183
+
v-if="result.package.keywords.length > 5"
184
+
class="text-fg-subtle text-xs pointer-events-auto"
185
+
:title="result.package.keywords.slice(5).join(', ')"
186
+
>
187
+
+{{ numberFormatter.format(result.package.keywords.length - 5) }}
188
+
</span>
189
+
</li>
190
+
</ul>
188
191
</BaseCard>
189
192
</template>