refactor(Accordion): div titles to buttons, test in mobile mega menu …

…accordions
eea · Feb 9, 2023 · eaad4b4 · eaad4b4
1 parent 2561c42
commit eaad4b4
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/src/ui/Accordion/Accordion.stories.js b/src/ui/Accordion/Accordion.stories.js
@@ -107,19 +107,22 @@ function AccordionContainer({ ...args }) {
           active={activeIndex === 0}
           index={0}
           onClick={toggleOpenAccordion}
+          as="button"
         >
           {args.toggle1}
           <Icon className="ri-arrow-down-s-line" />
         </Accordion.Title>
         <Accordion.Content active={activeIndex === 0}>
           {args.content1.length > 0 &&
             args.content1.map((item, index) => <p key={index}>{item}</p>)}
+          <a href="/#">Read more</a>
         </Accordion.Content>
 
         <Accordion.Title
           active={activeIndex === 1}
           index={1}
           onClick={toggleOpenAccordion}
+          as="button"
         >
           {args.toggle2}
           <Icon className="ri-arrow-down-s-line" />
@@ -133,6 +136,7 @@ function AccordionContainer({ ...args }) {
           active={activeIndex === 2}
           index={2}
           onClick={toggleOpenAccordion}
+          as="button"
         >
           {args.toggle3}
           <Icon className="ri-arrow-down-s-line" />

diff --git a/src/ui/Header/HeaderMenuPopUp.js b/src/ui/Header/HeaderMenuPopUp.js
@@ -176,7 +176,7 @@ const FirstLevelContent = ({ element, renderMenuItem, pathName }) => {
               defaultIndex = index;
             }
             x.title = (
-              <Accordion.Title key={`title=${index}`}>
+              <Accordion.Title key={`title=${index}`} as="button">
                 {item.title}
                 <Icon className="ri-arrow-down-s-line" size="small" />
               </Accordion.Title>
@@ -279,7 +279,7 @@ const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
       defaultIndex = index;
     }
     x.title = (
-      <Accordion.Title key={`title-${index}`} index={index}>
+      <Accordion.Title key={`title-${index}`} index={index} as="button">
         {element.title}
         <Icon className="ri-arrow-down-s-line" size="small" />
       </Accordion.Title>

diff --git a/theme/themes/eea/extras/header.less b/theme/themes/eea/extras/header.less
@@ -785,9 +785,11 @@
 
     i:before {
       font-size: @megaMenuAccordionIconFontSize;
+      line-height: @megaMenuAccordionIconLineHeight;
     }
 
-    &:hover {
+    &:hover,
+    &:focus-visible {
       i {
         color: @megaMenuTextColor;
       }

diff --git a/theme/themes/eea/extras/header.variables b/theme/themes/eea/extras/header.variables
@@ -203,6 +203,7 @@
 @megaMenuAccordionTitleFontWeight: @font-weight-7;
 @megaMenuAccordionTitlePadding: @rem-space-2 0;
 @megaMenuAccordionIconFontSize: @font-size-9;
+@megaMenuAccordionIconLineHeight: @font-lineheight-00;
 @megaMenuAccordionContentPadding: 0 0 @rem-space-5 0;
 @megaMenuAccordionTitleBorderBottom: 1px solid rgba(255, 255, 255, 0.25);
 @megaMenuAccordionActiveTitleBorderBottom: 1px solid @white;

diff --git a/theme/themes/eea/modules/accordion.overrides b/theme/themes/eea/modules/accordion.overrides
@@ -2,11 +2,18 @@
          Theme Overrides
 *******************************/
 
+.ui.accordion button.title {
+  background: transparent;
+  width: 100%;
+  border: none;
+}
+
 .ui.accordion {
   margin: @itemsMargin;
   transition: @styledTitleTransition;
 
-  .title {
+  .title,
+  button.title {
     display: flex;
     align-items: center;
     justify-content: @titleJustifyContent;
@@ -112,7 +119,8 @@
 .ui.accordion:not([class*='ary']) .active.title i {
    color: @tertiaryColor;
 }
-.ui.accordion[class*='ary'] .active.title {
+.ui.accordion[class*='ary'] .active.title,
+.ui.accordion[class*='ary'] .active.title i {
   color: white;
 }