From 42cb187da33a3767264efaff3365fa26a8784867 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 2 Feb 2026 21:52:51 +0100
Subject: [PATCH 1/5] refactor: extract explicit tag components with enforce
 a11y

---
 app/components/Filter/Panel.vue     | 45 ++++++++---------
 app/components/Package/Card.vue     |  8 ++-
 app/components/Package/Keywords.vue |  6 +--
 app/components/Package/TableRow.vue |  7 ++-
 app/components/Tag/Button.vue       | 31 ++++++++++++
 app/components/Tag/Clickable.vue    | 25 ----------
 app/components/Tag/Link.vue         | 36 ++++++++++++++
 app/components/Tag/RadioButton.vue  | 72 +++++++++++++++++++++++++++
 test/nuxt/a11y.spec.ts              | 76 ++++++++++++++++++++++++++---
 9 files changed, 235 insertions(+), 71 deletions(-)
 create mode 100644 app/components/Tag/Button.vue
 delete mode 100644 app/components/Tag/Clickable.vue
 create mode 100644 app/components/Tag/Link.vue
 create mode 100644 app/components/Tag/RadioButton.vue

diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index 6433b2322..3ad7e07a0 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -243,17 +243,16 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             role="radiogroup"
             :aria-label="$t('filters.weekly_downloads')"
           >
-            <TagClickable
+            <TagRadioButton
               v-for="range in DOWNLOAD_RANGES"
               :key="range.value"
-              type="button"
-              role="radio"
-              :aria-checked="filters.downloadRange === range.value"
-              :status="filters.downloadRange === range.value ? 'active' : 'default'"
-              @click="emit('update:downloadRange', range.value)"
+              :model-value="filters.downloadRange"
+              :value="range.value"
+              @update:modelValue="emit('update:downloadRange', $event as DownloadRange)"
+              name="range"
             >
               {{ $t(getDownloadRangeLabelKey(range.value)) }}
-            </TagClickable>
+            </TagRadioButton>
           </div>
         </fieldset>
 
@@ -267,17 +266,16 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             role="radiogroup"
             :aria-label="$t('filters.updated_within')"
           >
-            <TagClickable
+            <TagRadioButton
               v-for="option in UPDATED_WITHIN_OPTIONS"
               :key="option.value"
-              type="button"
-              role="radio"
-              :aria-checked="filters.updatedWithin === option.value"
-              :status="filters.updatedWithin === option.value ? 'active' : 'default'"
-              @click="emit('update:updatedWithin', option.value)"
+              :model-value="filters.updatedWithin"
+              :value="option.value"
+              name="updatedWithin"
+              @update:modelValue="emit('update:updatedWithin', $event as UpdatedWithin)"
             >
               {{ $t(getUpdatedWithinLabelKey(option.value)) }}
-            </TagClickable>
+            </TagRadioButton>
           </div>
         </fieldset>
 
@@ -290,17 +288,16 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             </span>
           </legend>
           <div class="flex flex-wrap gap-2" role="radiogroup" :aria-label="$t('filters.security')">
-            <TagClickable
+            <TagRadioButton
               v-for="security in SECURITY_FILTER_VALUES"
               :key="security"
-              type="button"
-              role="radio"
               disabled
-              :aria-checked="filters.security === security"
-              :status="filters.security === security ? 'active' : 'default'"
+              :model-value="filters.security"
+              :value="security"
+              name="security"
             >
               {{ $t(getSecurityLabelKey(security)) }}
-            </TagClickable>
+            </TagRadioButton>
           </div>
         </fieldset>
 
@@ -310,16 +307,14 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             {{ $t('filters.keywords') }}
           </legend>
           <div class="flex flex-wrap gap-1.5" role="group" :aria-label="$t('filters.keywords')">
-            <TagClickable
+            <TagButton
               v-for="keyword in displayedKeywords"
               :key="keyword"
-              type="button"
-              :aria-pressed="filters.keywords.includes(keyword)"
-              :status="filters.keywords.includes(keyword) ? 'active' : 'default'"
+              :pressed="filters.keywords.includes(keyword)"
               @click="emit('toggleKeyword', keyword)"
             >
               {{ keyword }}
-            </TagClickable>
+            </TagButton>
             <button
               v-if="hasMoreKeywords"
               type="button"
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 60cebf125..75f97d74d 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -162,17 +162,15 @@ const pkgDescription = useMarkdown(() => ({
       :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"
     >
-      <TagClickable
+      <TagButton
         v-for="keyword in result.package.keywords.slice(0, 5)"
         :key="keyword"
-        type="button"
-        class="pointer-events-auto"
-        :status="props.filters?.keywords.includes(keyword) ? 'active' : 'default'"
+        :pressed="props.filters?.keywords.includes(keyword)"
         :title="`Filter by ${keyword}`"
         @click.stop="emit('clickKeyword', keyword)"
       >
         {{ keyword }}
-      </TagClickable>
+      </TagButton>
       <span
         v-if="result.package.keywords.length > 5"
         class="text-fg-subtle text-xs pointer-events-auto"
diff --git a/app/components/Package/Keywords.vue b/app/components/Package/Keywords.vue
index c63137539..4ce868cb5 100644
--- a/app/components/Package/Keywords.vue
+++ b/app/components/Package/Keywords.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { NuxtLink } from '#components'
-
 defineProps<{
   keywords?: string[]
 }>()
@@ -9,9 +7,9 @@ defineProps<{
   <CollapsibleSection v-if="keywords?.length" :title="$t('package.keywords_title')" id="keywords">
     <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
       <li v-for="keyword in keywords.slice(0, 15)" :key="keyword">
-        <TagClickable :as="NuxtLink" :to="{ name: 'search', query: { q: `keywords:${keyword}` } }">
+        <TagLink :to="{ name: 'search', query: { q: `keywords:${keyword}` } }">
           {{ keyword }}
-        </TagClickable>
+        </TagLink>
       </li>
     </ul>
   </CollapsibleSection>
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index 8c1e421b5..3cd892cbe 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -123,16 +123,15 @@ const allMaintainersText = computed(() => {
         class="flex flex-wrap gap-1"
         :aria-label="$t('package.card.keywords')"
       >
-        <TagClickable
+        <TagButton
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
-          type="button"
-          :status="props.filters?.keywords.includes(keyword) ? 'active' : 'default'"
+          :pressed="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
         >
           {{ keyword }}
-        </TagClickable>
+        </TagButton>
         <span
           v-if="pkg.keywords.length > 3"
           class="text-fg-subtle text-xs"
diff --git a/app/components/Tag/Button.vue b/app/components/Tag/Button.vue
new file mode 100644
index 000000000..855799311
--- /dev/null
+++ b/app/components/Tag/Button.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const props = defineProps<{
+  disabled?: boolean
+  /**
+   * type should never be used, because this will always be a button.
+   *
+   * If you want a link use `TagLink` instead.
+   *  */
+  type?: never
+  pressed?: boolean
+}>()
+</script>
+
+<template>
+  <button
+    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+    :class="[
+      pressed
+        ? 'bg-fg text-bg border-fg hover:(text-text-bg/50)'
+        : 'bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover)',
+      {
+        'opacity-50 cursor-not-allowed': disabled,
+      },
+    ]"
+    type="button"
+    :disabled="disabled ? true : undefined"
+    :aria-pressed="pressed"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/app/components/Tag/Clickable.vue b/app/components/Tag/Clickable.vue
deleted file mode 100644
index 0ae6fdd5d..000000000
--- a/app/components/Tag/Clickable.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{ as?: string | Component; status?: 'default' | 'active'; disabled?: boolean }>(),
-  {
-    status: 'default',
-    as: 'button',
-  },
-)
-</script>
-
-<template>
-  <component
-    :is="props.as"
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-    :class="{
-      'bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover)':
-        status === 'default',
-      'bg-fg text-bg border-fg hover:(text-text-bg/50)': status === 'active',
-      'opacity-50 cursor-not-allowed': disabled,
-    }"
-    :disabled="disabled"
-  >
-    <slot />
-  </component>
-</template>
diff --git a/app/components/Tag/Link.vue b/app/components/Tag/Link.vue
new file mode 100644
index 000000000..e729b4c8d
--- /dev/null
+++ b/app/components/Tag/Link.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { NuxtLinkProps } from '#app'
+
+const { current, ...props } = defineProps<
+  {
+    /** Disabled links will be displayed as plain text */
+    disabled?: boolean
+    /**
+     * `type` should never be used, because this will always be a link.
+     *
+     * If you want a button use `TagButton` instead.
+     * */
+    type?: never
+    current?: boolean
+  } &
+    /** This makes sure the link always has either `to` or `href` */
+    (Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
+    NuxtLinkProps
+>()
+</script>
+
+<template>
+  <span v-if="disabled" class="opacity-50"><slot /></span>
+  <NuxtLink
+    v-else
+    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+    :class="{
+      'bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover)': !current,
+      'bg-fg text-bg border-fg hover:(text-text-bg/50)': current,
+      'opacity-50 cursor-not-allowed': disabled,
+    }"
+    v-bind="props"
+  >
+    <slot />
+  </NuxtLink>
+</template>
diff --git a/app/components/Tag/RadioButton.vue b/app/components/Tag/RadioButton.vue
new file mode 100644
index 000000000..db833e2d5
--- /dev/null
+++ b/app/components/Tag/RadioButton.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+const model = defineModel()
+
+const props = defineProps<{
+  disabled?: boolean
+  /**
+   * type should never be used, because this will always be a button.
+   *
+   * If you want a link use `TagLink` instead.
+   *  */
+  type?: never
+
+  /** Shouldn't try to set `checked` explicitly, is handled internally */
+  checked?: never
+  value: string
+}>()
+
+const uid = useId()
+const internalId = `${model.value}-${uid}`
+
+const checked = computed(() => model.value === props.value)
+
+const onChange = () => {
+  model.value = props.value
+}
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+</script>
+
+<template>
+  <label
+    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-within:ring-2 focus-within:ring-fg"
+    :class="[
+      /** TODO: This should ideally be done in CSS only, but right now I can't get it working with UnoCSS */
+      checked
+        ? 'peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50))'
+        : 'bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover)',
+      {
+        'opacity-50 cursor-not-allowed': props.disabled,
+      },
+    ]"
+    :htmlFor="internalId"
+  >
+    <input
+      type="radio"
+      :name="props.value"
+      :id="internalId"
+      :value="props.value"
+      :checked="checked"
+      :disabled="props.disabled ? true : undefined"
+      @change="onChange"
+    />
+    <slot />
+  </label>
+</template>
+
+<style scoped>
+input[type='radio'] {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+</style>
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index d3dd092fd..558aa1670 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -115,7 +115,9 @@ import {
   SettingsBgThemePicker,
   SettingsToggle,
   TagStatic,
-  TagClickable,
+  TagButton,
+  TagLink,
+  TagRadioButton,
   TerminalExecute,
   TerminalInstall,
   TooltipAnnounce,
@@ -246,26 +248,26 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('TagClickable', () => {
+  describe('TagButton', () => {
     it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(TagClickable, {
+      const component = await mountSuspended(TagButton, {
         slots: { default: 'Tag content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
 
-    it('should have no accessibility violationst for active state', async () => {
-      const component = await mountSuspended(TagClickable, {
-        props: { status: 'active' },
+    it('should have no accessibility violations when pressed', async () => {
+      const component = await mountSuspended(TagButton, {
+        props: { pressed: true },
         slots: { default: 'Tag content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
 
-    it('should have no accessibility violationst for disabled state', async () => {
-      const component = await mountSuspended(TagClickable, {
+    it('should have no accessibility violations for disabled state', async () => {
+      const component = await mountSuspended(TagButton, {
         props: { disabled: true },
         slots: { default: 'Tag content' },
       })
@@ -274,6 +276,64 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('TagLink', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(TagLink, {
+        props: { href: 'http://example.com' },
+        slots: { default: 'Tag content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when its the current link', async () => {
+      const component = await mountSuspended(TagLink, {
+        props: { href: 'http://example.com', current: true },
+        slots: { default: 'Tag content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when disabled (plain text)', async () => {
+      const component = await mountSuspended(TagLink, {
+        props: { href: 'http://example.com', disabled: true },
+        slots: { default: 'Tag content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('TagRadioButton', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(TagRadioButton, {
+        props: { value: 'option1', modelValue: 'option2' },
+        slots: { default: 'Tag content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when checked', async () => {
+      const component = await mountSuspended(TagRadioButton, {
+        props: { value: 'option1', modelValue: 'option1' },
+        slots: { default: 'Tag content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when disabled', async () => {
+      const component = await mountSuspended(TagRadioButton, {
+        props: { value: 'option1', modelValue: 'option2', disabled: true },
+        slots: { default: 'Tag content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('TooltipApp', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(TooltipApp, {

From f0876f4bc3115cfecd5cd8265427f1ceba897c82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 2 Feb 2026 22:12:29 +0100
Subject: [PATCH 2/5] refacor: cleanup

---
 app/components/Tag/RadioButton.vue | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/app/components/Tag/RadioButton.vue b/app/components/Tag/RadioButton.vue
index db833e2d5..c85b45776 100644
--- a/app/components/Tag/RadioButton.vue
+++ b/app/components/Tag/RadioButton.vue
@@ -19,14 +19,6 @@ const uid = useId()
 const internalId = `${model.value}-${uid}`
 
 const checked = computed(() => model.value === props.value)
-
-const onChange = () => {
-  model.value = props.value
-}
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-}>()
 </script>
 
 <template>
@@ -48,9 +40,8 @@ const emit = defineEmits<{
       :name="props.value"
       :id="internalId"
       :value="props.value"
-      :checked="checked"
+      v-model="model"
       :disabled="props.disabled ? true : undefined"
-      @change="onChange"
     />
     <slot />
   </label>

From 6d88d796bab25576162b8589d451dcb457b973cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 2 Feb 2026 22:30:23 +0100
Subject: [PATCH 3/5] Revert "refacor: cleanup"

This reverts commit f0876f4bc3115cfecd5cd8265427f1ceba897c82.
---
 app/components/Tag/RadioButton.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/components/Tag/RadioButton.vue b/app/components/Tag/RadioButton.vue
index c85b45776..c2130c89e 100644
--- a/app/components/Tag/RadioButton.vue
+++ b/app/components/Tag/RadioButton.vue
@@ -19,6 +19,11 @@ const uid = useId()
 const internalId = `${model.value}-${uid}`
 
 const checked = computed(() => model.value === props.value)
+
+/** Todo: This shouldn't be necessary, but using v-model on `input type=radio` doesn't work as expected in Vue */
+const onChange = () => {
+  model.value = props.value
+}
 </script>
 
 <template>
@@ -40,8 +45,9 @@ const checked = computed(() => model.value === props.value)
       :name="props.value"
       :id="internalId"
       :value="props.value"
-      v-model="model"
+      :checked="checked"
       :disabled="props.disabled ? true : undefined"
+      @change="onChange"
     />
     <slot />
   </label>

From 314c792bffb647363829bb68c961ffbada47ed82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 2 Feb 2026 22:33:55 +0100
Subject: [PATCH 4/5] refactor: use pure css for radio button styling

---
 app/components/Tag/RadioButton.vue | 27 +++++++++------------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/app/components/Tag/RadioButton.vue b/app/components/Tag/RadioButton.vue
index c2130c89e..a755d33dc 100644
--- a/app/components/Tag/RadioButton.vue
+++ b/app/components/Tag/RadioButton.vue
@@ -17,9 +17,7 @@ const props = defineProps<{
 
 const uid = useId()
 const internalId = `${model.value}-${uid}`
-
 const checked = computed(() => model.value === props.value)
-
 /** Todo: This shouldn't be necessary, but using v-model on `input type=radio` doesn't work as expected in Vue */
 const onChange = () => {
   model.value = props.value
@@ -27,30 +25,23 @@ const onChange = () => {
 </script>
 
 <template>
-  <label
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-within:ring-2 focus-within:ring-fg"
-    :class="[
-      /** TODO: This should ideally be done in CSS only, but right now I can't get it working with UnoCSS */
-      checked
-        ? 'peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50))'
-        : 'bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover)',
-      {
-        'opacity-50 cursor-not-allowed': props.disabled,
-      },
-    ]"
-    :htmlFor="internalId"
-  >
+  <div>
     <input
       type="radio"
-      :name="props.value"
       :id="internalId"
       :value="props.value"
       :checked="checked"
       :disabled="props.disabled ? true : undefined"
       @change="onChange"
+      class="peer"
     />
-    <slot />
-  </label>
+    <label
+      class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 peer-focus:ring-2 peer-focus:ring-fg border-none peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none)"
+      :htmlFor="internalId"
+    >
+      <slot />
+    </label>
+  </div>
 </template>
 
 <style scoped>

From 23cb4814549542c55029ae1a71a4a52e36b35084 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 2 Feb 2026 23:12:05 +0100
Subject: [PATCH 5/5] fix regression

---
 app/components/Package/Card.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 75f97d74d..e73ca7a75 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -164,6 +164,7 @@ const pkgDescription = useMarkdown(() => ({
     >
       <TagButton
         v-for="keyword in result.package.keywords.slice(0, 5)"
+        class="pointer-events-auto"
         :key="keyword"
         :pressed="props.filters?.keywords.includes(keyword)"
         :title="`Filter by ${keyword}`"