From 371b77c3405d91f74c169d964b9379f25b83e7cc Mon Sep 17 00:00:00 2001
From: schm00g <hk8igureu@relay.firefox.com>
Date: Sat, 2 Dec 2023 14:37:13 +0000
Subject: [PATCH] accessibility lighthouse fixes

---
 src/components/Experience.astro |  2 +-
 src/components/ui/Card.astro    | 77 +++++++++++++++++++--------------
 2 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/src/components/Experience.astro b/src/components/Experience.astro
index e1eec3f..f49c160 100644
--- a/src/components/Experience.astro
+++ b/src/components/Experience.astro
@@ -35,7 +35,7 @@ const experience = await getCollection("experience", ({ data }) => {
     target="_blank"
     rel="noopener"
     class="flex flex-row text-black hover:text-purple dark:text-white dark:hover:text-purple"
-    aria-label="link to repository"
+    aria-label="View personal github repositories"
   >
     View personal github repositories
     <svg 
diff --git a/src/components/ui/Card.astro b/src/components/ui/Card.astro
index 0c9fb9e..1281fee 100644
--- a/src/components/ui/Card.astro
+++ b/src/components/ui/Card.astro
@@ -1,41 +1,52 @@
 ---
-import sustainlife from '@assets/images/sustainlife.jpeg';
-import axial3d from '@assets/images/axial3d.png';
-import pmdsolutionsltd from '@assets/images/pmdsolutionsltd.jpg';
-import { Image } from '@astrojs/image/components';
-import Tags from '@components/ui/Tags.astro';
+import sustainlife from "@assets/images/sustainlife.jpeg";
+import axial3d from "@assets/images/axial3d.png";
+import pmdsolutionsltd from "@assets/images/pmdsolutionsltd.jpg";
+import { Image } from "@astrojs/image/components";
+import Tags from "@components/ui/Tags.astro";
 interface Props {
-	url?: string;
-	alt?: string;
-	title?: string;
-	tags: string[];
-	children?: HTMLElement | HTMLElement[];
+  url?: string;
+  alt?: string;
+  title?: string;
+  tags: string[];
+  children?: HTMLElement | HTMLElement[];
 }
 
-const { url = '#', alt = 'Project image', title = 'Project title', tags = ['Tags'] } = Astro.props;
+const {
+  url = "#",
+  alt = "Project image",
+  title = "Project title",
+  tags = ["Tags"],
+} = Astro.props;
 ---
 
 <section class="w-full p-4 md:w-1/2 lg:w-1/3">
-	<article
-		data-testId="card"
-		class="rounded-xl bg-white p-3 shadow-lg duration-300 hover:scale-105 hover:transform hover:shadow-xl"
-	>
-		<a href={url} aria-label="link to project">
-			<div class="relative flex items-end overflow-hidden rounded-xl">
-				<Image
-					src={[axial3d, pmdsolutionsltd, sustainlife][title.toLowerCase().includes("axial") ? 0 : title.toLowerCase().includes("pmd") ? 1 : 2]}
-					alt={alt}
-					aspectRatio="4:4"
-					format="png"
-					width={400}
-					height={400}
-					loading="eager"
-				/>
-			</div>
-			<div class="mt-1 p-2">
-				<h3 class="text-xl text-purple lg:text-2xl">{title}</h3>
-				<Tags tags={tags} />
-			</div>
-		</a>
-	</article>
+  <article
+    data-testId="card"
+    class="rounded-xl bg-white p-3 shadow-lg duration-300 hover:scale-105 hover:transform hover:shadow-xl"
+  >
+    <div class="relative flex items-end overflow-hidden rounded-xl">
+      <Image
+        src={[axial3d, pmdsolutionsltd, sustainlife][
+          title.toLowerCase().includes("axial")
+            ? 0
+            : title.toLowerCase().includes("pmd")
+            ? 1
+            : 2
+        ]}
+        alt={alt}
+        aspectRatio="4:4"
+        format="png"
+        width={400}
+        height={400}
+        loading="eager"
+      />
+    </div>
+    <div class="mt-1 p-2">
+      <a href={url} aria-label={title}>
+        <h3 class="text-xl text-purple lg:text-2xl">{title}</h3>
+      </a>
+      <Tags tags={tags} />
+    </div>
+  </article>
 </section>