From 9f96bd7a04fa4b6f5e2068a6fc66631e328f3137 Mon Sep 17 00:00:00 2001
From: Sean Choi <seanchoi@adobe.com>
Date: Wed, 22 Jan 2025 09:27:46 -0700
Subject: [PATCH] Adding aria-label for checkout-link using productFamily as
 placeholder key

---
 libs/blocks/merch-card/merch-card.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
index 6edd04972a..af6973cca6 100644
--- a/libs/blocks/merch-card/merch-card.js
+++ b/libs/blocks/merch-card/merch-card.js
@@ -706,10 +706,17 @@ export default async function init(el) {
   }
   el.replaceWith(merchCard);
   decorateMerchCardLinkAnalytics(merchCard);
+
+  // Adding aria-label for checkout-link using productFamily as placeholder key
   const ctaLink = ctas?.querySelector('a');
-  if (merchCard.name && ctaLink) {
+  if (ctaLink && !ctaLink.getAttribute('aria-label')) {
     const { replaceKey } = await import('../../features/placeholders.js');
-    await replaceKey(merchCard.name, getConfig()).then((key) => ctaLink.setAttribute('aria-label', `${ctaLink.textContent} ${key}`));
+    ctaLink.addEventListener('mas:resolved', async () => {
+      const productName = ctaLink.value[0]?.productArrangement?.productFamily;
+      if (productName) {
+        await replaceKey(productName, getConfig()).then((key) => ctaLink.setAttribute('aria-label', `${ctaLink.textContent} - ${key}`));
+      }
+    });
   }
   return merchCard;
 }