Delegate touchable accessibility and forward View props

Summary:
`Pressable`, `TouchableHighlight`, `TouchableOpacity` and `TouchableNativeFeedback` delegate accessibility aliases to `View` instead of reconstructing optional accessibility props. Forward unconsumed Touchable props through `restProps`, preserving touch-specific defaults and existing child props. Use the resolved Pressability disabled state so accessibility and press handling agree, including inherited `aria-disabled` and `accessibilityState.disabled` values. Keep compatibility mappings for non-View native-feedback children.

Changelog:
[General][Fixed] - Forward accessibility aliases and View props consistently through Pressable and Touchable components.

Differential Revision: D126907218

Author: javache

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

@@ -203,16 +203,8 @@ function Pressable({
 }): React.Node {
   const {
     accessible,
-    accessibilityState,
-    'aria-live': ariaLive,
     android_disableSound,
     android_ripple,
-    'aria-busy': ariaBusy,
-    'aria-checked': ariaChecked,
-    'aria-disabled': ariaDisabled,
-    'aria-expanded': ariaExpanded,
-    'aria-label': ariaLabel,
-    'aria-selected': ariaSelected,
     blockNativeResponder,
     cancelable,
     children,
@@ -248,46 +240,13 @@ function Pressable({
   const shouldUpdatePressed =
     typeof children === 'function' || typeof style === 'function';
 
-  let _accessibilityState = {
-    busy: ariaBusy ?? accessibilityState?.busy,
-    checked: ariaChecked ?? accessibilityState?.checked,
-    disabled: ariaDisabled ?? accessibilityState?.disabled,
-    expanded: ariaExpanded ?? accessibilityState?.expanded,
-    selected: ariaSelected ?? accessibilityState?.selected,
-  };
-
-  _accessibilityState =
-    disabled != null ? {..._accessibilityState, disabled} : _accessibilityState;
-
-  const accessibilityValue = {
-    max: props['aria-valuemax'] ?? props.accessibilityValue?.max,
-    min: props['aria-valuemin'] ?? props.accessibilityValue?.min,
-    now: props['aria-valuenow'] ?? props.accessibilityValue?.now,
-    text: props['aria-valuetext'] ?? props.accessibilityValue?.text,
-  };
-
-  const accessibilityLiveRegion =
-    ariaLive === 'off' ? 'none' : (ariaLive ?? props.accessibilityLiveRegion);
+  const accessibilityStateDisabled =
+    restProps['aria-disabled'] ?? restProps.accessibilityState?.disabled;
 
-  const accessibilityLabel = ariaLabel ?? props.accessibilityLabel;
-  const restPropsWithDefaults: React.ComponentProps<typeof View> = {
-    ...restProps,
-    ...android_rippleConfig?.viewProps,
-    accessible: accessible !== false,
-    accessibilityViewIsModal:
-      restProps['aria-modal'] ?? restProps.accessibilityViewIsModal,
-    accessibilityLiveRegion,
-    accessibilityLabel,
-    accessibilityState: _accessibilityState,
-    focusable: focusable !== false,
-    accessibilityValue,
-    hitSlop,
-  };
-
-  const config = useMemo(
+  const pressabilityConfig = useMemo(
     () => ({
       cancelable,
-      disabled,
+      disabled: disabled ?? accessibilityStateDisabled,
       hitSlop,
       pressRectOffset: pressRetentionOffset,
       android_disableSound,
@@ -328,6 +287,7 @@ function Pressable({
       blockNativeResponder,
     }),
     [
+      accessibilityStateDisabled,
       android_disableSound,
       android_rippleConfig,
       blockNativeResponder,
@@ -353,7 +313,20 @@ function Pressable({
     ],
   );
 
-  const eventHandlers = usePressability(config);
+  const eventHandlers = usePressability(pressabilityConfig);
+
+  const restPropsWithDefaults: React.ComponentProps<typeof View> = {
+    ...restProps,
+    ...android_rippleConfig?.viewProps,
+    accessible: accessible !== false,
+    focusable: focusable !== false,
+    hitSlop,
+  };
+
+  if (pressabilityConfig.disabled != null) {
+    // Expose Pressability's resolved disabled state to accessibility through View.
+    restPropsWithDefaults['aria-disabled'] = pressabilityConfig.disabled;
+  }
 
   return (
     <View

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

@@ -24,6 +24,41 @@ import {PlatformColor, Text} from 'react-native';
 
 describe('<Pressable>', () => {
   describe('props', () => {
+    it('lets View resolve accessibility aliases and their precedence', () => {
+      const root = Fantom.createRoot();
+
+      Fantom.runTask(() => {
+        root.render(
+          <Pressable
+            aria-label="ARIA label"
+            accessibilityLabel="Legacy label"
+            aria-busy={false}
+            aria-checked={false}
+            aria-expanded={false}
+            aria-selected={false}
+            accessibilityState={{
+              busy: true,
+              checked: true,
+              expanded: true,
+              selected: true,
+            }}
+          />,
+        );
+      });
+
+      expect(
+        root
+          .getRenderedOutput({
+            props: ['accessibilityLabel', 'accessibilityState'],
+          })
+          .toJSONObject().props,
+      ).toEqual({
+        accessibilityLabel: 'ARIA label',
+        accessibilityState:
+          '{disabled:false,selected:false,checked:Unchecked,busy:false,expanded:false}',
+      });
+    });
+
     describe('style', () => {
       it('can be set with ViewStyle', () => {
         const root = Fantom.createRoot();
@@ -46,7 +81,6 @@ describe('<Pressable>', () => {
         expect(root.getRenderedOutput().toJSX()).toEqual(
           <rn-view
             accessible="true"
-            accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
             backgroundColor="rgba(0, 0, 255, 1)"
             borderWidth="3"
             height="50"
@@ -70,7 +104,6 @@ describe('<Pressable>', () => {
         expect(root.getRenderedOutput().toJSX()).toEqual(
           <rn-view
             accessible="true"
-            accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
             backgroundColor="rgba(128, 128, 128, 1)"
           />,
         );
@@ -101,6 +134,43 @@ describe('<Pressable>', () => {
       });
     });
 
+    it('uses inherited disabled state for presses and lets disabled override it', () => {
+      const root = Fantom.createRoot();
+      const elementRef = createRef<HostInstance>();
+      const onPress = jest.fn();
+
+      for (const props of [
+        {'aria-disabled': true},
+        {accessibilityState: {disabled: true}},
+      ]) {
+        Fantom.runTask(() => {
+          root.render(
+            <Pressable {...props} ref={elementRef} onPress={onPress} />,
+          );
+        });
+        Fantom.dispatchNativeEvent(nullthrows(elementRef.current), 'click');
+        expect(onPress).not.toHaveBeenCalled();
+      }
+
+      Fantom.runTask(() => {
+        root.render(
+          <Pressable
+            ref={elementRef}
+            onPress={onPress}
+            disabled={false}
+            aria-disabled={true}
+          />,
+        );
+      });
+      Fantom.dispatchNativeEvent(nullthrows(elementRef.current), 'click');
+      expect(onPress).toHaveBeenCalledTimes(1);
+      expect(
+        root.getRenderedOutput({props: ['accessibilityState']}).toJSX(),
+      ).toEqual(
+        <rn-view accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}" />,
+      );
+    });
+
     describe('disabled', () => {
       it('cannot be pressed', () => {
         const elementRef = createRef<HostInstance>();
@@ -199,10 +269,7 @@ describe('<Pressable>', () => {
         });
 
         expect(root.getRenderedOutput().toJSX()).toEqual(
-          <rn-view
-            accessible="true"
-            accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-          />,
+          <rn-view accessible="true" />,
         );
       });
 
@@ -221,10 +288,7 @@ describe('<Pressable>', () => {
         });
 
         expect(root.getRenderedOutput().toJSX()).toEqual(
-          <rn-view
-            accessible="true"
-            accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-          />,
+          <rn-view accessible="true" />,
         );
       });
 
@@ -243,10 +307,7 @@ describe('<Pressable>', () => {
         });
 
         expect(root.getRenderedOutput().toJSX()).toEqual(
-          <rn-view
-            accessible="true"
-            accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}"
-          />,
+          <rn-view accessible="true" />,
         );
       });
     });
@@ -268,9 +329,7 @@ describe('<Pressable>', () => {
         expect(element.childNodes.length).toBe(1);
 
         expect(root.getRenderedOutput().toJSX()).toEqual(
-          <rn-view
-            accessible="true"
-            accessibilityState="{disabled:false,selected:null,checked:None,busy:false,expanded:null}">
+          <rn-view accessible="true">
             <rn-paragraph
               allowFontScaling="true"
               ellipsizeMode="tail"

packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js

@@ -10,7 +10,6 @@
 
 import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import type {AccessibilityState} from '../View/ViewAccessibility';
 import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
 import View from '../../Components/View/View';
@@ -98,9 +97,9 @@ class TouchableHighlightImpl extends React.Component<
     return {
       cancelable: !this.props.rejectResponderTermination,
       disabled:
-        this.props.disabled != null
-          ? this.props.disabled
-          : this.props.accessibilityState?.disabled,
+        this.props.disabled ??
+        this.props['aria-disabled'] ??
+        this.props.accessibilityState?.disabled,
       hitSlop: this.props.hitSlop,
       delayLongPress: this.props.delayLongPress,
       delayPressIn: this.props.delayPressIn,
@@ -222,70 +221,50 @@ class TouchableHighlightImpl extends React.Component<
     const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} =
       this.state.pressability.getEventHandlers();
 
-    const accessibilityState: ?AccessibilityState =
-      this.props.disabled != null
-        ? {
-            ...this.props.accessibilityState,
-            disabled: this.props.disabled,
-          }
-        : this.props.accessibilityState;
-
-    const accessibilityValue = {
-      max: this.props['aria-valuemax'] ?? this.props.accessibilityValue?.max,
-      min: this.props['aria-valuemin'] ?? this.props.accessibilityValue?.min,
-      now: this.props['aria-valuenow'] ?? this.props.accessibilityValue?.now,
-      text: this.props['aria-valuetext'] ?? this.props.accessibilityValue?.text,
-    };
-
-    const accessibilityLiveRegion =
-      this.props['aria-live'] === 'off'
-        ? 'none'
-        : (this.props['aria-live'] ?? this.props.accessibilityLiveRegion);
+    const {
+      accessible,
+      activeOpacity,
+      children,
+      delayLongPress,
+      delayPressIn,
+      delayPressOut,
+      disabled,
+      focusable,
+      hostRef,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      onHideUnderlay,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      onShowUnderlay,
+      pressRetentionOffset,
+      rejectResponderTermination,
+      style,
+      testOnly_pressed,
+      touchSoundDisabled,
+      underlayColor,
+      ...restProps
+    } = this.props;
+
+    const pressabilityConfig = this._createPressabilityConfig();
+    if (pressabilityConfig.disabled != null) {
+      // Expose Pressability's resolved disabled state to accessibility through View.
+      restProps['aria-disabled'] = pressabilityConfig.disabled;
+    }
 
-    const accessibilityLabel =
-      this.props['aria-label'] ?? this.props.accessibilityLabel;
     return (
       <View
-        accessible={this.props.accessible !== false}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityHint={this.props.accessibilityHint}
-        accessibilityLanguage={this.props.accessibilityLanguage}
-        accessibilityRole={this.props.accessibilityRole}
-        accessibilityState={accessibilityState}
-        accessibilityValue={accessibilityValue}
-        accessibilityActions={this.props.accessibilityActions}
-        onAccessibilityAction={this.props.onAccessibilityAction}
-        importantForAccessibility={
-          this.props['aria-hidden'] === true
-            ? 'no-hide-descendants'
-            : this.props.importantForAccessibility
-        }
-        accessibilityViewIsModal={
-          this.props['aria-modal'] ?? this.props.accessibilityViewIsModal
-        }
-        accessibilityLiveRegion={accessibilityLiveRegion}
-        accessibilityElementsHidden={
-          this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
-        }
-        style={StyleSheet.compose(
-          this.props.style,
-          this.state.extraStyles?.underlay,
-        )}
-        onLayout={this.props.onLayout}
-        hitSlop={this.props.hitSlop}
-        nextFocusDown={this.props.nextFocusDown}
-        nextFocusForward={this.props.nextFocusForward}
-        nextFocusLeft={this.props.nextFocusLeft}
-        nextFocusRight={this.props.nextFocusRight}
-        nextFocusUp={this.props.nextFocusUp}
+        {...restProps}
+        accessible={accessible !== false}
+        style={StyleSheet.compose(style, this.state.extraStyles?.underlay)}
         focusable={
-          this.props.focusable !== false &&
-          this.props.onPress !== undefined &&
-          !this.props.disabled
+          focusable !== false &&
+          onPress !== undefined &&
+          !pressabilityConfig.disabled
         }
-        nativeID={this.props.id ?? this.props.nativeID}
-        testID={this.props.testID}
-        ref={this.props.hostRef}
+        ref={hostRef}
         {...eventHandlersWithoutBlurAndFocus}>
         {child.type === React.Fragment
           ? child