Hide ScrollView and ActivityIndicator content when aria-hidden is set

packages/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -116,6 +116,7 @@ const ActivityIndicator: component(
   onLayout,
   size = 'small',
   style,
+  'aria-hidden': ariaHidden,
   ...restProps
 }: {
   ref?: React.RefSetter<ActivityIndicatorInstance>,
@@ -155,6 +156,7 @@ const ActivityIndicator: component(
 
   return (
     <View
+      aria-hidden={ariaHidden}
       onLayout={onLayout}
       style={StyleSheet.compose(styles.container, style)}>
       {Platform.OS === 'android' ? (

packages/react-native/Libraries/Components/ActivityIndicator/__tests__/ActivityIndicator-itest.js

@@ -55,4 +55,18 @@ describe('ActivityIndicator', () => {
       ),
     ).toEqual(<rn-androidProgressBar width="20" height="20" />);
   });
+
+  it('maps aria-hidden to importantForAccessibility around its indicator', () => {
+    const root = Fantom.createRoot();
+    Fantom.runTask(() => {
+      root.render(<ActivityIndicator aria-hidden={true} />);
+    });
+    expect(
+      root.getRenderedOutput({props: ['importantForAccessibility']}).toJSX(),
+    ).toEqual(
+      <rn-view importantForAccessibility="no-hide-descendants">
+        <rn-androidProgressBar />
+      </rn-view>,
+    );
+  });
 });

packages/react-native/Libraries/Components/ScrollView/ScrollView.js

@@ -1858,10 +1858,19 @@ class ScrollView extends React.Component<ScrollViewProps, ScrollViewState> {
 
     const baseStyle = horizontal ? styles.baseHorizontal : styles.baseVertical;
 
-    const {experimental_endDraggingSensitivityMultiplier, ...otherProps} =
-      this.props;
+    const {
+      experimental_endDraggingSensitivityMultiplier,
+      'aria-hidden': ariaHidden,
+      ...otherProps
+    } = this.props;
     const props = {
       ...otherProps,
+      accessibilityElementsHidden:
+        ariaHidden ?? this.props.accessibilityElementsHidden,
+      importantForAccessibility:
+        ariaHidden === true
+          ? ('no-hide-descendants' as const)
+          : this.props.importantForAccessibility,
       alwaysBounceHorizontal,
       alwaysBounceVertical,
       style: StyleSheet.compose(baseStyle, this.props.style),

packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-itest.js

@@ -43,6 +43,60 @@ describe('<ScrollView>', () => {
     });
   });
 
+  describe('aria-hidden', () => {
+    it('is mapped to importantForAccessibility', () => {
+      const root = Fantom.createRoot();
+
+      Fantom.runTask(() => {
+        root.render(<ScrollView aria-hidden={true} />);
+      });
+
+      expect(
+        root.getRenderedOutput({props: ['importantForAccessibility']}).toJSX(),
+      ).toEqual(
+        <rn-scrollView importantForAccessibility="no-hide-descendants">
+          <rn-view />
+        </rn-scrollView>,
+      );
+    });
+
+    it('resets importantForAccessibility when set to undefined', () => {
+      const root = Fantom.createRoot();
+
+      Fantom.runTask(() => {
+        root.render(<ScrollView aria-hidden={true} />);
+      });
+
+      Fantom.runTask(() => {
+        root.render(<ScrollView />);
+      });
+
+      expect(
+        root.getRenderedOutput({props: ['importantForAccessibility']}).toJSX(),
+      ).toEqual(
+        <rn-scrollView>
+          <rn-view />
+        </rn-scrollView>,
+      );
+    });
+
+    it('leaves an explicit importantForAccessibility in place when absent', () => {
+      const root = Fantom.createRoot();
+
+      Fantom.runTask(() => {
+        root.render(<ScrollView importantForAccessibility="no" />);
+      });
+
+      expect(
+        root.getRenderedOutput({props: ['importantForAccessibility']}).toJSX(),
+      ).toEqual(
+        <rn-scrollView importantForAccessibility="no">
+          <rn-view />
+        </rn-scrollView>,
+      );
+    });
+  });
+
   describe('ref', () => {
     it('receives an instance or null', () => {
       const root = Fantom.createRoot();

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

@@ -22,6 +22,7 @@ import * as React from 'react';
 import {createRef, useEffect, useRef, useState} from 'react';
 import {
   AccessibilityInfo,
+  ActivityIndicator,
   Alert,
   Button,
   Image,
@@ -2265,6 +2266,16 @@ function AriaHiddenExample(): React.Node {
         source={require('../../assets/like.png')}
         style={styles.button}
       />
+
+      <ScrollView aria-hidden={ariaHidden} style={{maxHeight: 60}}>
+        <Text>
+          {ariaHidden
+            ? 'ScrollView content that should be hidden'
+            : 'ScrollView content that should be accessible'}
+        </Text>
+      </ScrollView>
+
+      <ActivityIndicator aria-hidden={ariaHidden} />
     </View>
   );
 }