From 5ce0c609f365aa497814067276b67fc4e58bdb35 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 23 Apr 2024 16:53:55 -0400
Subject: [PATCH] fix(input): clear button can be navigated using screen reader
 (#29366) (#29383)

---
 core/src/components/input/input.tsx               |  9 +++++++++
 core/src/utils/input-shims/hacks/scroll-assist.ts | 10 +++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 3607b10322..b08160c1a2 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -831,6 +831,15 @@ export class Input implements ComponentInterface {
                    */
                   ev.preventDefault();
                 }}
+                onFocusin={(ev) => {
+                  /**
+                   * Prevent the focusin event from bubbling otherwise it will cause the focusin
+                   * event listener in scroll assist to fire. When this fires, focus will be moved
+                   * back to the input even if the clear button was never tapped. This poses issues
+                   * for screen readers as it means users would be unable to swipe past the clear button.
+                   */
+                  ev.stopPropagation();
+                }}
                 onClick={this.clearTextInput}
               >
                 <ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>
diff --git a/core/src/utils/input-shims/hacks/scroll-assist.ts b/core/src/utils/input-shims/hacks/scroll-assist.ts
index 01f810f329..293f1d1d26 100644
--- a/core/src/utils/input-shims/hacks/scroll-assist.ts
+++ b/core/src/utils/input-shims/hacks/scroll-assist.ts
@@ -124,7 +124,7 @@ export const enableScrollAssist = (
   const focusOut = () => {
     hasKeyboardBeenPresentedForTextField = false;
     win?.removeEventListener('ionKeyboardDidShow', keyboardShow);
-    componentEl.removeEventListener('focusout', focusOut, true);
+    componentEl.removeEventListener('focusout', focusOut);
   };
 
   /**
@@ -155,15 +155,15 @@ export const enableScrollAssist = (
     );
 
     win?.addEventListener('ionKeyboardDidShow', keyboardShow);
-    componentEl.addEventListener('focusout', focusOut, true);
+    componentEl.addEventListener('focusout', focusOut);
   };
 
-  componentEl.addEventListener('focusin', focusIn, true);
+  componentEl.addEventListener('focusin', focusIn);
 
   return () => {
-    componentEl.removeEventListener('focusin', focusIn, true);
+    componentEl.removeEventListener('focusin', focusIn);
     win?.removeEventListener('ionKeyboardDidShow', keyboardShow);
-    componentEl.removeEventListener('focusout', focusOut, true);
+    componentEl.removeEventListener('focusout', focusOut);
   };
 };