From a4afba37a7fb91a23b83ad81f8db0913faec8de2 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 19 Apr 2024 10:03:05 -0400
Subject: [PATCH 1/2] fix(input): clear button can be navigated using screen
 reader

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

diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 15727fe0e04..f87305aa5f1 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -551,6 +551,7 @@ export class Input implements ComponentInterface {
       ev.preventDefault();
       ev.stopPropagation();
       // Attempt to focus input again after pressing clear button
+      console.log('hi there');
       this.setFocus();
     }
     this.value = '';
@@ -782,6 +783,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 01f810f3295..293f1d1d26d 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);
   };
 };
 

From 89003f5ddb06567e0c092c40f52a7adf5b2f8ae7 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 19 Apr 2024 10:09:59 -0400
Subject: [PATCH 2/2] Update input.tsx

---
 core/src/components/input/input.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index f87305aa5f1..6a1fcd5e8fb 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -551,7 +551,6 @@ export class Input implements ComponentInterface {
       ev.preventDefault();
       ev.stopPropagation();
       // Attempt to focus input again after pressing clear button
-      console.log('hi there');
       this.setFocus();
     }
     this.value = '';