From 9883330a3f82048c80977683f3d207c1dd056466 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Fri, 9 Sep 2022 11:16:28 -0700
Subject: [PATCH] feat: adding aria-label alias for accessibilityLabel (#34502)

Summary:
- Adding [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) alias for [accessibilityLabel](https://reactnative.dev/docs/accessibility#accessibilitylabel)

https://github.com/facebook/react-native/issues/34424

## Changelog

[General] [Added] - Add `aria-label` prop to `Button`, `View`, `Pressable` component

Pull Request resolved: https://github.com/facebook/react-native/pull/34502

Test Plan:
```
<Button
     onPress={() => onButtonPress('cancelled')}
     testID="cancel_button"
     color={theme.SystemRedColor}
     title="Cancel Application"
     aria-lable="Press to cancel your application!"
/>
```

Reviewed By: NickGerleman

Differential Revision: D39055178

Pulled By: cipolleschi

fbshipit-source-id: 7513a4518dedd0834e99fa8e72b07e0dc0132b41
---
 Libraries/Components/Button.flow.js           |  6 ++++-
 Libraries/Components/Button.js                |  9 +++++--
 Libraries/Components/Pressable/Pressable.js   |  8 ++++++
 .../Components/Touchable/TouchableBounce.js   |  4 ++-
 .../Touchable/TouchableHighlight.js           |  4 ++-
 .../Touchable/TouchableNativeFeedback.js      |  4 ++-
 .../Components/Touchable/TouchableOpacity.js  |  4 ++-
 .../Touchable/TouchableWithoutFeedback.js     |  1 +
 Libraries/Components/View/View.js             |  3 +++
 Libraries/Components/View/ViewPropTypes.js    |  6 +++++
 Libraries/Image/Image.android.js              |  1 +
 Libraries/Image/Image.ios.js                  |  2 ++
 Libraries/Image/ImageProps.js                 |  6 +++++
 Libraries/Text/Text.js                        |  4 +++
 Libraries/Text/TextProps.js                   |  1 +
 .../js/examples/Button/ButtonExample.js       | 22 +++++++++++++++
 .../js/examples/Pressable/PressableExample.js | 27 +++++++++++++++++++
 .../rn-tester/js/examples/View/ViewExample.js | 12 +++++++++
 18 files changed, 117 insertions(+), 7 deletions(-)

diff --git a/Libraries/Components/Button.flow.js b/Libraries/Components/Button.flow.js
index 614c36af83f1e8..abf6d00538fd35 100644
--- a/Libraries/Components/Button.flow.js
+++ b/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.
 
diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index b2bf05b5914c39..08723a7e2f9715 100644
--- a/Libraries/Components/Button.js
+++ b/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.
 
@@ -286,6 +290,7 @@ class Button extends React.Component<ButtonProps> {
       'aria-checked': ariaChecked,
       'aria-disabled': ariaDisabled,
       'aria-expanded': ariaExpanded,
+      'aria-label': ariaLabel,
       'aria-selected': ariaSelected,
       importantForAccessibility,
       color,
@@ -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"
diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
index 7ad0c494e0155c..619a95059fe14c 100644
--- a/Libraries/Components/Pressable/Pressable.js
+++ b/Libraries/Components/Pressable/Pressable.js
@@ -185,6 +185,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,
 |}>;
 
 /**
@@ -204,6 +209,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     'aria-checked': ariaChecked,
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
+    'aria-label': ariaLabel,
     'aria-selected': ariaSelected,
     cancelable,
     children,
@@ -254,11 +260,13 @@ function Pressable(props: Props, forwardedRef): React.Node {
   const accessibilityLiveRegion =
     ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion;
 
+  const accessibilityLabel = ariaLabel ?? props.accessibilityLabel;
   const restPropsWithDefaults: React.ElementConfig<typeof View> = {
     ...restProps,
     ...android_rippleConfig?.viewProps,
     accessible: accessible !== false,
     accessibilityLiveRegion,
+    accessibilityLabel,
     accessibilityState: _accessibilityState,
     focusable: focusable !== false,
     accessibilityValue,
diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js
index 8b05a64ffd896b..1f4544128d3d6e 100644
--- a/Libraries/Components/Touchable/TouchableBounce.js
+++ b/Libraries/Components/Touchable/TouchableBounce.js
@@ -153,11 +153,13 @@ class TouchableBounce extends React.Component<Props, State> {
       text: this.props['aria-valuetext'] ?? this.props.accessibilityValue?.text,
     };
 
+    const accessibilityLabel =
+      this.props['aria-label'] ?? this.props.accessibilityLabel;
     return (
       <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}
diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js
index 053824e0edd790..2c0606e903d48f 100644
--- a/Libraries/Components/Touchable/TouchableHighlight.js
+++ b/Libraries/Components/Touchable/TouchableHighlight.js
@@ -303,10 +303,12 @@ class TouchableHighlight extends React.Component<Props, State> {
         ? 'none'
         : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
 
+    const accessibilityLabel =
+      this.props['aria-label'] ?? this.props.accessibilityLabel;
     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}
diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.js b/Libraries/Components/Touchable/TouchableNativeFeedback.js
index ac5b793ac85295..8139d11101529c 100644
--- a/Libraries/Components/Touchable/TouchableNativeFeedback.js
+++ b/Libraries/Components/Touchable/TouchableNativeFeedback.js
@@ -285,6 +285,8 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
         ? 'none'
         : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
 
+    const accessibilityLabel =
+      this.props['aria-label'] ?? this.props.accessibilityLabel;
     return React.cloneElement(
       element,
       {
@@ -298,7 +300,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,
diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js
index 7e6537d0c230b2..24b859eaea897c 100644
--- a/Libraries/Components/Touchable/TouchableOpacity.js
+++ b/Libraries/Components/Touchable/TouchableOpacity.js
@@ -247,10 +247,12 @@ class TouchableOpacity extends React.Component<Props, State> {
         ? 'none'
         : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
 
+    const accessibilityLabel =
+      this.props['aria-label'] ?? this.props.accessibilityLabel;
     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}
diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
index ab2d844253b717..255151366748f7 100755
--- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js
+++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
@@ -58,6 +58,7 @@ type Props = $ReadOnly<{|
   'aria-selected'?: ?boolean,
   'aria-hidden'?: ?boolean,
   'aria-live'?: ?('polite' | 'assertive' | 'off'),
+  'aria-label'?: ?Stringish,
   children?: ?React.Node,
   delayLongPress?: ?number,
   delayPressIn?: ?number,
diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
index 97020938e6d01b..e747a0445efbe6 100644
--- a/Libraries/Components/View/View.js
+++ b/Libraries/Components/View/View.js
@@ -33,7 +33,9 @@ const View: React.AbstractComponent<
       accessibilityElementsHidden,
       accessibilityLiveRegion,
       'aria-live': ariaLive,
+      accessibilityLabel,
       accessibilityRole,
+      'aria-label': ariaLabel,
       'aria-hidden': ariaHidden,
       focusable,
       importantForAccessibility,
@@ -148,6 +150,7 @@ const View: React.AbstractComponent<
           accessibilityLiveRegion={
             ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
           }
+          accessibilityLabel={ariaLabel ?? accessibilityLabel}
           focusable={tabIndex !== undefined ? !tabIndex : focusable}
           accessibilityState={_accessibilityState}
           accessibilityRole={
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
index c6cb8655d50532..06256f797b710b 100644
--- a/Libraries/Components/View/ViewPropTypes.js
+++ b/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
diff --git a/Libraries/Image/Image.android.js b/Libraries/Image/Image.android.js
index 0e34214cb58b5e..dd5241326ff3e1 100644
--- a/Libraries/Image/Image.android.js
+++ b/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,
diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js
index 0bbd134a60b431..c66ccd5865fdfe 100644
--- a/Libraries/Image/Image.ios.js
+++ b/Libraries/Image/Image.ios.js
@@ -164,6 +164,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
     expanded: ariaExpanded ?? props.accessibilityState?.expanded,
     selected: ariaSelected ?? props.accessibilityState?.selected,
   };
+  const accessibilityLabel = props['aria-label'] ?? props.accessibilityLabel;
 
   return (
     <ImageAnalyticsTagContext.Consumer>
@@ -172,6 +173,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
           <ImageViewNativeComponent
             accessibilityState={_accessibilityState}
             {...restProps}
+            accessibilityLabel={accessibilityLabel}
             ref={forwardedRef}
             style={style}
             resizeMode={resizeMode}
diff --git a/Libraries/Image/ImageProps.js b/Libraries/Image/ImageProps.js
index 7bcf7bec9e5533..6d3ac7d556555a 100644
--- a/Libraries/Image/ImageProps.js
+++ b/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
    *
diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
index eb1bb5f2341a9f..5c5e47ea8d10c5 100644
--- a/Libraries/Text/Text.js
+++ b/Libraries/Text/Text.js
@@ -33,11 +33,13 @@ const Text: React.AbstractComponent<
 > = React.forwardRef((props: TextProps, forwardedRef) => {
   const {
     accessible,
+    accessibilityLabel,
     allowFontScaling,
     'aria-busy': ariaBusy,
     'aria-checked': ariaChecked,
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
+    'aria-label': ariaLabel,
     'aria-selected': ariaSelected,
     ellipsizeMode,
     onLongPress,
@@ -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'}
diff --git a/Libraries/Text/TextProps.js b/Libraries/Text/TextProps.js
index 5ccb9f15e10383..5381ddcf273163 100644
--- a/Libraries/Text/TextProps.js
+++ b/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.
diff --git a/packages/rn-tester/js/examples/Button/ButtonExample.js b/packages/rn-tester/js/examples/Button/ButtonExample.js
index cc04f1e0bea7cf..3f49b611966288 100644
--- a/packages/rn-tester/js/examples/Button/ButtonExample.js
+++ b/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:
diff --git a/packages/rn-tester/js/examples/Pressable/PressableExample.js b/packages/rn-tester/js/examples/Pressable/PressableExample.js
index b13987f1246586..e7a32024c193c5 100644
--- a/packages/rn-tester/js/examples/Pressable/PressableExample.js
+++ b/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()) {
diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js
index 50114decb7680a..44634d2aa1d088 100644
--- a/packages/rn-tester/js/examples/View/ViewExample.js
+++ b/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>
+      );
+    },
+  },
 ];