feat: Screen reader /mo for messages and modals (DTCRCMERC-1941) (#980)

paypal · Sep 26, 2023 · 507709e · 507709e
1 parent cd574dd
commit 507709e
Show file tree

Hide file tree

Showing 24 changed files with 71 additions and 20 deletions.
diff --git a/content/messages/US/long_term_multi_eqz.json b/content/messages/US/long_term_multi_eqz.json
@@ -19,7 +19,12 @@
     "headline": [
         ["Buy now, pay later.", ["default", "xsmall"]],
         ["Buy now and pay later.", ["xsmall.2"]],
-        [["As low as ${formattedMonthlyPayment}/mo at 0% APR."], ["small", "medium", "large", "xlarge"]]
+        [
+            [
+                "As low as ${formattedMonthlyPayment}/<span aria-hidden='true'>mo</span><span class='sr-only'>month</span> at 0% APR."
+            ],
+            ["small", "medium", "large", "xlarge"]
+        ]
     ],
     "subHeadline": [],
     "disclaimer": [["<span aria-hidden='true'>Learn more</span><span class='sr-only'> Learn more</span>", ["default"]]]

diff --git a/content/messages/US/long_term_multi_eqz_mixed.json b/content/messages/US/long_term_multi_eqz_mixed.json
@@ -19,7 +19,12 @@
     "headline": [
         ["Buy now, pay later.", ["default", "xsmall"]],
         ["Buy now and pay later.", ["xsmall.2"]],
-        [["As low as ${formattedMonthlyPayment}/mo or 0% APR."], ["small", "medium", "large", "xlarge"]]
+        [
+            [
+                "As low as ${formattedMonthlyPayment}/<span aria-hidden='true'>mo</span><span class='sr-only'>month</span> or 0% APR."
+            ],
+            ["small", "medium", "large", "xlarge"]
+        ]
     ],
     "subHeadline": [],
     "disclaimer": [["<span aria-hidden='true'>Learn more</span><span class='sr-only'> Learn more</span>", ["default"]]]

diff --git a/content/messages/US/long_term_multi_gtz.json b/content/messages/US/long_term_multi_gtz.json
@@ -19,7 +19,12 @@
     "headline": [
         ["Buy now, pay later.", ["default", "xsmall"]],
         ["Buy now and pay later.", ["xsmall.2"]],
-        [["As low as ${formattedMonthlyPayment}/mo."], ["small", "medium", "large", "xlarge"]]
+        [
+            [
+                "As low as ${formattedMonthlyPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span>"
+            ],
+            ["small", "medium", "large", "xlarge"]
+        ]
     ],
     "subHeadline": [],
     "disclaimer": [["<span aria-hidden='true'>Learn more</span><span class='sr-only'> Learn more</span>", ["default"]]]

diff --git a/content/messages/US/long_term_single_eqz.json b/content/messages/US/long_term_single_eqz.json
@@ -20,7 +20,9 @@
         ["Buy now, pay later.", ["default", "xsmall"]],
         ["Buy now and pay later.", ["xsmall.2"]],
         [
-            ["Make ${total_payments} payments of ${formattedMonthlyPayment}/mo at 0% APR."],
+            [
+                "Make ${total_payments} payments of ${formattedMonthlyPayment}/<span aria-hidden='true'>mo</span><span class='sr-only'>month</span> at 0% APR."
+            ],
             ["small", "medium", "large", "xlarge"]
         ]
     ],

diff --git a/content/messages/US/long_term_single_eqz_mixed.json b/content/messages/US/long_term_single_eqz_mixed.json
@@ -20,7 +20,9 @@
         ["Buy now, pay later.", ["default", "xsmall"]],
         ["Buy now and pay later.", ["xsmall.2"]],
         [
-            ["Make ${total_payments} payments of ${formattedMonthlyPayment}/mo or 0% APR."],
+            [
+                "Make ${total_payments} payments of ${formattedMonthlyPayment}/<span aria-hidden='true'>mo</span><span class='sr-only'>month</span> or 0% APR."
+            ],
             ["small", "medium", "large", "xlarge"]
         ]
     ],

diff --git a/content/messages/US/long_term_single_gtz.json b/content/messages/US/long_term_single_gtz.json
@@ -19,7 +19,12 @@
     "headline": [
         ["Buy now, pay later.", ["default", "xsmall"]],
         ["Buy now and pay later.", ["xsmall.2"]],
-        [["Make ${total_payments} payments of ${formattedMonthlyPayment}/mo."], ["small", "medium", "large", "xlarge"]]
+        [
+            [
+                "Make ${total_payments} payments of ${formattedMonthlyPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span>"
+            ],
+            ["small", "medium", "large", "xlarge"]
+        ]
     ],
     "subHeadline": [],
     "disclaimer": [["<span aria-hidden='true'>Learn more</span><span class='sr-only'> Learn more</span>", ["default"]]]

diff --git a/content/messages/US/ppc_ezp_multi_eqz.json b/content/messages/US/ppc_ezp_multi_eqz.json
@@ -15,11 +15,18 @@
     },
     "headline": [
         [
-            [["As low as", "weak"], "{formattedMonthlyPayment}/mo.", ["at 0% APR.", "weakest"]],
+            [
+                ["As low as", "weak"],
+                "{formattedMonthlyPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span>",
+                ["at 0% APR.", "weakest"]
+            ],
             ["default", "small"]
         ],
         [
-            [["Pay as low as", "weak"], "{formattedMonthlyPayment}/mo. at 0% APR"],
+            [
+                ["Pay as low as", "weak"],
+                "{formattedMonthlyPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span> at 0% APR"
+            ],
             ["small.2", "medium", "large", "xlarge"]
         ],
         ["Enjoy Easy Payments.", ["legacy-small"]],

diff --git a/content/messages/US/ppc_ezp_multi_gtz.json b/content/messages/US/ppc_ezp_multi_gtz.json
@@ -15,11 +15,17 @@
     },
     "headline": [
         [
-            [["As low as", "weak"], "{formattedMonthlyPayment}/mo."],
+            [
+                ["As low as", "weak"],
+                "{formattedMonthlyPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span>"
+            ],
             ["default", "xsmall"]
         ],
         [
-            [["Pay as low as", "weak"], "{formattedMonthlyPayment}/mo."],
+            [
+                ["Pay as low as", "weak"],
+                "{formattedMonthlyPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span>"
+            ],
             ["small", "medium", "large", "xlarge"]
         ],
         ["Enjoy Easy Payments.", ["legacy-xsmall"]]

diff --git a/content/messages/US/ppc_ezp_single_eqz.json b/content/messages/US/ppc_ezp_single_eqz.json
@@ -15,7 +15,11 @@
     },
     "headline": [
         [
-            [["Make {total_payments} payments of", "weak"], "{formattedMonthlyPayment}/mo.", ["at 0% APR.", "weakest"]],
+            [
+                ["Make {total_payments} payments of", "weak"],
+                "{formattedMonthlyPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span>",
+                ["at 0% APR.", "weakest"]
+            ],
             ["default", "small"]
         ],
         ["Enjoy Easy Payments.", ["legacy-xsmall"]],

diff --git a/content/messages/US/ppc_ezp_single_gtz.json b/content/messages/US/ppc_ezp_single_gtz.json
@@ -15,7 +15,10 @@
     },
     "headline": [
         [
-            [["Make {total_payments} payments of", "weak"], "{formattedMonthlyPayment}/mo."],
+            [
+                ["Make {total_payments} payments of", "weak"],
+                "{formattedMonthlyPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span>"
+            ],
             ["default", "small"]
         ],
         ["Enjoy Easy Payments.", ["legacy-xsmall"]]

diff --git a/content/offers/US/v2_long_term.json b/content/offers/US/v2_long_term.json
@@ -39,7 +39,7 @@
             "nonZeroAPR": "*APR is 9.99% to 29.99% based on your credit. Terms may vary based on purchase amount."
         },
         "termsLabel": {
-            "offerHeader": "{formattedPeriodicPayment}/mo. for {total_payments} months",
+            "offerHeader": "{formattedPeriodicPayment}/<span aria-hidden='true'>mo.</span><span class='sr-only'>month.</span> for {total_payments} months",
             "zeroApr": "APR",
             "nonZeroApr": "<span aria-hidden='true'>Est. APR*</span><span class='sr-only'>Estimated APR, see star for more details below.</span>",
             "totalInterest": "Interest",

diff --git a/src/components/modal/v2/parts/OfferCard.jsx b/src/components/modal/v2/parts/OfferCard.jsx
@@ -5,11 +5,13 @@ const OfferCard = ({ offer: { content, meta } }) => {
     const { termsLabel } = content;
     const aprRemoveTrailingZeros = meta?.apr.replace(/\D00$/, '');
     const aprFieldTitle = aprRemoveTrailingZeros === '0' ? termsLabel?.zeroApr : termsLabel?.nonZeroApr;
+    const offerHeaderField = termsLabel?.offerHeader;
 
     return (
         <div className="offer__container">
             <div className="offer__row">
-                <strong className="offer__field-header">{termsLabel.offerHeader}</strong>
+                {/* eslint-disable-next-line react/no-danger */}
+                <strong className="offer__field-header" dangerouslySetInnerHTML={{ __html: offerHeaderField }} />
             </div>
             <div className="offer__row">
                 <div className="offer__field-col">

diff --git a/src/server/locale/US/PAY_LATER_LONG_TERM/mutations/long_term_multi_gtz.js b/src/server/locale/US/PAY_LATER_LONG_TERM/mutations/long_term_multi_gtz.js
@@ -65,7 +65,7 @@ export default {
                 headline: [
                     {
                         tag: 'medium',
-                        br: ['mo.', 'as']
+                        br: ['mo. <span>', 'as']
                     },
                     {
                         tag: 'xsmall'

diff --git a/tests/functional/snapshots/US/DEV0000000PMG/text/text.align-center-600-snap.png b/tests/functional/snapshots/US/DEV0000000PMG/text/text.align-center-600-snap.png
diff --git a/tests/functional/snapshots/US/DEV0000000PMZ/text/text.align-center-600-snap.png b/tests/functional/snapshots/US/DEV0000000PMZ/text/text.align-center-600-snap.png
diff --git a/tests/functional/snapshots/US/DEV0000000PSG/text/text.align-center-600-snap.png b/tests/functional/snapshots/US/DEV0000000PSG/text/text.align-center-600-snap.png
diff --git a/tests/functional/snapshots/US/DEV0000000PSZ/text/text.align-center-600-snap.png b/tests/functional/snapshots/US/DEV0000000PSZ/text/text.align-center-600-snap.png
diff --git a/...snapshots/US/DEV00USLTMQGZ/text/logo.type-alternative_text.size-10-600-snap.png b/...snapshots/US/DEV00USLTMQGZ/text/logo.type-alternative_text.size-10-600-snap.png
diff --git a/tests/functional/snapshots/US/DEV00USLTSQEZ/text/logo.type-none-600-snap.png b/tests/functional/snapshots/US/DEV00USLTSQEZ/text/logo.type-none-600-snap.png
diff --git a/...napshots/US/DEV00USLTSQEZ/text/logo.type-none_text.color-grayscale-600-snap.png b/...napshots/US/DEV00USLTSQEZ/text/logo.type-none_text.color-grayscale-600-snap.png
diff --git a/...apshots/US/DEV00USLTSQEZ/text/logo.type-none_text.color-monochrome-600-snap.png b/...apshots/US/DEV00USLTSQEZ/text/logo.type-none_text.color-monochrome-600-snap.png
diff --git a/...al/snapshots/US/DEV00USLTSQEZ/text/logo.type-none_text.color-white-600-snap.png b/...al/snapshots/US/DEV00USLTSQEZ/text/logo.type-none_text.color-white-600-snap.png
diff --git a/tests/functional/snapshots/US/DEV00USLTSQEZ/text/text.align-right-600-snap.png b/tests/functional/snapshots/US/DEV00USLTSQEZ/text/text.align-right-600-snap.png
diff --git a/tests/functional/v2/testFn/longTerm.js b/tests/functional/v2/testFn/longTerm.js
@@ -46,7 +46,8 @@ export const showCorrectOfferInfo = async (contentWindow, modalContent, testName
     await contentWindow.waitForSelector(contentWrapper);
     await contentWindow.waitForSelector(`${offerRow}:first-child`);
     const offerFieldHeadline = await contentWindow.$eval(offerRow, element => element.innerText);
-    expect(offerFieldHeadline).toContain(modalContent.offerHeadline);
+    const newOfferFieldHeadline = offerFieldHeadline.replace('month.', '').replace(/\n/g, '');
+    expect(newOfferFieldHeadline).toContain(modalContent.offerHeadline);
     await modalSnapshot(testName, contentWindow);
 };
 
@@ -79,7 +80,8 @@ export const updateTermsViaCalc = async (contentWindow, modalContent, testName)
 
     await contentWindow.waitForSelector(`${offerRow}:first-child`);
     const offerFieldHeadline = await contentWindow.$eval(offerRow, element => element.innerText);
-    expect(offerFieldHeadline).toContain(modalContent.updatedOfferHeadline);
+    const newOfferFieldHeadline = offerFieldHeadline.replace('month.', '').replace(/\n/g, '');
+    expect(newOfferFieldHeadline).toContain(modalContent.updatedOfferHeadline);
     await modalSnapshot(testName, contentWindow);
 };
 
@@ -101,7 +103,8 @@ export const showCorrectAPRDisclaimer = async (contentWindow, modalContent, test
     await contentWindow.waitForSelector(contentWrapper);
     await contentWindow.waitForSelector(`${offerRow}:first-child`);
     const offerFieldHeadline = await contentWindow.$eval(offerRow, element => element.innerText);
-    expect(offerFieldHeadline).toContain(modalContent.offerHeadline);
+    const newOfferFieldHeadline = offerFieldHeadline.replace('month.', '').replace(/\n/g, '');
+    expect(newOfferFieldHeadline).toContain(modalContent.offerHeadline);
     await modalSnapshot(testName, contentWindow);
 };
 
@@ -118,7 +121,8 @@ export const showCorrectOfferInfoAccordion = async (contentWindow, modalContent,
     await contentWindow.waitForSelector(openAccordion);
     await contentWindow.waitForSelector(accordionHeaderContainer);
     const accordionOfferFieldHeadline = await contentWindow.$eval(accordionFieldHeader, element => element.innerText);
-    expect(accordionOfferFieldHeadline).toContain(modalContent.offerHeadline);
+    const newOfferFieldHeadline = accordionOfferFieldHeadline.replace('month.', '').replace(/\n/g, '');
+    expect(newOfferFieldHeadline).toContain(modalContent.offerHeadline);
     await modalSnapshot(testName, contentWindow);
 };
 
@@ -152,6 +156,7 @@ export const updateOfferAccordionTermsViaCalc = async (contentWindow, modalConte
     await contentWindow.waitForSelector(openAccordion);
     await contentWindow.waitForSelector(accordionHeaderContainer);
     const accordionOfferFieldHeadline = await contentWindow.$eval(accordionFieldHeader, element => element.innerText);
-    expect(accordionOfferFieldHeadline).toContain(modalContent.updatedOfferHeadline);
+    const newOfferFieldHeadline = accordionOfferFieldHeadline.replace('month.', '').replace(/\n/g, '');
+    expect(newOfferFieldHeadline).toContain(modalContent.updatedOfferHeadline);
     await modalSnapshot(testName, contentWindow);
 };