From a9955929f3d15ffd97c545ca25c808809b87b316 Mon Sep 17 00:00:00 2001
From: Ram Sharan Rimal <rsr0012@uah.edu>
Date: Thu, 9 Jan 2025 09:45:17 -0600
Subject: [PATCH] fix tab role for carousel items

---
 overrides/home/carousel/carousel-item.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/overrides/home/carousel/carousel-item.tsx b/overrides/home/carousel/carousel-item.tsx
index bea7f95ca..cafb155d6 100644
--- a/overrides/home/carousel/carousel-item.tsx
+++ b/overrides/home/carousel/carousel-item.tsx
@@ -45,7 +45,11 @@ export function ItemPanel({ item, linkComponent: LinkComponent }) {
 }
 
 export default function CarouselItem({ item, itemIdx, onTitleClick, shouldProgress, progressDone, progressPercentage, selected, linkComponent: LinkComponent }) {
-  return <Card 
+  return<li
+    role="tab"
+    className="usa-card tablet:grid-col-4"  
+    >
+  <Card 
     gridLayout={{ tablet: { col: 4 } }} 
     containerProps={{className:`hover:bg-base-lightest padding-x-1 radius-0 border-0 animation--transition ${(selected || shouldProgress)? 'opacity-100':'opacity-50'}`}}>
     <ProgressBar shouldProgress={shouldProgress} progressDone={progressDone} progressPercentage={progressPercentage}selected={selected} />
@@ -71,6 +75,7 @@ export default function CarouselItem({ item, itemIdx, onTitleClick, shouldProgre
         <span className="padding-left-1">Read more</span>
         </LinkComponent>
       </CardFooter>
-  </Card>
+    </Card>
+    </li>
 }