[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

Author: Andrew Hayward

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"', () => {

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';