Accessibility Escape

Libraries/Components/View/ReactNativeViewAttributes.js

@@ -34,6 +34,7 @@ ReactNativeViewAttributes.UIView = {
   onAccessibilityAction: true,
   onAccessibilityTap: true,
   onMagicTap: true,
+  onAccessibilityEscape: true,
   collapsable: true,
   needsOffscreenAlphaCompositing: true,
   style: ReactNativeStyleAttributes,

Libraries/Components/View/ViewPropTypes.js

@@ -62,6 +62,14 @@ type DirectEventProps = $ReadOnly<{|
    * See http://facebook.github.io/react-native/docs/view.html#onmagictap
    */
   onMagicTap?: ?Function,
+
+  /**
+   * When `accessible` is `true`, the system will invoke this function when the
+   * user performs the escape gesture.
+   *
+   * See http://facebook.github.io/react-native/docs/view.html#onaccessibilityescape
+   */
+  onAccessibilityEscape?: ?Function,
 |}>;
 
 type TouchEventProps = $ReadOnly<{|

RNTester/js/AccessibilityIOSExample.js

@@ -26,6 +26,11 @@ class AccessibilityIOSExample extends React.Component<{}> {
         <View onMagicTap={() => alert('onMagicTap success')} accessible={true}>
           <Text>Accessibility magic tap example</Text>
         </View>
+        <View
+          onAccessibilityEscape={() => alert('onAccessibilityEscape success')}
+          accessible={true}>
+          <Text>Accessibility escape example</Text>
+        </View>
         <View accessibilityLabel="Some announcement" accessible={true}>
           <Text>Accessibility label example</Text>
         </View>

React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -536,6 +536,12 @@ - (BOOL)accessibilityPerformMagicTap
   return YES;
 }
 
+- (BOOL)accessibilityPerformEscape
+{
+  _eventEmitter->onAccessibilityEscape();
+  return YES;
+}
+
 - (BOOL)didActivateAccessibilityCustomAction:(UIAccessibilityCustomAction *)action
 {
   _eventEmitter->onAccessibilityAction(RCTStringFromNSString(action.name));

React/Views/RCTView.h

@@ -24,6 +24,7 @@
 @property (nonatomic, copy) RCTDirectEventBlock onAccessibilityAction;
 @property (nonatomic, copy) RCTDirectEventBlock onAccessibilityTap;
 @property (nonatomic, copy) RCTDirectEventBlock onMagicTap;
+@property (nonatomic, copy) RCTDirectEventBlock onAccessibilityEscape;
 
 /**
  * Accessibility properties

React/Views/RCTView.m

@@ -284,6 +284,16 @@ - (BOOL)accessibilityPerformMagicTap
   }
 }
 
+- (BOOL)accessibilityPerformEscape
+{
+  if (_onAccessibilityEscape) {
+    _onAccessibilityEscape(nil);
+    return YES;
+  } else {
+    return NO;
+  }
+}
+
 - (NSString *)description
 {
   NSString *superDescription = super.description;

React/Views/RCTViewManager.m

@@ -119,6 +119,7 @@ - (RCTShadowView *)shadowView
 RCT_REMAP_VIEW_PROPERTY(onAccessibilityAction, reactAccessibilityElement.onAccessibilityAction, RCTDirectEventBlock)
 RCT_REMAP_VIEW_PROPERTY(onAccessibilityTap, reactAccessibilityElement.onAccessibilityTap, RCTDirectEventBlock)
 RCT_REMAP_VIEW_PROPERTY(onMagicTap, reactAccessibilityElement.onMagicTap, RCTDirectEventBlock)
+RCT_REMAP_VIEW_PROPERTY(onAccessibilityEscape, reactAccessibilityElement.onAccessibilityEscape, RCTDirectEventBlock)
 RCT_REMAP_VIEW_PROPERTY(testID, reactAccessibilityElement.accessibilityIdentifier, NSString)
 
 RCT_EXPORT_VIEW_PROPERTY(backgroundColor, UIColor)

ReactCommon/fabric/components/view/ViewEventEmitter.cpp

@@ -24,6 +24,10 @@ void ViewEventEmitter::onAccessibilityMagicTap() const {
   dispatchEvent("magicTap");
 }
 
+void ViewEventEmitter::onAccessibilityEscape() const {
+  dispatchEvent("accessibilityEscape");
+}
+
 #pragma mark - Layout
 
 void ViewEventEmitter::onLayout(const LayoutMetrics &layoutMetrics) const {

ReactCommon/fabric/components/view/ViewEventEmitter.h

@@ -28,6 +28,7 @@ class ViewEventEmitter : public TouchEventEmitter {
   void onAccessibilityAction(const std::string &name) const;
   void onAccessibilityTap() const;
   void onAccessibilityMagicTap() const;
+  void onAccessibilityEscape() const;
 
 #pragma mark - Layout