From 2fb44eb53cb6e797249ded64a1d5e5aed05eee4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 2 Feb 2026 14:06:04 +0100
Subject: [PATCH 1/7] refactor: extract tags components

---
 app/components/Filter/Chips.vue     |  4 ++--
 app/components/Filter/Panel.vue     | 24 ++++++++++++------------
 app/components/Package/Card.vue     |  4 ++--
 app/components/Package/TableRow.vue |  6 +++---
 app/components/Tag/Clickable.vue    |  9 +++++++++
 app/components/Tag/Static.vue       |  9 +++++++++
 app/pages/package/[...package].vue  |  8 ++++++--
 7 files changed, 43 insertions(+), 21 deletions(-)
 create mode 100644 app/components/Tag/Clickable.vue
 create mode 100644 app/components/Tag/Static.vue

diff --git a/app/components/Filter/Chips.vue b/app/components/Filter/Chips.vue
index 6136387552..90dc9a0d35 100644
--- a/app/components/Filter/Chips.vue
+++ b/app/components/Filter/Chips.vue
@@ -14,7 +14,7 @@ const emit = defineEmits<{
 <template>
   <div v-if="chips.length > 0" class="flex flex-wrap items-center gap-2">
     <TransitionGroup name="chip">
-      <span v-for="chip in chips" :key="chip.id" class="tag gap-1">
+      <TagStatic v-for="chip in chips" :key="chip.id" class="gap-1">
         <span class="text-fg-subtle text-xs">{{ chip.label }}:</span>
         <span class="max-w-32 truncate">{{
           Array.isArray(chip.value) ? chip.value.join(', ') : chip.value
@@ -27,7 +27,7 @@ const emit = defineEmits<{
         >
           <span class="i-carbon-close w-3 h-3" aria-hidden="true" />
         </button>
-      </span>
+      </TagStatic>
     </TransitionGroup>
 
     <button
diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index 349b174da0..db3be631fa 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -243,13 +243,13 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             role="radiogroup"
             :aria-label="$t('filters.weekly_downloads')"
           >
-            <button
+            <TagClickable
               v-for="range in DOWNLOAD_RANGES"
               :key="range.value"
               type="button"
               role="radio"
               :aria-checked="filters.downloadRange === range.value"
-              class="tag transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+              class="transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
               :class="
                 filters.downloadRange === range.value
                   ? 'bg-fg text-bg border-fg hover:text-bg/50'
@@ -258,7 +258,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               @click="emit('update:downloadRange', range.value)"
             >
               {{ $t(getDownloadRangeLabelKey(range.value)) }}
-            </button>
+            </TagClickable>
           </div>
         </fieldset>
 
@@ -272,13 +272,13 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             role="radiogroup"
             :aria-label="$t('filters.updated_within')"
           >
-            <button
+            <TagClickable
               v-for="option in UPDATED_WITHIN_OPTIONS"
               :key="option.value"
               type="button"
               role="radio"
               :aria-checked="filters.updatedWithin === option.value"
-              class="tag transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+              class="transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
               :class="
                 filters.updatedWithin === option.value
                   ? 'bg-fg text-bg border-fg hover:text-bg/70'
@@ -287,7 +287,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               @click="emit('update:updatedWithin', option.value)"
             >
               {{ $t(getUpdatedWithinLabelKey(option.value)) }}
-            </button>
+            </TagClickable>
           </div>
         </fieldset>
 
@@ -300,20 +300,20 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             </span>
           </legend>
           <div class="flex flex-wrap gap-2" role="radiogroup" :aria-label="$t('filters.security')">
-            <button
+            <TagClickable
               v-for="option in SECURITY_FILTER_OPTIONS"
               :key="option.value"
               type="button"
               role="radio"
               disabled
               :aria-checked="filters.security === option.value"
-              class="tag transition-colors duration-200 opacity-50 cursor-not-allowed focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+              class="transition-colors duration-200 opacity-50 cursor-not-allowed focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
               :class="
                 filters.security === option.value ? 'bg-fg text-bg border-fg hover:text-bg/70' : ''
               "
             >
               {{ $t(getSecurityLabelKey(option.value)) }}
-            </button>
+            </TagClickable>
           </div>
         </fieldset>
 
@@ -323,19 +323,19 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             {{ $t('filters.keywords') }}
           </legend>
           <div class="flex flex-wrap gap-1.5" role="group" :aria-label="$t('filters.keywords')">
-            <button
+            <TagClickable
               v-for="keyword in displayedKeywords"
               :key="keyword"
               type="button"
               :aria-pressed="filters.keywords.includes(keyword)"
-              class="tag text-xs transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+              class="text-xs transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
               :class="
                 filters.keywords.includes(keyword) ? 'bg-fg text-bg border-fg hover:text-bg/70' : ''
               "
               @click="emit('toggleKeyword', keyword)"
             >
               {{ keyword }}
-            </button>
+            </TagClickable>
             <button
               v-if="hasMoreKeywords"
               type="button"
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 44259da478..727fd77cba 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -154,9 +154,9 @@ 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"
     >
-      <li v-for="keyword in result.package.keywords.slice(0, 5)" :key="keyword" class="tag">
+      <TagStatic as="li" v-for="keyword in result.package.keywords.slice(0, 5)" :key="keyword">
         {{ keyword }}
-      </li>
+      </TagStatic>
     </ul>
   </BaseCard>
 </template>
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index 2311a402d5..75d4501ea1 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -118,16 +118,16 @@ const allMaintainersText = computed(() => {
     <!-- Keywords -->
     <td v-if="isColumnVisible('keywords')" class="py-2 px-3">
       <div v-if="pkg.keywords?.length" class="flex flex-wrap gap-1">
-        <button
+        <TagClickable
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
           type="button"
-          class="tag text-xs hover:bg-fg hover:text-bg hover:border-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+          class="text-xs hover:bg-fg hover:text-bg hover:border-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
         >
           {{ keyword }}
-        </button>
+        </TagClickable>
         <span v-if="pkg.keywords.length > 3" class="text-fg-subtle text-xs">
           +{{ pkg.keywords.length - 3 }}
         </span>
diff --git a/app/components/Tag/Clickable.vue b/app/components/Tag/Clickable.vue
new file mode 100644
index 0000000000..e775a491c8
--- /dev/null
+++ b/app/components/Tag/Clickable.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ as?: string | Component }>(),{ as: 'button' })
+</script>
+
+<template>
+  <component :is="props.as" class="tag">
+    <slot />
+  </component>
+</template>
diff --git a/app/components/Tag/Static.vue b/app/components/Tag/Static.vue
new file mode 100644
index 0000000000..b850980cc7
--- /dev/null
+++ b/app/components/Tag/Static.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ as?: string | Component }>(),{ as: 'span' })
+</script>
+
+<template>
+  <component :is="props.as" class="tag">
+    <slot />
+  </component>
+</template>
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 7b0c1c8384..9296814a77 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -11,6 +11,7 @@ import { joinURL } from 'ufo'
 import { areUrlsEquivalent } from '#shared/utils/url'
 import { isEditableElement } from '~/utils/input'
 import { formatBytes } from '~/utils/formatters'
+import { NuxtLink } from '#components'
 
 definePageMeta({
   name: 'package',
@@ -1005,9 +1006,12 @@ defineOgImageComponent('Package', {
             </h2>
             <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
               <li v-for="keyword in displayVersion.keywords.slice(0, 15)" :key="keyword">
-                <NuxtLink :to="{ name: 'search', query: { q: `keywords:${keyword}` } }" class="tag">
+                <TagClickable
+                  :as="NuxtLink"
+                  :to="{ name: 'search', query: { q: `keywords:${keyword}` } }"
+                >
                   {{ keyword }}
-                </NuxtLink>
+                </TagClickable>
               </li>
             </ul>
           </section>

From 2a9978316140e3550fd81560c1ecfed6dfeaa948 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 2 Feb 2026 14:11:19 +0100
Subject: [PATCH 2/7] refactor: move shortcut directly onto component

---
 app/components/Tag/Clickable.vue | 5 ++++-
 app/components/Tag/Static.vue    | 5 ++++-
 uno.config.ts                    | 6 +-----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/components/Tag/Clickable.vue b/app/components/Tag/Clickable.vue
index e775a491c8..8282b079e3 100644
--- a/app/components/Tag/Clickable.vue
+++ b/app/components/Tag/Clickable.vue
@@ -3,7 +3,10 @@ const props = withDefaults(defineProps<{ as?: string | Component }>(),{ as: 'but
 </script>
 
 <template>
-  <component :is="props.as" class="tag">
+  <component
+    :is="props.as"
+    class="inline-flex items-center px-2 py-0.5 text-xs font-mono text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover)"
+  >
     <slot />
   </component>
 </template>
diff --git a/app/components/Tag/Static.vue b/app/components/Tag/Static.vue
index b850980cc7..60cd8b7bc2 100644
--- a/app/components/Tag/Static.vue
+++ b/app/components/Tag/Static.vue
@@ -3,7 +3,10 @@ const props = withDefaults(defineProps<{ as?: string | Component }>(),{ as: 'spa
 </script>
 
 <template>
-  <component :is="props.as" class="tag">
+  <component
+    :is="props.as"
+    class="inline-flex items-center px-2 py-0.5 text-xs font-mono text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover)"
+  >
     <slot />
   </component>
 </template>
diff --git a/uno.config.ts b/uno.config.ts
index 3e3c38e925..d4aed7116b 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -142,11 +142,7 @@ export default defineConfig({
     ],
     ['link-subtle', 'text-fg-muted hover:text-fg transition-colors duration-200 focus-ring'],
 
-    // Tags/badges
-    [
-      'tag',
-      'inline-flex items-center px-2 py-0.5 text-xs font-mono text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover)',
-    ],
+    // badges
     ['badge-orange', 'bg-badge-orange/10 text-badge-orange'],
     ['badge-yellow', 'bg-badge-yellow/10 text-badge-yellow'],
     ['badge-green', 'bg-badge-green/10 text-badge-green'],

From 94240a9d5c1f616d62ade1936d7e462f9e3c75ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 2 Feb 2026 14:24:00 +0100
Subject: [PATCH 3/7] style: remove hover from unclickable tags

---
 app/components/Tag/Static.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Tag/Static.vue b/app/components/Tag/Static.vue
index 60cd8b7bc2..5053414896 100644
--- a/app/components/Tag/Static.vue
+++ b/app/components/Tag/Static.vue
@@ -5,7 +5,7 @@ const props = withDefaults(defineProps<{ as?: string | Component }>(),{ as: 'spa
 <template>
   <component
     :is="props.as"
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover)"
+    class="inline-flex items-center px-2 py-0.5 text-xs font-mono text-fg-muted bg-bg-muted border border-border rounded"
   >
     <slot />
   </component>

From bacb5dc68f57a0ab8a93f1c23c46a78fe305db35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 2 Feb 2026 14:30:31 +0100
Subject: [PATCH 4/7] style: unify tag styles

---
 app/components/Filter/Panel.vue     | 5 +----
 app/components/Package/TableRow.vue | 1 -
 app/components/Tag/Clickable.vue    | 2 +-
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index db3be631fa..9cec868db6 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -249,7 +249,6 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               type="button"
               role="radio"
               :aria-checked="filters.downloadRange === range.value"
-              class="transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
               :class="
                 filters.downloadRange === range.value
                   ? 'bg-fg text-bg border-fg hover:text-bg/50'
@@ -278,7 +277,6 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               type="button"
               role="radio"
               :aria-checked="filters.updatedWithin === option.value"
-              class="transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
               :class="
                 filters.updatedWithin === option.value
                   ? 'bg-fg text-bg border-fg hover:text-bg/70'
@@ -307,7 +305,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               role="radio"
               disabled
               :aria-checked="filters.security === option.value"
-              class="transition-colors duration-200 opacity-50 cursor-not-allowed focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+              class="opacity-50 cursor-not-allowed"
               :class="
                 filters.security === option.value ? 'bg-fg text-bg border-fg hover:text-bg/70' : ''
               "
@@ -328,7 +326,6 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               :key="keyword"
               type="button"
               :aria-pressed="filters.keywords.includes(keyword)"
-              class="text-xs transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
               :class="
                 filters.keywords.includes(keyword) ? 'bg-fg text-bg border-fg hover:text-bg/70' : ''
               "
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index 75d4501ea1..404b6c10a8 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -122,7 +122,6 @@ const allMaintainersText = computed(() => {
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
           type="button"
-          class="text-xs hover:bg-fg hover:text-bg hover:border-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
         >
diff --git a/app/components/Tag/Clickable.vue b/app/components/Tag/Clickable.vue
index 8282b079e3..99a5e2a553 100644
--- a/app/components/Tag/Clickable.vue
+++ b/app/components/Tag/Clickable.vue
@@ -5,7 +5,7 @@ const props = withDefaults(defineProps<{ as?: string | Component }>(),{ as: 'but
 <template>
   <component
     :is="props.as"
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover)"
+    class="inline-flex items-center px-2 py-0.5 text-xs font-mono text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
   >
     <slot />
   </component>

From c51fb343f90eb1802ff561e1255e16d26be100f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 2 Feb 2026 14:42:11 +0100
Subject: [PATCH 5/7] refactor: move basic styles into reusable tag component

---
 app/components/Filter/Panel.vue  | 21 ++++-----------------
 app/components/Tag/Clickable.vue | 17 +++++++++++++++--
 app/components/Tag/Static.vue    |  2 +-
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index 9cec868db6..c7b6b2ec46 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -249,11 +249,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               type="button"
               role="radio"
               :aria-checked="filters.downloadRange === range.value"
-              :class="
-                filters.downloadRange === range.value
-                  ? 'bg-fg text-bg border-fg hover:text-bg/50'
-                  : ''
-              "
+              :status="filters.downloadRange === range.value ? 'active' : 'default'"
               @click="emit('update:downloadRange', range.value)"
             >
               {{ $t(getDownloadRangeLabelKey(range.value)) }}
@@ -277,11 +273,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               type="button"
               role="radio"
               :aria-checked="filters.updatedWithin === option.value"
-              :class="
-                filters.updatedWithin === option.value
-                  ? 'bg-fg text-bg border-fg hover:text-bg/70'
-                  : ''
-              "
+              :status="filters.updatedWithin === option.value ? 'active' : 'default'"
               @click="emit('update:updatedWithin', option.value)"
             >
               {{ $t(getUpdatedWithinLabelKey(option.value)) }}
@@ -305,10 +297,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               role="radio"
               disabled
               :aria-checked="filters.security === option.value"
-              class="opacity-50 cursor-not-allowed"
-              :class="
-                filters.security === option.value ? 'bg-fg text-bg border-fg hover:text-bg/70' : ''
-              "
+              :status="filters.security === option.value ? 'active' : 'default'"
             >
               {{ $t(getSecurityLabelKey(option.value)) }}
             </TagClickable>
@@ -326,9 +315,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               :key="keyword"
               type="button"
               :aria-pressed="filters.keywords.includes(keyword)"
-              :class="
-                filters.keywords.includes(keyword) ? 'bg-fg text-bg border-fg hover:text-bg/70' : ''
-              "
+              :status="filters.keywords.includes(keyword) ? 'active' : 'default'"
               @click="emit('toggleKeyword', keyword)"
             >
               {{ keyword }}
diff --git a/app/components/Tag/Clickable.vue b/app/components/Tag/Clickable.vue
index 99a5e2a553..a3d36e87a9 100644
--- a/app/components/Tag/Clickable.vue
+++ b/app/components/Tag/Clickable.vue
@@ -1,11 +1,24 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{ as?: string | Component }>(),{ as: 'button' })
+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 text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+    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)':
+        props.status === 'default',
+      'bg-fg text-bg border-fg hover:(text-text-bg/50)': props.status === 'active',
+      'opacity-50 cursor-not-allowed': props.disabled,
+    }"
+    :disabled="props.disabled"
   >
     <slot />
   </component>
diff --git a/app/components/Tag/Static.vue b/app/components/Tag/Static.vue
index 5053414896..28386289f9 100644
--- a/app/components/Tag/Static.vue
+++ b/app/components/Tag/Static.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{ as?: string | Component }>(),{ as: 'span' })
+const props = withDefaults(defineProps<{ as?: string | Component }>(), { as: 'span' })
 </script>
 
 <template>

From 0826806b282f7ddbd4330cb56e4f96e0ff25a549 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 2 Feb 2026 14:47:12 +0100
Subject: [PATCH 6/7] test: add a11y tests for tags

---
 test/nuxt/a11y.spec.ts | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 9bce901429..5e79bbbcf4 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -111,6 +111,8 @@ import {
   SettingsAccentColorPicker,
   SettingsBgThemePicker,
   SettingsToggle,
+  TagStatic,
+  TagClickable,
   TerminalExecute,
   TerminalInstall,
   TooltipAnnounce,
@@ -232,6 +234,44 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('TagStatic', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(TagStatic, {
+        slots: { default: 'Tag content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('TagClickable', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(TagClickable, {
+        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' },
+        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, {
+        props: { 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 70472e01d39b5f9a0f2ba5dad0a652ffb2373d72 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 2 Feb 2026 16:28:10 +0000
Subject: [PATCH 7/7] chore: drop `props.`

---
 app/components/Tag/Clickable.vue | 8 ++++----
 app/components/Tag/Static.vue    | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/Tag/Clickable.vue b/app/components/Tag/Clickable.vue
index a3d36e87a9..0ae6fdd5d0 100644
--- a/app/components/Tag/Clickable.vue
+++ b/app/components/Tag/Clickable.vue
@@ -14,11 +14,11 @@ const props = withDefaults(
     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)':
-        props.status === 'default',
-      'bg-fg text-bg border-fg hover:(text-text-bg/50)': props.status === 'active',
-      'opacity-50 cursor-not-allowed': props.disabled,
+        status === 'default',
+      'bg-fg text-bg border-fg hover:(text-text-bg/50)': status === 'active',
+      'opacity-50 cursor-not-allowed': disabled,
     }"
-    :disabled="props.disabled"
+    :disabled="disabled"
   >
     <slot />
   </component>
diff --git a/app/components/Tag/Static.vue b/app/components/Tag/Static.vue
index 28386289f9..352e9d8bc2 100644
--- a/app/components/Tag/Static.vue
+++ b/app/components/Tag/Static.vue
@@ -4,7 +4,7 @@ const props = withDefaults(defineProps<{ as?: string | Component }>(), { as: 'sp
 
 <template>
   <component
-    :is="props.as"
+    :is="as"
     class="inline-flex items-center px-2 py-0.5 text-xs font-mono text-fg-muted bg-bg-muted border border-border rounded"
   >
     <slot />