feat: adding aria-label alias for accessibilityLabel

Libraries/Components/Button.flow.js

@@ -119,7 +119,11 @@ type ButtonProps = $ReadOnly<{|
     Text to display for blindness accessibility features.
    */
   accessibilityLabel?: ?string,
-
+  /**
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?string,
   /**
     If `true`, disable all interactions for this component.
 

Libraries/Components/Button.js

@@ -126,7 +126,11 @@ type ButtonProps = $ReadOnly<{|
     Text to display for blindness accessibility features.
    */
   accessibilityLabel?: ?string,
-
+  /**
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?string,
   /**
     If `true`, disable all interactions for this component.
 
@@ -281,6 +285,7 @@ class Button extends React.Component<ButtonProps> {
   render(): React.Node {
     const {
       accessibilityLabel,
+      'aria-label': ariaLabel,
       accessibilityState,
       'aria-busy': ariaBusy,
       'aria-checked': ariaChecked,
@@ -358,7 +363,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

@@ -181,6 +181,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,
 |}>;
 
 /**
@@ -196,6 +201,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     'aria-live': ariaLive,
     android_disableSound,
     android_ripple,
+    'aria-label': ariaLabel,
     'aria-busy': ariaBusy,
     'aria-checked': ariaChecked,
     'aria-disabled': ariaDisabled,
@@ -240,13 +246,15 @@ function Pressable(props: Props, forwardedRef): React.Node {
   _accessibilityState =
     disabled != null ? {..._accessibilityState, disabled} : _accessibilityState;
 
+  const accessibilityLabel = ariaLabel ?? props.accessibilityLabel;
   const accessibilityLiveRegion =
     ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion;
 
   const restPropsWithDefaults: React.ElementConfig<typeof View> = {
     ...restProps,
     ...android_rippleConfig?.viewProps,
     accessible: accessible !== false,
+    accessibilityLabel,
     accessibilityLiveRegion,
     accessibilityState: _accessibilityState,
     focusable: focusable !== false,

Libraries/Components/Touchable/TouchableBounce.js

@@ -130,6 +130,9 @@ class TouchableBounce extends React.Component<Props, State> {
     // adopting `Pressability`, so preserve that behavior.
     const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} =
       this.state.pressability.getEventHandlers();
+
+    const accessibilityLabel =
+      this.props['aria-label'] ?? this.props.accessibilityLabel;
     const accessibilityLiveRegion =
       this.props['aria-live'] === 'off'
         ? 'none'
@@ -150,7 +153,7 @@ class TouchableBounce extends React.Component<Props, State> {
       <Animated.View
         style={[{transform: [{scale: this.state.scale}]}, this.props.style]}
         accessible={this.props.accessible !== false}
-        accessibilityLabel={this.props.accessibilityLabel}
+        accessibilityLabel={accessibilityLabel}
         accessibilityHint={this.props.accessibilityHint}
         accessibilityLanguage={this.props.accessibilityLanguage}
         accessibilityRole={this.props.accessibilityRole}

Libraries/Components/Touchable/TouchableHighlight.js

@@ -290,14 +290,17 @@ class TouchableHighlight extends React.Component<Props, State> {
             disabled: this.props.disabled,
           }
         : this.props.accessibilityState;
+
+    const accessibilityLabel =
+      this.props['aria-label'] ?? this.props.accessibilityLabel;
     const accessibilityLiveRegion =
       this.props['aria-live'] === 'off'
         ? 'none'
         : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
     return (
       <View
         accessible={this.props.accessible !== false}
-        accessibilityLabel={this.props.accessibilityLabel}
+        accessibilityLabel={accessibilityLabel}
         accessibilityHint={this.props.accessibilityHint}
         accessibilityLanguage={this.props.accessibilityLanguage}
         accessibilityRole={this.props.accessibilityRole}

Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -273,6 +273,8 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
           }
         : _accessibilityState;
 
+    const accessibilityLabel =
+      this.props['aria-label'] ?? this.props.accessibilityLabel;
     const accessibilityLiveRegion =
       this.props['aria-live'] === 'off'
         ? 'none'
@@ -291,7 +293,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
         accessible: this.props.accessible !== false,
         accessibilityHint: this.props.accessibilityHint,
         accessibilityLanguage: this.props.accessibilityLanguage,
-        accessibilityLabel: this.props.accessibilityLabel,
+        accessibilityLabel: accessibilityLabel,
         accessibilityRole: this.props.accessibilityRole,
         accessibilityState: _accessibilityState,
         accessibilityActions: this.props.accessibilityActions,

Libraries/Components/Touchable/TouchableOpacity.js

@@ -235,6 +235,8 @@ class TouchableOpacity extends React.Component<Props, State> {
           }
         : _accessibilityState;
 
+    const accessibilityLabel =
+      this.props['aria-label'] ?? this.props.accessibilityLabel;
     const accessibilityLiveRegion =
       this.props['aria-live'] === 'off'
         ? 'none'
@@ -243,7 +245,7 @@ class TouchableOpacity extends React.Component<Props, State> {
     return (
       <Animated.View
         accessible={this.props.accessible !== false}
-        accessibilityLabel={this.props.accessibilityLabel}
+        accessibilityLabel={accessibilityLabel}
         accessibilityHint={this.props.accessibilityHint}
         accessibilityLanguage={this.props.accessibilityLanguage}
         accessibilityRole={this.props.accessibilityRole}

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -42,6 +42,7 @@ type Props = $ReadOnly<{|
   accessibilityValue?: ?AccessibilityValue,
   accessibilityViewIsModal?: ?boolean,
   accessible?: ?boolean,
+  'aria-label'?: ?Stringish,
   /**
    * alias for accessibilityState
    *

Libraries/Components/View/View.js

@@ -34,6 +34,8 @@ const View: React.AbstractComponent<
       accessibilityLiveRegion,
       'aria-live': ariaLive,
       accessibilityRole,
+      accessibilityLabel,
+      'aria-label': ariaLabel,
       'aria-hidden': ariaHidden,
       focusable,
       importantForAccessibility,
@@ -137,6 +139,7 @@ const View: React.AbstractComponent<
     return (
       <TextAncestor.Provider value={false}>
         <ViewNativeComponent
+          accessibilityLabel={ariaLabel ?? accessibilityLabel}
           accessibilityLiveRegion={
             ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
           }

Libraries/Components/View/ViewPropTypes.js

@@ -463,6 +463,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/Image/Image.android.js

@@ -180,6 +180,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
       ? loadingIndicatorSource.uri
       : null,
     ref: forwardedRef,
+    accessibilityLabel: props['aria-label'] ?? props.accessibilityLabel,
     accessibilityState: {
       busy: props['aria-busy'] ?? props.accessibilityState?.busy,
       checked: props['aria-checked'] ?? props.accessibilityState?.checked,

Libraries/Image/Image.ios.js

@@ -145,6 +145,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
       'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',
     );
   }
+  const accessibilityLabel = props['aria-label'] ?? props.accessibilityLabel;
   const {
     'aria-busy': ariaBusy,
     'aria-checked': ariaChecked,
@@ -172,6 +173,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
           <ImageViewNativeComponent
             accessibilityState={_accessibilityState}
             {...restProps}
+            accessibilityLabel={accessibilityLabel}
             ref={forwardedRef}
             style={style}
             resizeMode={resizeMode}

Libraries/Image/ImageProps.js

@@ -87,6 +87,12 @@ export type ImageProps = {|
    */
   accessibilityLabel?: ?Stringish,
 
+  /**
+   * Alias for accessibilityLabel
+   * See https://reactnative.dev/docs/image#accessibilitylabel
+   */
+  'aria-label'?: ?Stringish,
+
   /**
    * blurRadius: the blur radius of the blur filter added to the image
    *

Libraries/Text/Text.js

@@ -33,7 +33,9 @@ const Text: React.AbstractComponent<
 > = React.forwardRef((props: TextProps, forwardedRef) => {
   const {
     accessible,
+    accessibilityLabel,
     allowFontScaling,
+    'aria-label': ariaLabel,
     'aria-busy': ariaBusy,
     'aria-checked': ariaChecked,
     'aria-disabled': ariaDisabled,
@@ -202,6 +204,7 @@ const Text: React.AbstractComponent<
       {...restProps}
       accessibilityState={_accessibilityState}
       {...eventHandlersForText}
+      accessibilityLabel={ariaLabel ?? accessibilityLabel}
       isHighlighted={isHighlighted}
       isPressable={isPressable}
       selectable={_selectable}
@@ -218,6 +221,7 @@ const Text: React.AbstractComponent<
         disabled={_disabled}
         selectable={_selectable}
         accessible={_accessible}
+        accessibilityLabel={ariaLabel ?? accessibilityLabel}
         accessibilityState={nativeTextAccessibilityState}
         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>
+      );
+    },
+  },
 ];