From c3b58f1620bcb74db43e3983ef570b7b982abd83 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 29 Oct 2024 10:04:43 -0400
Subject: [PATCH] fix(overlays): hide the focus trap div from screen readers
 (#29970)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Issue number: resolves #29858

---------

## What is the current behavior?
When swiping between elements using Android TalkBack, a green box is
shown for certain overlays and it gains focus at the beginning and end
of those overlays:

<img width="419" alt="Screenshot 2024-10-25 at 2 44 45 PM"
src="https://github.com/user-attachments/assets/dffd8126-ec1d-4b6f-87fc-6488c7c09aab">

## What is the new behavior?
The `aria-hidden` attribute is now added to the focus trap divs to hide
them from screen readers, without preventing these divs from trapping
keyboard focus.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information
Dev build: `8.3.4-dev.11729882231.1b2e7f13`
---
 core/src/components/action-sheet/action-sheet.tsx | 4 ++--
 core/src/components/alert/alert.tsx               | 4 ++--
 core/src/components/loading/loading.tsx           | 4 ++--
 core/src/components/picker-legacy/picker.tsx      | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 2d003a5dfc3..1b4cfe31410 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -385,7 +385,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
       >
         <ion-backdrop tappable={this.backdropDismiss} />
 
-        <div tabindex="0"></div>
+        <div tabindex="0" aria-hidden="true"></div>
 
         <div class="action-sheet-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
           <div class="action-sheet-container">
@@ -446,7 +446,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
           </div>
         </div>
 
-        <div tabindex="0"></div>
+        <div tabindex="0" aria-hidden="true"></div>
       </Host>
     );
   }
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index ca7efa30fb9..06348e8c065 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -757,7 +757,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
       >
         <ion-backdrop tappable={this.backdropDismiss} />
 
-        <div tabindex="0"></div>
+        <div tabindex="0" aria-hidden="true"></div>
 
         <div class="alert-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
           <div class="alert-head">
@@ -779,7 +779,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
           {this.renderAlertButtons()}
         </div>
 
-        <div tabindex="0"></div>
+        <div tabindex="0" aria-hidden="true"></div>
       </Host>
     );
   }
diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx
index dac4cc5fafc..785f221c208 100644
--- a/core/src/components/loading/loading.tsx
+++ b/core/src/components/loading/loading.tsx
@@ -356,7 +356,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
       >
         <ion-backdrop visible={this.showBackdrop} tappable={this.backdropDismiss} />
 
-        <div tabindex="0"></div>
+        <div tabindex="0" aria-hidden="true"></div>
 
         <div class="loading-wrapper ion-overlay-wrapper">
           {spinner && (
@@ -368,7 +368,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
           {message !== undefined && this.renderLoadingMessage(msgId)}
         </div>
 
-        <div tabindex="0"></div>
+        <div tabindex="0" aria-hidden="true"></div>
       </Host>
     );
   }
diff --git a/core/src/components/picker-legacy/picker.tsx b/core/src/components/picker-legacy/picker.tsx
index cb6f1ba2d9e..6b267823928 100644
--- a/core/src/components/picker-legacy/picker.tsx
+++ b/core/src/components/picker-legacy/picker.tsx
@@ -375,7 +375,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
       >
         <ion-backdrop visible={this.showBackdrop} tappable={this.backdropDismiss}></ion-backdrop>
 
-        <div tabindex="0"></div>
+        <div tabindex="0" aria-hidden="true"></div>
 
         <div class="picker-wrapper ion-overlay-wrapper" role="dialog">
           <div class="picker-toolbar">
@@ -395,7 +395,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
           </div>
         </div>
 
-        <div tabindex="0"></div>
+        <div tabindex="0" aria-hidden="true"></div>
       </Host>
     );
   }