RN: Implement sendAccessibilityEvent in RN Renderer that proxies be…

…tween Fabric/non-Fabric (#20554) * RN: Implement `sendAccessibilityEvent` on HostComponent Implement `sendAccessibilityEvent` on HostComponent for Fabric and non-Fabric RN. Currently the Fabric version is a noop and non-Fabric uses AccessibilityInfo directly. The Fabric version will be updated once native Fabric Android/iOS support this method in the native UIManager. * Move methods out of HostComponent * Properly type dispatchCommand and sendAccessibilityEvent handle arg * Implement Fabric side of sendAccessibilityEvent * Add tests: 1. Fabric->Fabric, 2. Paper->Fabric, 3. Fabric->Paper, 4. Paper->Paper * Fix typo: ReactFaricEventTouch -> ReactFabricEventTouch * fix flow types * prettier
facebook · Jan 27, 2021 · e316f78 · e316f78
1 parent 9c32622
commit e316f78
Show file tree

Hide file tree

Showing 11 changed files with 273 additions and 11 deletions.
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
@@ -30,8 +30,11 @@ import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal
 import {setBatchingImplementation} from './legacy-events/ReactGenericBatching';
 import ReactVersion from 'shared/ReactVersion';
 
-// Module provided by RN:
-import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+// Modules provided by RN:
+import {
+ UIManager,
+ legacySendAccessibilityEvent,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 import {getClosestInstanceFromNode} from './ReactFabricComponentTree';
 import {
@@ -169,6 +172,27 @@ function dispatchCommand(handle: any, command: string, args: Array<any>) {
  }
 }
 
+function sendAccessibilityEvent(handle: any, eventType: string) {
+ if (handle._nativeTag == null) {
+ if (__DEV__) {
+ console.error(
+ "sendAccessibilityEvent was called with a ref that isn't a " +
+ 'native component. Use React.forwardRef to get access to the underlying native component',
+ );
+ }
+ return;
+ }
+
+ if (handle._internalInstanceHandle) {
+ nativeFabricUIManager.sendAccessibilityEvent(
+ handle._internalInstanceHandle.stateNode.node,
+ eventType,
+ );
+ } else {
+ legacySendAccessibilityEvent(handle._nativeTag, eventType);
+ }
+}
+
 function render(
  element: React$Element<any>,
  containerTag: any,
@@ -224,6 +248,7 @@ export {
  findHostInstance_DEPRECATED,
  findNodeHandle,
  dispatchCommand,
+ sendAccessibilityEvent,
  render,
  // Deprecated - this function is being renamed to stopSurface, use that instead.
  // TODO (T47576999): Delete this once it's no longer called from native code.

diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -32,8 +32,11 @@ import {
  batchedUpdates,
 } from './legacy-events/ReactGenericBatching';
 import ReactVersion from 'shared/ReactVersion';
-// Module provided by RN:
-import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+// Modules provided by RN:
+import {
+ UIManager,
+ legacySendAccessibilityEvent,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 import {getClosestInstanceFromNode} from './ReactNativeComponentTree';
 import {
@@ -168,6 +171,27 @@ function dispatchCommand(handle: any, command: string, args: Array<any>) {
  }
 }
 
+function sendAccessibilityEvent(handle: any, eventType: string) {
+ if (handle._nativeTag == null) {
+ if (__DEV__) {
+ console.error(
+ "sendAccessibilityEvent was called with a ref that isn't a " +
+ 'native component. Use React.forwardRef to get access to the underlying native component',
+ );
+ }
+ return;
+ }
+
+ if (handle._internalInstanceHandle) {
+ nativeFabricUIManager.sendAccessibilityEvent(
+ handle._internalInstanceHandle.stateNode.node,
+ eventType,
+ );
+ } else {
+ legacySendAccessibilityEvent(handle._nativeTag, eventType);
+ }
+}
+
 function render(
  element: React$Element<any>,
  containerTag: any,
@@ -238,6 +262,7 @@ export {
  findHostInstance_DEPRECATED,
  findNodeHandle,
  dispatchCommand,
+ sendAccessibilityEvent,
  render,
  unmountComponentAtNode,
  unmountComponentAtNodeAndRemoveContainer,

diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -149,7 +149,15 @@ export type ReactNativeType = {
  componentOrHandle: any,
  ): ?ElementRef<HostComponent<mixed>>,
  findNodeHandle(componentOrHandle: any): ?number,
- dispatchCommand(handle: any, command: string, args: Array<any>): void,
+ dispatchCommand(
+ handle: ElementRef<HostComponent<mixed>>,
+ command: string,
+ args: Array<any>,
+ ): void,
+ sendAccessibilityEvent(
+ handle: ElementRef<HostComponent<mixed>>,
+ eventType: string,
+ ): void,
  render(
  element: React$Element<any>,
  containerTag: any,
@@ -168,7 +176,15 @@ export type ReactFabricType = {
  componentOrHandle: any,
  ): ?ElementRef<HostComponent<mixed>>,
  findNodeHandle(componentOrHandle: any): ?number,
- dispatchCommand(handle: any, command: string, args: Array<any>): void,
+ dispatchCommand(
+ handle: ElementRef<HostComponent<mixed>>,
+ command: string,
+ args: Array<any>,
+ ): void,
+ sendAccessibilityEvent(
+ handle: ElementRef<HostComponent<mixed>>,
+ eventType: string,
+ ): void,
  render(
  element: React$Element<any>,
  containerTag: any,
@@ -190,7 +206,7 @@ export type ReactNativeEventTarget = {
  ...
 };
 
-export type ReactFaricEventTouch = {
+export type ReactFabricEventTouch = {
  identifier: number,
  locationX: number,
  locationY: number,
@@ -204,10 +220,10 @@ export type ReactFaricEventTouch = {
  ...
 };
 
-export type ReactFaricEvent = {
- touches: Array<ReactFaricEventTouch>,
- changedTouches: Array<ReactFaricEventTouch>,
- targetTouches: Array<ReactFaricEventTouch>,
+export type ReactFabricEvent = {
+ touches: Array<ReactFabricEventTouch>,
+ changedTouches: Array<ReactFabricEventTouch>,
+ targetTouches: Array<ReactFabricEventTouch>,
  target: number,
  ...
 };

diff --git a/...erer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js b/...erer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
@@ -122,6 +122,8 @@ const RCTFabricUIManager = {
 
  dispatchCommand: jest.fn(),
 
+ sendAccessibilityEvent: jest.fn(),
+
  registerEventHandler: jest.fn(function registerEventHandler(callback) {}),
 
  measure: jest.fn(function measure(node, callback) {

diff --git a/...renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js b/...renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js
@@ -38,4 +38,7 @@ module.exports = {
  get flattenStyle() {
  return require('./flattenStyle');
  },
+ get legacySendAccessibilityEvent() {
+ return require('./legacySendAccessibilityEvent');
+ },
 };
diff --git a/...ages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js b/...ages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
@@ -88,6 +88,7 @@ const RCTUIManager = {
  });
  }),
  dispatchViewManagerCommand: jest.fn(),
+ sendAccessibilityEvent: jest.fn(),
  setJSResponder: jest.fn(),
  setChildren: jest.fn(function setChildren(parentTag, reactTags) {
  autoCreateRoot(parentTag);

diff --git a/...enderer/src/__mocks__/react-native/Libraries/ReactPrivate/legacySendAccessibilityEvent.js b/...enderer/src/__mocks__/react-native/Libraries/ReactPrivate/legacySendAccessibilityEvent.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+module.exports = jest.fn();
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -24,6 +24,10 @@ const DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT =
  "Warning: dispatchCommand was called with a ref that isn't a " +
  'native component. Use React.forwardRef to get access to the underlying native component';
 
+const SEND_ACCESSIBILITY_EVENT_REQUIRES_HOST_COMPONENT =
+ "sendAccessibilityEvent was called with a ref that isn't a " +
+ 'native component. Use React.forwardRef to get access to the underlying native component';
+
 jest.mock('shared/ReactFeatureFlags', () =>
  require('shared/forks/ReactFeatureFlags.native-oss'),
 );
@@ -289,6 +293,64 @@ describe('ReactFabric', () => {
  expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
  });
 
+ it('should call sendAccessibilityEvent for native refs', () => {
+ const View = createReactNativeComponentClass('RCTView', () => ({
+ validAttributes: {foo: true},
+ uiViewClassName: 'RCTView',
+ }));
+
+ nativeFabricUIManager.sendAccessibilityEvent.mockClear();
+
+ let viewRef;
+ ReactFabric.render(
+ <View
+ ref={ref => {
+ viewRef = ref;
+ }}
+ />,
+ 11,
+ );
+
+ expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
+ ReactFabric.sendAccessibilityEvent(viewRef, 'focus');
+ expect(nativeFabricUIManager.sendAccessibilityEvent).toHaveBeenCalledTimes(
+ 1,
+ );
+ expect(nativeFabricUIManager.sendAccessibilityEvent).toHaveBeenCalledWith(
+ expect.any(Object),
+ 'focus',
+ );
+ });
+
+ it('should warn and no-op if calling sendAccessibilityEvent on non native refs', () => {
+ class BasicClass extends React.Component {
+ render() {
+ return <React.Fragment />;
+ }
+ }
+
+ nativeFabricUIManager.sendAccessibilityEvent.mockReset();
+
+ let viewRef;
+ ReactFabric.render(
+ <BasicClass
+ ref={ref => {
+ viewRef = ref;
+ }}
+ />,
+ 11,
+ );
+
+ expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
+ expect(() => {
+ ReactFabric.sendAccessibilityEvent(viewRef, 'eventTypeName');
+ }).toErrorDev([SEND_ACCESSIBILITY_EVENT_REQUIRES_HOST_COMPONENT], {
+ withoutStack: true,
+ });
+
+ expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
+ });
+
  it('should call FabricUIManager.measure on ref.measure', () => {
  const View = createReactNativeComponentClass('RCTView', () => ({
  validAttributes: {foo: true},

diff --git a/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js
@@ -15,13 +15,15 @@ let ReactFabric;
 let ReactNative;
 let UIManager;
 let createReactNativeComponentClass;
+let ReactNativePrivateInterface;
 
 describe('created with ReactFabric called with ReactNative', () => {
  beforeEach(() => {
  jest.resetModules();
  require('react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager');
  ReactNative = require('react-native-renderer');
  jest.resetModules();
+ ReactNativePrivateInterface = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface');
  UIManager = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
  .UIManager;
  jest.mock('shared/ReactFeatureFlags', () =>
@@ -92,6 +94,28 @@ describe('created with ReactFabric called with ReactNative', () => {
  ).toHaveBeenCalledWith(expect.any(Object), 'myCommand', [10, 20]);
  expect(UIManager.dispatchViewManagerCommand).not.toBeCalled();
  });
+
+ it('dispatches sendAccessibilityEvent on Fabric nodes with the RN renderer', () => {
+ nativeFabricUIManager.sendAccessibilityEvent.mockClear();
+ const View = createReactNativeComponentClass('RCTView', () => ({
+ validAttributes: {title: true},
+ uiViewClassName: 'RCTView',
+ }));
+
+ const ref = React.createRef();
+
+ ReactFabric.render(<View title="bar" ref={ref} />, 11);
+ expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
+ ReactNative.sendAccessibilityEvent(ref.current, 'focus');
+ expect(nativeFabricUIManager.sendAccessibilityEvent).toHaveBeenCalledTimes(
+ 1,
+ );
+ expect(nativeFabricUIManager.sendAccessibilityEvent).toHaveBeenCalledWith(
+ expect.any(Object),
+ 'focus',
+ );
+ expect(UIManager.sendAccessibilityEvent).not.toBeCalled();
+ });
 });
 
 describe('created with ReactNative called with ReactFabric', () => {
@@ -171,4 +195,28 @@ describe('created with ReactNative called with ReactFabric', () => {
 
  expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
  });
+
+ it('dispatches sendAccessibilityEvent on Paper nodes with the Fabric renderer', () => {
+ ReactNativePrivateInterface.legacySendAccessibilityEvent.mockReset();
+ const View = createReactNativeComponentClass('RCTView', () => ({
+ validAttributes: {title: true},
+ uiViewClassName: 'RCTView',
+ }));
+
+ const ref = React.createRef();
+
+ ReactNative.render(<View title="bar" ref={ref} />, 11);
+ expect(
+ ReactNativePrivateInterface.legacySendAccessibilityEvent,
+ ).not.toBeCalled();
+ ReactFabric.sendAccessibilityEvent(ref.current, 'focus');
+ expect(
+ ReactNativePrivateInterface.legacySendAccessibilityEvent,
+ ).toHaveBeenCalledTimes(1);
+ expect(
+ ReactNativePrivateInterface.legacySendAccessibilityEvent,
+ ).toHaveBeenCalledWith(expect.any(Number), 'focus');
+
+ expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
+ });
 });