fix(accordion): make whole accordion header clickable

ZopaPublic · Mar 10, 2023 · 72afca7 · 72afca7
1 parent ae14823
commit 72afca7
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/src/components/organisms/Accordion/AccordionHeader/AccordionHeader.tsx b/src/components/organisms/Accordion/AccordionHeader/AccordionHeader.tsx
@@ -74,12 +74,12 @@ const AccordionHeader = ({ children, id, index, textSize = 'body', onClick, ...r
 
   return (
     <Heading as="h3" size="h6">
-      <TitleContainer>
-        <StyledButton type="button" ref={ref} onClick={handleClick} {...headerPropsRest} {...rest}>
+      <StyledButton type="button" ref={ref} onClick={handleClick} {...headerPropsRest} {...rest}>
+        <TitleContainer>
           {children}
           <Cross active={isActiveSection(index)} />
-        </StyledButton>
-      </TitleContainer>
+        </TitleContainer>
+      </StyledButton>
     </Heading>
   );
 };

diff --git a/...omponents/organisms/Accordion/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap b/...omponents/organisms/Accordion/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
@@ -17,6 +17,26 @@ exports[`<AccordionHeader /> renders the component with no a11y violations 1`] =
 }
 
 .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: left;
+  background-color: #F7F7F7;
+  width: 100%;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  position: relative;
+  padding: 16px 43px 16px 16px;
+}
+
+.c2 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -27,8 +47,8 @@ exports[`<AccordionHeader /> renders the component with no a11y violations 1`] =
   top: 40%;
 }
 
-.c1:after,
-.c1:before {
+.c2:after,
+.c2:before {
   content: '';
   position: absolute;
   top: 0;
@@ -39,12 +59,12 @@ exports[`<AccordionHeader /> renders the component with no a11y violations 1`] =
   background-color: #818F9B;
 }
 
-.c1:before {
+.c2:before {
   width: 100%;
   height: 3px;
 }
 
-.c1:after {
+.c2:after {
   height: 100%;
   width: 3px;
 }
@@ -58,9 +78,13 @@ exports[`<AccordionHeader /> renders the component with no a11y violations 1`] =
   id="one"
   type="button"
 >
-  Header
-  <span
+  <div
     class="c1"
-  />
+  >
+    Header
+    <span
+      class="c2"
+    />
+  </div>
 </button>
 `;