MWPW-164131: Adding aria label for CTA using placeholder on name attr…

…ibutes of merch card (#3505)

* Adding aria label for CTA using placeholder on name attributes of the card.

* Adding aria-label for checkout-link using productFamily as placeholder key

* change the key to label

* adding card-heading

* adding unit test for aria-label

* nit adding hypens

* new logic for catalog

* change the logic: checking URL to matching

* update the test to avoid fail

* nit: remove console.log

* use cardheading instead label when they are same

* Moving the logic into merch.js

* nit:remove trailing space

* Using customerSegment from WCS.

* nit: comment update

* Using placeholder for customer segment.

* Adding EDU as special use case

libs/blocks/merch/merch.js

@@ -721,6 +721,19 @@ export async function buildCta(el, params) {
       reopenModal(cta);
     });
   }
+
+  // Adding aria-label for checkout-link using productFamily and customerSegment as placeholder key.
+  if (!cta.getAttribute('aria-label')) {
+    cta.onceSettled().finally(async () => {
+      const productFamily = cta.value[0]?.productArrangement?.productFamily;
+      const marketSegment = cta.value[0]?.marketSegments[0];
+      const customerSegment = marketSegment === 'EDU' ? marketSegment : cta.value[0]?.customerSegment;
+      let ariaLabel = cta.textContent;
+      ariaLabel = productFamily ? `${ariaLabel} - ${await replaceKey(productFamily, getConfig())}` : ariaLabel;
+      ariaLabel = customerSegment ? `${ariaLabel} - ${await replaceKey(customerSegment, getConfig())}` : ariaLabel;
+      cta.setAttribute('aria-label', ariaLabel);
+    });
+  }
   return cta;
 }