Preserve onClick/keyUp/keyDown event listener for Touchables

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

@@ -800,6 +800,15 @@ const TouchableMixin = {
     const ENTER = 13;
     const SPACE = 32;
     const { type, which } = e;
+    const { onKeyUp, onKeyDown } = this.props;
+
+    let eventHandlerFromProps: ?(e: Event) => any = null;
+    if (type === 'keyup') {
+      eventHandlerFromProps = onKeyUp;
+    } else if (type === 'keydown') {
+      eventHandlerFromProps = onKeyDown;
+    }
+
     if (which === ENTER || which === SPACE) {
       if (type === 'keydown') {
         if (!this._isTouchableKeyboardActive) {
@@ -822,11 +831,17 @@ const TouchableMixin = {
           }
         }
       }
-      e.stopPropagation();
-      // prevent the default behaviour unless the Touchable functions as a link
-      // and Enter is pressed
-      if (!(which === ENTER && AccessibilityUtil.propsToAriaRole(this.props) === 'link')) {
-        e.preventDefault();
+
+      if (typeof eventHandlerFromProps === 'function') {
+        // the user decided to opt out, we do not handle stopPropagation/preventDefault then
+        eventHandlerFromProps(e);
+      } else {
+        e.stopPropagation();
+        // prevent the default behaviour unless the Touchable functions as a link
+        // and Enter is pressed
+        if (!(which === ENTER && AccessibilityUtil.propsToAriaRole(this.props) === 'link')) {
+          e.preventDefault();
+        }
       }
     }
   }

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.