diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index b6861eb820b1..9cbd19e03dc7 100644 --- 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 index d87b3a9810d1..51099733e04f 100644 --- 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}