feat(a11y): add reusable Alert component (#1955)

Co-authored-by: Willow (GHOST) <git@willow.sh>

Author: ShroXd

app/components/Alert.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+interface Props {
+  variant: 'warning' | 'error'
+  title?: string
+}
+
+defineProps<Props>()
+
+const WRAPPER_CLASSES: Record<Props['variant'], string> = {
+  warning: 'border-amber-400/20 bg-amber-500/8',
+  error: 'border-red-400/20 bg-red-500/8',
+}
+
+const TITLE_CLASSES: Record<Props['variant'], string> = {
+  warning: 'text-amber-800 dark:text-amber-300',
+  error: 'text-red-800 dark:text-red-300',
+}
+
+const BODY_CLASSES: Record<Props['variant'], string> = {
+  warning: 'text-amber-700 dark:text-amber-400',
+  error: 'text-red-700 dark:text-red-400',
+}
+
+const ROLES: Record<Props['variant'], 'status' | 'alert'> = {
+  warning: 'status',
+  error: 'alert',
+}
+</script>
+
+<template>
+  <div
+    :role="ROLES[variant]"
+    class="border rounded-md px-3 py-2.5"
+    :class="WRAPPER_CLASSES[variant]"
+  >
+    <p v-if="title" class="font-semibold mb-1" :class="TITLE_CLASSES[variant]">{{ title }}</p>
+    <div class="text-xs" :class="BODY_CLASSES[variant]">
+      <slot />
+    </div>
+  </div>
+</template>

app/components/Package/ClaimPackageModal.vue

@@ -199,28 +199,26 @@ const previewPackageJson = computed(() => {
       </div>
 
       <!-- Validation errors -->
-      <div
+      <Alert
         v-if="checkResult.validationErrors?.length"
-        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-        role="alert"
+        variant="error"
+        :title="$t('claim.modal.invalid_name')"
       >
-        <p class="font-medium mb-1">{{ $t('claim.modal.invalid_name') }}</p>
         <ul class="list-disc list-inside space-y-1">
           <li v-for="err in checkResult.validationErrors" :key="err">{{ err }}</li>
         </ul>
-      </div>
+      </Alert>
 
       <!-- Validation warnings -->
-      <div
+      <Alert
         v-if="checkResult.validationWarnings?.length"
-        class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
-        role="alert"
+        variant="warning"
+        :title="$t('common.warnings')"
       >
-        <p class="font-medium mb-1">{{ $t('common.warnings') }}</p>
         <ul class="list-disc list-inside space-y-1">
           <li v-for="warn in checkResult.validationWarnings" :key="warn">{{ warn }}</li>
         </ul>
-      </div>
+      </Alert>
 
       <!-- Availability status -->
       <template v-if="checkResult.valid">
@@ -305,39 +303,23 @@ const previewPackageJson = computed(() => {
       </template>
 
       <!-- Error message -->
-      <div
-        v-if="mergedError"
-        role="alert"
-        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-      >
-        {{ mergedError }}
-      </div>
+      <Alert v-if="mergedError" variant="error">{{ mergedError }}</Alert>
 
       <!-- Actions -->
       <div v-if="checkResult.available && checkResult.valid" class="space-y-3">
         <!-- Warning for unscoped packages -->
-        <div
-          v-if="!isScoped"
-          class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
-        >
-          <p class="font-medium mb-1">{{ $t('claim.modal.scope_warning_title') }}</p>
-          <p class="text-xs text-yellow-400/80">
-            {{
-              $t('claim.modal.scope_warning_text', {
-                username: npmUser || 'username',
-                name: packageName,
-              })
-            }}
-          </p>
-        </div>
+        <Alert v-if="!isScoped" variant="warning" :title="$t('claim.modal.scope_warning_title')">
+          {{
+            $t('claim.modal.scope_warning_text', {
+              username: npmUser || 'username',
+              name: packageName,
+            })
+          }}
+        </Alert>
 
         <!-- Not connected warning -->
         <div v-if="!isConnected" class="space-y-3">
-          <div
-            class="p-3 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-md"
-          >
-            <p>{{ $t('claim.modal.connect_required') }}</p>
-          </div>
+          <Alert variant="warning">{{ $t('claim.modal.connect_required') }}</Alert>
           <button
             type="button"
             class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-accent/70"
@@ -389,12 +371,7 @@ const previewPackageJson = computed(() => {
 
     <!-- Error state -->
     <div v-else-if="mergedError" class="space-y-4">
-      <div
-        role="alert"
-        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
-      >
-        {{ mergedError }}
-      </div>
+      <Alert variant="error">{{ mergedError }}</Alert>
       <button
         type="button"
         class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"

test/nuxt/a11y.spec.ts

@@ -116,6 +116,7 @@ vi.mock('vue-data-ui/vue-ui-xy', () => {
 // Import components from #components where possible
 // For server/client variants, we need to import directly to test the specific variant
 import {
+  Alert,
   AppFooter,
   AppHeader,
   AppLogo,
@@ -3529,6 +3530,35 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
   })
+
+  describe('Alert', () => {
+    it('should have no accessibility violations for warning variant', async () => {
+      const component = await mountSuspended(Alert, {
+        props: { variant: 'warning', title: 'Warning title' },
+        slots: { default: 'This is a warning message.' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations for error variant', async () => {
+      const component = await mountSuspended(Alert, {
+        props: { variant: 'error', title: 'Error title' },
+        slots: { default: 'This is an error message.' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations without title', async () => {
+      const component = await mountSuspended(Alert, {
+        props: { variant: 'warning' },
+        slots: { default: 'This is a warning message.' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 })
 
 function applyTheme(colorMode: string, bgTheme: string | null) {
@@ -3575,6 +3605,22 @@ describe('background theme accessibility', () => {
   }
 
   const components = [
+    {
+      name: 'AlertWarning',
+      mount: () =>
+        mountSuspended(Alert, {
+          props: { variant: 'warning', title: 'Warning title' },
+          slots: { default: '<p>Warning body</p>' },
+        }),
+    },
+    {
+      name: 'AlertError',
+      mount: () =>
+        mountSuspended(Alert, {
+          props: { variant: 'error', title: 'Error title' },
+          slots: { default: '<p>Error body</p>' },
+        }),
+    },
     { name: 'AppHeader', mount: () => mountSuspended(AppHeader) },
     { name: 'AppFooter', mount: () => mountSuspended(AppFooter) },
     { name: 'HeaderSearchBox', mount: () => mountSuspended(HeaderSearchBox) },