From 85ef36e6e8510481942c4c0319530057c8e28578 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 6 Dec 2023 15:56:32 +0700
Subject: [PATCH 1/3] prevent enter key event of button if the focused element
 is clickable

---
 src/components/Button/index.tsx                     | 6 +++++-
 src/components/Pressable/GenericPressable/index.tsx | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index b6861eb820b1..6103c04c8ac4 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -13,6 +13,7 @@ import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
+import useActiveElement from '@hooks/useActiveElement';
 import validateSubmitShortcut from './validateSubmitShortcut';
 
 type ButtonWithText = {
@@ -158,6 +159,9 @@ function Button(
     const theme = useTheme();
     const styles = useThemeStyles();
     const isFocused = useIsFocused();
+    const activeElement = useActiveElement();
+    const roles: string[] = Object.values(CONST.ACCESSIBILITY_ROLE);
+    const shouldDisableEnterShortcut = roles.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}

From c9c2205a7d53f53dbcb362ebd0f4cc992f3bc075 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 6 Dec 2023 16:14:21 +0700
Subject: [PATCH 2/3] fix lint

---
 src/components/Button/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 6103c04c8ac4..874f08ee0ea3 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -7,13 +7,13 @@ 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';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
-import useActiveElement from '@hooks/useActiveElement';
 import validateSubmitShortcut from './validateSubmitShortcut';
 
 type ButtonWithText = {

From 4444e62b918b94f8c09b882ed8a4514cdd497719 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 6 Dec 2023 17:28:19 +0700
Subject: [PATCH 3/3] rename variables

---
 src/components/Button/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 874f08ee0ea3..9cbd19e03dc7 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -160,8 +160,8 @@ function Button(
     const styles = useThemeStyles();
     const isFocused = useIsFocused();
     const activeElement = useActiveElement();
-    const roles: string[] = Object.values(CONST.ACCESSIBILITY_ROLE);
-    const shouldDisableEnterShortcut = roles.includes(activeElement?.role ?? '') && activeElement?.role !== CONST.ACCESSIBILITY_ROLE.TEXT;
+    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) => {