[Release] Stage to Main (#3615)

codecov.yaml

@@ -3,8 +3,11 @@ coverage:
     patch:
       default:
         target: 90%
-        threshold: 0.1%
+        threshold: 0.5%
     project:
       default:
         target: auto
-        threshold: 0.1%
+        threshold: 0.5%
+   ignore:
+      - "!libs/"
+      - "libs/deps/"

libs/blocks/marketo/marketo.js

@@ -22,6 +22,7 @@ import {
   getConfig,
   createIntersectionObserver,
   SLD,
+  MILO_EVENTS,
 } from '../../utils/utils.js';
 
 const ROOT_MARGIN = 50;
@@ -54,6 +55,7 @@ export const decorateURL = (destination, baseURL = window.location) => {
     let destinationUrl = new URL(destination, baseURL.origin);
     const { hostname, pathname, search, hash } = destinationUrl;
 
+    /* c8 ignore next 3 */
     if (!hostname) {
       throw new Error('URL does not have a valid host');
     }
@@ -94,36 +96,31 @@ export const setPreferences = (formData) => {
   Object.entries(formData).forEach(([key, value]) => setPreference(key, value));
 };
 
-const showSuccessSection = (formData, scroll = true) => {
-  const show = (el) => {
-    el.classList.remove('hide-block');
-    if (scroll) el.scrollIntoView({ behavior: 'smooth' });
+const showSuccessSection = (formData) => {
+  const show = (sections) => {
+    sections.forEach((section) => section.classList.remove('hide-block'));
+    sections[0]?.scrollIntoView({ behavior: 'smooth' });
   };
   const successClass = formData[SUCCESS_SECTION]?.toLowerCase().replaceAll(' ', '-');
   if (!successClass) {
     window.lana?.log('Error showing Marketo success section', { tags: 'warn,marketo' });
     return;
   }
-  const section = document.querySelector(`.section.${successClass}`);
-  if (section) {
-    show(section);
-    return;
-  }
-  // For Marquee use case
-  const maxIntervals = 6;
-  let count = 0;
-  const interval = setInterval(() => {
-    const el = document.querySelector(`.section.${successClass}`);
-    if (el) {
-      clearInterval(interval);
-      show(el);
-    }
-    count += 1;
-    if (count > maxIntervals) {
-      clearInterval(interval);
-      window.lana?.log('Error showing Marketo success section', { tags: 'warn,marketo' });
-    }
-  }, 500);
+
+  let successSections = document.querySelectorAll(`.section.${successClass}`);
+  show(successSections);
+  document.addEventListener(
+    MILO_EVENTS.DEFERRED,
+    () => {
+      successSections = document.querySelectorAll(`.section.${successClass}`);
+      show(successSections);
+      /* c8 ignore next 3 */
+      if (!document.querySelector(`.section.${successClass}`)) {
+        window.lana?.log(`Error showing Marketo success section ${successClass}`, { tags: 'warn,marketo' });
+      }
+    },
+    false,
+  );
 };
 
 export const formSuccess = (formEl, formData) => {
@@ -229,7 +226,7 @@ export default function init(el) {
 
   if (formData[SUCCESS_TYPE] === 'section' && ungated) {
     el.classList.add('hide-block');
-    showSuccessSection(formData, true);
+    showSuccessSection(formData);
     return;
   }
 

libs/blocks/merch-card/merch-card.js

@@ -626,6 +626,17 @@ export default async function init(el) {
         actionMenuContent.innerHTML,
       ),
     );
+    merchCard.addEventListener('focusin', () => {
+      const actionMenu = merchCard.shadowRoot.querySelector('.action-menu');
+      actionMenu.classList.add('always-visible');
+    });
+    merchCard.addEventListener('focusout', (e) => {
+      if (!e.target.href || e.target.src || e.target.parentElement.classList.contains('card-heading')) {
+        return;
+      }
+      const actionMenu = merchCard.shadowRoot.querySelector('.action-menu');
+      actionMenu.classList.remove('always-visible');
+    });
   }
   let ctas = el.querySelector('p > strong a, p > em a')?.closest('p');
   if (!ctas) {

libs/blocks/table/table.css

@@ -323,25 +323,28 @@
 
 /* icons */
 .table:not(.merch) .row .col span.milo-tooltip {
-  margin-left: var(--spacing-xs);
-  margin-right: 0;
+  margin-right: -4px;
 }
 
 [dir='rtl'] .table:not(.merch) .row .col span.milo-tooltip {
-  margin-left: 0;
-  margin-right: var(--spacing-xs);
+  margin-right: 0;
+  margin-left: -4px;
+}
+
+.table .milo-tooltip svg {
+  top: unset;
 }
 
 .table .icon-milo-info {
   height: 16px;
 }
 
-.table .icon-milo-info:hover {
+.table .icon-info:hover {
   cursor: pointer;
 }
 
-.table .icon-milo-info:hover path,
-.table .active .icon-milo-info path {
+.table .icon-info:hover path,
+.table .active .icon-info path {
   color: var(--hover-border-color);
 }
 

libs/blocks/table/table.js

@@ -1,7 +1,8 @@
 /* eslint-disable no-plusplus */
-import { createTag, MILO_EVENTS } from '../../utils/utils.js';
+import { createTag, getConfig, MILO_EVENTS } from '../../utils/utils.js';
 import { decorateButtons } from '../../utils/decorate.js';
 import { debounce } from '../../utils/action.js';
+import { replaceKeyArray } from '../../features/placeholders.js';
 
 const DESKTOP_SIZE = 900;
 const MOBILE_SIZE = 768;
@@ -90,10 +91,9 @@ function handleHeading(table, headingCols) {
       const describedBy = `${headerBody?.id ?? ''} ${headerPricing?.id ?? ''}`.trim();
       trackingHeader.setAttribute('aria-describedby', describedBy);
 
-      col.removeAttribute('role');
+      col.setAttribute('role', 'columnheader');
     }
 
-    nodeToApplyRoleScope.setAttribute('role', 'columnheader');
     nodeToApplyRoleScope.setAttribute('scope', 'col');
   });
 }
@@ -153,6 +153,24 @@ function handleAddOnContent(table) {
   table.addEventListener('mas:resolved', debounce(() => { handleEqualHeight(table, '.row-heading'); }));
 }
 
+async function setAriaLabelForIcons(el) {
+  const config = getConfig();
+  const expendableIcons = el.querySelectorAll('.icon.expand[role="button"]');
+  const selectFilters = el.parentElement.querySelectorAll('.filters .filter');
+  const ariaLabelElements = [...selectFilters, ...expendableIcons];
+
+  if (!ariaLabelElements.length) {
+    return;
+  }
+
+  const ariaLabels = await replaceKeyArray(['toggle-row', 'choose-table-column'], config);
+
+  ariaLabelElements.forEach((element) => {
+    const labelIndex = element.classList.contains('filter') ? 1 : 0;
+    element.setAttribute('aria-label', ariaLabels[labelIndex]);
+  });
+}
+
 function handleHighlight(table) {
   const isHighlightTable = table.classList.contains('highlight');
   const firstRow = table.querySelector('.row-1');
@@ -255,7 +273,7 @@ function handleSection(sectionParams) {
     }
 
     if (isCollapseTable) {
-      const iconTag = createTag('span', { class: 'icon expand' });
+      const iconTag = createTag('span', { class: 'icon expand', role: 'button' });
       if (!sectionHeadTitle.querySelector('.icon.expand')) {
         sectionHeadTitle.prepend(iconTag);
       }
@@ -602,6 +620,7 @@ export default function init(el) {
     });
 
     isDecorated = true;
+    setAriaLabelForIcons(el);
   };
 
   window.addEventListener(MILO_EVENTS.DEFERRED, () => {

libs/blocks/tabs/tabs.css

@@ -554,4 +554,9 @@
   .tabs.stacked-mobile.quiet div[role="tablist"] button {
     margin-inline-start: 0;
   }
+
+  .tabs[class*='stacked-mobile'] .paddle {
+    background: unset;
+    border: none;
+  }
 }

libs/blocks/tabs/tabs.js

@@ -67,7 +67,8 @@ function changeTabs(e) {
   const parent = target.parentNode;
   const content = parent.parentNode.parentNode.lastElementChild;
   const targetContent = content.querySelector(`#${target.getAttribute('aria-controls')}`);
-  const blockId = target.closest('.tabs').id;
+  const tabsBlock = target.closest('.tabs');
+  const blockId = tabsBlock.id;
   parent
     .querySelectorAll(`[aria-selected="true"][data-block-id="${blockId}"]`)
     .forEach((t) => t.setAttribute('aria-selected', false));
@@ -77,7 +78,7 @@ function changeTabs(e) {
     .querySelectorAll(`[role="tabpanel"][data-block-id="${blockId}"]`)
     .forEach((p) => p.setAttribute('hidden', true));
   targetContent.removeAttribute('hidden');
-  scrollStackedMobile(targetContent);
+  if (tabsBlock.classList.contains('stacked-mobile')) scrollStackedMobile(targetContent);
 }
 
 function getStringKeyName(str) {