add onAccessibilityBlur/onAccessibilityFocus events

CoryWritesCode · CoryWritesCode · commit dbeb228b647e · 2020-12-18T23:18:40.000-05:00
diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
@@ -21,8 +21,17 @@ const View = require('./View/View');
 
 const invariant = require('invariant');
 
-import type {PressEvent} from '../Types/CoreEventTypes';
 import type {ColorValue} from '../StyleSheet/StyleSheet';
+import type {PressEvent, SyntheticEvent} from '../Types/CoreEventTypes';
+
+type TargetEvent = SyntheticEvent<
+  $ReadOnly<{|
+    target: number,
+  |}>,
+>;
+
+type AccessibilityBlurEvent = TargetEvent;
+type AccessibilityFocusEvent = TargetEvent;
 
 type ButtonProps = $ReadOnly<{|
   /**
@@ -134,6 +143,24 @@ type ButtonProps = $ReadOnly<{|
     Used to locate this view in end-to-end tests.
    */
   testID?: ?string,
+
+  /**
+   * When `accessible` is true and VoiceOver (iOS) or TalkBack (Android) is
+   * enabled, this event is fired immediately once the element loses the screen
+   * reader focus.
+   *
+   * See http://facebook.github.io/react-native/docs/view.html#onaccessibilityblur
+   */
+  onAccessibilityBlur: (event?: AccessibilityBlurEvent) => mixed,
+
+  /**
+   * When `accessible` is true and VoiceOver (iOS) or TalkBack (Android) is
+   * enabled, this event is fired immediately once the element gains the screen
+   * reader focus.
+   *
+   * See http://facebook.github.io/react-native/docs/view.html#onaccessibilityfocus
+   */
+  onAccessibilityFocus: (event?: AccessibilityFocusEvent) => mixed,
 |}>;
 
 /**
@@ -251,6 +278,8 @@ class Button extends React.Component<ButtonProps> {
   render(): React.Node {
     const {
       accessibilityLabel,
+      onAccessibilityBlur,
+      onAccessibilityFocus,
       color,
       onPress,
       touchSoundDisabled,
@@ -292,6 +321,8 @@ class Button extends React.Component<ButtonProps> {
         accessibilityLabel={accessibilityLabel}
         accessibilityRole="button"
         accessibilityState={accessibilityState}
+        onAccessibilityBlur={onAccessibilityBlur}
+        onAccessibilityFocus={onAccessibilityFocus}
         hasTVPreferredFocus={hasTVPreferredFocus}
         nextFocusDown={nextFocusDown}
         nextFocusForward={nextFocusForward}
diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
@@ -23,12 +23,12 @@ const invariant = require('invariant');
 const nullthrows = require('nullthrows');
 const setAndForwardRef = require('../../Utilities/setAndForwardRef');
 
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {TextStyleProp, ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import type {ViewProps} from '../View/ViewPropTypes';
-import type {SyntheticEvent, ScrollEvent} from '../../Types/CoreEventTypes';
+import type {ScrollEvent, SyntheticEvent} from '../../Types/CoreEventTypes';
 import type {PressEvent} from '../../Types/CoreEventTypes';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {ViewProps} from '../View/ViewPropTypes';
 import type {TextInputNativeCommands} from './TextInputNativeCommands';
 
 const {useLayoutEffect, useRef, useState} = React;
@@ -96,6 +96,8 @@ type TargetEvent = SyntheticEvent<
 
 export type BlurEvent = TargetEvent;
 export type FocusEvent = TargetEvent;
+export type AccessibilityBlurEvent = TargetEvent;
+export type AccessibilityFocusEvent = TargetEvent;
 
 type Selection = $ReadOnly<{|
   start: number,
@@ -710,6 +712,25 @@ export type Props = $ReadOnly<{|
   forwardedRef?: ?ReactRefSetter<
     React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
   >,
+
+   /**
+   * When `accessible` is true and VoiceOver (iOS) or TalkBack (Android) is
+   * enabled, this event is fired immediately once the element loses the screen
+   * reader focus.
+   *
+   * See http://facebook.github.io/react-native/docs/view.html#onaccessibilityblur
+   */
+
+  onAccessibilityBlur?: ?(event: AccessibilityBlurEvent) => mixed,
+
+  /**
+   * When `accessible` is true and VoiceOver (iOS) or TalkBack (Android) is
+   * enabled, this event is fired immediately once the element gains the screen
+   * reader focus.
+   *
+   * See http://facebook.github.io/react-native/docs/view.html#onaccessibilityfocus
+   */
+  onAccessibilityFocus?: ?(event: AccessibilityFocusEvent) => mixed,
 |}>;
 
 type ImperativeMethods = $ReadOnly<{|
diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js
@@ -10,16 +10,16 @@
 
 'use strict';
 
+import * as React from 'react';
+import View from '../../Components/View/View';
 import Pressability, {
   type PressabilityConfig,
 } from '../../Pressability/Pressability';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import StyleSheet, {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
 import Platform from '../../Utilities/Platform';
-import View from '../../Components/View/View';
-import * as React from 'react';
+import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
 
 type AndroidProps = $ReadOnly<{|
   nextFocusDown?: ?number,
@@ -299,6 +299,8 @@ class TouchableHighlight extends React.Component<Props, State> {
         accessibilityLiveRegion={this.props.accessibilityLiveRegion}
         accessibilityViewIsModal={this.props.accessibilityViewIsModal}
         accessibilityElementsHidden={this.props.accessibilityElementsHidden}
+        onAccessibilityBlur={this.props.onAccessibilityBlur}
+        onAccessibilityFocus={this.props.onAccessibilityFocus}
         style={StyleSheet.compose(
           this.props.style,
           this.state.extraStyles?.underlay,
diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.js b/Libraries/Components/Touchable/TouchableNativeFeedback.js
@@ -279,6 +279,8 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
         accessibilityLiveRegion: this.props.accessibilityLiveRegion,
         accessibilityViewIsModal: this.props.accessibilityViewIsModal,
         accessibilityElementsHidden: this.props.accessibilityElementsHidden,
+        onAccessibilityBlur: this.props.onAccessibilityBlur,
+        onAccessibilityFocus: this.props.onAccessibilityFocus,
         hasTVPreferredFocus: this.props.hasTVPreferredFocus,
         hitSlop: this.props.hitSlop,
         focusable:
diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js
@@ -231,6 +231,8 @@ class TouchableOpacity extends React.Component<Props, State> {
         accessibilityLiveRegion={this.props.accessibilityLiveRegion}
         accessibilityViewIsModal={this.props.accessibilityViewIsModal}
         accessibilityElementsHidden={this.props.accessibilityElementsHidden}
+        onAccessibilityBlur={this.props.onAccessibilityBlur}
+        onAccessibilityFocus={this.props.onAccessibilityFocus}
         style={[this.props.style, {opacity: this.state.anim}]}
         nativeID={this.props.nativeID}
         testID={this.props.testID}
diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
@@ -10,26 +10,29 @@
 
 'use strict';
 
-import Pressability, {
-  type PressabilityConfig,
-} from '../../Pressability/Pressability';
-import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import * as React from 'react';
+import View from '../../Components/View/View';
 import type {
   AccessibilityActionEvent,
   AccessibilityActionInfo,
   AccessibilityRole,
   AccessibilityState,
   AccessibilityValue,
 } from '../../Components/View/ViewAccessibility';
+import Pressability, {
+  type PressabilityConfig,
+} from '../../Pressability/Pressability';
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {
   BlurEvent,
   FocusEvent,
   LayoutEvent,
   PressEvent,
 } from '../../Types/CoreEventTypes';
-import View from '../../Components/View/View';
-import * as React from 'react';
+
+type AccessibilityBlurEvent = BlurEvent;
+type AccessibilityFocusEvent = BlurEvent;
 
 type Props = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
@@ -43,16 +46,18 @@ type Props = $ReadOnly<{|
   accessibilityValue?: ?AccessibilityValue,
   accessibilityViewIsModal?: ?boolean,
   accessible?: ?boolean,
+  onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
+  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
+  onAccessibilityBlur?: ?(event: AccessibilityBlurEvent) => mixed,
+  onAccessibilityFocus?: ?(event: AccessibilityFocusEvent) => mixed,
   children?: ?React.Node,
   delayLongPress?: ?number,
   delayPressIn?: ?number,
   delayPressOut?: ?number,
   disabled?: ?boolean,
   focusable?: ?boolean,
   hitSlop?: ?EdgeInsetsProp,
-  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   nativeID?: ?string,
-  onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   onBlur?: ?(event: BlurEvent) => mixed,
   onFocus?: ?(event: FocusEvent) => mixed,
   onLayout?: ?(event: LayoutEvent) => mixed,
@@ -81,6 +86,8 @@ const PASSTHROUGH_PROPS = [
   'accessibilityState',
   'accessibilityValue',
   'accessibilityViewIsModal',
+  'onAccessibilityBlur',
+  'onAccessibilityFocus',
   'hitSlop',
   'importantForAccessibility',
   'nativeID',
diff --git a/Libraries/Components/View/ReactNativeViewAttributes.js b/Libraries/Components/View/ReactNativeViewAttributes.js
@@ -22,6 +22,8 @@ const UIView = {
   accessibilityState: true,
   accessibilityValue: true,
   accessibilityHint: true,
+  onAccessibilityBlur: true,
+  onAccessibilityFocus: true,
   importantForAccessibility: true,
   nativeID: true,
   testID: true,
diff --git a/Libraries/Components/View/ReactNativeViewViewConfig.js b/Libraries/Components/View/ReactNativeViewViewConfig.js
@@ -94,9 +94,15 @@ const ReactNativeViewConfig: ViewConfig = {
     topAccessibilityAction: {
       registrationName: 'onAccessibilityAction',
     },
+    onAccessibilityBlur: {
+      registrationName: 'onAccessibilityBlur',
+    },
     topAccessibilityEscape: {
       registrationName: 'onAccessibilityEscape',
     },
+    onAccessibilityFocus: {
+      registrationName: 'onAccessibilityFocus',
+    },
     topAccessibilityTap: {
       registrationName: 'onAccessibilityTap',
     },
@@ -193,7 +199,9 @@ const ReactNativeViewConfig: ViewConfig = {
     nativeID: true,
     needsOffscreenAlphaCompositing: true,
     onAccessibilityAction: true,
+    onAccessibilityBlur: true,
     onAccessibilityEscape: true,
+    onAccessibilityFocus: true,
     onAccessibilityTap: true,
     onLayout: true,
     onMagicTap: true,
diff --git a/Libraries/Components/View/ReactNativeViewViewConfigAndroid.js b/Libraries/Components/View/ReactNativeViewViewConfigAndroid.js
@@ -66,6 +66,12 @@ const ReactNativeViewViewConfigAndroid = {
     onAssetDidLoad: {
       registrationName: 'onAssetDidLoad',
     },
+    onAccessibilityBlur: {
+      registrationName: 'onAccessibilityBlur',
+    },
+    onAccessibilityFocus: {
+      registrationName: 'onAccessibilityFocus',
+    },
   },
   validAttributes: {
     hasTVPreferredFocus: true,
diff --git a/Libraries/Components/View/ViewAccessibility.js b/Libraries/Components/View/ViewAccessibility.js
@@ -84,3 +84,12 @@ export type AccessibilityValue = $ReadOnly<{|
    */
   text?: string,
 |}>;
+
+type TargetEvent = SyntheticEvent<
+  $ReadOnly<{|
+    target: number,
+  |}>,
+>;
+
+export type AccessibilityBlurEvent = TargetEvent;
+export type AccessibilityFocusEvent = TargetEvent;
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
@@ -10,23 +10,25 @@
 
 'use strict';
 
+import type {Node} from 'react';
+import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
+import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {
   BlurEvent,
   FocusEvent,
-  MouseEvent,
-  PressEvent,
   Layout,
   LayoutEvent,
+  MouseEvent,
+  PressEvent,
 } from '../../Types/CoreEventTypes';
-import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
-import type {Node} from 'react';
-import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {
-  AccessibilityRole,
-  AccessibilityState,
-  AccessibilityValue,
   AccessibilityActionEvent,
   AccessibilityActionInfo,
+  AccessibilityBlurEvent,
+  AccessibilityFocusEvent,
+  AccessibilityRole,
+  AccessibilityState,
+  AccessibilityValue
 } from './ViewAccessibility';
 
 export type ViewLayout = Layout;
@@ -81,6 +83,25 @@ type DirectEventProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/view.html#onaccessibilityescape
    */
   onAccessibilityEscape?: ?() => mixed,
+
+   /**
+   * When `accessible` is true and VoiceOver (iOS) or TalkBack (Android) is
+   * enabled, this event is fired immediately once the element loses the screen
+   * reader focus.
+   *
+   * See http://facebook.github.io/react-native/docs/view.html#onaccessibilityblur
+   */
+
+  onAccessibilityBlur?: ?(event: AccessibilityBlurEvent) => mixed,
+
+  /**
+   * When `accessible` is true and VoiceOver (iOS) or TalkBack (Android) is
+   * enabled, this event is fired immediately once the element gains the screen
+   * reader focus.
+   *
+   * See http://facebook.github.io/react-native/docs/view.html#onaccessibilityfocus
+   */
+  onAccessibilityFocus?: ?(event: AccessibilityFocusEvent) => mixed,
 |}>;
 
 type MouseEventProps = $ReadOnly<{|
diff --git a/Libraries/Utilities/__tests__/verifyComponentAttributeEquivalence-test.js b/Libraries/Utilities/__tests__/verifyComponentAttributeEquivalence-test.js
@@ -32,6 +32,12 @@ const TestComponentNativeViewConfig = {
     topAccessibilityAction: {
       registrationName: 'onAccessibilityAction',
     },
+    onAccessibilityBlur: {
+      registrationName: 'onAccessibilityBlur',
+    },
+    onAccessibilityFocus: {
+      registrationName: 'onAccessibilityFocus',
+    },
   },
   validAttributes: {
     borderColor: true,
@@ -99,5 +105,11 @@ describe('verifyComponentAttributeEquivalence', () => {
     expect(console.error).toBeCalledWith(
       "'TestComponent' has a view config that does not match native. 'directEventTypes' is missing: topAccessibilityAction",
     );
+    expect(console.error).toBeCalledWith(
+      "'TestComponent' has a view config that does not match native. 'directEventTypes' is missing: onAccessibilityBlur",
+    );
+    expect(console.error).toBeCalledWith(
+      "'TestComponent' has a view config that does not match native. 'directEventTypes' is missing: onAccessibilityFocus",
+    );
   });
 });
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
@@ -417,6 +417,8 @@ protected void onAfterUpdateTransaction(@NonNull T view) {
   public @Nullable Map<String, Object> getExportedCustomDirectEventTypeConstants() {
     return MapBuilder.<String, Object>builder()
         .put("topAccessibilityAction", MapBuilder.of("registrationName", "onAccessibilityAction"))
+        .put("onAccessibilityBlur", MapBuilder.of("registrationName", "onAccessibilityBlur"))
+        .put("onAccessibilityFocus", MapBuilder.of("registrationName", "onAccessibilityFocus"))
         .build();
   }
 
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/interfaces/ViewProps.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/interfaces/ViewProps.java
diff --git a/packages/rn-tester/js/components/RNTesterButton.js b/packages/rn-tester/js/components/RNTesterButton.js
diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
diff --git a/packages/rn-tester/js/examples/Button/ButtonExample.js b/packages/rn-tester/js/examples/Button/ButtonExample.js
diff --git a/packages/rn-tester/js/examples/Touchable/TouchableExample.js b/packages/rn-tester/js/examples/Touchable/TouchableExample.js
