Merge pull request #32549 from dukenv0307/fix/32294

Prevent enter key event of button if the focused element is clickable
Expensify · Dec 6, 2023 · 403182a · 403182a
2 parents e1fcb42 + 4444e62
commit 403182a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -7,6 +7,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
+import useActiveElement from '@hooks/useActiveElement';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import HapticFeedback from '@libs/HapticFeedback';
 import useTheme from '@styles/themes/useTheme';
@@ -158,6 +159,9 @@ function Button(
     const theme = useTheme();
     const styles = useThemeStyles();
     const isFocused = useIsFocused();
+    const activeElement = useActiveElement();
+    const accessibilityRoles: string[] = Object.values(CONST.ACCESSIBILITY_ROLE);
+    const shouldDisableEnterShortcut = accessibilityRoles.includes(activeElement?.role ?? '') && activeElement?.role !== CONST.ACCESSIBILITY_ROLE.TEXT;
 
     const keyboardShortcutCallback = useCallback(
         (event?: GestureResponderEvent | KeyboardEvent) => {
@@ -170,7 +174,7 @@ function Button(
     );
 
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, keyboardShortcutCallback, {
-        isActive: pressOnEnter,
+        isActive: pressOnEnter && !shouldDisableEnterShortcut,
         shouldBubble: allowBubble,
         priority: enterKeyEventListenerPriority,
         shouldPreventDefault: false,

diff --git a/src/components/Pressable/GenericPressable/index.tsx b/src/components/Pressable/GenericPressable/index.tsx
@@ -14,7 +14,7 @@ function WebGenericPressable({focusable = true, ...props}: PressableProps, ref:
             // change native accessibility props to web accessibility props
             focusable={focusable}
             tabIndex={props.tabIndex ?? (!accessible || !focusable) ? -1 : 0}
-            role={props.accessibilityRole as Role}
+            role={(props.accessibilityRole ?? props.role) as Role}
             id={props.nativeID}
             aria-label={props.accessibilityLabel}
             aria-labelledby={props.accessibilityLabelledBy}