Moving the logic into merch.js

adobecom · Jan 24, 2025 · 035f8b2 · 035f8b2
1 parent b1baae5
commit 035f8b2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 33 deletions.
diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
@@ -706,25 +706,6 @@ export default async function init(el) {
   }
   el.replaceWith(merchCard);
   decorateMerchCardLinkAnalytics(merchCard);
-
-  // Adding aria-label for checkout-link using productFamily as placeholder key and card-heading
-  if (ctas) {
-    const ctaLinks = ctas.querySelectorAll('a');
-    ctaLinks.forEach(async (ctaLink) => {
-      if (!ctaLink.getAttribute('aria-label')) {
-        const { replaceKey } = await import('../../features/placeholders.js');
-        ctaLink.addEventListener('mas:resolved', async () => {
-          const productName = ctaLink.value[0]?.productArrangement?.productFamily;
-          if (productName) {
-            await replaceKey(productName, getConfig()).then((label) => {
-              const cardHeading = merchCard.querySelector('.card-heading')?.textContent;
-              const ariaLabel = label.toLowerCase() === cardHeading.toLowerCase() ? `${ctaLink.textContent} - ${cardHeading}` : `${ctaLink.textContent} - ${label} - ${cardHeading}`;
-              ctaLink.setAttribute('aria-label', ariaLabel);
-            });
-          }
-        });
-      }
-    });
-  }
+
   return merchCard;
 }
diff --git a/libs/blocks/merch/merch.js b/libs/blocks/merch/merch.js
@@ -721,6 +721,21 @@ export async function buildCta(el, params) {
       reopenModal(cta);
     });
   }
+
+  // Adding aria-label for checkout-link using productFamily as placeholder key and card-heading
+  if (!cta.getAttribute('aria-label')) {
+    cta.onceSettled().finally(async () => {
+      const productName = cta.value[0]?.productArrangement?.productFamily;
+      const merchCard = cta.closest('merch-card');
+      if (productName) {
+        await replaceKey(productName, getConfig()).then((label) => {
+          const cardHeading = merchCard ? ` - ${merchCard.querySelector('.card-heading')?.textContent}` : '';
+          const ariaLabel = label.toLowerCase() === cardHeading?.toLowerCase() ? `${cta.textContent}${cardHeading}` : `${cta.textContent} - ${label}${cardHeading}`;
+          cta.setAttribute('aria-label', ariaLabel);
+        });
+      }
+    });
+  }
   return cta;
 }
 

diff --git a/test/blocks/merch-card/merch-card.test.js b/test/blocks/merch-card/merch-card.test.js
@@ -576,17 +576,4 @@ describe('Product Merch Card', () => {
     const lowerBodySlot = merchCard.querySelector('[slot="body-lower"]');
     expect(lowerBodySlot).to.exist;
   });
-
-  describe('Aria Label', () => {
-    it('Supports aria-label', async () => {
-      document.body.innerHTML = await readMockText('/test/blocks/merch-card/mocks/product.html');
-      const merchCard = await init(document.querySelector('.product'));
-      await delay();
-      const ctaLink = merchCard.querySelector('.action-area a');
-      ctaLink.value = [{ productArrangement: { productFamily: 'ARIA' } }];
-      ctaLink.dispatchEvent(new Event('mas:resolved'));
-      await delay();
-      expect(ctaLink.getAttribute('aria-label')).to.exist;
-    });
-  });
 });