From 1504b8888d6f79ea382935ed52b104b9f841d150 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 31 Oct 2022 14:02:09 -0500
Subject: [PATCH] fix(modal): buttons are highlighted with VoiceOver (#26180)

resolves #26156
---
 core/src/components/modal/modal.tsx           | 20 ++++++++++++++-----
 .../components/modal/test/a11y/modal.e2e.ts   |  4 ++--
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index b4500948ed..804c803dc7 100644
--- a/core/src/components/modal/modal.tsx
+++ b/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"
diff --git a/core/src/components/modal/test/a11y/modal.e2e.ts b/core/src/components/modal/test/a11y/modal.e2e.ts
index db34a1057e..6a040388a2 100644
--- a/core/src/components/modal/test/a11y/modal.e2e.ts
+++ b/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');
   });