🐛 fix(app): add SVG labels for a11y

digitalwarenkombinat · Jan 18, 2025 · 49d6e25 · 49d6e25
1 parent f77da1f
commit 49d6e25
Show file tree

Hide file tree

Showing 12 changed files with 30 additions and 10 deletions.
diff --git a/src/components/HeroImage.astro b/src/components/HeroImage.astro
@@ -1,5 +1,9 @@
 ---
-import Hero from '../icons/about.svg'
+import HeroSVG from '../icons/about.svg'
+import { siteTitle } from '@src/consts'
 ---
 
-<Hero class:list={'m-auto h-[300px] object-cover'} />
+<HeroSVG
+  aria-label=`${siteTitle} Hero`
+  class:list={'m-auto h-[300px] object-cover'}
+/>
diff --git a/src/components/Logo.astro b/src/components/Logo.astro
@@ -15,5 +15,11 @@ const { background = false } = Astro.props
       <div class='bg-primary rounded-full absolute -z-50 transition-all top-1 left-1 h-16 w-16' />
     )
   }
-  <LogoSVG width={96} height={96} class='ml-2' fill='currentColor' />
+  <LogoSVG
+    aria-label='logo'
+    width={96}
+    height={96}
+    class='ml-2'
+    fill='currentColor'
+  />
 </a>
diff --git a/src/components/SocialLinks.astro b/src/components/SocialLinks.astro
@@ -6,13 +6,23 @@ import { socialMedia } from '@src/consts'
 ---
 
 <div class='flex items-center justify-center gap-2 h-8'>
-  <a aria-label='instagram' href={socialMedia.instagram} target='_blank'>
-    <Instagram width={32} height={32} fill='currentColor' />
+  <a href={socialMedia.instagram} target='_blank'>
+    <Instagram
+      aria-label='Instagram'
+      width={32}
+      height={32}
+      fill='currentColor'
+    />
   </a>
-  <a aria-label='github' href={socialMedia.github} target='_blank'>
-    <Github width={32} height={32} fill='currentColor' />
+  <a href={socialMedia.github} target='_blank'>
+    <Github aria-label='Github' width={32} height={32} fill='currentColor' />
   </a>
-  <a aria-label='linkedin' href={socialMedia.linkedin} target='_blank'>
-    <Linkedin width={32} height={32} fill='currentColor' />
+  <a href={socialMedia.linkedin} target='_blank'>
+    <Linkedin
+      aria-label='Linkedin'
+      width={32}
+      height={32}
+      fill='currentColor'
+    />
   </a>
 </div>
diff --git a/...pshots/Blog-pages-has-all-blog-posts-link-on-homepage-1-Mobile-Chrome-linux.png b/...pshots/Blog-pages-has-all-blog-posts-link-on-homepage-1-Mobile-Chrome-linux.png
diff --git a/...s/Default-dark-mode-has-light-mode-after-color-change-1-Mobile-Chrome-linux.png b/...s/Default-dark-mode-has-light-mode-after-color-change-1-Mobile-Chrome-linux.png
diff --git a/...s/Default-light-mode-has-dark-mode-after-color-change-1-Mobile-Chrome-linux.png b/...s/Default-light-mode-has-dark-mode-after-color-change-1-Mobile-Chrome-linux.png
diff --git a/tests/homepage.spec.ts b/tests/homepage.spec.ts
@@ -66,7 +66,7 @@ test.describe('Homepage areas', () => {
 
   test('has footer', async ({ page }) => {
     await expect(
-      page.getByRole('contentinfo').getByLabel('instagram'),
+      page.getByRole('contentinfo').getByLabel('Instagram'),
     ).toBeVisible()
   })
 })
diff --git a/.../homepage.spec.ts-snapshots/Homepage-areas-has-header-1-Mobile-Chrome-linux.png b/.../homepage.spec.ts-snapshots/Homepage-areas-has-header-1-Mobile-Chrome-linux.png
diff --git a/....ts-snapshots/has-English-title-after-language-change-1-Mobile-Chrome-linux.png b/....ts-snapshots/has-English-title-after-language-change-1-Mobile-Chrome-linux.png
diff --git a/....ts-snapshots/has-English-title-after-language-change-2-Mobile-Chrome-linux.png b/....ts-snapshots/has-English-title-after-language-change-2-Mobile-Chrome-linux.png
diff --git a/tests/language.spec.ts-snapshots/has-German-title-1-Mobile-Chrome-linux.png b/tests/language.spec.ts-snapshots/has-German-title-1-Mobile-Chrome-linux.png
diff --git a/...spec.ts-snapshots/Project-pages-has-featured-projects-1-Mobile-Chrome-linux.png b/...spec.ts-snapshots/Project-pages-has-featured-projects-1-Mobile-Chrome-linux.png