React Events: allow Tab+Alt on Mac in Focus responder (facebook#15679)

* Fix issue with Tab+alt not being considered as isGlobalFocusVisible candidate on Mac * Add test for Tab+alt on Mac setting pointerType: "keyboard" on a focus event
hyyqcweb · May 31, 2019 · 63fe08e · 63fe08e
1 parent 113497c
commit 63fe08e
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 8 deletions.
diff --git a/packages/react-events/src/Focus.js b/packages/react-events/src/Focus.js
@@ -39,6 +39,11 @@ type FocusEvent = {|
   timeStamp: number,
 |};
 
+const isMac =
+  typeof window !== 'undefined' && window.navigator != null
+    ? /^Mac/.test(window.navigator.platform)
+    : false;
+
 const targetEventTypes = [
   {name: 'focus', passive: true},
   {name: 'blur', passive: true},
@@ -304,7 +309,11 @@ const FocusResponder = {
         const nativeEvent = event.nativeEvent;
         if (
           nativeEvent.key === 'Tab' &&
-          !(nativeEvent.metaKey || nativeEvent.altKey || nativeEvent.ctrlKey)
+          !(
+            nativeEvent.metaKey ||
+            (!isMac && nativeEvent.altKey) ||
+            nativeEvent.ctrlKey
+          )
         ) {
           state.pointerType = 'keyboard';
           isGlobalFocusVisible = true;

diff --git a/packages/react-events/src/__tests__/Focus-test.internal.js b/packages/react-events/src/__tests__/Focus-test.internal.js
@@ -39,16 +39,20 @@ const createPointerEvent = (type, data) => {
   return event;
 };
 
+const modulesInit = () => {
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.enableEventAPI = true;
+  React = require('react');
+  ReactDOM = require('react-dom');
+  Focus = require('react-events/focus');
+};
+
 describe('Focus event responder', () => {
   let container;
 
   beforeEach(() => {
     jest.resetModules();
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.enableEventAPI = true;
-    React = require('react');
-    ReactDOM = require('react-dom');
-    Focus = require('react-events/focus');
+    modulesInit();
 
     container = document.createElement('div');
     document.body.appendChild(container);
@@ -107,7 +111,7 @@ describe('Focus event responder', () => {
   describe('onFocus', () => {
     let onFocus, ref, innerRef;
 
-    beforeEach(() => {
+    const componentInit = () => {
       onFocus = jest.fn();
       ref = React.createRef();
       innerRef = React.createRef();
@@ -119,7 +123,9 @@ describe('Focus event responder', () => {
         </Focus>
       );
       ReactDOM.render(element, container);
-    });
+    };
+
+    beforeEach(componentInit);
 
     it('is called after "focus" event', () => {
       ref.current.dispatchEvent(createFocusEvent('focus'));
@@ -204,6 +210,30 @@ describe('Focus event responder', () => {
         expect.objectContaining({pointerType: 'keyboard'}),
       );
     });
+
+    it('is called with the correct pointerType using Tab+altKey on Mac', () => {
+      jest.resetModules();
+      const platformGetter = jest.spyOn(global.navigator, 'platform', 'get');
+      platformGetter.mockReturnValue('MacIntel');
+      modulesInit();
+      componentInit();
+
+      ref.current.dispatchEvent(
+        createPointerEvent('keypress', {
+          key: 'Tab',
+          altKey: true,
+        }),
+      );
+      ref.current.dispatchEvent(createFocusEvent('focus'));
+      expect(onFocus).toHaveBeenCalledTimes(1);
+      expect(onFocus).toHaveBeenCalledWith(
+        expect.objectContaining({
+          pointerType: 'keyboard',
+        }),
+      );
+
+      platformGetter.mockClear();
+    });
   });
 
   describe('onFocusChange', () => {