fix(Touchable): pass role and the missing aria props to the host view

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';
@@ -222,13 +221,25 @@ class TouchableHighlightImpl extends React.Component<
     const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} =
       this.state.pressability.getEventHandlers();
 
-    const accessibilityState: ?AccessibilityState =
+    let _accessibilityState = {
+      busy: this.props['aria-busy'] ?? this.props.accessibilityState?.busy,
+      checked:
+        this.props['aria-checked'] ?? this.props.accessibilityState?.checked,
+      disabled:
+        this.props['aria-disabled'] ?? this.props.accessibilityState?.disabled,
+      expanded:
+        this.props['aria-expanded'] ?? this.props.accessibilityState?.expanded,
+      selected:
+        this.props['aria-selected'] ?? this.props.accessibilityState?.selected,
+    };
+
+    _accessibilityState =
       this.props.disabled != null
         ? {
-            ...this.props.accessibilityState,
+            ..._accessibilityState,
             disabled: this.props.disabled,
           }
-        : this.props.accessibilityState;
+        : _accessibilityState;
 
     const accessibilityValue = {
       max: this.props['aria-valuemax'] ?? this.props.accessibilityValue?.max,
@@ -251,7 +262,8 @@ class TouchableHighlightImpl extends React.Component<
         accessibilityHint={this.props.accessibilityHint}
         accessibilityLanguage={this.props.accessibilityLanguage}
         accessibilityRole={this.props.accessibilityRole}
-        accessibilityState={accessibilityState}
+        role={this.props.role}
+        accessibilityState={_accessibilityState}
         accessibilityValue={accessibilityValue}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}

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

@@ -324,6 +324,7 @@ class TouchableNativeFeedback extends React.Component<
         accessibilityLanguage: this.props.accessibilityLanguage,
         accessibilityLabel: accessibilityLabel,
         accessibilityRole: this.props.accessibilityRole,
+        role: this.props.role,
         accessibilityState: _accessibilityState,
         accessibilityActions: this.props.accessibilityActions,
         onAccessibilityAction: this.props.onAccessibilityAction,

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

@@ -227,6 +227,7 @@ class TouchableOpacity extends React.Component<
         accessibilityHint={this.props.accessibilityHint}
         accessibilityLanguage={this.props.accessibilityLanguage}
         accessibilityRole={this.props.accessibilityRole}
+        role={this.props.role}
         accessibilityState={_accessibilityState}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}

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

@@ -150,6 +150,7 @@ const PASSTHROUGH_PROPS = [
   'onBlur',
   'onFocus',
   'onLayout',
+  'role',
   'testID',
 ] as const;
 
@@ -281,6 +282,11 @@ export default function TouchableWithoutFeedback(
     }
   }
 
+  const accessibilityLabel = props['aria-label'] ?? props.accessibilityLabel;
+  if (accessibilityLabel !== undefined) {
+    elementProps.accessibilityLabel = accessibilityLabel;
+  }
+
   // $FlowFixMe[incompatible-type]
   return cloneElement(element, elementProps, ...children);
 }

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

@@ -51,6 +51,85 @@ describe('<TouchableHighlight>', () => {
 
     accessibilityPropsSuite(ComponentWithAccessibilityProps);
 
+    describe('aria state props', () => {
+      it('maps aria-checked to accessibilityState', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableHighlight aria-checked={true}>
+              <View />
+            </TouchableHighlight>,
+          );
+        });
+
+        expect(
+          root.getRenderedOutput({props: ['accessibilityState']}).toJSX(),
+        ).toEqual(
+          <rn-view accessibilityState="{disabled:false,selected:null,checked:Checked,busy:false,expanded:null}" />,
+        );
+      });
+
+      it('maps aria-busy, aria-expanded and aria-selected to accessibilityState', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableHighlight
+              aria-busy={true}
+              aria-expanded={true}
+              aria-selected={true}>
+              <View />
+            </TouchableHighlight>,
+          );
+        });
+
+        expect(
+          root.getRenderedOutput({props: ['accessibilityState']}).toJSX(),
+        ).toEqual(
+          <rn-view accessibilityState="{disabled:false,selected:true,checked:None,busy:true,expanded:true}" />,
+        );
+      });
+
+      it('maps aria-disabled to accessibilityState', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableHighlight aria-disabled={true}>
+              <View />
+            </TouchableHighlight>,
+          );
+        });
+
+        expect(
+          root.getRenderedOutput({props: ['accessibilityState']}).toJSX(),
+        ).toEqual(
+          <rn-view accessibilityState="{disabled:true,selected:null,checked:None,busy:false,expanded:null}" />,
+        );
+      });
+
+      it('gives aria-checked precedence over accessibilityState', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableHighlight
+              aria-checked={false}
+              accessibilityState={{checked: true}}>
+              <View />
+            </TouchableHighlight>,
+          );
+        });
+
+        expect(
+          root.getRenderedOutput({props: ['accessibilityState']}).toJSX(),
+        ).toEqual(
+          <rn-view accessibilityState="{disabled:false,selected:null,checked:Unchecked,busy:false,expanded:null}" />,
+        );
+      });
+    });
+
     describe('style', () => {
       it('applies style props', () => {
         const root = Fantom.createRoot();

packages/react-native/Libraries/Components/Touchable/__tests__/TouchableNativeFeedback-itest.js

@@ -10,6 +10,9 @@
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
+import type {AccessibilityProps} from 'react-native';
+
+import {rolePropSuite} from '../../../../src/private/__tests__/utilities/accessibilityPropsSuite';
 import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
 import {Text, TouchableNativeFeedback, View} from 'react-native';
@@ -19,6 +22,16 @@ describe('<TouchableNativeFeedback>', () => {
     expect(TouchableNativeFeedback.displayName).toBe('TouchableNativeFeedback');
   });
 
+  component ComponentWithAccessibilityProps(...props: AccessibilityProps) {
+    return (
+      <TouchableNativeFeedback {...props}>
+        <Text>Touchable</Text>
+      </TouchableNativeFeedback>
+    );
+  }
+
+  rolePropSuite(ComponentWithAccessibilityProps);
+
   describe('rendering', () => {
     it('renders its child as pressable', () => {
       const root = Fantom.createRoot();

packages/react-native/Libraries/Components/Touchable/__tests__/TouchableWithoutFeedback-itest.js

@@ -12,7 +12,9 @@ import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
 import type {AccessibilityProps} from 'react-native';
 
-import accessibilityPropsSuite from '../../../../src/private/__tests__/utilities/accessibilityPropsSuite';
+import accessibilityPropsSuite, {
+  rolePropSuite,
+} from '../../../../src/private/__tests__/utilities/accessibilityPropsSuite';
 import * as Fantom from '@react-native/fantom';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
@@ -47,6 +49,59 @@ describe('<TouchableWithoutFeedback>', () => {
     }
 
     accessibilityPropsSuite(ComponentWithAccessibilityProps);
+    rolePropSuite(ComponentWithAccessibilityProps);
+
+    describe('aria-label', () => {
+      it('is mapped to accessibilityLabel', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableWithoutFeedback aria-label="Close">
+              <View />
+            </TouchableWithoutFeedback>,
+          );
+        });
+
+        expect(
+          root.getRenderedOutput({props: ['accessibilityLabel']}).toJSX(),
+        ).toEqual(<rn-view accessibilityLabel="Close" />);
+      });
+
+      it('takes precedence over accessibilityLabel', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableWithoutFeedback
+              aria-label="aria value"
+              accessibilityLabel="native value">
+              <View />
+            </TouchableWithoutFeedback>,
+          );
+        });
+
+        expect(
+          root.getRenderedOutput({props: ['accessibilityLabel']}).toJSX(),
+        ).toEqual(<rn-view accessibilityLabel="aria value" />);
+      });
+
+      it("keeps the child's own label when neither is set", () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableWithoutFeedback>
+              <View accessibilityLabel="child label" />
+            </TouchableWithoutFeedback>,
+          );
+        });
+
+        expect(
+          root.getRenderedOutput({props: ['accessibilityLabel']}).toJSX(),
+        ).toEqual(<rn-view accessibilityLabel="child label" />);
+      });
+    });
 
     describe('disabled', () => {
       it('sets accessibilityState disabled to true', () => {