Accessibility Escape

Summary: Pull Request resolved: #22047 Differential Revision: D13146179 Pulled By: cpojer fbshipit-source-id: b8a089114a5deafee47dd482e484d413c8c39137
facebook · Dec 7, 2018 · ee7c702 · ee7c702
1 parent 900f2df
commit ee7c702
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 0 deletions.
diff --git a/Libraries/Components/View/ReactNativeViewAttributes.js b/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,

diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
@@ -62,6 +62,14 @@ type DirectEventProps = $ReadOnly<{|
    * See http://facebook.github.io/react-native/docs/view.html#onmagictap
    */
   onMagicTap?: ?() => void,
+
+  /**
+   * 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<{|

diff --git a/RNTester/js/AccessibilityIOSExample.js b/RNTester/js/AccessibilityIOSExample.js
@@ -30,6 +30,11 @@ class AccessibilityIOSExample extends React.Component<{}> {
           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>

diff --git a/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm b/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm
@@ -553,6 +553,12 @@ - (BOOL)accessibilityPerformMagicTap
   return YES;
 }
 
+- (BOOL)accessibilityPerformEscape
+{
+  _eventEmitter->onAccessibilityEscape();
+  return YES;
+}
+
 - (BOOL)didActivateAccessibilityCustomAction:(UIAccessibilityCustomAction *)action
 {
   _eventEmitter->onAccessibilityAction(RCTStringFromNSString(action.name));

diff --git a/React/Views/RCTView.h b/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

diff --git a/React/Views/RCTView.m b/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;

diff --git a/React/Views/RCTViewManager.m b/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)

diff --git a/ReactCommon/fabric/components/view/ViewEventEmitter.cpp b/ReactCommon/fabric/components/view/ViewEventEmitter.cpp
@@ -28,6 +28,10 @@ void ViewEventEmitter::onAccessibilityMagicTap() const {
   dispatchEvent("magicTap");
 }
 
+void ViewEventEmitter::onAccessibilityEscape() const {
+  dispatchEvent("accessibilityEscape");
+}
+
 #pragma mark - Layout
 
 void ViewEventEmitter::onLayout(const LayoutMetrics &layoutMetrics) const {

diff --git a/ReactCommon/fabric/components/view/ViewEventEmitter.h b/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