[MWPW-134805] Remove borders when more sections are used (#1094)

adobecom · Aug 10, 2023 · 15b21ea · 15b21ea
1 parent a03b5f8
commit 15b21ea
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css
@@ -522,7 +522,7 @@ header.global-navigation {
     padding: 0 8px;
   }
 
-  .feds-navItem--section {
+  .feds-navItem--section:only-of-type {
     border-left: 1px solid var(--feds-borderColor--light);
     border-right: 1px solid var(--feds-borderColor--light);
   }

diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
@@ -584,10 +584,11 @@ class Gnav {
           </a>`;
 
         const isSectionMenu = item.closest('.section') instanceof HTMLElement;
+        const tag = isSectionMenu ? 'section' : 'div';
         const triggerTemplate = toFragment`
-          <div class="feds-navItem${isSectionMenu ? ' feds-navItem--section' : ''}">
+          <${tag} class="feds-navItem${isSectionMenu ? ' feds-navItem--section' : ''}">
             ${dropdownTrigger}
-          </div>`;
+          </${tag}>`;
 
         // Toggle trigger's dropdown on click
         dropdownTrigger.addEventListener('click', (e) => {

diff --git a/test/blocks/global-navigation/keyboard/mocks/global-nav-mobile.html b/test/blocks/global-navigation/keyboard/mocks/global-nav-mobile.html
@@ -92,7 +92,7 @@
           </aside>
         </div>
         <div class="feds-nav" style="padding-bottom: 64px">
-          <div
+          <section
             class="feds-navItem feds-navItem--section feds-navItem--megaMenu"
           >
             <a
@@ -455,7 +455,7 @@
                 </div>
               </div>
             </div>
-          </div>
+          </section>
           <div class="feds-navItem">
             <a
               href="#"

diff --git a/test/blocks/global-navigation/keyboard/mocks/global-nav.html b/test/blocks/global-navigation/keyboard/mocks/global-nav.html
@@ -23,7 +23,7 @@
       </div>
       <div class="feds-nav-wrapper">
         <div class="feds-nav">
-          <div
+          <section
             class="feds-navItem feds-navItem--section feds-navItem--megaMenu"
           >
             <a
@@ -352,7 +352,7 @@
                 </div>
               </div>
             </div>
-          </div>
+          </section>
           <div class="feds-navItem">
             <a
               href="#"