From b3efe504c55412da06b1d6aa81a794fc9f644292 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Tue, 23 Aug 2022 14:17:12 +0000
Subject: [PATCH 1/3] fix(modal): dialog role is set on the host

---
 core/src/components/modal/modal.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 12056b52048..32ce04265ec 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -867,6 +867,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
       <Host
         no-router
         aria-modal="true"
+        role="dialog"
         tabindex="-1"
         {...(htmlAttributes as any)}
         style={{
@@ -896,7 +897,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
         {mode === 'ios' && <div class="modal-shadow"></div>}
 
-        <div role="dialog" class="modal-wrapper ion-overlay-wrapper" part="content" ref={(el) => (this.wrapperEl = el)}>
+        <div class="modal-wrapper ion-overlay-wrapper" part="content" ref={(el) => (this.wrapperEl = el)}>
           {showHandle && (
             <button
               class="modal-handle"

From 9f27eca9e0b76cdf23d74aeec5b33154fb44c005 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Tue, 23 Aug 2022 14:47:46 +0000
Subject: [PATCH 2/3] fix(modal): role can be customized

---
 core/src/components/modal/modal.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 32ce04265ec..c718441a43f 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -18,7 +18,8 @@ import type {
 } from '../../interface';
 import { findIonContent, printIonContentErrorMsg } from '../../utils/content';
 import { CoreDelegate, attachComponent, detachComponent } from '../../utils/framework-delegate';
-import { raf } from '../../utils/helpers';
+import { raf, inheritAttributes } from '../../utils/helpers';
+import type { Attributes } from '../../utils/helpers';
 import { KEYBOARD_DID_OPEN } from '../../utils/keyboard/keyboard';
 import { printIonWarning } from '../../utils/logging';
 import { BACKDROP, activeAnimations, dismiss, eventMethod, prepareOverlay, present } from '../../utils/overlays';
@@ -66,6 +67,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private sortedBreakpoints?: number[];
   private keyboardOpenCallback?: () => void;
   private moveSheetToBreakpoint?: (options: MoveSheetToBreakpointOptions) => Promise<void>;
+  private inheritedAttributes: Attributes = {};
 
   private inline = false;
   private workingDelegate?: FrameworkDelegate;
@@ -334,7 +336,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
   }
 
   componentWillLoad() {
-    const { breakpoints, initialBreakpoint, swipeToClose } = this;
+    const { breakpoints, initialBreakpoint, swipeToClose, el } = this;
+
+    this.inheritedAttributes = inheritAttributes(el, ['role']);
 
     /**
      * If user has custom ID set then we should
@@ -855,7 +859,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
   };
 
   render() {
-    const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior } = this;
+    const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes } = this;
 
     const showHandle = handle !== false && isSheetModal;
     const mode = getIonMode(this);
@@ -870,6 +874,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
         role="dialog"
         tabindex="-1"
         {...(htmlAttributes as any)}
+        {...inheritedAttributes}
         style={{
           zIndex: `${20000 + this.overlayIndex}`,
         }}

From e615c7cca72a6b4ee34b0f8f5bdb19174a98a94b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Tue, 23 Aug 2022 14:58:28 +0000
Subject: [PATCH 3/3] test(modal): add tests

---
 .../src/components/modal/test/a11y/index.html | 21 ++++++++++
 .../components/modal/test/a11y/modal.e2e.ts   | 39 +++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 core/src/components/modal/test/a11y/index.html
 create mode 100644 core/src/components/modal/test/a11y/modal.e2e.ts

diff --git a/core/src/components/modal/test/a11y/index.html b/core/src/components/modal/test/a11y/index.html
new file mode 100644
index 00000000000..3697958263f
--- /dev/null
+++ b/core/src/components/modal/test/a11y/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Modal - a11y</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <main>
+      <h1>Modal - a11y</h1>
+
+      <button id="open-modal">Open Modal</button>
+      <ion-modal aria-label="My custom label" trigger="open-modal">My content</ion-modal>
+    </main>
+  </body>
+</html>
diff --git a/core/src/components/modal/test/a11y/modal.e2e.ts b/core/src/components/modal/test/a11y/modal.e2e.ts
new file mode 100644
index 00000000000..db34a1057ef
--- /dev/null
+++ b/core/src/components/modal/test/a11y/modal.e2e.ts
@@ -0,0 +1,39 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('modal: a11y', () => {
+  test.beforeEach(async ({ skip }) => {
+    skip.rtl();
+    skip.mode('md');
+  });
+
+  test('should not have accessibility violations', async ({ page }) => {
+    await page.goto(`/src/components/modal/test/a11y`);
+
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const button = page.locator('#open-modal');
+    const modal = page.locator('ion-modal');
+
+    await expect(modal).toHaveAttribute('role', 'dialog');
+
+    await button.click();
+    await ionModalDidPresent.next();
+
+    const results = await new AxeBuilder({ page }).analyze();
+    expect(results.violations).toEqual([]);
+  });
+
+  test('should allow for custom role', async ({ page }) => {
+    /**
+     * Note: This example should not be used in production.
+     * This only serves to check that `role` can be customized.
+     */
+    await page.setContent(`
+      <ion-modal role="alertdialog"></ion-modal>
+    `);
+    const modal = page.locator('ion-modal');
+
+    await expect(modal).toHaveAttribute('role', 'alertdialog');
+  });
+});