test: fix and upfate tests

Author: alexdln

app/assets/logos/oss-partners/index.ts

@@ -53,14 +53,14 @@ export const OSS_PARTNERS = [
     logo: LogoNuxt,
     url: 'https://nuxt.com/',
   },
-  {
-    name: 'Storybook',
-    logo: LogoStorybook,
-    url: 'https://storybook.js.org/',
-  },
   {
     name: 'Vue',
     logo: LogoVue,
     url: 'https://vuejs.org/',
   },
+  {
+    name: 'Storybook',
+    logo: LogoStorybook,
+    url: 'https://storybook.js.org/',
+  },
 ]

app/components/About/LogoImg.vue

@@ -6,22 +6,36 @@ const props = defineProps<{
         dark: string
         light: string
       }
+  alt: string
 }>()
 </script>
 <template>
   <div v-if="typeof src === 'string'">
-    <img :src="src" loading="lazy" height="36" class="w-auto block h-9" />
+    <img :src="src" loading="lazy" height="36" class="w-auto block h-9" :alt="alt" />
   </div>
   <div v-else-if="src.light === 'auto'">
     <img
       :src="src.dark"
       loading="lazy"
       height="36"
       class="w-auto block light:invert light:grayscale h-9"
+      :alt="alt"
     />
   </div>
   <div v-else>
-    <img :src="src.dark" loading="lazy" height="36" class="w-auto block light:hidden h-9" />
-    <img :src="src.light" loading="lazy" height="36" class="w-auto block hidden light:block h-9" />
+    <img
+      :src="src.dark"
+      loading="lazy"
+      height="36"
+      class="w-auto block light:hidden h-9"
+      :alt="alt"
+    />
+    <img
+      :src="src.light"
+      loading="lazy"
+      height="36"
+      class="w-auto block hidden light:block h-9"
+      :alt="alt"
+    />
   </div>
 </template>

app/components/About/LogoList.vue

@@ -29,6 +29,7 @@ const props = defineProps<{
         target="_blank"
         rel="noopener noreferrer"
         class="flex items-center justify-center h-full min-w-11 rounded-md hover:bg-fg/10 transition-colors p-1"
+        :aria-label="item.name"
       >
         <AboutLogoImg :src="item.logo" :alt="item.name" />
       </a>
@@ -53,6 +54,7 @@ const props = defineProps<{
               target="_blank"
               rel="noopener noreferrer"
               class="flex items-center justify-center h-full min-w-10 rounded-md hover:bg-fg/10 transition-colors p-0.5"
+              :aria-label="groupItem.name"
             >
               <AboutLogoImg :src="groupItem.logo" :alt="groupItem.name" />
             </a>

test/nuxt/a11y.spec.ts

@@ -114,6 +114,8 @@ import {
   AppFooter,
   AppHeader,
   AppLogo,
+  AboutLogoImg,
+  AboutLogoList,
   BaseCard,
   BlueskyPostEmbed,
   BuildEnvironment,
@@ -197,6 +199,7 @@ import {
 
 // Server variant components must be imported directly to test the server-side render
 // The #components import automatically provides the client variant
+import LogoNuxt from '~/assets/logos/oss-partners/nuxt.svg'
 import HeaderAccountMenuServer from '~/components/Header/AccountMenu.server.vue'
 import ToggleServer from '~/components/Settings/Toggle.server.vue'
 import SearchProviderToggleServer from '~/components/SearchProviderToggle.server.vue'
@@ -304,6 +307,88 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('AboutLogoImg', () => {
+    it('should have no accessibility violations with string src', async () => {
+      const component = await mountSuspended(AboutLogoImg, {
+        props: {
+          src: LogoNuxt,
+          alt: 'Nuxt logo',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with dark/light src', async () => {
+      const component = await mountSuspended(AboutLogoImg, {
+        props: {
+          src: {
+            dark: LogoNuxt,
+            light: 'auto',
+          },
+          alt: 'Nuxt logo',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('AboutLogoList', () => {
+    it('should have no accessibility violations with direct logo items', async () => {
+      const component = await mountSuspended(AboutLogoList, {
+        props: {
+          list: [
+            {
+              name: 'Nuxt',
+              url: 'https://nuxt.com',
+              logo: LogoNuxt,
+            },
+            {
+              name: 'Nuxt',
+              url: 'https://nuxt.com',
+              logo: {
+                dark: LogoNuxt,
+                light: 'auto',
+              },
+            },
+          ],
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with grouped items', async () => {
+      const component = await mountSuspended(AboutLogoList, {
+        props: {
+          list: [
+            {
+              name: 'OSS Partners',
+              items: [
+                {
+                  name: 'Nuxt',
+                  url: 'https://nuxt.com',
+                  logo: LogoNuxt,
+                },
+                {
+                  name: 'Nuxt',
+                  url: 'https://nuxt.com',
+                  logo: {
+                    dark: LogoNuxt,
+                    light: 'auto',
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('BaseCard', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(BaseCard, {