feat: add support for splitting focus on nested views of iOS

Libraries/Components/Pressable/Pressable.js

@@ -45,6 +45,7 @@ type Props = $ReadOnly<{|
   accessibilityLabel?: ?Stringish,
   accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
   accessibilityRole?: ?AccessibilityRole,
+  accessibilitySplitFocus?: ?boolean,
   accessibilityState?: ?AccessibilityState,
   accessibilityValue?: ?AccessibilityValue,
   accessibilityViewIsModal?: ?boolean,

Libraries/Components/Touchable/TouchableBounce.js

@@ -158,6 +158,7 @@ class TouchableBounce extends React.Component<Props, State> {
         accessibilityLiveRegion={this.props.accessibilityLiveRegion}
         accessibilityViewIsModal={this.props.accessibilityViewIsModal}
         accessibilityElementsHidden={this.props.accessibilityElementsHidden}
+        accessibilitySplitFocus={this.props.accessibilitySplitFocus}
         nativeID={this.props.nativeID}
         testID={this.props.testID}
         hitSlop={this.props.hitSlop}

Libraries/Components/Touchable/TouchableHighlight.js

@@ -305,6 +305,7 @@ class TouchableHighlight extends React.Component<Props, State> {
         accessibilityLiveRegion={this.props.accessibilityLiveRegion}
         accessibilityViewIsModal={this.props.accessibilityViewIsModal}
         accessibilityElementsHidden={this.props.accessibilityElementsHidden}
+        accessibilitySplitFocus={this.props.accessibilitySplitFocus}
         style={StyleSheet.compose(
           this.props.style,
           this.state.extraStyles?.underlay,

Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -281,6 +281,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
         accessibilityLiveRegion: this.props.accessibilityLiveRegion,
         accessibilityViewIsModal: this.props.accessibilityViewIsModal,
         accessibilityElementsHidden: this.props.accessibilityElementsHidden,
+        accessibilitySplitFocus: this.props.accessibilitySplitFocus,
         hasTVPreferredFocus: this.props.hasTVPreferredFocus,
         hitSlop: this.props.hitSlop,
         focusable:

Libraries/Components/Touchable/TouchableOpacity.js

@@ -234,6 +234,7 @@ class TouchableOpacity extends React.Component<Props, State> {
         accessibilityLiveRegion={this.props.accessibilityLiveRegion}
         accessibilityViewIsModal={this.props.accessibilityViewIsModal}
         accessibilityElementsHidden={this.props.accessibilityElementsHidden}
+        accessibilitySplitFocus={this.props.accessibilitySplitFocus}
         style={[this.props.style, {opacity: this.state.anim}]}
         nativeID={this.props.nativeID}
         testID={this.props.testID}

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -41,6 +41,7 @@ type Props = $ReadOnly<{|
   accessibilityLabel?: ?Stringish,
   accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
   accessibilityRole?: ?AccessibilityRole,
+  accessibilitySplitFocus?: ?boolean,
   accessibilityState?: ?AccessibilityState,
   accessibilityValue?: ?AccessibilityValue,
   accessibilityViewIsModal?: ?boolean,
@@ -80,6 +81,7 @@ const PASSTHROUGH_PROPS = [
   'accessibilityLabel',
   'accessibilityLiveRegion',
   'accessibilityRole',
+  'accessibilitySplitFocus',
   'accessibilityState',
   'accessibilityValue',
   'accessibilityViewIsModal',

Libraries/Components/View/ReactNativeViewViewConfig.js

@@ -122,6 +122,7 @@ const ReactNativeViewConfig = {
     accessibilityLabel: true,
     accessibilityLiveRegion: true,
     accessibilityRole: true,
+    accessibilitySplitFocus: true,
     accessibilityStates: true, // TODO: Can be removed after next release
     accessibilityState: true,
     accessibilityValue: true,

Libraries/Components/View/ViewPropTypes.js

@@ -366,6 +366,15 @@ type IOSViewProps = $ReadOnly<{|
    */
   accessibilityElementsHidden?: ?boolean,
 
+  /**
+   * A value indicating whether the focus of a group of nested accessibility elements
+   * can be captured separately from their parent element.
+   *
+   * @platform ios
+   *
+   */
+  accessibilitySplitFocus?: ?boolean,
+
   /**
    * Whether this `View` should be rendered as a bitmap before compositing.
    *

Libraries/DeprecatedPropTypes/DeprecatedViewPropTypes.js

@@ -153,6 +153,15 @@ module.exports = {
    */
   accessibilityElementsHidden: PropTypes.bool,
 
+  /**
+   * A value indicating whether the focus of a group of nested accessibility elements
+   * can be captured separately from their parent element.
+   *
+   * @platform ios
+   *
+   */
+  accessibilitySplitFocus: PropTypes.bool,
+
   /**
    * When `accessible` is true, the system will try to invoke this function
    * when the user performs an accessibility custom action.

RNTester/js/examples/Accessibility/AccessibilityIOSExample.js

@@ -11,7 +11,7 @@
 'use strict';
 
 const React = require('react');
-const {Text, View, Alert} = require('react-native');
+const {Text, View, Alert, TouchableWithoutFeedback} = require('react-native');
 
 const RNTesterBlock = require('../../components/RNTesterBlock');
 
@@ -55,6 +55,27 @@ class AccessibilityIOSExample extends React.Component<Props> {
             This view's children are hidden from the accessibility tree
           </Text>
         </View>
+        <View
+          style={{paddingVertical: 10, backgroundColor: 'green'}}
+          accessible={true}
+          accessibilitySplitFocus={true}>
+          <Text>Outer Element</Text>
+          <TouchableWithoutFeedback>
+            <View style={{paddingVertical: 10, backgroundColor: 'red'}}>
+              <Text>First Inner Element</Text>
+            </View>
+          </TouchableWithoutFeedback>
+          <TouchableWithoutFeedback>
+            <View
+              style={{
+                paddingVertical: 10,
+                marginTop: 10,
+                backgroundColor: 'red',
+              }}>
+              <Text>Second Inner Element</Text>
+            </View>
+          </TouchableWithoutFeedback>
+        </View>
       </RNTesterBlock>
     );
   }

React/Views/RCTView.h

@@ -20,6 +20,11 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
 
 @interface RCTView : UIView
 
+/**
+ * Accessibility properties
+ */
+@property (nonatomic, assign) BOOL shouldAbandonAccessibilityFocus;
+
 /**
  * Accessibility event handlers
  */

React/Views/RCTView.m

@@ -208,11 +208,28 @@ - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
 
 - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
 {
+  BOOL result = NO;
   if (UIEdgeInsetsEqualToEdgeInsets(self.hitTestEdgeInsets, UIEdgeInsetsZero)) {
-    return [super pointInside:point withEvent:event];
+    result = [super pointInside:point withEvent:event];
+  } else {
+    CGRect hitFrame = UIEdgeInsetsInsetRect(self.bounds, self.hitTestEdgeInsets);
+    result = CGRectContainsPoint(hitFrame, point);
   }
-  CGRect hitFrame = UIEdgeInsetsInsetRect(self.bounds, self.hitTestEdgeInsets);
-  return CGRectContainsPoint(hitFrame, point);
+
+  if (result && self.accessibilitySplitFocus) {
+    NSArray<UIView *> *sortedSubviews = [self reactZIndexSortedSubviews];
+    UIView *hitSubview = nil;
+    for (UIView *subview in [sortedSubviews reverseObjectEnumerator]) {
+      CGPoint convertedPoint = [subview convertPoint:point fromView:self];
+      hitSubview = [subview hitTest:convertedPoint withEvent:event];
+      if (hitSubview != nil) {
+        break;
+      }
+    }
+    _shouldAbandonAccessibilityFocus = hitSubview != nil && [hitSubview isAccessibilityElement];
+  }
+
+  return result;
 }
 
 #pragma mark - Accessibility
@@ -383,7 +400,11 @@ - (UIView *)reactAccessibilityElement
 - (BOOL)isAccessibilityElement
 {
   if (self.reactAccessibilityElement == self) {
-    return [super isAccessibilityElement];
+    if ([super isAccessibilityElement]) {
+        return self.accessibilitySplitFocus ? !_shouldAbandonAccessibilityFocus : YES;
+    } else {
+      return NO;
+    }
   }
 
   return NO;

React/Views/RCTViewManager.m

@@ -142,6 +142,7 @@ - (RCTShadowView *)shadowView
 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(accessibilitySplitFocus, BOOL)
 
 RCT_EXPORT_VIEW_PROPERTY(backgroundColor, UIColor)
 RCT_REMAP_VIEW_PROPERTY(backfaceVisibility, layer.doubleSided, css_backface_visibility_t)

React/Views/UIView+React.h

@@ -120,6 +120,7 @@
 @property (nonatomic, copy) NSDictionary<NSString *, id> *accessibilityState;
 @property (nonatomic, copy) NSArray<NSDictionary *> *accessibilityActions;
 @property (nonatomic, copy) NSDictionary *accessibilityValueInternal;
+@property (nonatomic, assign) BOOL accessibilitySplitFocus;
 
 /**
  * Used in debugging to get a description of the view hierarchy rooted at

React/Views/UIView+React.m

@@ -354,6 +354,16 @@ - (void)setAccessibilityValueInternal:(NSDictionary<NSString *, id> *)accessibil
       self, @selector(accessibilityValueInternal), accessibilityValue, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
 }
 
+- (BOOL)accessibilitySplitFocus
+{
+  return [objc_getAssociatedObject(self, _cmd) boolValue];
+}
+
+- (void)setAccessibilitySplitFocus:(BOOL)accessibilitySplitFocus
+{
+  objc_setAssociatedObject(self, @selector(accessibilitySplitFocus), @(accessibilitySplitFocus), OBJC_ASSOCIATION_ASSIGN);
+}
+
 #pragma mark - Debug
 - (void)react_addRecursiveDescriptionToString:(NSMutableString *)string atLevel:(NSUInteger)level
 {