ionic-team · liamdebeasi · Nov 14, 2022 · Oct 24, 2022 · Oct 24, 2022 · Oct 26, 2022
@@ -2,25 +2,36 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Segment - a11y</title>
+    <title>Menu - a11y</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
     <link href="../../../../../css/core.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <script type="module">
+      import { menuController } from '../../../../dist/ionic/index.esm.js';
+      window.menuController = menuController;
+    </script>
   </head>
 
   <body>
     <main>
-      <h1>Menu</h1>
+      <div class="ion-page" id="main-content">
+        <ion-content class="ion-padding">
+          <h1>Menu</h1>
+          <ion-button id="open-menu" expand="block" onclick="openMenu()">Open Menu</ion-button>
+        </ion-content>
+      </div>
+
       <ion-menu menu-id="menu" content-id="main-content">
         <ion-header>
           <ion-toolbar>
             <ion-title>Menu</ion-title>
           </ion-toolbar>
         </ion-header>
         <ion-content>
+          <h1 class="ion-margin">Open Menu</h1>
           <ion-list>
             <ion-item>
               <ion-button>Button</ion-button>
@@ -35,5 +46,12 @@ <h1>Menu</h1>
         </ion-content>
       </ion-menu>
     </main>
+
+    <script>
+      async function openMenu() {
+        await menuController.enable(true, 'menu');
+        await menuController.open('menu');
+      }
+    </script>
   </body>
 </html>
@@ -0,0 +1,28 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('menu: a11y', () => {
+  test.beforeEach(async ({ skip }) => {
+    skip.rtl();
+    skip.mode('md');
+  });
+
+  test('menu should not have accessibility violations', async ({ page }) => {
+    await page.goto(`/src/components/menu/test/a11y`);
+
+    const menu = page.locator('ion-menu');
+    const button = page.locator('#open-menu');
+
+    await button.click();
+    await page.waitForSelector('ion-menu', { state: 'visible' });
+
+    await expect(menu).toHaveAttribute('role', 'navigation');
+
+    const heading = page.locator('ion-menu h1');
+    await expect(heading).toHaveText('Open Menu');
+
+    const results = await new AxeBuilder({ page }).analyze();
+    expect(results.violations).toEqual([]);
+  });
+});
@@ -12,12 +12,6 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <script>
-      const forceCSSAnimations = new URLSearchParams(window.location.search).get('ionic:_forceCSSAnimations');
-      if (forceCSSAnimations) {
-        window.Animation = null;
-      }
-    </script>
     <script type="module">
       import { menuController } from '../../../../dist/ionic/index.esm.js';
       window.menuController = menuController;
@@ -28,8 +22,8 @@
     <ion-app>
       <ion-menu
         side="start"
-        menu-id="first"
         id="start-menu"
+        menu-id="start-menu"
         content-id="main"
         class="menu-part"
         aria-label="start menu"
@@ -68,7 +62,7 @@
         </ion-content>
       </ion-menu>
 
-      <ion-menu side="start" menu-id="custom" class="my-custom-menu" id="custom-menu" content-id="main">
+      <ion-menu side="start" menu-id="custom-menu" content-id="main" class="my-custom-menu">
         <ion-header>
           <ion-toolbar color="tertiary">
             <ion-title>Custom Menu</ion-title>
@@ -85,7 +79,7 @@
         </ion-content>
       </ion-menu>
 
-      <ion-menu side="end" type="push" id="end-menu" content-id="main">
+      <ion-menu side="end" menu-id="end-menu" content-id="main" type="push">
         <ion-header>
           <ion-toolbar color="danger">
             <ion-title>End Menu</ion-title>
@@ -109,9 +103,9 @@
           </ion-toolbar>
         </ion-header>
         <ion-content class="ion-padding">
-          <ion-button expand="block" id="open-first" onclick="openFirst()">Open Start Menu</ion-button>
-          <ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
-          <ion-button expand="block" onclick="openCustom()">Open Custom Menu</ion-button>
+          <ion-button expand="block" id="open-start" onclick="openStart()">Open Start Menu</ion-button>
+          <ion-button expand="block" id="open-end" onclick="openEnd()">Open End Menu</ion-button>
+          <ion-button expand="block" id="open-custom" onclick="openCustom()">Open Custom Menu</ion-button>
         </ion-content>
       </div>
     </ion-app>
@@ -133,18 +127,21 @@
     </style>
 
     <script>
-      async function openFirst() {
-        await menuController.enable(true, 'first');
-        await menuController.open('first');
+      async function openStart() {
+        // Open the menu by menu-id
+        await menuController.enable(true, 'start-menu');
+        await menuController.open('start-menu');
       }
 
       async function openEnd() {
+        // Open the menu by side
         await menuController.open('end');
       }
 
       async function openCustom() {
-        await menuController.enable(true, 'custom');
-        await menuController.open('custom');
+        // Open the menu by menu-id
+        await menuController.enable(true, 'custom-menu');
+        await menuController.open('custom-menu');
       }
     </script>
   </body>

@@ -0,0 +1,93 @@
+import type { Locator } from '@playwright/test';
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
+import { test } from '@utils/test/playwright';
+
+test.describe('menu: basic', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`/src/components/menu/test/basic`);
+  });
+
+  test('should open selected menu by side', async ({ page }) => {
+    const startMenu = page.locator('[menu-id="start-menu"]');
+    const customMenu = page.locator('[menu-id="custom-menu"]');
+    const endMenu = page.locator('[menu-id="end-menu"]');
+
+    await testMenu(page, startMenu, 'start');
+    await testMenu(page, customMenu, 'custom');
+    await testMenu(page, endMenu, 'end');
+  });
+
+  test('should trap focus', async ({ page, skip, browserName }) => {
+    skip.rtl('Trapping focus is not dependent on document direction');
+    skip.browser('firefox', 'Firefox incorrectly allows keyboard focus to move to ion-content');
+
+    const ionDidOpen = await page.spyOnEvent('ionDidOpen');
+
+    await page.click('#open-start');
+    await ionDidOpen.next();
+
+    const button = await page.locator('#start-menu-button');
+
+    if (browserName === 'webkit') {
+      await page.keyboard.down('Alt');
+    }
+
+    await page.keyboard.press('Tab');
+
+    await expect(button).toBeFocused();
+
+    await page.keyboard.press('Tab');
+
+    if (browserName === 'webkit') {
+      await page.keyboard.up('Alt');
+    }
+
+    await expect(button).toBeFocused();
+  });
+
+  test('should preserve scroll position', async ({ page, skip }) => {
+    skip.rtl('Scroll position is not dependent on document direction');
+    skip.browser('firefox', 'Firefox does not preserve scroll position');
+
+    const ionDidOpen = await page.spyOnEvent('ionDidOpen');
+
+    await page.click('#open-start');
+    await ionDidOpen.next();
+
+    await page.locator('#start-menu ion-content').evaluate(async (el: HTMLIonContentElement) => {
+      await el.scrollToPoint(0, 200);
+    });
+
+    await page.locator('#start-menu').evaluate(async (el: HTMLIonMenuElement) => {
+      await el.close();
+    });
+
+    await page.click('#open-start');
+    await ionDidOpen.next();
+
+    const scrollTop = await page.locator('#start-menu ion-content').evaluate(async (el: HTMLIonContentElement) => {
+      const contentScrollEl = await el.getScrollElement();
+      return contentScrollEl.scrollTop;
+    });
+
+    await expect(scrollTop).toBe(200);
+  });
+});
+
+async function testMenu(page: E2EPage, menu: Locator, menuId: string) {
+  const ionDidOpen = await page.spyOnEvent('ionDidOpen');
+  const ionDidClose = await page.spyOnEvent('ionDidClose');
+
+  await page.click(`#open-${menuId}`);
+  await ionDidOpen.next();
+
+  await expect(menu).toHaveClass(/show-menu/);
+
+  expect(await page.screenshot()).toMatchSnapshot(`menu-basic-${menuId}-${page.getSnapshotSettings()}.png`);
+
+  await menu.evaluate(async (el: HTMLIonMenuElement) => {
+    await el.close();
+  });
+  await ionDidClose.next();
+}