From 3f34d9709c535d46c2ff7c8e06e9c0364409b110 Mon Sep 17 00:00:00 2001
From: garima-agarwall <garima.agarwal9830@gmail.com>
Date: Tue, 9 Jun 2026 17:26:01 +0530
Subject: [PATCH] fix: improve accessibility for interactive UI elements -
 aria-labels, focus-visible, keyboard navigation

---
 .../dashboard/LeaderBoard/leaderboard.tsx        |  2 +-
 src/components/merch/ProductCard.tsx             |  2 +-
 src/components/navbar/NavbarIcon.tsx             |  2 +-
 src/css/custom.css                               | 16 ++++++++++++++++
 .../showcase/_components/ShowcaseCard/index.tsx  |  2 +-
 5 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/dashboard/LeaderBoard/leaderboard.tsx b/src/components/dashboard/LeaderBoard/leaderboard.tsx
index c4738056..1b9e8550 100644
--- a/src/components/dashboard/LeaderBoard/leaderboard.tsx
+++ b/src/components/dashboard/LeaderBoard/leaderboard.tsx
@@ -148,7 +148,7 @@ function ContributorBadges({
   if (!badges || badges.length === 0) return null;
 
   return (
-    <div className="contributor-badges" onClick={onClick}>
+    <div className="contributor-badges" onClick={onClick} role="button" tabIndex={0} aria-label="View contributor badges" onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") onClick?.(); }}>
       {badges.map((badge, index) => (
         <img
           key={index}
diff --git a/src/components/merch/ProductCard.tsx b/src/components/merch/ProductCard.tsx
index e53e690d..8876b5a9 100644
--- a/src/components/merch/ProductCard.tsx
+++ b/src/components/merch/ProductCard.tsx
@@ -42,7 +42,7 @@ const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart }) => {
       onHoverEnd={() => setIsHovered(false)}
     >
       <div className="product-card-image-wrapper">
-        <div className="product-card-image" onClick={openViewer} style={{ cursor: 'pointer' }}>
+        <div className="product-card-image" onClick={openViewer} role="button" tabIndex={0} aria-label="View product image" onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") openViewer(); }} style={{ cursor: 'pointer' }}>
           <img src={product.image} alt={product.title} loading="lazy" />
           {isHovered && (
             <motion.div
diff --git a/src/components/navbar/NavbarIcon.tsx b/src/components/navbar/NavbarIcon.tsx
index 5c617c55..d049985e 100644
--- a/src/components/navbar/NavbarIcon.tsx
+++ b/src/components/navbar/NavbarIcon.tsx
@@ -40,7 +40,7 @@ export default function NavbarIcon(props: NavbarIconProps) {
       <button
         className={`navbar-icon-item ${active ? "active" : ""}`}
         onClick={onClick}
-        role="button"
+        aria-label={text}
         tabIndex={0}
         onKeyDown={(e) => {
           if (e.key === "Enter" || e.key === " ") {
diff --git a/src/css/custom.css b/src/css/custom.css
index db46de41..6ade235b 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -2718,3 +2718,19 @@ html[data-theme="dark"] .blog-post-page .markdown h4 {
   margin-top: 15px !important;
 }
 
+
+/* ===== Accessibility: focus-visible indicators ===== */
+:focus-visible {
+  outline: 2px solid var(--ifm-color-primary) !important;
+  outline-offset: 2px !important;
+  border-radius: 4px !important;
+}
+
+button:focus-visible,
+a:focus-visible,
+[role="button"]:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--ifm-color-primary) !important;
+  outline-offset: 2px !important;
+  border-radius: 4px !important;
+}
diff --git a/src/pages/showcase/_components/ShowcaseCard/index.tsx b/src/pages/showcase/_components/ShowcaseCard/index.tsx
index bfe2c2b9..6a2d5747 100644
--- a/src/pages/showcase/_components/ShowcaseCard/index.tsx
+++ b/src/pages/showcase/_components/ShowcaseCard/index.tsx
@@ -58,7 +58,7 @@ function ShowcaseCard({ user }: { user: User }) {
 
   return (
     <li key={user.title} className={clsx("card shadow--md", styles.card)}>
-      <div className={styles.cardLink} onClick={handleCardClick} />
+      <div className={styles.cardLink} onClick={handleCardClick} role="button" tabIndex={0} aria-label={`Visit ${user.title}`} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") handleCardClick(); }} />
       <div className={clsx("card__image", styles.showcaseCardImage)}>
         <IdealImage img={user.preview} alt={user.title} />
       </div>