<Link> onClick handler cannot differentiate mouse events from keyboard events

[jackhsu978]

Problem

In #933, I added keyboard event to the onClick event handler, and onClick handler is now a polymorphic event handler that handles two types of events: mouse event and keyboard event. This allow users to trigger navigation on a Link component using the keyboard, which is the accessibility best practice.

However, the onClick function arguments do not tell whether the event is a mouse event or a keyboard event. It is now impossible for the handler to apply logic specific to the mouse event case, such as accessing mouse-event specific properties (e.g. event.clientX). Feature detection on the event object might work, but would be very ugly.

I also did the following attempts but no access:

1. event instanceof SyntheticMouseEvent: doesn't work probably because SytheticMouseEvent is just an abstract flow interface and is not an actual class.
2. event instanceof MouseEvent: flow complains about checking SynethicEvent against a native DOM event class.

Possible Solutions

Here are a list of solutions I can think of: A. better polymorphic onClick signature

({|
  +eventType: 'mouse',
  +event: SyntheticMouseEvent<>
|} | {|
  +eventType: 'keyboard',
  +event: SyntheticKeyboardEvent<>
|}) => void

B. separate the keyboard case to a new onPress prop C. separate the keyboard case to a new onPress prop, and also add onClickOrPress prop (which will do what onClick does today)