Skip to content

Commit 5ce0c60

Browse files
authored
fix(input): clear button can be navigated using screen reader (#29366) (#29383)
1 parent f69aa8c commit 5ce0c60

File tree

2 files changed

+14
-5
lines changed

2 files changed

+14
-5
lines changed

core/src/components/input/input.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -831,6 +831,15 @@ export class Input implements ComponentInterface {
831831
*/
832832
ev.preventDefault();
833833
}}
834+
onFocusin={(ev) => {
835+
/**
836+
* Prevent the focusin event from bubbling otherwise it will cause the focusin
837+
* event listener in scroll assist to fire. When this fires, focus will be moved
838+
* back to the input even if the clear button was never tapped. This poses issues
839+
* for screen readers as it means users would be unable to swipe past the clear button.
840+
*/
841+
ev.stopPropagation();
842+
}}
834843
onClick={this.clearTextInput}
835844
>
836845
<ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>

core/src/utils/input-shims/hacks/scroll-assist.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export const enableScrollAssist = (
124124
const focusOut = () => {
125125
hasKeyboardBeenPresentedForTextField = false;
126126
win?.removeEventListener('ionKeyboardDidShow', keyboardShow);
127-
componentEl.removeEventListener('focusout', focusOut, true);
127+
componentEl.removeEventListener('focusout', focusOut);
128128
};
129129

130130
/**
@@ -155,15 +155,15 @@ export const enableScrollAssist = (
155155
);
156156

157157
win?.addEventListener('ionKeyboardDidShow', keyboardShow);
158-
componentEl.addEventListener('focusout', focusOut, true);
158+
componentEl.addEventListener('focusout', focusOut);
159159
};
160160

161-
componentEl.addEventListener('focusin', focusIn, true);
161+
componentEl.addEventListener('focusin', focusIn);
162162

163163
return () => {
164-
componentEl.removeEventListener('focusin', focusIn, true);
164+
componentEl.removeEventListener('focusin', focusIn);
165165
win?.removeEventListener('ionKeyboardDidShow', keyboardShow);
166-
componentEl.removeEventListener('focusout', focusOut, true);
166+
componentEl.removeEventListener('focusout', focusOut);
167167
};
168168
};
169169

0 commit comments

Comments
 (0)