fix: added accessibility attributes to images and SVGs (#307)

src/app.css

@@ -43,4 +43,3 @@
     @apply transition-all delay-[50ms] duration-200;
   }
 }
-

src/lib/components/docs/menu-item.svelte

@@ -5,13 +5,8 @@
   $: isActivePage = $page.url.pathname === menuItem.href;
 </script>
 
-<a class={isActivePage ? 'text-primary-100  md:font-bold' : 'hover:text-primary-300'}
- class:active={isActivePage} href={menuItem.href}
-  >{menuItem.name}</a
+<a
+  class={isActivePage ? 'text-primary-100  md:font-bold' : 'hover:text-primary-300'}
+  class:active={isActivePage}
+  href={menuItem.href}>{menuItem.name}</a
 >
-
-
-
-
-
-

src/lib/components/footer.svelte

@@ -16,7 +16,7 @@
           href="http://discord.eddiehub.org"
           target="_blank"
           rel="noreferrer"
-          aria-label="Discord"><i class="fa-brands fa-discord fa-xl" /></a
+          aria-label="Discord"><i class="fa-brands fa-discord fa-xl" title="Discord" /></a
         >
       </li>
       <li>
@@ -26,7 +26,7 @@
           rel="noreferrer"
           class="transition duration-200 hover:text-[#333333] active:text-primary-100 dark:hover:text-[#fafafa] "
           href="http://github.eddiehub.org"
-          aria-label="Github"><i class="fa-brands fa-github fa-xl" /></a
+          aria-label="Github"><i class="fa-brands fa-github fa-xl" title="Github" /></a
         >
       </li>
     </ul>

src/lib/components/header.svelte

@@ -29,7 +29,12 @@
 
 <header class="my-8 flex flex-wrap items-center justify-between">
   <a href="/">
-    <img src="/images/hubber.png" class="w-8 object-contain md:w-12" alt="hubber" />
+    <img
+      src="/images/hubber.png"
+      class="w-8 object-contain md:w-12"
+      alt="hubber"
+      aria-label="hubber"
+    />
   </a>
   <div class="lg:hidden">
     <button
@@ -38,7 +43,15 @@
       data-test-id="hamburger-btn"
     >
       <svg
-        class="block h-4 w-4 fill-skin-text-highlight"
+        class="block h-4 w-4 fill-current dark:hidden"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>Mobile menu</title>
+        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+      </svg>
+      <svg
+        class="block h-4 w-4 fill-current dark:block"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
       >

src/lib/components/index/github-card.svelte

@@ -9,7 +9,10 @@
     viewBox="0 0 1024 1024"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-label="github icon"
   >
+    <title>GitHub</title>
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"

src/lib/components/index/graphql-card.svelte

@@ -2,12 +2,20 @@
   href="https://graphql.org/"
   class="card relative z-10 flex min-h-[250px] w-full max-w-[300px] flex-col items-center justify-center gap-4 justify-self-center overflow-hidden rounded-2xl bg-skin-off-background shadow-xl"
 >
-  <svg class="h-auto w-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="#e10098"
+  <svg
+    class="h-auto w-14"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    fill="#e10098"
+    role="img"
+    aria-label="graphql icon"
     ><style>
       svg {
         fill: color(display-p3 0.8824 0 0.5961);
       }
-    </style><path
+    </style>
+    <title>GraphQL</title>
+    <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M50 6.90308L87.323 28.4515V71.5484L50 93.0968L12.677 71.5484V28.4515L50 6.90308ZM16.8647 30.8693V62.5251L44.2795 15.0414L16.8647 30.8693ZM50 13.5086L18.3975 68.2457H81.6025L50 13.5086ZM77.4148 72.4334H22.5852L50 88.2613L77.4148 72.4334ZM83.1353 62.5251L55.7205 15.0414L83.1353 30.8693V62.5251Z"

src/lib/components/index/playwright-card.svelte

@@ -2,7 +2,15 @@
   href="https://playwright.dev/"
   class="card relative z-10 flex min-h-[250px] w-full max-w-[300px] flex-col items-center justify-center gap-4 justify-self-center overflow-hidden rounded-2xl bg-skin-off-background shadow-xl"
 >
-  <svg class="h-auto w-14" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    class="h-auto w-14"
+    viewBox="0 0 400 400"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-label="playwright icon"
+  >
+    <title>Playwright</title>
     <path
       d="M136.444 221.556C123.558 225.213 115.104 231.625 109.535 238.032C114.869 233.364 122.014 229.08 131.652 226.348C141.51 223.554 149.92 223.574 156.869 224.915V219.481C150.941 218.939 144.145 219.371 136.444 221.556ZM108.946 175.876L61.0895 188.484C61.0895 188.484 61.9617 189.716 63.5767 191.36L104.153 180.668C104.153 180.668 103.578 188.077 98.5847 194.705C108.03 187.559 108.946 175.876 108.946 175.876ZM149.005 288.347C81.6582 306.486 46.0272 228.438 35.2396 187.928C30.2556 169.229 28.0799 155.067 27.5 145.928C27.4377 144.979 27.4665 144.179 27.5336 143.446C24.04 143.657 22.3674 145.473 22.7077 150.721C23.2876 159.855 25.4633 174.016 30.4473 192.721C41.2301 233.225 76.8659 311.273 144.213 293.134C158.872 289.185 169.885 281.992 178.152 272.81C170.532 279.692 160.995 285.112 149.005 288.347ZM161.661 128.11V132.903H188.077C187.535 131.206 186.989 129.677 186.447 128.11H161.661Z"
       fill="#2D4552"

src/lib/components/index/svelte-card.svelte

@@ -13,6 +13,8 @@
     viewBox="0 0 98.1 118"
     style="enable-background:new 0 0 98.1 118;"
     xml:space="preserve"
+    role="img"
+    aria-label="svelte icon"
   >
     <style type="text/css">
       .st0 {
@@ -22,6 +24,7 @@
         fill: #ffffff;
       }
     </style>
+    <title>Svelte</title>
     <path
       class="st0"
       d="M91.8,15.6C80.9-0.1,59.2-4.7,43.6,5.2L16.1,22.8C8.6,27.5,3.4,35.2,1.9,43.9c-1.3,7.3-0.2,14.8,3.3,21.3  c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4l27.5-17.5c7.5-4.7,12.7-12.4,14.2-21.1  c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.2,32.1,97.1,22.9,91.8,15.6"

src/lib/components/index/tailwind-card.svelte

@@ -8,6 +8,8 @@
     data-name="Layer 1"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 122.88 73.29"
+    role="img"
+    aria-label="svelte icon"
     ><defs
       ><style>
         .cls-1 {

src/routes/+page.svelte

@@ -38,7 +38,10 @@
         slot="image"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
+        role="img"
+        aria-label="disc image"
       >
+        <title>disc image</title>
         <defs>
           <linearGradient id="0" x1="0" y1="0.51" x2="1" y2="0.49">
             <stop offset="0%" stop-color="#ff5a00" />
@@ -59,6 +62,9 @@
       <i
         slot="image"
         class="fa-solid fa-filter bg-gradient-to-tr from-primary-100 via-accent-magenta to-primary-200 bg-clip-text text-5xl text-transparent lg:text-8xl"
+        role="img"
+        aria-label="filter image"
+        title="filter image"
       />
     </OverviewCard>
     <OverviewCard
@@ -68,6 +74,9 @@
       <i
         slot="image"
         class="fa-solid fa-magnifying-glass bg-gradient-to-r from-primary-100 to-accent-magenta bg-clip-text text-5xl text-transparent lg:text-8xl"
+        role="img"
+        aria-label="magnifying glass"
+        title="magnifying glass"
       />
     </OverviewCard>
   </div>