From ba3c728f2c5c93b990e27c85e6b2cded82226a91 Mon Sep 17 00:00:00 2001
From: Andrew Hayward <ahayward@twitter.com>
Date: Tue, 22 Jun 2021 17:48:19 +0100
Subject: [PATCH] [fix] Image does not set persistent click handler

Only set the click handler if it is needed. This was previously always set,
which caused screen readers to announce the element as "clickable".

Close #2061
---
 .../src/exports/Text/__tests__/index-test.js  | 41 +++++++++++++++++++
 .../src/exports/Text/index.js                 | 26 +++++++-----
 2 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/packages/react-native-web/src/exports/Text/__tests__/index-test.js b/packages/react-native-web/src/exports/Text/__tests__/index-test.js
index ca16ffce9..f8b47bd49 100644
--- a/packages/react-native-web/src/exports/Text/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Text/__tests__/index-test.js
@@ -155,6 +155,34 @@ describe('components/Text', () => {
     });
   });
 
+  describe('prop "onClick"', () => {
+    test('is called', () => {
+      const onClick = jest.fn();
+      const ref = React.createRef();
+      act(() => {
+        render(<Text onClick={onClick} ref={ref} />);
+      });
+      const target = createEventTarget(ref.current);
+      act(() => {
+        target.click();
+      });
+      expect(onClick).toBeCalled();
+    });
+
+    test('is still called if "onPress" is provided', () => {
+      const onClick = jest.fn();
+      const ref = React.createRef();
+      act(() => {
+        render(<Text onClick={onClick} onPress={() => {}} ref={ref} />);
+      });
+      const target = createEventTarget(ref.current);
+      act(() => {
+        target.click();
+      });
+      expect(onClick).toBeCalled();
+    });
+  });
+
   describe('prop "onFocus"', () => {
     test('is called', () => {
       const onFocus = jest.fn();
@@ -184,6 +212,19 @@ describe('components/Text', () => {
       });
       expect(onPress).toBeCalled();
     });
+
+    test('is not called if "onClick" is provided', () => {
+      const onPress = jest.fn();
+      const ref = React.createRef();
+      act(() => {
+        render(<Text onClick={() => {}} onPress={onPress} ref={ref} />);
+      });
+      const target = createEventTarget(ref.current);
+      act(() => {
+        target.click();
+      });
+      expect(onPress).not.toBeCalled();
+    });
   });
 
   describe('prop "ref"', () => {
diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js
index 67a6d343f..e87af4c95 100644
--- a/packages/react-native-web/src/exports/Text/index.js
+++ b/packages/react-native-web/src/exports/Text/index.js
@@ -104,15 +104,17 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
       onStartShouldSetResponderCapture
     });
 
-    function handleClick(e) {
-      if (onClick != null) {
-        onClick(e);
-      }
-      if (onClick == null && onPress != null) {
-        e.stopPropagation();
-        onPress(e);
-      }
-    }
+    const handleClick = React.useCallback(
+      (e) => {
+        if (onClick != null) {
+          onClick(e);
+        } else if (onPress != null) {
+          e.stopPropagation();
+          onPress(e);
+        }
+      },
+      [onClick, onPress]
+    );
 
     let component = hasTextAncestor ? 'span' : 'div';
     const supportedProps = pickProps(props);
@@ -122,7 +124,11 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
     if (!hasTextAncestor) {
       supportedProps.dir = dir != null ? dir : 'auto';
     }
-    supportedProps.onClick = handleClick;
+
+    if (onClick || onPress) {
+      supportedProps.onClick = handleClick;
+    }
+
     supportedProps.style = style;
     if (props.href != null) {
       component = 'a';