Merge remote-tracking branch 'origin/main' into sync-6.4

core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts

@@ -148,6 +148,19 @@ test.describe('datetime: prefer wheel', () => {
           presentation="date"
           prefer-wheel="true"
         ></ion-datetime>
+
+        <script>
+          const mockToday = '2022-10-10T16:22';
+          Date = class extends Date {
+            constructor(...args) {
+              if (args.length === 0) {
+                super(mockToday)
+              } else {
+                super(...args);
+              }
+            }
+          }
+        </script>
       `);
 
       await page.waitForSelector('.datetime-ready');

core/src/components/item/item.mixins.scss

@@ -1,9 +0,0 @@
-
-// Item Mixins
-// --------------------------------------------------
-
-@mixin item-push-svg-url($fill) {
-  $item-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$fill}'/></svg>";
-
-  @include svg-background-image($item-detail-push-svg, true);
-}

core/src/components/item/item.vars.scss

@@ -1,5 +1,4 @@
 @import "../../themes/ionic.globals";
-@import "./item.mixins";
 
 // Item
 // --------------------------------------------------

core/src/components/menu-button/test/a11y/e2e.ts

@@ -1,11 +0,0 @@
-import { AxePuppeteer } from '@axe-core/puppeteer';
-import { newE2EPage } from '@stencil/core/testing';
-
-test('menu-button: axe', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/menu-button/test/a11y?ionic:_testing=true',
-  });
-
-  const results = await new AxePuppeteer(page).analyze();
-  expect(results.violations.length).toEqual(0);
-});

core/src/components/menu-button/test/a11y/menu-button.e2e.ts

@@ -0,0 +1,17 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('menu-button: a11y', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+
+  test('should not have accessibility violations', async ({ page }) => {
+    await page.goto('/src/components/menu-button/test/a11y');
+
+    const results = await new AxeBuilder({ page }).analyze();
+
+    expect(results.violations).toEqual([]);
+  });
+});

core/src/components/menu-button/test/basic/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('menu-button: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/menu-button/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/menu-button/test/basic/menu-button.e2e.ts

@@ -0,0 +1,16 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('menu-button: basic', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/menu-button/test/basic`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`menu-button-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/modal/modal.tsx

@@ -348,7 +348,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
   componentWillLoad() {
     const { breakpoints, initialBreakpoint, swipeToClose, el } = this;
 
-    this.inheritedAttributes = inheritAttributes(el, ['role']);
+    this.inheritedAttributes = inheritAttributes(el, ['aria-label', 'role']);
 
     /**
      * If user has custom ID set then we should
@@ -879,11 +879,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
     return (
       <Host
         no-router
-        aria-modal="true"
-        role="dialog"
         tabindex="-1"
         {...(htmlAttributes as any)}
-        {...inheritedAttributes}
         style={{
           zIndex: `${20000 + this.overlayIndex}`,
         }}
@@ -911,7 +908,20 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
         {mode === 'ios' && <div class="modal-shadow"></div>}
 
-        <div class="modal-wrapper ion-overlay-wrapper" part="content" ref={(el) => (this.wrapperEl = el)}>
+        <div
+          /*
+            role and aria-modal must be used on the
+            same element. They must also be set inside the
+            shadow DOM otherwise ion-button will not be highlighted
+            when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
+          */
+          role="dialog"
+          {...inheritedAttributes}
+          aria-modal="true"
+          class="modal-wrapper ion-overlay-wrapper"
+          part="content"
+          ref={(el) => (this.wrapperEl = el)}
+        >
           {showHandle && (
             <button
               class="modal-handle"

core/src/components/modal/test/a11y/modal.e2e.ts

@@ -13,7 +13,7 @@ test.describe('modal: a11y', () => {
 
     const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
     const button = page.locator('#open-modal');
-    const modal = page.locator('ion-modal');
+    const modal = page.locator('ion-modal .modal-wrapper');
 
     await expect(modal).toHaveAttribute('role', 'dialog');
 
@@ -32,7 +32,7 @@ test.describe('modal: a11y', () => {
     await page.setContent(`
       <ion-modal role="alertdialog"></ion-modal>
     `);
-    const modal = page.locator('ion-modal');
+    const modal = page.locator('ion-modal .modal-wrapper');
 
     await expect(modal).toHaveAttribute('role', 'alertdialog');
   });