Add accessibilityRole=link if Text is pressable (#54490)

Summary:
Pull Request resolved: #54490

Changelog:
[General][Changed] - Text components with onPress or onLongPress now automatically get accessibilityRole='link' for proper accessibility support

## Background

React Native on Android only generates ClickableSpans when the associated JS element uses `role="link"` or `accessibilityRole="link"`.

Without ClickableSpans, accessibility tools cannot properly identify these interactive text elements.

### This Change

This change makes React Native automatically set `accessibilityRole='link'` on Text components that are pressable, unless an explicit `accessibilityRole`/`role` is already provided.

Reviewed By: javache

Differential Revision: D86657563

fbshipit-source-id: cc1b6f1f91c22d5b6cf7fc4487eeeb612c4a752a

Author: fabriziocucci

packages/react-native/Libraries/Text/Text.js

@@ -45,6 +45,7 @@ if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
     ref: forwardedRef,
     accessible,
     accessibilityLabel,
+    accessibilityRole,
     accessibilityState,
     allowFontScaling,
     'aria-busy': ariaBusy,
@@ -71,6 +72,7 @@ if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
     onResponderTerminationRequest,
     onStartShouldSetResponder,
     pressRetentionOffset,
+    role,
     selectable,
     selectionColor,
     suppressHighlighting,
@@ -149,6 +151,17 @@ if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
         onStartShouldSetResponder != null) &&
       _disabled !== true;
 
+    const shouldUseLinkRole =
+      ReactNativeFeatureFlags.shouldUseLinkRoleForPressableText() &&
+      isPressable &&
+      accessibilityRole == null &&
+      role == null;
+
+    const _accessibilityRole =
+      accessibilityRole ?? (shouldUseLinkRole ? 'link' : undefined);
+
+    const _role = shouldUseLinkRole ? undefined : role;
+
     // TODO: Move this processing to the view configuration.
     const _selectionColor =
       selectionColor != null ? processColor(selectionColor) : undefined;
@@ -206,6 +219,9 @@ if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
     if (_accessibilityLabel !== undefined) {
       processedProps.accessibilityLabel = _accessibilityLabel;
     }
+    if (_accessibilityRole !== undefined) {
+      processedProps.accessibilityRole = _accessibilityRole;
+    }
     if (_accessibilityState !== undefined) {
       processedProps.accessibilityState = _accessibilityState;
     }
@@ -224,6 +240,9 @@ if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
     if (_selectionColor !== undefined) {
       processedProps.selectionColor = _selectionColor;
     }
+    if (_role !== undefined) {
+      processedProps.role = _role;
+    }
 
     let textPressabilityProps: ?TextPressabilityProps;
     if (isPressable) {
@@ -317,6 +336,7 @@ if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
     accessibilityElementsHidden,
     importantForAccessibility,
     accessibilityLabel,
+    accessibilityRole,
     accessibilityState,
     allowFontScaling,
     'aria-busy': ariaBusy,
@@ -343,6 +363,7 @@ if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
     onResponderTerminationRequest,
     onStartShouldSetResponder,
     pressRetentionOffset,
+    role,
     selectable,
     selectionColor,
     suppressHighlighting,
@@ -398,6 +419,17 @@ if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
         onStartShouldSetResponder != null) &&
       _disabled !== true;
 
+    const shouldUseLinkRole =
+      ReactNativeFeatureFlags.shouldUseLinkRoleForPressableText() &&
+      isPressable &&
+      accessibilityRole == null &&
+      role == null;
+
+    const _accessibilityRole =
+      accessibilityRole ?? (shouldUseLinkRole ? 'link' : undefined);
+
+    const _role = shouldUseLinkRole ? undefined : role;
+
     // TODO: Move this processing to the view configuration.
     const _selectionColor =
       selectionColor != null ? processColor(selectionColor) : undefined;
@@ -462,6 +494,7 @@ if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
               ...restProps,
               accessibilityElementsHidden: _accessibilityElementsHidden,
               accessibilityLabel: _accessibilityLabel,
+              accessibilityRole: _accessibilityRole,
               accessibilityState: _accessibilityState,
               importantForAccessibility: _importantForAccessibility,
               nativeID: _nativeID,
@@ -470,6 +503,7 @@ if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
               selectionColor: _selectionColor,
               style: _style,
               disabled: disabled,
+              role: _role,
               children,
             }}
             textPressabilityProps={{
@@ -495,6 +529,7 @@ if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
           {...restProps}
           accessibilityElementsHidden={_accessibilityElementsHidden}
           accessibilityLabel={_accessibilityLabel}
+          accessibilityRole={_accessibilityRole}
           accessibilityState={_accessibilityState}
           importantForAccessibility={_importantForAccessibility}
           nativeID={_nativeID}
@@ -503,7 +538,8 @@ if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
           selectable={_selectable}
           selectionColor={_selectionColor}
           style={_style}
-          disabled={disabled}>
+          disabled={disabled}
+          role={_role}>
           {children}
         </NativeVirtualText>
       );
@@ -538,6 +574,7 @@ if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
             ...restProps,
             accessibilityElementsHidden: _accessibilityElementsHidden,
             accessibilityLabel: _accessibilityLabel,
+            accessibilityRole: _accessibilityRole,
             accessibilityState: _accessibilityState,
             accessible: _accessible,
             allowFontScaling: allowFontScaling !== false,
@@ -549,6 +586,7 @@ if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
             selectable: _selectable,
             selectionColor: _selectionColor,
             style: _style,
+            role: _role,
             children,
           }}
           textPressabilityProps={{
@@ -573,6 +611,7 @@ if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
           {...restProps}
           accessibilityElementsHidden={_accessibilityElementsHidden}
           accessibilityLabel={_accessibilityLabel}
+          accessibilityRole={_accessibilityRole}
           accessibilityState={_accessibilityState}
           accessible={_accessible}
           allowFontScaling={allowFontScaling !== false}
@@ -584,7 +623,8 @@ if (ReactNativeFeatureFlags.reduceDefaultPropsInText()) {
           ref={forwardedRef}
           selectable={_selectable}
           selectionColor={_selectionColor}
-          style={_style}>
+          style={_style}
+          role={_role}>
           {children}
         </NativeText>
       );