MWPW-162956: Setting accessibleLabel as sr-only

libs/features/mas/src/inline-price.js

@@ -3,6 +3,8 @@ import {
     updateMasElement,
     MasElement,
 } from './mas-element.js';
+import { getPriceLiterals } from './literals.js';
+import IntlMessageFormat from 'intl-messageformat';
 import { selectOffers, useService } from './utilities.js';
 
 // countries where tax is displayed for all segments by default
@@ -276,7 +278,7 @@ export class InlinePrice extends HTMLSpanElement {
      * Optional object with properties to use as overrides
      * over those collected from dataset of this component.
      */
-    renderOffers(offers, overrides = {}, version = undefined) {
+    async renderOffers(offers, overrides = {}, version = undefined) {
         if (!this.isConnected) return;
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const service = useService();
@@ -292,6 +294,49 @@ export class InlinePrice extends HTMLSpanElement {
         if (offers.length) {
             if (this.masElement.toggleResolved(version, offers, options)) {
                 this.innerHTML = service.buildPriceHTML(offers, options);
+
+                // Adding logic for <sr-only>Alternatively at</sr-only>
+                const htmlPattern = /<\/?[^>]+(>|$)/g;
+                async function formatLiteral(key, parameters) {
+                    const settings = {};
+                    const masCommerceService = document.querySelector('mas-commerce-service');
+                    ['locale', 'country', 'language'].forEach((attribute) => {
+                        const value = masCommerceService?.getAttribute(attribute);
+                        if (value) {
+                            settings[attribute] = value;
+                        }
+                    });
+                    const literals = await getPriceLiterals(settings);
+                    const literal = literals[key];
+                    if (!literal) {
+                        /* c8 ignore next 2 */
+                        return '';
+                    }
+                    const locale = settings.language && settings.country ? `${settings.language?.toLowerCase()}-${settings.country?.toUpperCase()}` : document.body.parentElement.lang;
+                    try {
+                        return new IntlMessageFormat(
+                            literal.replace(htmlPattern, ''),
+                            locale,
+                        ).format(parameters);
+                    } catch {
+                        /* c8 ignore next 2 */
+                        console.error('Failed to format literal:', literal);
+                        return '';
+                    }
+                }
+                const alternativlySRLabelText =  await formatLiteral('alternativePriceAriaLabel', { alternativePrice: '' });
+                const alternativlySRLabel = document.createElement('sr-only');
+                alternativlySRLabel.classList.add('alternative-price-aria-label');
+                alternativlySRLabel.innerHTML = alternativlySRLabelText;
+                if (alternativlySRLabelText) {
+                    const parentEl = this.closest('.col') ?? this.closest('merch-card') ?? this.closest('p')
+                    if (this.querySelectorAll('.price').length === 2 && this.querySelector('.price-strikethrough')) {
+                        this.querySelector('.price:not(.price-strikethrough)')?.before(alternativlySRLabel);
+                    } else if(parentEl?.querySelectorAll('span[is="inline-price"]').length > 1 && !parentEl.querySelector('.alternative-price-aria-label')) {
+                        const alternativePriceEl = parentEl.querySelector('span[is="inline-price"]:not(span[data-template="strikethrough"])');
+                        alternativePriceEl.prepend(alternativlySRLabel);
+                    }
+                }
                 return true;
             }
         } else {

libs/features/mas/src/price/index.js

@@ -15,6 +15,9 @@ const priceOptical = createPriceTemplate({
 const priceStrikethrough = createPriceTemplate({
     displayStrikethrough: true,
 });
+const priceAlternative = createPriceTemplate({
+    displayStrikethroughNext: true,
+});
 const priceAnnual = createPriceTemplate({
     displayAnnual: true,
 });
@@ -26,6 +29,7 @@ export {
     pricePromo,
     priceOptical,
     priceStrikethrough,
+    priceAlternative,
     priceAnnual,
     priceWithAnnual,
     pricePromoWithAnnual,

libs/features/mas/src/price/template.js

@@ -32,8 +32,8 @@ export const defaultLiterals = {
         '{taxTerm, select, GST {excl. GST} VAT {excl. VAT} TAX {excl. tax} IVA {excl. IVA} SST {excl. SST} KDV {excl. KDV} other {}}',
     taxInclusiveLabel:
         '{taxTerm, select, GST {incl. GST} VAT {incl. VAT} TAX {incl. tax} IVA {incl. IVA} SST {incl. SST} KDV {incl. KDV} other {}}',
-    alternativePriceAriaLabel: 'Alternatively at {alternativePrice}',
-    strikethroughAriaLabel: 'Regularly at {strikethroughPrice}',
+    alternativePriceAriaLabel: 'Alternatively at',
+    strikethroughAriaLabel: 'Regularly at',
 };
 
 const log = createLog('ConsonantTemplates/price');
@@ -65,6 +65,7 @@ const literalKeys = {
     taxExclusiveLabel: 'taxExclusiveLabel',
     taxInclusiveLabel: 'taxInclusiveLabel',
     strikethroughAriaLabel: 'strikethroughAriaLabel',
+    alternativePriceAriaLabel: 'alternativePriceAriaLabel'
 };
 const WCS_TAX_DISPLAY_EXCLUSIVE = 'TAX_EXCLUSIVE';
 
@@ -136,11 +137,10 @@ function renderContainer(
         taxInclusivityLabel,
         true,
     );
-
-    return renderSpan(cssClass, markup, {
+    const regularlySRLabel = accessibleLabel ? `<sr-only class="strikethrough-aria-label">${accessibleLabel}</sr-only>` : '';
+    return `${regularlySRLabel}${renderSpan(cssClass, markup, {
         ...attributes,
-        ['aria-label']: accessibleLabel,
-    });
+    })}`;
 }
 
 /**
@@ -242,19 +242,10 @@ const createPriceTemplate =
             usePrecision,
         });
 
-        let accessibleLabel = accessiblePrice;
+        let accessibleLabel = '';
 
         let recurrenceLabel = '';
         if (toBoolean(displayRecurrence) && recurrenceTerm) {
-            const recurrenceAccessibleLabel = formatLiteral(
-                literalKeys.recurrenceAriaLabel,
-                {
-                    recurrenceTerm,
-                },
-            );
-            if (recurrenceAccessibleLabel) {
-                accessibleLabel += ' ' + recurrenceAccessibleLabel;
-            }
             recurrenceLabel = formatLiteral(literalKeys.recurrenceLabel, {
                 recurrenceTerm,
             });
@@ -265,13 +256,6 @@ const createPriceTemplate =
             perUnitLabel = formatLiteral(literalKeys.perUnitLabel, {
                 perUnit: 'LICENSE',
             });
-            const perUnitAriaLabel = formatLiteral(
-                literalKeys.perUnitAriaLabel,
-                { perUnit: 'LICENSE' },
-            );
-            if (perUnitAriaLabel) {
-                accessibleLabel += ' ' + perUnitAriaLabel;
-            }
         }
 
         let taxInclusivityLabel = '';
@@ -282,9 +266,6 @@ const createPriceTemplate =
                     : literalKeys.taxInclusiveLabel,
                 { taxTerm },
             );
-            if (taxInclusivityLabel) {
-                accessibleLabel += ' ' + taxInclusivityLabel;
-            }
         }
 
         if (displayStrikethrough) {

libs/styles/styles.css

@@ -742,7 +742,7 @@ header.global-navigation + .feds-localnav {
   height: var(--global-height-navPromo);
 }
 
-.feds-sr-only {
+sr-only, .feds-sr-only {
   position: absolute;
   width: 1px;
   height: 1px;