fix(a11y): use semantic html for keyword list

Author: TheAlexLichter

app/components/Package/Card.vue

@@ -160,30 +160,32 @@ const numberFormatter = useNumberFormatter()
       </div>
     </div>
 
-    <div
+    <ul
       v-if="result.package.keywords?.length"
       :aria-label="$t('package.card.keywords')"
       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"
     >
-      <ButtonBase
-        v-for="keyword in result.package.keywords.slice(0, 5)"
-        class="pointer-events-auto"
-        size="small"
-        :key="keyword"
-        :aria-pressed="props.filters?.keywords.includes(keyword)"
-        :title="`Filter by ${keyword}`"
-        :data-result-index="index"
-        @click.stop="emit('clickKeyword', keyword)"
-      >
-        {{ keyword }}
-      </ButtonBase>
-      <span
-        v-if="result.package.keywords.length > 5"
-        class="text-fg-subtle text-xs pointer-events-auto"
-        :title="result.package.keywords.slice(5).join(', ')"
-      >
-        +{{ numberFormatter.format(result.package.keywords.length - 5) }}
-      </span>
-    </div>
+      <li v-for="keyword in result.package.keywords.slice(0, 5)" :key="keyword">
+        <ButtonBase
+          class="pointer-events-auto"
+          size="small"
+          :aria-pressed="props.filters?.keywords.includes(keyword)"
+          :title="`Filter by ${keyword}`"
+          :data-result-index="index"
+          @click.stop="emit('clickKeyword', keyword)"
+        >
+          {{ keyword }}
+        </ButtonBase>
+      </li>
+      <li>
+        <span
+          v-if="result.package.keywords.length > 5"
+          class="text-fg-subtle text-xs pointer-events-auto"
+          :title="result.package.keywords.slice(5).join(', ')"
+        >
+          +{{ numberFormatter.format(result.package.keywords.length - 5) }}
+        </span>
+      </li>
+    </ul>
   </BaseCard>
 </template>