From 3088fc5b5dca4ca55466db33bedc7dec3e4629c4 Mon Sep 17 00:00:00 2001
From: huangkevin-apr <huangkevinapr@outlook.com>
Date: Mon, 12 Jan 2026 09:33:26 +0100
Subject: [PATCH] Fix: Add accessibility attributes to UI Kit card images and
 icons

---
 app/(home)/UIKitCard.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/(home)/UIKitCard.tsx b/app/(home)/UIKitCard.tsx
index 3d1af69..95e077e 100644
--- a/app/(home)/UIKitCard.tsx
+++ b/app/(home)/UIKitCard.tsx
@@ -26,6 +26,7 @@ export default function UIKitCard({
       <div className="absolute inset-0 -z-10 bg-grid-dots-current group-hover:text-cyan-400/40 h-full w-full text-transparent duration-300" />
       <div className="lg:-m-2 border border-dashed rounded-md backdrop-blur group-hover:rounded-xl duration-600 ease-out p-2 group-hover:border-black dark:group-hover:border-cyan-400">
         <img
+          alt={title}
           className={`rounded-sm group-hover:rounded-lg duration-600 aspect-[18/9] object-cover ${
             invertOg && "dark:invert"
           }`}
@@ -34,7 +35,10 @@ export default function UIKitCard({
       </div>
       <h2 className="text-lg font-semibold mt-8 relative flex gap-2">
         {title}
-        <ExternalLink className="mt-1 h-4.5 w-4.5 group-hover:translate-0 -translate-x-2 translate-y-2 opacity-0 scale-75 group-hover:opacity-100 group-hover:scale-100 duration-300" />
+        <ExternalLink
+          aria-label="Opens in a new tab"
+          className="mt-1 h-4.5 w-4.5 group-hover:translate-0 -translate-x-2 translate-y-2 opacity-0 scale-75 group-hover:opacity-100 group-hover:scale-100 duration-300"
+        />
       </h2>
       <p className="text-sm opacity-50 mt-4 text-pretty line-clamp-4">
         {description}