allow onClick in conjunction with link touchables

Author: Mathis Neumann

packages/react-native-web/src/exports/createElement/__tests__/index-test.js

@@ -24,6 +24,45 @@ describe('modules/createElement', () => {
     });
   });
 
+  test('gracefully handles onClick for links', () => {
+    let wasCalled = false;
+    const component = shallow(
+      createElement('div', {
+        accessibilityRole: 'link',
+        onClick: () => {
+          wasCalled = true;
+        }
+      })
+    );
+    component.find('a').simulate('click', {
+      isDefaultPrevented() {},
+      nativeEvent: {},
+      preventDefault() {}
+    });
+
+    expect(wasCalled).toBe(true);
+  });
+
+  test('gracefully handles onClick for touchable links', () => {
+    let wasCalled = false;
+    const component = shallow(
+      createElement('div', {
+        accessibilityRole: 'link',
+        onResponderRelease: () => {}, // fake touchable
+        onClick: () => {
+          wasCalled = true;
+        }
+      })
+    );
+    component.find('a').simulate('click', {
+      isDefaultPrevented() {},
+      nativeEvent: {},
+      preventDefault() {}
+    });
+
+    expect(wasCalled).toBe(true);
+  });
+
   describe('prop "accessibilityRole"', () => {
     test('and string component type', () => {
       const component = shallow(createElement('span', { accessibilityRole: 'link' }));

packages/react-native-web/src/exports/createElement/index.js

@@ -70,12 +70,16 @@ const adjustProps = domProps => {
   // element. Click events are not an expected part of the React Native API,
   // and browsers dispatch click events that cannot otherwise be cancelled from
   // preceding mouse events in the responder system.
+  // Handle overrides gracefully if the user provides an onClick method.
+  // If this is provided, the user must make sure to handle the edge cases.
   if (isLinkRole && onResponderRelease) {
-    domProps.onClick = function(e) {
-      if (!e.isDefaultPrevented() && !isModifiedEvent(e.nativeEvent) && !domProps.target) {
-        e.preventDefault();
-      }
-    };
+    domProps.onClick =
+      onClick ||
+      function(e) {
+        if (!e.isDefaultPrevented() && !isModifiedEvent(e.nativeEvent) && !domProps.target) {
+          e.preventDefault();
+        }
+      };
   }
 
   // Button-like roles should trigger 'onClick' if SPACE or ENTER keys are pressed.