fix(make whole accordion header clickable): fix accordion header

ZopaPublic · Mar 10, 2023 · ae14823 · ae14823
1 parent 0e198d4
commit ae14823
Show file tree

Hide file tree

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

diff --git a/...omponents/organisms/Accordion/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap b/...omponents/organisms/Accordion/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
@@ -16,6 +16,39 @@ exports[`<AccordionHeader /> renders the component with no a11y violations 1`] =
   text-align: left;
 }
 
+.c1 {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: 11px;
+  height: 11px;
+  position: absolute;
+  right: 16px;
+  top: 40%;
+}
+
+.c1:after,
+.c1:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  background-color: #818F9B;
+}
+
+.c1:before {
+  width: 100%;
+  height: 3px;
+}
+
+.c1:after {
+  height: 100%;
+  width: 3px;
+}
+
 <button
   aria-controls="one-section"
   aria-disabled="false"
@@ -26,5 +59,8 @@ exports[`<AccordionHeader /> renders the component with no a11y violations 1`] =
   type="button"
 >
   Header
+  <span
+    class="c1"
+  />
 </button>
 `;