Added Analytics Attributes to Tabs and Tabpanels (#3275)

* Added analytics attributes to tabs and tabpanels * Handle cases where we don't find daa attributes
adobecom · Jan 7, 2025 · 96d1903 · 96d1903
1 parent 24e08f9
commit 96d1903
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js
@@ -398,16 +398,19 @@ export const [setUserProfile, getUserProfile] = (() => {
 
 export const transformTemplateToMobile = async (popup, item, localnav = false) => {
   const notMegaMenu = popup.parentElement.tagName === 'DIV';
-  if (notMegaMenu) return;
+  if (notMegaMenu) return null;
 
   const originalContent = popup.innerHTML;
   const tabs = [...popup.querySelectorAll('.feds-menu-section')]
     .filter((section) => !section.querySelector('.feds-promo') && section.textContent)
     .map((section) => {
-      const name = section.querySelector('.feds-menu-headline')?.textContent ?? 'Shop For';
+      const headline = section.querySelector('.feds-menu-headline');
+      const name = headline?.textContent ?? 'Shop For';
+      const daallTab = headline?.getAttribute('daa-ll');
+      const daalhTabContent = section.querySelector('.feds-menu-items')?.getAttribute('daa-lh');
       const content = section.querySelector('.feds-menu-items') ?? section;
       const links = [...content.querySelectorAll('a.feds-navLink')].map((x) => x.outerHTML).join('');
-      return { name, links };
+      return { name, links, daallTab, daalhTabContent };
     });
   const CTA = popup.querySelector('.feds-cta')?.outerHTML ?? '';
   const mainMenu = `
@@ -433,21 +436,23 @@ export const transformTemplateToMobile = async (popup, item, localnav = false) =
       <h7>${item.textContent.trim()}</h7>
     </div>
     <div class="tabs" role="tablist">
-      ${tabs.map(({ name }, i) => `
+      ${tabs.map(({ name, daallTab }, i) => `
         <button
           role="tab"
           class="tab"
           aria-selected="false"
           aria-controls="${i}"
+          ${daallTab ? `daa-ll="${daallTab}"` : ''}
         >${name}</button>
       `).join('')}
     </div>
     <div class="tab-content">
-    ${tabs.map(({ links }, i) => `
+    ${tabs.map(({ links, daalhTabContent }, i) => `
         <div
           id="${i}"
           role="tabpanel"
           aria-labelledby="${i}"
+          ${daalhTabContent ? `daa-lh="${daalhTabContent}"` : ''}
           hidden
         >
       ${links}