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 @@
         {% 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.spec.js

@@ -1,180 +0,0 @@
-/*
- * 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,
-    footerLocator,
-    subNavigationLocator
-} = require('./includes/locators');
-const { test, expect } = require('@playwright/test');
-
-const testURL = '/en-US/';
-const subNavURL = '/en-US/firefox/new/';
-
-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);
-        });
-    }
-);
-
-test.describe(
-    'Sub-navigation (desktop)',
-    {
-        tag: '@a11y'
-    },
-    () => {
-        test.beforeEach(async ({ page, browserName }) => {
-            await openPage(subNavURL, page, browserName);
-        });
-
-        test('should not have any detectable a11y issues', async ({ page }) => {
-            const results = await scanPageElement(page, subNavigationLocator);
-            createReport('component', 'sub-navigation-mobile', results);
-            expect(results.violations.length).toEqual(0);
-        });
-    }
-);
-
-test.describe(
-    'Sub-navigation (mobile)',
-    {
-        tag: '@a11y'
-    },
-    () => {
-        test.use({ viewport: { width: 360, height: 780 } });
-
-        test.beforeEach(async ({ page, browserName }) => {
-            await openPage(subNavURL, page, browserName);
-        });
-
-        test('should not have any detectable a11y issues', async ({ page }) => {
-            const subNavigationToggle = page.getByTestId(
-                'sub-navigation-mobile-toggle'
-            );
-            const subNavigationMenu = page.getByTestId('sub-navigation-menu');
-
-            // Open sub-navigation menu
-            await expect(subNavigationMenu).not.toBeVisible();
-            await subNavigationToggle.click();
-            await expect(subNavigationMenu).toBeVisible();
-
-            const results = await scanPageElement(page, subNavigationLocator);
-            createReport('component', 'sub-navigation-mobile', results);
-            expect(results.violations.length).toEqual(0);
-        });
-    }
-);
-
-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/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);
+        });
+    }
+);

tests/playwright/specs/a11y/components/sub-navigation.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 { subNavigationLocator } = require('../includes/locators');
+const { test, expect } = require('@playwright/test');
+const testURL = '/en-US/firefox/new/';
+
+test.describe(
+    'Sub-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 results = await scanPageElement(page, subNavigationLocator);
+            createReport('component', 'sub-navigation-mobile', results);
+            expect(results.violations.length).toEqual(0);
+        });
+    }
+);
+
+test.describe(
+    'Sub-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 subNavigationToggle = page.getByTestId(
+                'sub-navigation-mobile-toggle'
+            );
+            const subNavigationMenu = page.getByTestId('sub-navigation-menu');
+
+            // Open sub-navigation menu
+            await expect(subNavigationMenu).not.toBeVisible();
+            await subNavigationToggle.click();
+            await expect(subNavigationMenu).toBeVisible();
+
+            const results = await scanPageElement(page, subNavigationLocator);
+            createReport('component', 'sub-navigation-mobile', results);
+            expect(results.violations.length).toEqual(0);
+        });
+    }
+);

tests/playwright/specs/a11y/includes/helpers.js

@@ -12,6 +12,7 @@ const { createHtmlReport } = require('axe-html-reporter');
 const {
     navigationLocator,
     footerLocator,
+    sideMenuLocator,
     subNavigationLocator
 } = require('./locators');
 
@@ -50,6 +51,7 @@ async function scanPage(page) {
     return await new AxeBuilder({ page })
         .exclude(navigationLocator)
         .exclude(footerLocator)
+        .exclude(sideMenuLocator)
         .exclude(subNavigationLocator)
         .analyze();
 }

tests/playwright/specs/a11y/includes/locators.js

@@ -13,5 +13,11 @@
 const footerLocator = '#colophon';
 const navigationLocator = '.c-navigation';
 const subNavigationLocator = '.c-sub-navigation';
+const sideMenuLocator = '.mzp-c-sidemenu';
 
-module.exports = { navigationLocator, footerLocator, subNavigationLocator };
+module.exports = {
+    navigationLocator,
+    footerLocator,
+    sideMenuLocator,
+    subNavigationLocator
+};