fix(a11y): add accessible names to icon-only buttons

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>

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>
   );
 };
 

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": {