feat: adding aria-label alias for accessibilityLabel

Libraries/Components/Button.js

@@ -153,6 +153,12 @@ type ButtonProps = $ReadOnly<{|
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   accessibilityHint?: ?string,
   accessibilityLanguage?: ?Stringish,
+
+  /**
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?string,
 |}>;
 
 /**
@@ -270,6 +276,7 @@ class Button extends React.Component<ButtonProps> {
   render(): React.Node {
     const {
       accessibilityLabel,
+      'aria-label': ariaLabel,
       importantForAccessibility,
       color,
       onPress,
@@ -333,7 +340,7 @@ class Button extends React.Component<ButtonProps> {
         accessible={accessible}
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={ariaLabel || accessibilityLabel}
         accessibilityHint={accessibilityHint}
         accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"

Libraries/Components/Pressable/Pressable.js

@@ -164,6 +164,11 @@ type Props = $ReadOnly<{|
    * Duration to wait after press down before calling `onPressIn`.
    */
   unstable_pressDelay?: ?number,
+  /**
+   * Web to Native Accessibilty props
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?string,
 |}>;
 
 /**
@@ -177,6 +182,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     accessible,
     android_disableSound,
     android_ripple,
+    'aria-label': ariaLabel,
     cancelable,
     children,
     delayHoverIn,
@@ -210,10 +216,12 @@ function Pressable(props: Props, forwardedRef): React.Node {
       ? {...props.accessibilityState, disabled}
       : props.accessibilityState;
 
+  const accessibilityLabel = ariaLabel ?? props.accessibilityLabel;
   const restPropsWithDefaults: React.ElementConfig<typeof View> = {
     ...restProps,
     ...android_rippleConfig?.viewProps,
     accessible: accessible !== false,
+    accessibilityLabel,
     accessibilityState,
     focusable: focusable !== false,
     hitSlop,

Libraries/Components/View/View.js

@@ -27,10 +27,20 @@ const View: React.AbstractComponent<
   ViewProps,
   React.ElementRef<typeof ViewNativeComponent>,
 > = React.forwardRef(
-  ({tabIndex, focusable, ...otherProps}: ViewProps, forwardedRef) => {
+  (
+    {
+      accessibilityLabel,
+      'aria-label': ariaLabel,
+      tabIndex,
+      focusable,
+      ...otherProps
+    }: ViewProps,
+    forwardedRef,
+  ) => {
     return (
       <TextAncestor.Provider value={false}>
         <ViewNativeComponent
+          accessibilityLabel={ariaLabel ?? accessibilityLabel}
           focusable={tabIndex !== undefined ? !tabIndex : focusable}
           {...otherProps}
           ref={forwardedRef}

Libraries/Components/View/ViewPropTypes.js

@@ -452,6 +452,12 @@ export type ViewProps = $ReadOnly<{|
    */
   accessibilityHint?: ?Stringish,
 
+  /**
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?Stringish,
+
   /**
    * Indicates to the accessibility services that the UI component is in
    * a specific language. The provided string should be formatted following

Libraries/Text/Text.js

@@ -32,7 +32,9 @@ const Text: React.AbstractComponent<
 > = React.forwardRef((props: TextProps, forwardedRef) => {
   const {
     accessible,
+    accessibilityLabel,
     allowFontScaling,
+    'aria-label': ariaLabel,
     ellipsizeMode,
     onLongPress,
     onPress,
@@ -180,6 +182,7 @@ const Text: React.AbstractComponent<
     <NativeVirtualText
       {...restProps}
       {...eventHandlersForText}
+      accessibilityLabel={ariaLabel ?? accessibilityLabel}
       isHighlighted={isHighlighted}
       isPressable={isPressable}
       numberOfLines={numberOfLines}
@@ -194,6 +197,7 @@ const Text: React.AbstractComponent<
         {...eventHandlersForText}
         disabled={_disabled}
         accessible={_accessible}
+        accessibilityLabel={ariaLabel ?? accessibilityLabel}
         accessibilityState={_accessibilityState}
         allowFontScaling={allowFontScaling !== false}
         ellipsizeMode={ellipsizeMode ?? 'tail'}

Libraries/Text/TextProps.js

@@ -57,6 +57,7 @@ export type TextProps = $ReadOnly<{|
   accessibilityLabel?: ?Stringish,
   accessibilityRole?: ?AccessibilityRole,
   accessibilityState?: ?AccessibilityState,
+  'aria-label'?: ?string,
 
   /**
    * Whether font should be scaled down automatically.

packages/rn-tester/js/examples/Button/ButtonExample.js

@@ -176,6 +176,28 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Button with aria-label="label"',
+    description: ('Note: This prop changes the text that a screen ' +
+      'reader announces (there are no visual differences).': string),
+    render: function (): React.Node {
+      return (
+        <RNTesterThemeContext.Consumer>
+          {theme => {
+            return (
+              <Button
+                onPress={() => onButtonPress('submitted')}
+                testID="aria_label_button"
+                color={theme.LinkColor}
+                title="Submit Application"
+                aria-label="Press to submit your application!"
+              />
+            );
+          }}
+        </RNTesterThemeContext.Consumer>
+      );
+    },
+  },
   {
     title: 'Button with accessibilityState={{disabled: true}}',
     description:

packages/rn-tester/js/examples/Pressable/PressableExample.js

@@ -17,11 +17,16 @@ import {
   Text,
   Platform,
   View,
+  Alert,
 } from 'react-native';
 import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNativeFeatureFlags';
 
 const {useEffect, useRef, useState} = React;
 
+function onPressablePress(pressableName: string) {
+  Alert.alert(`Your application has been ${pressableName}!`);
+}
+
 const forceTouchAvailable =
   (Platform.OS === 'ios' && Platform.constants.forceTouchAvailable) || false;
 
@@ -81,6 +86,20 @@ function TextOnPressBox() {
   );
 }
 
+function PressableAriaLabel() {
+  return (
+    <View style={[styles.row, styles.centered]}>
+      <Pressable
+        style={styles.wrapper}
+        testID="pressable_aria_label"
+        aria-label="pressable with aria label"
+        accessibilityRole="button"
+        onPress={() => onPressablePress('pressed')}>
+        <Text style={styles.button}>Press Me</Text>
+      </Pressable>
+    </View>
+  );
+}
 function PressableFeedbackEvents() {
   const [eventLog, setEventLog] = useState([]);
 
@@ -524,6 +543,14 @@ const examples = [
       return <PressableDisabled />;
     },
   },
+  {
+    title: 'Pressable with aria-label="label"',
+    description: ('Note: This prop changes the text that a screen ' +
+      'reader announces (there are no visual differences).': string),
+    render: function (): React.Node {
+      return <PressableAriaLabel />;
+    },
+  },
 ];
 
 if (ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover()) {

packages/rn-tester/js/examples/View/ViewExample.js

@@ -600,4 +600,16 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'View with aria-label="label"',
+    render(): React.Node {
+      return (
+        <View
+          aria-label="Blue background View with Text"
+          style={{backgroundColor: '#527FE4', padding: 5}}>
+          <Text style={{fontSize: 11}}>Blue background</Text>
+        </View>
+      );
+    },
+  },
 ];