From 1e3d9bcb88228a29307b588004d04e67c1ae5a25 Mon Sep 17 00:00:00 2001
From: DylanDylann <dylandylan9112@gmail.com>
Date: Mon, 11 Dec 2023 15:56:33 +0700
Subject: [PATCH] fix referral button is not focused

---
 src/components/CopyTextToClipboard.js                 | 3 +++
 src/components/Pressable/PressableWithDelayToggle.tsx | 3 +++
 src/pages/ReferralDetailsPage.js                      | 1 +
 3 files changed, 7 insertions(+)

diff --git a/src/components/CopyTextToClipboard.js b/src/components/CopyTextToClipboard.js
index acd3f08f2b22..678537c6a3d7 100644
--- a/src/components/CopyTextToClipboard.js
+++ b/src/components/CopyTextToClipboard.js
@@ -13,12 +13,14 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     textStyles: PropTypes.arrayOf(PropTypes.object),
     urlToCopy: PropTypes.string,
+    accessibilityRole: PropTypes.string,
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     textStyles: [],
     urlToCopy: null,
+    accessibilityRole: undefined,
 };
 
 function CopyTextToClipboard(props) {
@@ -34,6 +36,7 @@ function CopyTextToClipboard(props) {
             icon={Expensicons.Copy}
             textStyles={props.textStyles}
             onPress={copyToClipboard}
+            accessibilityRole={props.accessibilityRole}
         />
     );
 }
diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx
index b0abe0a91c6c..5e072dc6b1a1 100644
--- a/src/components/Pressable/PressableWithDelayToggle.tsx
+++ b/src/components/Pressable/PressableWithDelayToggle.tsx
@@ -48,6 +48,7 @@ type PressableWithDelayToggleProps = PressableProps & {
      * vertical text alignment of non-Text elements
      */
     inline?: boolean;
+    accessibilityRole?: string;
 };
 
 function PressableWithDelayToggle(
@@ -63,6 +64,7 @@ function PressableWithDelayToggle(
         textStyles,
         iconStyles,
         icon,
+        accessibilityRole,
     }: PressableWithDelayToggleProps,
     ref: PressableRef,
 ) {
@@ -101,6 +103,7 @@ function PressableWithDelayToggle(
             onPress={updatePressState}
             accessibilityLabel={tooltipTexts}
             suppressHighlighting={inline ? true : undefined}
+            accessibilityRole={accessibilityRole}
         >
             <>
                 {inline && labelText}
diff --git a/src/pages/ReferralDetailsPage.js b/src/pages/ReferralDetailsPage.js
index 60b5d23b39da..b4d2b5e3bb9c 100644
--- a/src/pages/ReferralDetailsPage.js
+++ b/src/pages/ReferralDetailsPage.js
@@ -90,6 +90,7 @@ function ReferralDetailsPage({route, account}) {
                 {shouldShowClipboard && (
                     <View style={[styles.border, styles.pv2, styles.ph3, styles.mb6]}>
                         <CopyTextToClipboard
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                             text={translate('referralProgram.copyReferralLink')}
                             textStyles={[styles.colorMuted]}
                             urlToCopy={generateReferralURL(account.primaryLogin)}