feat: Add aria-hidden prop to Pressable, View and Touchables components

Libraries/Components/Pressable/Pressable.js

@@ -52,6 +52,11 @@ type Props = $ReadOnly<{|
   accessibilityValue?: ?AccessibilityValue,
   accessibilityViewIsModal?: ?boolean,
   accessible?: ?boolean,
+  /**
+   * A value indicating whether the accessibility elements contained within
+   * this accessibility element are hidden.
+   */
+  'aria-hidden'?: ?boolean,
   focusable?: ?boolean,
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,

Libraries/Components/Touchable/TouchableBounce.js

@@ -143,10 +143,16 @@ class TouchableBounce extends React.Component<Props, State> {
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
         accessibilityValue={this.props.accessibilityValue}
-        importantForAccessibility={this.props.importantForAccessibility}
+        importantForAccessibility={
+          this.props['aria-hidden'] === true
+            ? 'no-hide-descendants'
+            : this.props.importantForAccessibility
+        }
         accessibilityLiveRegion={this.props.accessibilityLiveRegion}
         accessibilityViewIsModal={this.props.accessibilityViewIsModal}
-        accessibilityElementsHidden={this.props.accessibilityElementsHidden}
+        accessibilityElementsHidden={
+          this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
+        }
         nativeID={this.props.nativeID}
         testID={this.props.testID}
         hitSlop={this.props.hitSlop}

Libraries/Components/Touchable/TouchableHighlight.js

@@ -302,10 +302,16 @@ class TouchableHighlight extends React.Component<Props, State> {
         accessibilityValue={this.props.accessibilityValue}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
-        importantForAccessibility={this.props.importantForAccessibility}
+        importantForAccessibility={
+          this.props['aria-hidden'] === true
+            ? 'no-hide-descendants'
+            : this.props.importantForAccessibility
+        }
         accessibilityLiveRegion={this.props.accessibilityLiveRegion}
         accessibilityViewIsModal={this.props.accessibilityViewIsModal}
-        accessibilityElementsHidden={this.props.accessibilityElementsHidden}
+        accessibilityElementsHidden={
+          this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
+        }
         style={StyleSheet.compose(
           this.props.style,
           this.state.extraStyles?.underlay,

Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -278,10 +278,14 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
         accessibilityActions: this.props.accessibilityActions,
         onAccessibilityAction: this.props.onAccessibilityAction,
         accessibilityValue: this.props.accessibilityValue,
-        importantForAccessibility: this.props.importantForAccessibility,
+        importantForAccessibility:
+          this.props['aria-hidden'] === true
+            ? 'no-hide-descendants'
+            : this.props.importantForAccessibility,
         accessibilityLiveRegion: this.props.accessibilityLiveRegion,
         accessibilityViewIsModal: this.props.accessibilityViewIsModal,
-        accessibilityElementsHidden: this.props.accessibilityElementsHidden,
+        accessibilityElementsHidden:
+          this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden,
         hasTVPreferredFocus: this.props.hasTVPreferredFocus,
         hitSlop: this.props.hitSlop,
         focusable:

Libraries/Components/Touchable/TouchableOpacity.js

@@ -231,10 +231,16 @@ class TouchableOpacity extends React.Component<Props, State> {
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
         accessibilityValue={this.props.accessibilityValue}
-        importantForAccessibility={this.props.importantForAccessibility}
+        importantForAccessibility={
+          this.props['aria-hidden'] === true
+            ? 'no-hide-descendants'
+            : this.props.importantForAccessibility
+        }
         accessibilityLiveRegion={this.props.accessibilityLiveRegion}
         accessibilityViewIsModal={this.props.accessibilityViewIsModal}
-        accessibilityElementsHidden={this.props.accessibilityElementsHidden}
+        accessibilityElementsHidden={
+          this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
+        }
         style={[this.props.style, {opacity: this.state.anim}]}
         nativeID={this.props.nativeID}
         testID={this.props.testID}

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -42,6 +42,7 @@ type Props = $ReadOnly<{|
   accessibilityValue?: ?AccessibilityValue,
   accessibilityViewIsModal?: ?boolean,
   accessible?: ?boolean,
+  'aria-hidden'?: ?boolean,
   children?: ?React.Node,
   delayLongPress?: ?number,
   delayPressIn?: ?number,
@@ -71,7 +72,6 @@ type State = $ReadOnly<{|
 
 const PASSTHROUGH_PROPS = [
   'accessibilityActions',
-  'accessibilityElementsHidden',
   'accessibilityHint',
   'accessibilityLanguage',
   'accessibilityIgnoresInvertColors',
@@ -81,7 +81,6 @@ const PASSTHROUGH_PROPS = [
   'accessibilityValue',
   'accessibilityViewIsModal',
   'hitSlop',
-  'importantForAccessibility',
   'nativeID',
   'onAccessibilityAction',
   'onBlur',
@@ -123,6 +122,13 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
           : this.props.accessibilityState,
       focusable:
         this.props.focusable !== false && this.props.onPress !== undefined,
+
+      accessibilityElementsHidden:
+        this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden,
+      importantForAccessibility:
+        this.props['aria-hidden'] === true
+          ? 'no-hide-descendants'
+          : this.props.importantForAccessibility,
     };
     for (const prop of PASSTHROUGH_PROPS) {
       if (this.props[prop] !== undefined) {

Libraries/Components/View/View.js

@@ -30,12 +30,15 @@ const View: React.AbstractComponent<
 > = React.forwardRef(
   (
     {
-      tabIndex,
-      focusable,
-      role,
+      accessibilityElementsHidden,
       accessibilityRole,
+      'aria-hidden': ariaHidden,
+      focusable,
+      importantForAccessibility,
       pointerEvents,
+      role,
       style,
+      tabIndex,
       ...otherProps
     }: ViewProps,
     forwardedRef,
@@ -118,6 +121,14 @@ const View: React.AbstractComponent<
           accessibilityRole={
             role ? roleToAccessibilityRoleMapping[role] : accessibilityRole
           }
+          accessibilityElementsHidden={
+            ariaHidden ?? accessibilityElementsHidden
+          }
+          importantForAccessibility={
+            ariaHidden === true
+              ? 'no-hide-descendants'
+              : importantForAccessibility
+          }
           {...otherProps}
           style={style}
           pointerEvents={newPointerEvents}

Libraries/Components/View/ViewPropTypes.js

@@ -491,6 +491,14 @@ export type ViewProps = $ReadOnly<{|
    */
   accessibilityLabelledBy?: ?string | ?Array<string>,
 
+  /**
+   * A value indicating whether the accessibility elements contained within
+   * this accessibility element are hidden.
+   *
+   * See https://reactnative.dev/docs/view#aria-hidden
+   */
+  'aria-hidden'?: ?boolean,
+
   /**
    * Views that are only used to layout their children or otherwise don't draw
    * anything may be automatically removed from the native hierarchy as an

packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js

@@ -126,6 +126,14 @@ class AccessibilityExample extends React.Component<{}> {
           </View>
         </RNTesterBlock>
 
+        <RNTesterBlock title="View with hidden children from accessibility tree.">
+          <View aria-hidden>
+            <Text>
+              This view's children are hidden from the accessibility tree
+            </Text>
+          </View>
+        </RNTesterBlock>
+
         {/* Android screen readers will say the accessibility hint instead of the text
            since the view doesn't have a label. */}
         <RNTesterBlock title="Accessible view with TextViews with hint">