MWPW-164131: Adding aria label for CTA using placeholder on name attributes of merch card

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

@@ -706,5 +706,25 @@ 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;
 }

test/blocks/merch-card/merch-card.test.js

@@ -576,4 +576,17 @@ 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;
+    });
+  });
 });