fix: map aria-* props in Switch, ScrollView and ActivityIndicator

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

@@ -13,6 +13,7 @@
 import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ViewProps} from '../View/ViewPropTypes';
 
+import resolveAriaProps from '../../../src/private/components/view/resolveAriaProps';
 import StyleSheet, {type ColorValue} from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import View from '../View/View';
@@ -142,7 +143,7 @@ const ActivityIndicator: component(
     animating,
     color,
     hidesWhenStopped,
-    ...restProps,
+    ...resolveAriaProps(restProps),
     ref: forwardedRef,
     style: sizeStyle,
     size: sizeProp,

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

@@ -55,4 +55,15 @@ describe('ActivityIndicator', () => {
       ),
     ).toEqual(<rn-androidProgressBar width="20" height="20" />);
   });
+
+  it('maps aria-label to accessibilityLabel', () => {
+    const root = Fantom.createRoot();
+    Fantom.runTask(() => {
+      root.render(<ActivityIndicator aria-label="Loading orders" />);
+    });
+
+    expect(
+      root.getRenderedOutput({props: ['accessibilityLabel']}).toJSX(),
+    ).toEqual(<rn-androidProgressBar accessibilityLabel="Loading orders" />);
+  });
 });

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

@@ -31,6 +31,7 @@ import {
   VScrollContentViewNativeComponent,
   VScrollViewNativeComponent,
 } from '../../../src/private/components/scrollview/VScrollViewNativeComponents';
+import resolveAriaProps from '../../../src/private/components/view/resolveAriaProps';
 import AnimatedImplementation from '../../Animated/AnimatedImplementation';
 import FrameRateLogger from '../../Interaction/FrameRateLogger';
 import {findNodeHandle} from '../../ReactNative/RendererProxy';
@@ -1861,7 +1862,7 @@ class ScrollView extends React.Component<ScrollViewProps, ScrollViewState> {
     const {experimental_endDraggingSensitivityMultiplier, ...otherProps} =
       this.props;
     const props = {
-      ...otherProps,
+      ...resolveAriaProps(otherProps),
       alwaysBounceHorizontal,
       alwaysBounceVertical,
       style: StyleSheet.compose(baseStyle, this.props.style),

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

@@ -71,6 +71,38 @@ describe('<ScrollView>', () => {
     });
   });
 
+  describe('web-style accessibility props', () => {
+    it('maps aria-label to accessibilityLabel', () => {
+      const root = Fantom.createRoot();
+
+      Fantom.runTask(() => {
+        root.render(<ScrollView aria-label="Photos" />);
+      });
+
+      expect(
+        root.getRenderedOutput({props: ['accessibilityLabel']}).toJSX(),
+      ).toEqual(
+        <rn-scrollView accessibilityLabel="Photos">
+          <rn-view />
+        </rn-scrollView>,
+      );
+    });
+
+    it('maps id to nativeID', () => {
+      const root = Fantom.createRoot();
+
+      Fantom.runTask(() => {
+        root.render(<ScrollView id="feed" />);
+      });
+
+      expect(root.getRenderedOutput({props: ['nativeID']}).toJSX()).toEqual(
+        <rn-scrollView nativeID="feed">
+          <rn-view />
+        </rn-scrollView>,
+      );
+    });
+  });
+
   describe('ref', () => {
     it('receives an instance or null', () => {
       const root = Fantom.createRoot();

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

@@ -14,6 +14,7 @@ import type {NativeSyntheticEvent} from '../../Types/CoreEventTypes';
 import type {AccessibilityState} from '../View/ViewAccessibility';
 import type {ViewProps} from '../View/ViewPropTypes';
 
+import resolveAriaProps from '../../../src/private/components/view/resolveAriaProps';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import useMergeRefs from '../../Utilities/useMergeRefs';
@@ -186,7 +187,7 @@ const Switch: component(
     trackColor,
     value,
     ...restProps
-  } = props;
+  } = resolveAriaProps(props);
   const trackColorForFalse = trackColor?.false;
   const trackColorForTrue = trackColor?.true;
 

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

@@ -87,4 +87,46 @@ describe('Switch', () => {
     expect(onValueChange).toHaveBeenCalledWith(true);
     expect(onChange).toHaveBeenCalled();
   });
+
+  describe('web-style accessibility props', () => {
+    it('maps aria-label to accessibilityLabel', () => {
+      const root = render(<Switch value={false} aria-label="Wi-Fi" />);
+
+      expect(
+        root.getRenderedOutput({props: ['accessibilityLabel']}).toJSX(),
+      ).toEqual(<rn-androidSwitch accessibilityLabel="Wi-Fi" />);
+    });
+
+    it('gives aria-label precedence over accessibilityLabel', () => {
+      const root = render(
+        <Switch
+          value={false}
+          aria-label="aria value"
+          accessibilityLabel="native value"
+        />,
+      );
+
+      expect(
+        root.getRenderedOutput({props: ['accessibilityLabel']}).toJSX(),
+      ).toEqual(<rn-androidSwitch accessibilityLabel="aria value" />);
+    });
+
+    it('maps aria-disabled to accessibilityState', () => {
+      const root = render(<Switch value={false} aria-disabled={true} />);
+
+      expect(
+        root.getRenderedOutput({props: ['accessibilityState']}).toJSX(),
+      ).toEqual(
+        <rn-androidSwitch accessibilityState="{disabled:true,selected:null,checked:None,busy:false,expanded:null}" />,
+      );
+    });
+
+    it('maps id to nativeID', () => {
+      const root = render(<Switch value={false} id="wifi" />);
+
+      expect(root.getRenderedOutput({props: ['nativeID']}).toJSX()).toEqual(
+        <rn-androidSwitch nativeID="wifi" />,
+      );
+    });
+  });
 });

packages/react-native/src/private/components/view/resolveAriaProps.js

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
+
+/**
+ * Converts the web-style accessibility props (`aria-*`, `id`, `tabIndex`) to
+ * the props the native side reads, the same way `View` does. For components
+ * that render a native component directly instead of a `View`: without it,
+ * the native side drops these props.
+ */
+export default function resolveAriaProps<T extends {...ViewProps, ...}>(
+  props: T,
+): T {
+  const {
+    accessibilityState,
+    accessibilityValue,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-hidden': ariaHidden,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-live': ariaLive,
+    'aria-selected': ariaSelected,
+    'aria-valuemax': ariaValueMax,
+    'aria-valuemin': ariaValueMin,
+    'aria-valuenow': ariaValueNow,
+    'aria-valuetext': ariaValueText,
+    id,
+    tabIndex,
+    ...otherProps
+  } = props;
+
+  const resolvedProps = otherProps as {...ViewProps, ...};
+
+  const parsedAriaLabelledBy = ariaLabelledBy?.split(/\s*,\s*/g);
+  if (parsedAriaLabelledBy !== undefined) {
+    resolvedProps.accessibilityLabelledBy = parsedAriaLabelledBy;
+  }
+
+  if (ariaLabel !== undefined) {
+    resolvedProps.accessibilityLabel = ariaLabel;
+  }
+
+  if (ariaLive !== undefined) {
+    resolvedProps.accessibilityLiveRegion =
+      ariaLive === 'off' ? 'none' : ariaLive;
+  }
+
+  if (ariaHidden !== undefined) {
+    resolvedProps.accessibilityElementsHidden = ariaHidden;
+    if (ariaHidden === true) {
+      resolvedProps.importantForAccessibility = 'no-hide-descendants';
+    }
+  }
+
+  if (id !== undefined) {
+    resolvedProps.nativeID = id;
+  }
+
+  if (tabIndex !== undefined) {
+    resolvedProps.focusable = !tabIndex;
+  }
+
+  if (
+    accessibilityState != null ||
+    ariaBusy != null ||
+    ariaChecked != null ||
+    ariaDisabled != null ||
+    ariaExpanded != null ||
+    ariaSelected != null
+  ) {
+    resolvedProps.accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
+  }
+
+  if (
+    accessibilityValue != null ||
+    ariaValueMax != null ||
+    ariaValueMin != null ||
+    ariaValueNow != null ||
+    ariaValueText != null
+  ) {
+    resolvedProps.accessibilityValue = {
+      max: ariaValueMax ?? accessibilityValue?.max,
+      min: ariaValueMin ?? accessibilityValue?.min,
+      now: ariaValueNow ?? accessibilityValue?.now,
+      text: ariaValueText ?? accessibilityValue?.text,
+    };
+  }
+
+  // $FlowFixMe[incompatible-type] The aria-* props are replaced, the rest of T is kept
+  return resolvedProps;
+}