MWPW-163515: add daa-ll attributes for new mobile gnav elements

libs/blocks/global-navigation/global-navigation.js

@@ -386,7 +386,8 @@ class Gnav {
       localNav = toFragment`<div class="feds-localnav"/>`;
       this.block.after(localNav);
     }
-    localNav.append(toFragment`<button class="feds-navLink--hoverCaret feds-localnav-title" aria-haspopup="true" aria-expanded="false"></button>`, toFragment` <div class="feds-localnav-curtain"></div>`, toFragment` <div class="feds-localnav-items"></div>`, toFragment`<a href="#" class="feds-sr-only feds-localnav-exit">.</a>`);
+    localNav.setAttribute('daa-lh', `${title}_localNav`);
+    localNav.append(toFragment`<button class="feds-navLink--hoverCaret feds-localnav-title" aria-haspopup="true" aria-expanded="false" daa-ll="${title}_localNav|open"></button>`, toFragment` <div class="feds-localnav-curtain"></div>`, toFragment` <div class="feds-localnav-items"></div>`, toFragment`<a href="#" class="feds-sr-only feds-localnav-exit">.</a>`);
 
     const itemWrapper = localNav.querySelector('.feds-localnav-items');
     const titleLabel = await replaceKey('overview', getFedsPlaceholderConfig());
@@ -408,6 +409,7 @@ class Gnav {
       document.body.classList.toggle('disable-scroll');
       const isActive = localNav.classList.contains('feds-localnav--active');
       localNav.querySelector('.feds-localnav-title').setAttribute('aria-expanded', isActive);
+      localNav.querySelector('.feds-localnav-title').setAttribute('daa-ll', `${title}_localNav|${isActive ? 'close' : 'open'}`);
     });
 
     localNav.querySelector('.feds-localnav-curtain').addEventListener('click', (e) => {
@@ -1001,23 +1003,38 @@ class Gnav {
         ].find((el) => (el.href === url || el.href.startsWith(`${url}?`) || el.href.startsWith(`${url}#`)));
         const tabIndex = activeLink ? +activeLink.parentNode.id : 0;
         const selectTab = popup.querySelectorAll('.tab')[tabIndex];
+        const daallTab = selectTab.getAttribute('daa-ll');
+        selectTab.setAttribute('daa-ll', `${daallTab.replace('click', 'open')}`);
         selectTab?.click();
+        selectTab.setAttribute('daa-ll', `${daallTab.replace('open', 'click')}`);
         selectTab?.focus();
       }, 100);
     };
 
+    function observeDropdown(dropdownTrigger) {
+      const observer = new MutationObserver(() => {
+        const isExpanded = dropdownTrigger.getAttribute('aria-expanded') === 'true';
+        const analyticsValue = `header|${isExpanded ? 'Close' : 'Open'}`;
+        dropdownTrigger.setAttribute('daa-lh', analyticsValue);
+      });
+      observer.observe(dropdownTrigger, { attributeFilter: ['aria-expanded'] });
+    }
+
     // Copying dropdown contents to localNav items
     const decorateLocalNavItems = (navItem, template) => {
       const elements = [...document.querySelectorAll('.feds-localnav .feds-navItem')].find(
         (el) => el.textContent.trim() === navItem.textContent,
       );
       if (elements) {
         elements.innerHTML = template.innerHTML;
-        // Reattach click events, as cloned elem don't retain event listeners
+        // Reattach click events & mutation observers, as cloned elem don't retain event listeners
         elements.querySelector('.feds-localnav-items button')?.addEventListener('click', (e) => {
           trigger({ element: e.currentTarget, event: e, type: 'localNavItem' });
         });
 
+        const dropdownTrigger = elements.querySelector('.feds-localnav-items button[aria-expanded]');
+        if (dropdownTrigger) observeDropdown(dropdownTrigger);
+
         elements.querySelectorAll('.feds-menu-headline').forEach((elem) => {
           // Reattach click event listener to headlines
           elem?.setAttribute('role', 'button');
@@ -1092,8 +1109,9 @@ class Gnav {
         const isSectionMenu = item.closest('.section') instanceof HTMLElement;
         const tag = isSectionMenu ? 'section' : 'div';
         const sectionModifier = isSectionMenu ? ' feds-navItem--section' : '';
+        const sectionDaaLh = isSectionMenu ? ` daa-lh='${getAnalyticsValue(item.textContent)}'` : '';
         const triggerTemplate = toFragment`
-          <${tag} class="feds-navItem${sectionModifier}${activeModifier}">
+          <${tag} class="feds-navItem${sectionModifier}${activeModifier}" ${sectionDaaLh}>
             ${dropdownTrigger}
           </${tag}>`;
 
@@ -1108,12 +1126,7 @@ class Gnav {
         });
 
         // Update analytics value when dropdown is expanded/collapsed
-        const observer = new MutationObserver(() => {
-          const isExpanded = dropdownTrigger.getAttribute('aria-expanded') === 'true';
-          const analyticsValue = `header|${isExpanded ? 'Close' : 'Open'}`;
-          dropdownTrigger.setAttribute('daa-lh', analyticsValue);
-        });
-        observer.observe(dropdownTrigger, { attributeFilter: ['aria-expanded'] });
+        observeDropdown(dropdownTrigger);
 
         delayDropdownDecoration({ template: triggerTemplate });
         return addMepHighlightAndTargetId(triggerTemplate, item);

libs/blocks/global-navigation/utilities/utilities.js

@@ -430,7 +430,7 @@ export const transformTemplateToMobile = async (popup, item, localnav = false) =
     });
   const CTA = popup.querySelector('.feds-cta')?.outerHTML ?? '';
   const mainMenu = `
-      <span class="main-menu">
+      <span class="main-menu" daa-ll="Main menu_Gnav">
         <svg xmlns="http://www.w3.org/2000/svg" width="7" height="12" viewBox="0 0 7 12" fill="none"><path d="M5.55579 1L1.09618 5.45961C1.05728 5.4985 1.0571 5.56151 1.09577 5.60062L5.51027 10.0661" stroke=${isDarkMode() ? '#f2f2f2' : 'black'} stroke-width="2" stroke-linecap="round"/></svg>
         {{main-menu}}
       </span>
@@ -440,7 +440,7 @@ export const transformTemplateToMobile = async (popup, item, localnav = false) =
   popup.innerHTML = `
     <div class="top-bar">
       ${localnav ? brand : await replaceText(mainMenu, getFedsPlaceholderConfig())}
-      <span class="close-icon">
+      <span class="close-icon" daa-ll="Close button_SubNav">
         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
           <path d="M1.5 1L13 12.5" stroke=${isDarkMode() ? '#f2f2f2' : 'black'} stroke-width="1.7037" stroke-linecap="round"/>
           <path d="M13 1L1.5 12.5" stroke=${isDarkMode() ? '#f2f2f2' : 'black'} stroke-width="1.7037" stroke-linecap="round"/>
@@ -458,7 +458,7 @@ export const transformTemplateToMobile = async (popup, item, localnav = false) =
           class="tab"
           aria-selected="false"
           aria-controls="${i}"
-          ${daallTab ? `daa-ll="${daallTab}"` : ''}
+          ${daallTab ? `daa-ll="${daallTab}|click"` : ''}
         >${name}</button>
       `).join('')}
     </div>

libs/utils/federated.js

@@ -12,7 +12,7 @@ export const getFederatedContentRoot = () => {
   ];
   const { allowedOrigins = [], origin: configOrigin } = getConfig();
   if (federatedContentRoot) return federatedContentRoot;
-  // Non milo consumers will have its origin from congig
+  // Non milo consumers will have its origin from config
   const origin = configOrigin || window.location.origin;
 
   federatedContentRoot = [...allowedOrigins, ...cdnWhitelistedOrigins].some((o) => origin.replace('.stage', '') === o)