[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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>