From 7e09091c319c793a1343da534a0d265a522ff57f Mon Sep 17 00:00:00 2001
From: Ciucur Erol <mysqlthebest@gmail.com>
Date: Wed, 27 May 2026 16:11:20 +0300
Subject: [PATCH] fix(a11y): add accessible names to icon-only buttons

Lighthouse flagged five buttons with no accessible name in the home
page featured threads section. Screen readers were announcing them as
just "button".

- Carousel prev/next buttons: add aria-label via i18n
  (featuredThreadsPrevious / featuredThreadsNext) since the buttons
  are real controls that scroll the embla carousel.
- CardActions: convert from <button> to <span aria-hidden="true">.
  The element has no onClick and is rendered inside a <Link>, so it
  was a purely decorative arrow indicator. Treating it as a button
  also created an invalid nested-interactive (button inside link),
  an extra focus stop, and the missing accessible name. Making it a
  non-interactive, aria-hidden span fixes all three.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/home-page-featured-threads-carousel.tsx |  8 ++++++--
 app/src/components/ui/card.tsx                         | 10 +++++-----
 app/src/copy/en-EN.json                                |  2 ++
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/src/components/home-page-featured-threads-carousel.tsx b/app/src/components/home-page-featured-threads-carousel.tsx
index 1576f49c..d2a558f6 100644
--- a/app/src/components/home-page-featured-threads-carousel.tsx
+++ b/app/src/components/home-page-featured-threads-carousel.tsx
@@ -49,10 +49,14 @@ const HomePageFeaturedThreadsCarousel = ({
           </Typography>
 
           <div className="flex items-center gap-2">
-            <Button variant="icon" onClick={handlePrev}>
+            <Button
+              variant="icon"
+              onClick={handlePrev}
+              aria-label={t("home.featuredThreadsPrevious")}
+            >
               <SvgIconArrowLeft />
             </Button>
-            <Button variant="icon" onClick={handleNext}>
+            <Button variant="icon" onClick={handleNext} aria-label={t("home.featuredThreadsNext")}>
               <SvgIconArrowRight />
             </Button>
           </div>
diff --git a/app/src/components/ui/card.tsx b/app/src/components/ui/card.tsx
index 11e80c0a..cdf77675 100644
--- a/app/src/components/ui/card.tsx
+++ b/app/src/components/ui/card.tsx
@@ -176,20 +176,20 @@ const cardActionsVariantClassNames: CardVariantMapping = {
   grid: "absolute top-3 right-3",
 } as const;
 
-type CardActionsProps = Omit<React.ComponentProps<"button">, "children">;
+type CardActionsProps = Omit<React.ComponentProps<"span">, "children">;
 
 const CardActions = ({ className, ...props }: CardActionsProps) => {
   const variant = useContext(CardContext);
 
   return (
-    <button
-      type="button"
+    <span
       data-slot="card-actions"
-      className={cn("cursor-pointer", cardActionsVariantClassNames[variant], className)}
+      aria-hidden="true"
+      className={cn("inline-flex", cardActionsVariantClassNames[variant], className)}
       {...props}
     >
       <SvgIconArrowLink size="sm" color="accent" />
-    </button>
+    </span>
   );
 };
 
diff --git a/app/src/copy/en-EN.json b/app/src/copy/en-EN.json
index 732b8490..cbaf2b98 100644
--- a/app/src/copy/en-EN.json
+++ b/app/src/copy/en-EN.json
@@ -58,6 +58,8 @@
     "howToUse": "How to Use",
     "featuredThreadsTitle": "/Featured <gradient>threads</gradient>",
     "featuredThreadsDescription": "Handpicked conversations worth exploring.",
+    "featuredThreadsPrevious": "Show previous featured threads",
+    "featuredThreadsNext": "Show next featured threads",
     "seeMoreThreads": "See more threads"
   },
   "error": {