Add a11y test for side menu component

bedrock/base/templates/macros-protocol.html

@@ -328,7 +328,7 @@
 #}
 {% macro sidemenu_lists(arr, body_id='') -%}
   <nav class="mzp-c-sidemenu">
-    <section class="mzp-c-sidemenu-summary mzp-js-toggle" aria-controls="sidebar-menu">
+    <section class="mzp-c-sidemenu-summary mzp-js-toggle" aria-controls="sidebar-menu" data-testid="side-menu-toggle">
       <h3 class="mzp-c-sidemenu-label">{{ ftl('ui-menu') }}</h3>
       <ul>
         <li>{{ arr[0][0][2]|e }}</li>
@@ -341,7 +341,7 @@ <h3 class="mzp-c-sidemenu-label">{{ ftl('ui-menu') }}</h3>
         {% endfor %}
       </ul>
     </section>
-    <section class="mzp-c-sidemenu-main">
+    <section class="mzp-c-sidemenu-main" id="sidebar-menu" data-testid="side-menu-main">
       {% for menu in arr %}
 
         <h4 class="mzp-c-sidemenu-title {% if menu[0][1] == body_id and body_id != '' %}mzp-is-current{% endif %}">

tests/playwright/specs/a11y/components/footer.spec.js

@@ -0,0 +1,61 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+'use strict';
+
+const openPage = require('../../../scripts/open-page');
+const { createReport, scanPageElement } = require('../includes/helpers');
+const { footerLocator } = require('../includes/locators');
+const { test, expect } = require('@playwright/test');
+const testURL = '/en-US/';
+
+test.describe(
+    'Footer (desktop)',
+    {
+        tag: '@a11y'
+    },
+    () => {
+        test.beforeEach(async ({ page, browserName }) => {
+            await openPage(testURL, page, browserName);
+        });
+
+        test('should not have any detectable a11y issues', async ({ page }) => {
+            const results = await scanPageElement(page, footerLocator);
+            createReport('component', 'footer-desktop', results);
+            expect(results.violations.length).toEqual(0);
+        });
+    }
+);
+
+test.describe(
+    'Footer (mobile)',
+    {
+        tag: '@a11y'
+    },
+    () => {
+        test.use({ viewport: { width: 360, height: 780 } });
+
+        test.beforeEach(async ({ page, browserName }) => {
+            await openPage(testURL, page, browserName);
+        });
+
+        test('should not have any detectable a11y issues', async ({ page }) => {
+            const footerHeadingCompany = page.getByTestId(
+                'footer-heading-company'
+            );
+            const footerListCompany = page.getByTestId('footer-list-company');
+
+            // Open Company section
+            await expect(footerListCompany).not.toBeVisible();
+            await footerHeadingCompany.click();
+            await expect(footerListCompany).toBeVisible();
+
+            const results = await scanPageElement(page, footerLocator);
+            createReport('component', 'footer-mobile', results);
+            expect(results.violations.length).toEqual(0);
+        });
+    }
+);

tests/playwright/specs/a11y/components/navigation.spec.js

@@ -0,0 +1,78 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+'use strict';
+
+const openPage = require('../../../scripts/open-page');
+const { createReport, scanPageElement } = require('../includes/helpers');
+const { navigationLocator } = require('../includes/locators');
+const { test, expect } = require('@playwright/test');
+const testURL = '/en-US/';
+
+test.describe(
+    'Navigation (desktop)',
+    {
+        tag: '@a11y'
+    },
+    () => {
+        test.beforeEach(async ({ page, browserName }) => {
+            await openPage(testURL, page, browserName);
+        });
+
+        test('should not have any detectable a11y issues', async ({ page }) => {
+            const firefoxLink = page.getByTestId('navigation-link-firefox');
+            const firefoxMenu = page.getByTestId('navigation-menu-firefox');
+
+            // Hover over Firefox link to open menu
+            await expect(firefoxMenu).not.toBeVisible();
+            await firefoxLink.hover();
+            await expect(firefoxMenu).toBeVisible();
+
+            const results = await scanPageElement(page, navigationLocator);
+            createReport('component', 'navigation-desktop', results);
+            expect(results.violations.length).toEqual(0);
+        });
+    }
+);
+
+test.describe(
+    'Navigation (mobile)',
+    {
+        tag: '@a11y'
+    },
+    () => {
+        test.use({ viewport: { width: 360, height: 780 } });
+
+        test.beforeEach(async ({ page, browserName }) => {
+            await openPage(testURL, page, browserName);
+        });
+
+        test('should not have any detectable a11y issues', async ({ page }) => {
+            const navigationMenuButton = page.getByTestId(
+                'navigation-menu-button'
+            );
+            const navigationMenuItems = page.getByTestId(
+                'navigation-menu-items'
+            );
+            const firefoxLink = page.getByTestId('navigation-link-firefox');
+            const firefoxMenu = page.getByTestId('navigation-menu-firefox');
+
+            // Open navigation menu
+            await expect(navigationMenuItems).not.toBeVisible();
+            await navigationMenuButton.click();
+            await expect(navigationMenuItems).toBeVisible();
+
+            // Open Firefox menu
+            await expect(firefoxMenu).not.toBeVisible();
+            await firefoxLink.click();
+            await expect(firefoxMenu).toBeVisible();
+
+            const results = await scanPageElement(page, navigationLocator);
+            createReport('component', 'navigation-mobile', results);
+            expect(results.violations.length).toEqual(0);
+        });
+    }
+);

tests/playwright/specs/a11y/components/side-menu.spec.js

@@ -0,0 +1,59 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+'use strict';
+
+const openPage = require('../../../scripts/open-page');
+const { createReport, scanPageElement } = require('../includes/helpers');
+const { sideMenuLocator } = require('../includes/locators');
+const { test, expect } = require('@playwright/test');
+const testURL = '/en-US/privacy/';
+
+test.describe(
+    'Side Menu (desktop)',
+    {
+        tag: '@a11y'
+    },
+    () => {
+        test.beforeEach(async ({ page, browserName }) => {
+            await openPage(testURL, page, browserName);
+        });
+
+        test('should not have any detectable a11y issues', async ({ page }) => {
+            const results = await scanPageElement(page, sideMenuLocator);
+            createReport('component', 'side-menu-desktop', results);
+            expect(results.violations.length).toEqual(0);
+        });
+    }
+);
+
+test.describe(
+    'Side Menu (mobile)',
+    {
+        tag: '@a11y'
+    },
+    () => {
+        test.use({ viewport: { width: 360, height: 780 } });
+
+        test.beforeEach(async ({ page, browserName }) => {
+            await openPage(testURL, page, browserName);
+        });
+
+        test('should not have any detectable a11y issues', async ({ page }) => {
+            const sidebarMenuToggle = page.getByTestId('sidebar-menu-toggle');
+            const sidebarMenuMain = page.getByTestId('sidebar-menu-main');
+
+            // Open side menu panel
+            await expect(sidebarMenuMain).not.toBeVisible();
+            await sidebarMenuToggle.click();
+            await expect(sidebarMenuMain).toBeVisible();
+
+            const results = await scanPageElement(page, sideMenuLocator);
+            createReport('component', 'side-menu-mobile', results);
+            expect(results.violations.length).toEqual(0);
+        });
+    }
+);