Merge pull request #251 from plentymarkets/feat/update-img-demo-sections

feat: update homepage img demo sections
plentymarkets · Nov 29, 2023 · ebb518d · ebb518d
2 parents 1e64da6 + 5e66fac
commit ebb518d
Showing 1 changed file with 7 additions and 9 deletions.
diff --git a/apps/web/pages/index.vue b/apps/web/pages/index.vue
@@ -30,26 +30,24 @@
       <div
         v-for="{ title, image } in categories"
         :key="title"
+        role="img"
+        :aria-label="title"
+        :aria-labelledby="`image-${title}`"
         class="relative flex-col min-w-[140px] max-w-[360px] justify-center group"
       >
-        <a
-          class="absolute w-full h-full z-1 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-md"
-          href="#"
-          :aria-label="title"
-        />
         <img
           class="rounded-full bg-neutral-100 group-hover:shadow-xl group-active:shadow-none"
           :src="image"
           :alt="title"
           width="360"
           height="360"
         />
-        <div class="flex justify-center">
-          <a
-            class="mt-4 font-semibold no-underline text-normal-900 typography-text-base group-hover:underline group-hover:text-primary-800 group-hover:font-normal group-active:text-primary-800 group-active:font-normal"
+        <div :id="`image-${title}`" class="flex justify-center">
+          <div
+            class="mt-4 font-semibold no-underline text-normal-900 typography-text-base group-hover:text-primary-800 group-hover:font-normal group-active:text-primary-800 group-active:font-normal"
           >
             {{ title }}
-          </a>
+          </div>
         </div>
       </div>
     </div>