paypal · erikacolette29 · Sep 25, 2024 · Sep 20, 2024 · Sep 20, 2024 · Sep 20, 2024
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -12,6 +12,7 @@ jobs:
         runs-on: ubuntu-latest
 
         strategy:
+            fail-fast: false
             matrix:
                 countries: [AU, DE, GB, FR, IT, ES, US]
 
@@ -29,18 +30,16 @@ jobs:
                   ./.github/scripts/runServerV2.sh
 
             - name: Run Playwright Modals
-              continue-on-error: true
               run: npx playwright test tests/playwright/tests/sdk/modals --grep @${{matrix.countries}} --output=playwright-report-${{matrix.countries}}
-            
+
             - uses: actions/upload-artifact@v4
               if: always()
               with:
                   name: playwright-report-modal-${{matrix.countries}}
                   path: playwright-report/
                   retention-days: 1
-              
+
             - name: Run Playwright Messages
-              continue-on-error: true
               run: npx playwright test tests/playwright/tests/sdk/messages --grep @${{matrix.countries}} --output=playwright-report-${{matrix.countries}}
 
             - uses: actions/upload-artifact@v4

diff --git a/demo/accessibility/colorsdk.html b/demo/accessibility/colorsdk.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Messaging.js Dev Sandbox</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+        <script src="//localhost.paypal.com:8080/messaging.js"></script>
+        <style>
+            body {
+                padding: 0;
+                margin: 0;
+                font-family: Arial, sans-serif;
+            }
+            .message-columns {
+                display: flex;
+                flex-direction: column;
+                gap: 5px;
+                padding: 10px;
+            }
+            .message-container {
+                margin-bottom: 5px;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div class="message-columns"></div>
+
+        <script src="../../helpers/utils.js"></script>
+        <script>
+            const query = window.location.search.substring(1);
+            const mappedParams = mapQueryParams(query);
+
+            // Define message variations with both text color and logo type
+            const messageVariations = [
+                { color: 'black', logo: 'primary', banner: 'banner-1' },
+                { color: 'monochrome', logo: 'primary', banner: 'banner-2' },
+                { color: 'grayscale', logo: 'primary', banner: 'banner-3' },
+                { color: 'white', logo: 'primary', banner: 'banner-4' },
+
+                { color: 'black', logo: 'alternative', banner: 'banner-5' },
+                { color: 'monochrome', logo: 'alternative', banner: 'banner-6' },
+                { color: 'grayscale', logo: 'alternative', banner: 'banner-7' },
+                { color: 'white', logo: 'alternative', banner: 'banner-8' },
+
+                { color: 'black', logo: 'inline', banner: 'banner-9' },
+                { color: 'monochrome', logo: 'inline', banner: 'banner-10' },
+                { color: 'grayscale', logo: 'inline', banner: 'banner-11' },
+                { color: 'white', logo: 'inline', banner: 'banner-12' },
+
+                { color: 'black', logo: 'none', banner: 'banner-13' },
+                { color: 'monochrome', logo: 'none', banner: 'banner-14' },
+                { color: 'grayscale', logo: 'none', banner: 'banner-15' },
+                { color: 'white', logo: 'none', banner: 'banner-16' }
+            ];
+
+            // Function to render messages dynamically
+            const renderMessages = variations => {
+                const container = document.querySelector('.message-columns');
+
+                variations.forEach(variation => {
+                    const messageContainer = document.createElement('div');
+                    messageContainer.classList.add('message-container');
+
+                    // Create message element and assign a class for each banner
+                    const messageDiv = document.createElement('div');
+                    messageDiv.classList.add('messages', variation.banner);
+
+                    messageContainer.appendChild(messageDiv);
+                    container.appendChild(messageContainer);
+
+                    paypal
+                        .Messages({
+                            ...mappedParams,
+                            style: {
+                                text: {
+                                    color: variation.color
+                                },
+                                logo: {
+                                    type: variation.logo
+                                }
+                            }
+                        })
+                        .render(`.${variation.banner}`)
+                        .then(() => {
+                            // If the text color is white, set a black background
+                            if (variation.color === 'white') {
+                                messageDiv.style.backgroundColor = 'black';
+                            }
+                        });
+                });
+            };
+
+            // Call the function to render messages
+            renderMessages(messageVariations);
+        </script>
+    </body>
+</html>
diff --git a/src/components/modal/v2/parts/Calculator.jsx b/src/components/modal/v2/parts/Calculator.jsx
@@ -190,7 +190,7 @@ const Calculator = ({ setExpandedState, calculator, aprDisclaimer, useV4Design,
                 }`}
                 onSubmit={submit}
             >
-                <h4 className="title">{title}</h4>
+                <h3 className="title">{title}</h3>
                 <div className="input__wrapper transitional">
                     <label htmlFor="purchase-amount" className={`input__label ${country}`}>
                         {renderInputLabelOnEmptyField(country)}

diff --git a/src/components/modal/v2/styles/components/_calculator.scss b/src/components/modal/v2/styles/components/_calculator.scss
@@ -112,7 +112,7 @@
 
         &.v4Design,
         &.checkout {
-            h4 {
+            h3 {
                 font-weight: 700;
             }
         }

diff --git a/tests/playwright/pages/base.js b/tests/playwright/pages/base.js
@@ -13,6 +13,19 @@ export const generateUrl = (baseUrl, { account, amount, offer }) => {
     }
     return url;
 };
+// Common function for running Axe accessibility scans
+const runAxeCoreScan = async (page, options = {}) => {
+    const tags = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'best-practice'];
+    const { disableRules = [] } = options; // Optionally pass disable rules
+
+    const results = await new AxeBuilder({ page })
+        .include('body') // Include everything inside iframe or page
+        .withTags(tags)
+        .disableRules(disableRules) // Disable rules based on options
+        .analyze();
+
+    expect(results.violations).toEqual([]);
+};
 
 // Extend Playwright base test with custom fixtures
 export const baseTest = base.extend({
@@ -23,12 +36,19 @@ export const baseTest = base.extend({
         };
         await use(navigate);
     },
-    // Fixture for running Axe accessibility checks
-    runAxeCoreScan: async ({ page }, use) => {
-        const runAxeCoreScan = async (element, tags = []) => {
-            const results = await new AxeBuilder({ page }).include(element).withTags(tags).analyze();
-            expect(results.violations).toEqual([]);
-        };
-        await use(runAxeCoreScan);
+
+    messageAxeCoreScan: async ({ page }, use) => {
+        await use(async () => {
+            await runAxeCoreScan(page, {
+                disableRules: ['page-has-heading-one', 'landmark-one-main']
+                // ignore heading levels on message and need for landmark
+            });
+        });
+    },
+
+    modalAxeCoreScan: async ({ page }, use) => {
+        await use(async () => {
+            await runAxeCoreScan(page);
+        });
     }
 });
diff --git a/tests/playwright/pages/messages_fixture.js b/tests/playwright/pages/messages_fixture.js
@@ -5,7 +5,7 @@ import { selectors } from '../util/selectors';
 // Extend Playwright base test with custom fixtures
 export const messageTest = baseTest.extend({
     navigatePage: async ({ navigatePage }, use) => {
-        const messageUrl = '/snapshot/v2/sdk.html';
+        const messageUrl = '/accessibility/colorsdk.html';
         const navigate = async ({ account, amount, offer }) => {
             await navigatePage(messageUrl, { account, amount, offer });
         };

diff --git a/tests/playwright/tests/sdk/messages/longTerm.spec.js b/tests/playwright/tests/sdk/messages/longTerm.spec.js
@@ -1,41 +1,44 @@
 import { messageTest } from '../../../pages/messages_fixture';
 
 messageTest.describe('@US Long Term', () => {
-    messageTest('US Message long term non qualifying', async ({ navigatePage, loadMessage, runAxeCoreScan }) => {
+    messageTest('US Message long term non qualifying', async ({ navigatePage, loadMessage, messageAxeCoreScan }) => {
         await navigatePage({ account: 'DEV_US_LONG_TERM', amount: 29, offer: 'PAY_LATER_LONG_TERM' });
         const messageIFrame = await loadMessage();
-        await runAxeCoreScan(messageIFrame, ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
+        await messageAxeCoreScan(messageIFrame);
     });
-    messageTest('US Message long term qualifying', async ({ navigatePage, loadMessage, runAxeCoreScan }) => {
+    messageTest('US Message long term qualifying', async ({ navigatePage, loadMessage, messageAxeCoreScan }) => {
         await navigatePage({ account: 'DEV_US_LONG_TERM', amount: 100, offer: 'PAY_LATER_LONG_TERM' });
         const messageIFrame = await loadMessage();
-        await runAxeCoreScan(messageIFrame, ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
+        await messageAxeCoreScan(messageIFrame);
     });
-    messageTest('US Message long term checkout', async ({ navigatePage, loadMessage, runAxeCoreScan }) => {
+    messageTest('US Message long term checkout', async ({ navigatePage, loadMessage, messageAxeCoreScan }) => {
         await navigatePage({ account: 'DEV_US_LONG_TERM_CHECKOUT', amount: 100, offer: 'PAY_LATER_LONG_TERM' });
         const messageIFrame = await loadMessage();
-        await runAxeCoreScan(messageIFrame, ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
+        await messageAxeCoreScan(messageIFrame);
     });
 });
 messageTest.describe('@DE Long Term', () => {
-    messageTest('DE Message long term qualifying', async ({ navigatePage, loadMessage, runAxeCoreScan }) => {
+    messageTest('DE Message long term qualifying', async ({ navigatePage, loadMessage, messageAxeCoreScan }) => {
         await navigatePage({ account: 'DEV_DE_LONG_TERM', amount: 100, offer: 'PAY_LATER_LONG_TERM' });
         const messageIFrame = await loadMessage();
-        await runAxeCoreScan(messageIFrame, ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
+        await messageAxeCoreScan(messageIFrame);
     });
-    messageTest('DE Message long term non qualifying', async ({ navigatePage, loadMessage, runAxeCoreScan }) => {
+    messageTest('DE Message long term non qualifying', async ({ navigatePage, loadMessage, messageAxeCoreScan }) => {
         await navigatePage({ account: 'DEV_DE_LONG_TERM', amount: 29, offer: 'PAY_LATER_LONG_TERM' });
         const messageIFrame = await loadMessage();
-        await runAxeCoreScan(messageIFrame, ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
+        await messageAxeCoreScan(messageIFrame);
     });
-    messageTest('DE Message long term 0APR non qualifying', async ({ navigatePage, loadMessage, runAxeCoreScan }) => {
-        await navigatePage({ account: 'DEV_DE_LONG_TERM_0APR', amount: 29, offer: 'PAY_LATER_LONG_TERM' });
-        const messageIFrame = await loadMessage();
-        await runAxeCoreScan(messageIFrame, ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
-    });
-    messageTest('DE Message long term 0APR qualifying', async ({ navigatePage, loadMessage, runAxeCoreScan }) => {
+    messageTest(
+        'DE Message long term 0APR non qualifying',
+        async ({ navigatePage, loadMessage, messageAxeCoreScan }) => {
+            await navigatePage({ account: 'DEV_DE_LONG_TERM_0APR', amount: 29, offer: 'PAY_LATER_LONG_TERM' });
+            const messageIFrame = await loadMessage();
+            await messageAxeCoreScan(messageIFrame);
+        }
+    );
+    messageTest('DE Message long term 0APR qualifying', async ({ navigatePage, loadMessage, messageAxeCoreScan }) => {
         await navigatePage({ account: 'DEV_DE_LONG_TERM_0APR', amount: 100, offer: 'PAY_LATER_LONG_TERM' });
         const messageIFrame = await loadMessage();
-        await runAxeCoreScan(messageIFrame, ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
+        await messageAxeCoreScan(messageIFrame);
     });
 });
diff --git a/tests/playwright/tests/sdk/messages/multi.spec.js b/tests/playwright/tests/sdk/messages/multi.spec.js
@@ -1,57 +1,57 @@
 import { messageTest } from '../../../pages/messages_fixture';
 
 messageTest.describe('@US Multi Messages', () => {
-    messageTest('US long term non qualifying', async ({ navigatePage, loadMessage, runAxeCoreScan }) => {
+    messageTest('US long term non qualifying', async ({ navigatePage, loadMessage, messageAxeCoreScan }) => {
         await navigatePage({ account: 'DEV_US_MULTI', amount: 20001, offer: 'PAY_LATER_LONG_TERM' });
         const messageIframe = await loadMessage();
-        await runAxeCoreScan(messageIframe, ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
+        await messageAxeCoreScan(messageIframe);
     });
 
-    messageTest('US long term qualifying', async ({ navigatePage, loadMessage, runAxeCoreScan }) => {
+    messageTest('US long term qualifying', async ({ navigatePage, loadMessage, messageAxeCoreScan }) => {
         await navigatePage({ account: 'DEV_US_MULTI', amount: 1501, offer: 'PAY_LATER_LONG_TERM' });
         const messageIframe = await loadMessage();
-        await runAxeCoreScan(messageIframe, ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
+        await messageAxeCoreScan(messageIframe);
     });
 
-    messageTest('US product list', async ({ navigatePage, loadMessage, runAxeCoreScan }) => {
+    messageTest('US product list', async ({ navigatePage, loadMessage, messageAxeCoreScan }) => {
         await navigatePage({ account: 'DEV_US_MULTI', amount: 200, offer: '' });
         const messageIframe = await loadMessage();
-        await runAxeCoreScan(messageIframe, ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
+        await messageAxeCoreScan(messageIframe);
     });
 
-    messageTest('US short term non qualifying', async ({ navigatePage, loadMessage, runAxeCoreScan }) => {
+    messageTest('US short term non qualifying', async ({ navigatePage, loadMessage, messageAxeCoreScan }) => {
         await navigatePage({ account: 'DEV_US_MULTI', amount: 29, offer: 'PAY_LATER_SHORT_TERM' });
         const messageIframe = await loadMessage();
-        await runAxeCoreScan(messageIframe, ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
+        await messageAxeCoreScan(messageIframe);
     });
 
-    messageTest('US short term qualifying', async ({ navigatePage, loadMessage, runAxeCoreScan }) => {
+    messageTest('US short term qualifying', async ({ navigatePage, loadMessage, messageAxeCoreScan }) => {
         await navigatePage({ account: 'DEV_US_MULTI', amount: 200, offer: 'PAY_LATER_SHORT_TERM' });
         const messageIframe = await loadMessage();
-        await runAxeCoreScan(messageIframe, ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
+        await messageAxeCoreScan(messageIframe);
     });
 });
 
 messageTest.describe('@DE Multi Messages', () => {
-    messageTest('DE multi qualifying', async ({ navigatePage, loadMessage, runAxeCoreScan }) => {
+    messageTest('DE multi qualifying', async ({ navigatePage, loadMessage, messageAxeCoreScan }) => {
         await navigatePage({ account: 'DEV_DE_MULTI', amount: 200, offer: 'PAY_LATER_SHORT_TERM' });
         const messageIframe = await loadMessage();
-        await runAxeCoreScan(messageIframe, ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
+        await messageAxeCoreScan(messageIframe);
     });
 
-    messageTest('DE multi non qualifying', async ({ navigatePage, loadMessage, runAxeCoreScan }) => {
+    messageTest('DE multi non qualifying', async ({ navigatePage, loadMessage, messageAxeCoreScan }) => {
         await navigatePage({ account: 'DEV_DE_MULTI', amount: 29, offer: 'PAY_LATER_SHORT_TERM' });
         const messageIframe = await loadMessage();
-        await runAxeCoreScan(messageIframe, ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
+        await messageAxeCoreScan(messageIframe);
     });
-    messageTest('DE pay in 1 qualifying', async ({ navigatePage, loadMessage, runAxeCoreScan }) => {
+    messageTest('DE pay in 1 qualifying', async ({ navigatePage, loadMessage, messageAxeCoreScan }) => {
         await navigatePage({ account: 'DEV_DE_PAY_IN_1', amount: 200, offer: 'PAY_LATER_PAY_IN_1' });
         const messageIframe = await loadMessage();
-        await runAxeCoreScan(messageIframe, ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
+        await messageAxeCoreScan(messageIframe);
     });
-    messageTest('DE pay in 1 non qualifying', async ({ navigatePage, loadMessage, runAxeCoreScan }) => {
+    messageTest('DE pay in 1 non qualifying', async ({ navigatePage, loadMessage, messageAxeCoreScan }) => {
         await navigatePage({ account: 'DEV_DE_PAY_IN_1', amount: 1001.1, offer: 'PAY_LATER_PAY_IN_1' });
         const messageIframe = await loadMessage();
-        await runAxeCoreScan(messageIframe, ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']);
+        await messageAxeCoreScan(messageIframe);
     });
 });