[react-events] Support screen reader virtual clicks

packages/react-events/src/dom/Press.js

@@ -476,6 +476,17 @@ function handleStopPropagation(
   }
 }
 
+// After some investigation work, screen reader virtual
+// clicks (NVDA, Jaws, VoiceOver) do not have co-ords associated with the click
+// event and "detail" is always 0 (where normal clicks are > 0)
+function isScreenReaderVirtualClick(nativeEvent): boolean {
+  return (
+    nativeEvent.detail === 0 &&
+    nativeEvent.screenX === 0 &&
+    nativeEvent.screenY === 0
+  );
+}
+
 function targetIsDocument(target: null | Node): boolean {
   // When target is null, it is the root
   return target === null || target.nodeType === 9;
@@ -617,6 +628,13 @@ const pressResponderImpl = {
         if (state.shouldPreventClick) {
           nativeEvent.preventDefault();
         }
+        const onPress = props.onPress;
+
+        if (isFunction(onPress) && isScreenReaderVirtualClick(nativeEvent)) {
+          state.pointerType = 'keyboard';
+          state.pressTarget = event.responderTarget;
+          dispatchEvent(event, onPress, context, state, 'press', DiscreteEvent);
+        }
         break;
       }
     }

packages/react-events/src/dom/__tests__/Press-test.internal.js

@@ -420,6 +420,18 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
       innerTarget.pointerup({pointerType: 'mouse'});
       expect(onPress).toBeCalled();
     });
+
+    it('is called once after virtual screen reader "click" event', () => {
+      const target = createEventTarget(ref.current);
+      target.screenReaderClick();
+      expect(onPress).toHaveBeenCalledTimes(1);
+      expect(onPress).toHaveBeenCalledWith(
+        expect.objectContaining({
+          pointerType: 'keyboard',
+          type: 'press',
+        }),
+      );
+    });
   });
 
   describe('onPressMove', () => {

packages/react-events/src/dom/testing-library/domEvents.js

@@ -196,6 +196,43 @@ function createMouseEvent(
   });
 }
 
+function createScreenReaderMouseEvent(
+  type,
+  {
+    altKey = false,
+    buttons = buttonsType.none,
+    ctrlKey = false,
+    metaKey = false,
+    preventDefault = emptyFunction,
+    shiftKey = false,
+  } = {},
+) {
+  const modifierState = {altKey, ctrlKey, metaKey, shiftKey};
+
+  return createEvent(type, {
+    altKey,
+    buttons,
+    clientX: 0,
+    clientY: 0,
+    ctrlKey,
+    detail: 0,
+    getModifierState(keyArg) {
+      createGetModifierState(keyArg, modifierState);
+    },
+    metaKey,
+    movementX: 0,
+    movementY: 0,
+    offsetX: 0,
+    offsetY: 0,
+    pageX: 0,
+    pageY: 0,
+    preventDefault,
+    screenX: 0,
+    screenY: 0,
+    shiftKey,
+  });
+}
+
 function createTouchEvent(
   type,
   {
@@ -254,6 +291,10 @@ export function click(payload) {
   return createMouseEvent('click', payload);
 }
 
+export function screenReaderClick(payload) {
+  return createScreenReaderMouseEvent('click', payload);
+}
+
 export function contextmenu(payload) {
   return createMouseEvent('contextmenu', payload);
 }

packages/react-events/src/dom/testing-library/index.js

@@ -44,6 +44,9 @@ const createEventTarget = node => ({
   keyup(payload) {
     node.dispatchEvent(domEvents.keyup(payload));
   },
+  screenReaderClick(payload) {
+    node.dispatchEvent(domEvents.screenReaderClick(payload));
+  },
   scroll(payload) {
     node.dispatchEvent(domEvents.scroll(payload));
   },