From fdcb4d2c0c18fdd2c01a799e69c13e20db9cbc43 Mon Sep 17 00:00:00 2001
From: Kaustubh Kumar <kaustubhkumar05@gmail.com>
Date: Tue, 19 Mar 2024 12:31:08 +0530
Subject: [PATCH] fix: add test id for accordion trigger

---
 packages/roomkit-react/src/Accordion/Accordion.tsx        | 8 ++++----
 .../src/Prebuilt/components/Footer/RoleAccordion.tsx      | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/roomkit-react/src/Accordion/Accordion.tsx b/packages/roomkit-react/src/Accordion/Accordion.tsx
index 2329201935..d7b86ce14d 100644
--- a/packages/roomkit-react/src/Accordion/Accordion.tsx
+++ b/packages/roomkit-react/src/Accordion/Accordion.tsx
@@ -64,15 +64,15 @@ export const AccordionRoot = StyledAccordion;
 export const AccordionItem = StyledItem;
 
 export const AccordionHeader: React.FC<
-  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS }>
+  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS; chevronID?: string }>
 > = React.forwardRef<
   HTMLButtonElement,
-  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS }>
->(({ children, iconStyles, css, ...props }, forwardedRef) => (
+  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS; chevronID?: string }>
+>(({ children, iconStyles, css, chevronID, ...props }, forwardedRef) => (
   <StyledHeader css={css}>
     <StyledTrigger {...props} ref={forwardedRef}>
       {children}
-      <StyledChevron aria-hidden css={iconStyles} />
+      <StyledChevron data-testid={chevronID} aria-hidden css={iconStyles} />
     </StyledTrigger>
   </StyledHeader>
 ));
diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.tsx
index ce931ae60c..34269539a9 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.tsx
@@ -93,6 +93,7 @@ export const RoleAccordion = ({
   return (
     <Accordion.Item value={roleName} css={{ '&:hover .role_actions': { visibility: 'visible' }, mb: '$8' }} ref={ref}>
       <Accordion.Header
+        chevronID={`role_accordion_btn_${roleName}`}
         iconStyles={{ c: '$on_surface_high' }}
         css={{
           textTransform: 'capitalize',