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
 {

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
 {

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
 {

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
 {

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
 {

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
 {

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
 {

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
 {