From 83240e18e09c46676657b10c9bc2adf5819a5221 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Fri, 26 Aug 2022 09:05:34 +0530
Subject: [PATCH 01/34] feat: adding alias for aria-label button

---
 Libraries/Components/Button.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index 318e82773d1678..ed3f7e858f4acd 100644
--- a/Libraries/Components/Button.js
+++ b/Libraries/Components/Button.js
@@ -152,6 +152,12 @@ type ButtonProps = $ReadOnly<{|
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   accessibilityHint?: ?string,
   accessibilityLanguage?: ?Stringish,
+
+  /**
+   * Web to Native Accessibilty props
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-lable'?: ?string,
 |}>;
 
 /**
@@ -269,6 +275,7 @@ class Button extends React.Component<ButtonProps> {
   render(): React.Node {
     const {
       accessibilityLabel,
+      'aria-lable': ariaLable,
       importantForAccessibility,
       color,
       onPress,
@@ -332,7 +339,7 @@ class Button extends React.Component<ButtonProps> {
         accessible={accessible}
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={accessibilityLabel || ariaLable}
         accessibilityHint={accessibilityHint}
         accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"

From b5746c521610394fc7b0b8c4cae09016e274c7d7 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Mon, 29 Aug 2022 10:34:28 +0530
Subject: [PATCH 02/34] feat: added example in rn tester and requested changes

---
 Libraries/Components/Button.js                |  6 ++---
 .../js/examples/Button/ButtonExample.js       | 22 +++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index ed3f7e858f4acd..1bb268d6559a1e 100644
--- a/Libraries/Components/Button.js
+++ b/Libraries/Components/Button.js
@@ -154,10 +154,10 @@ type ButtonProps = $ReadOnly<{|
   accessibilityLanguage?: ?Stringish,
 
   /**
-   * Web to Native Accessibilty props
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
    * https://github.com/facebook/react-native/issues/34424
    */
-  'aria-lable'?: ?string,
+  'aria-label'?: ?string,
 |}>;
 
 /**
@@ -339,7 +339,7 @@ class Button extends React.Component<ButtonProps> {
         accessible={accessible}
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}
-        accessibilityLabel={accessibilityLabel || ariaLable}
+        accessibilityLabel={ariaLable || accessibilityLabel}
         accessibilityHint={accessibilityHint}
         accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"
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:

From 07c135250a1b2ac26835f417f8f2a51b132c7f4f Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Mon, 29 Aug 2022 10:35:02 +0530
Subject: [PATCH 03/34] feat: added aria-label alias in view

---
 Libraries/Components/View/View.js                  |  7 ++++++-
 Libraries/Components/View/ViewPropTypes.js         |  5 +++++
 packages/rn-tester/js/examples/View/ViewExample.js | 12 ++++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
index 0379a7ce912f97..d06570146370af 100644
--- a/Libraries/Components/View/View.js
+++ b/Libraries/Components/View/View.js
@@ -27,9 +27,14 @@ const View: React.AbstractComponent<
   ViewProps,
   React.ElementRef<typeof ViewNativeComponent>,
 > = React.forwardRef((props: ViewProps, forwardedRef) => {
+  const {accessibilityLabel, 'aria-label': ariaLable, ...restProps} = props;
   return (
     <TextAncestor.Provider value={false}>
-      <ViewNativeComponent {...props} ref={forwardedRef} />
+      <ViewNativeComponent
+        accessibilityLabel={ariaLable ?? accessibilityLabel}
+        {...restProps}
+        ref={forwardedRef}
+      />
     </TextAncestor.Provider>
   );
 });
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
index 24c0afcaee8af2..27ad12b9b31a02 100644
--- a/Libraries/Components/View/ViewPropTypes.js
+++ b/Libraries/Components/View/ViewPropTypes.js
@@ -534,4 +534,9 @@ export type ViewProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/view#removeclippedsubviews
    */
   removeClippedSubviews?: ?boolean,
+  /**
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?string,
 |}>;
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>
+      );
+    },
+  },
 ];

From a5411bebf52775636501dade9bf732cdabea1b53 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Mon, 29 Aug 2022 10:37:21 +0530
Subject: [PATCH 04/34] feat: added aria-label alias in pressable

---
 Libraries/Components/Pressable/Pressable.js   |  8 ++++++
 .../js/examples/Pressable/PressableExample.js | 27 +++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
index aab4f21d33ed89..f30412cecc8a1a 100644
--- a/Libraries/Components/Pressable/Pressable.js
+++ b/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,
 |}>;
 
 /**
@@ -195,6 +200,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     style,
     testOnly_pressed,
     unstable_pressDelay,
+    'aria-label': ariaLabel,
     ...restProps
   } = props;
 
@@ -210,11 +216,13 @@ 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,
     accessibilityState,
+    accessibilityLabel,
     focusable: focusable !== false,
     hitSlop,
   };
diff --git a/packages/rn-tester/js/examples/Pressable/PressableExample.js b/packages/rn-tester/js/examples/Pressable/PressableExample.js
index b13987f1246586..c921f1b311295f 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(buttonName: string) {
+  Alert.alert(`Your application has been ${buttonName}!`);
+}
+
 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()) {

From 0f461e9aecd8dc9e9a6380fb47de3e16d731f160 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Mon, 29 Aug 2022 10:58:03 +0530
Subject: [PATCH 05/34] fix: spelling correction

---
 Libraries/Components/Button.js    | 4 ++--
 Libraries/Components/View/View.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index 1bb268d6559a1e..02c351cffc0260 100644
--- a/Libraries/Components/Button.js
+++ b/Libraries/Components/Button.js
@@ -275,7 +275,7 @@ class Button extends React.Component<ButtonProps> {
   render(): React.Node {
     const {
       accessibilityLabel,
-      'aria-lable': ariaLable,
+      'aria-label': ariaLabel,
       importantForAccessibility,
       color,
       onPress,
@@ -339,7 +339,7 @@ class Button extends React.Component<ButtonProps> {
         accessible={accessible}
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}
-        accessibilityLabel={ariaLable || accessibilityLabel}
+        accessibilityLabel={ariaLabel || accessibilityLabel}
         accessibilityHint={accessibilityHint}
         accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"
diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
index d06570146370af..06913890f4f118 100644
--- a/Libraries/Components/View/View.js
+++ b/Libraries/Components/View/View.js
@@ -27,11 +27,11 @@ const View: React.AbstractComponent<
   ViewProps,
   React.ElementRef<typeof ViewNativeComponent>,
 > = React.forwardRef((props: ViewProps, forwardedRef) => {
-  const {accessibilityLabel, 'aria-label': ariaLable, ...restProps} = props;
+  const {accessibilityLabel, 'aria-label': ariaLabel, ...restProps} = props;
   return (
     <TextAncestor.Provider value={false}>
       <ViewNativeComponent
-        accessibilityLabel={ariaLable ?? accessibilityLabel}
+        accessibilityLabel={ariaLabel ?? accessibilityLabel}
         {...restProps}
         ref={forwardedRef}
       />

From b2b898fe0c7164354de7a5dba3b5339906d691d2 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 30 Aug 2022 12:45:30 +0530
Subject: [PATCH 06/34] feat: added aria-label alias in text

---
 Libraries/Text/Text.js      | 4 ++++
 Libraries/Text/TextProps.js | 1 +
 2 files changed, 5 insertions(+)

diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
index 57b6a2ea82ca28..27e9928a0f4b7b 100644
--- a/Libraries/Text/Text.js
+++ b/Libraries/Text/Text.js
@@ -46,6 +46,8 @@ const Text: React.AbstractComponent<
     onStartShouldSetResponder,
     pressRetentionOffset,
     suppressHighlighting,
+    accessibilityLabel,
+    'aria-label': ariaLabel,
     ...restProps
   } = props;
 
@@ -184,6 +186,7 @@ const Text: React.AbstractComponent<
       isPressable={isPressable}
       numberOfLines={numberOfLines}
       selectionColor={selectionColor}
+      accessibilityLabel={ariaLabel ?? accessibilityLabel}
       style={style}
       ref={forwardedRef}
     />
@@ -194,6 +197,7 @@ const Text: React.AbstractComponent<
         {...eventHandlersForText}
         disabled={_disabled}
         accessible={_accessible}
+        accessibilityLabel={ariaLabel ?? accessibilityLabel}
         accessibilityState={_accessibilityState}
         allowFontScaling={allowFontScaling !== false}
         ellipsizeMode={ellipsizeMode ?? 'tail'}
diff --git a/Libraries/Text/TextProps.js b/Libraries/Text/TextProps.js
index 84556c43b50046..9d436a22a47a33 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.

From 615d15a9da40948f09470b8e323af765562b8da3 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 30 Aug 2022 13:14:48 +0530
Subject: [PATCH 07/34] fix: alphabetic order in props

---
 Libraries/Components/Pressable/Pressable.js           |  4 ++--
 Libraries/Components/View/View.js                     |  6 +++---
 Libraries/Components/View/ViewPropTypes.js            | 11 ++++++-----
 Libraries/Text/Text.js                                |  6 +++---
 .../js/examples/Pressable/PressableExample.js         |  4 ++--
 5 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
index f30412cecc8a1a..20baed2835f672 100644
--- a/Libraries/Components/Pressable/Pressable.js
+++ b/Libraries/Components/Pressable/Pressable.js
@@ -182,6 +182,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     accessible,
     android_disableSound,
     android_ripple,
+    'aria-label': ariaLabel,
     cancelable,
     children,
     delayHoverIn,
@@ -200,7 +201,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
     style,
     testOnly_pressed,
     unstable_pressDelay,
-    'aria-label': ariaLabel,
     ...restProps
   } = props;
 
@@ -221,8 +221,8 @@ function Pressable(props: Props, forwardedRef): React.Node {
     ...restProps,
     ...android_rippleConfig?.viewProps,
     accessible: accessible !== false,
-    accessibilityState,
     accessibilityLabel,
+    accessibilityState,
     focusable: focusable !== false,
     hitSlop,
   };
diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
index 906775e57c33d1..d22b910edce09e 100644
--- a/Libraries/Components/View/View.js
+++ b/Libraries/Components/View/View.js
@@ -29,10 +29,10 @@ const View: React.AbstractComponent<
 > = React.forwardRef(
   (
     {
-      tabIndex,
-      focusable,
       accessibilityLabel,
       'aria-label': ariaLabel,
+      tabIndex,
+      focusable,
       ...otherProps
     }: ViewProps,
     forwardedRef,
@@ -40,8 +40,8 @@ const View: React.AbstractComponent<
     return (
       <TextAncestor.Provider value={false}>
         <ViewNativeComponent
-          focusable={tabIndex !== undefined ? !tabIndex : focusable}
           accessibilityLabel={ariaLabel ?? accessibilityLabel}
+          focusable={tabIndex !== undefined ? !tabIndex : focusable}
           {...otherProps}
           ref={forwardedRef}
         />
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
index 8e26043649d9bf..edfc681ea299d6 100644
--- a/Libraries/Components/View/ViewPropTypes.js
+++ b/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
@@ -547,9 +553,4 @@ export type ViewProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/view#removeclippedsubviews
    */
   removeClippedSubviews?: ?boolean,
-  /**
-   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
-   * https://github.com/facebook/react-native/issues/34424
-   */
-  'aria-label'?: ?string,
 |}>;
diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
index 27e9928a0f4b7b..b8bf8a47df598b 100644
--- a/Libraries/Text/Text.js
+++ b/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,
@@ -46,8 +48,6 @@ const Text: React.AbstractComponent<
     onStartShouldSetResponder,
     pressRetentionOffset,
     suppressHighlighting,
-    accessibilityLabel,
-    'aria-label': ariaLabel,
     ...restProps
   } = props;
 
@@ -182,11 +182,11 @@ const Text: React.AbstractComponent<
     <NativeVirtualText
       {...restProps}
       {...eventHandlersForText}
+      accessibilityLabel={ariaLabel ?? accessibilityLabel}
       isHighlighted={isHighlighted}
       isPressable={isPressable}
       numberOfLines={numberOfLines}
       selectionColor={selectionColor}
-      accessibilityLabel={ariaLabel ?? accessibilityLabel}
       style={style}
       ref={forwardedRef}
     />
diff --git a/packages/rn-tester/js/examples/Pressable/PressableExample.js b/packages/rn-tester/js/examples/Pressable/PressableExample.js
index c921f1b311295f..e7a32024c193c5 100644
--- a/packages/rn-tester/js/examples/Pressable/PressableExample.js
+++ b/packages/rn-tester/js/examples/Pressable/PressableExample.js
@@ -23,8 +23,8 @@ import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNat
 
 const {useEffect, useRef, useState} = React;
 
-function onPressablePress(buttonName: string) {
-  Alert.alert(`Your application has been ${buttonName}!`);
+function onPressablePress(pressableName: string) {
+  Alert.alert(`Your application has been ${pressableName}!`);
 }
 
 const forceTouchAvailable =

From 3d2fc235db2b30ab959161d812f13be1ba6060d4 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Fri, 26 Aug 2022 09:05:34 +0530
Subject: [PATCH 08/34] feat: adding alias for aria-label button

---
 Libraries/Components/Button.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index d396acebf5e59f..08ee5e0aa53c80 100644
--- a/Libraries/Components/Button.js
+++ b/Libraries/Components/Button.js
@@ -153,6 +153,12 @@ type ButtonProps = $ReadOnly<{|
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   accessibilityHint?: ?string,
   accessibilityLanguage?: ?Stringish,
+
+  /**
+   * Web to Native Accessibilty props
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-lable'?: ?string,
 |}>;
 
 /**
@@ -270,6 +276,7 @@ class Button extends React.Component<ButtonProps> {
   render(): React.Node {
     const {
       accessibilityLabel,
+      'aria-lable': ariaLable,
       importantForAccessibility,
       color,
       onPress,
@@ -333,7 +340,7 @@ class Button extends React.Component<ButtonProps> {
         accessible={accessible}
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={accessibilityLabel || ariaLable}
         accessibilityHint={accessibilityHint}
         accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"

From 6cbda08952ce3cc1e707ce8139b7874d5b692f14 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Mon, 29 Aug 2022 10:34:28 +0530
Subject: [PATCH 09/34] feat: added example in rn tester and requested changes

---
 Libraries/Components/Button.js                |  6 ++---
 .../js/examples/Button/ButtonExample.js       | 22 +++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index 08ee5e0aa53c80..ca01f3a8a8ae6f 100644
--- a/Libraries/Components/Button.js
+++ b/Libraries/Components/Button.js
@@ -155,10 +155,10 @@ type ButtonProps = $ReadOnly<{|
   accessibilityLanguage?: ?Stringish,
 
   /**
-   * Web to Native Accessibilty props
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
    * https://github.com/facebook/react-native/issues/34424
    */
-  'aria-lable'?: ?string,
+  'aria-label'?: ?string,
 |}>;
 
 /**
@@ -340,7 +340,7 @@ class Button extends React.Component<ButtonProps> {
         accessible={accessible}
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}
-        accessibilityLabel={accessibilityLabel || ariaLable}
+        accessibilityLabel={ariaLable || accessibilityLabel}
         accessibilityHint={accessibilityHint}
         accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"
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:

From b5604c065c77859b54afa4ece60c179ed221fc8a Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 30 Aug 2022 15:35:55 +0530
Subject: [PATCH 10/34] rebase to react-native main

---
 Libraries/Components/View/View.js                  | 12 +++++++++++-
 Libraries/Components/View/ViewPropTypes.js         |  5 +++++
 packages/rn-tester/js/examples/View/ViewExample.js | 12 ++++++++++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
index 7822e8184f214b..b3beddf3673d24 100644
--- a/Libraries/Components/View/View.js
+++ b/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) => {
+  (
+    {
+      tabIndex,
+      focusable,
+      accessibilityLabel,
+      'aria-label': ariaLable,
+      ...otherProps
+    }: ViewProps,
+    forwardedRef,
+  ) => {
     return (
       <TextAncestor.Provider value={false}>
         <ViewNativeComponent
+          accessibilityLabel={ariaLable ?? accessibilityLabel}
           focusable={tabIndex !== undefined ? !tabIndex : focusable}
           {...otherProps}
           ref={forwardedRef}
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
index effed17622cfda..8e26043649d9bf 100644
--- a/Libraries/Components/View/ViewPropTypes.js
+++ b/Libraries/Components/View/ViewPropTypes.js
@@ -547,4 +547,9 @@ export type ViewProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/view#removeclippedsubviews
    */
   removeClippedSubviews?: ?boolean,
+  /**
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?string,
 |}>;
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>
+      );
+    },
+  },
 ];

From 53083cde6e904da42ce72aaccff389d8768f249a Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Mon, 29 Aug 2022 10:37:21 +0530
Subject: [PATCH 11/34] feat: added aria-label alias in pressable

---
 Libraries/Components/Pressable/Pressable.js   |  8 ++++++
 .../js/examples/Pressable/PressableExample.js | 27 +++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
index aab4f21d33ed89..f30412cecc8a1a 100644
--- a/Libraries/Components/Pressable/Pressable.js
+++ b/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,
 |}>;
 
 /**
@@ -195,6 +200,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     style,
     testOnly_pressed,
     unstable_pressDelay,
+    'aria-label': ariaLabel,
     ...restProps
   } = props;
 
@@ -210,11 +216,13 @@ 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,
     accessibilityState,
+    accessibilityLabel,
     focusable: focusable !== false,
     hitSlop,
   };
diff --git a/packages/rn-tester/js/examples/Pressable/PressableExample.js b/packages/rn-tester/js/examples/Pressable/PressableExample.js
index b13987f1246586..c921f1b311295f 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(buttonName: string) {
+  Alert.alert(`Your application has been ${buttonName}!`);
+}
+
 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()) {

From 103e7574d0e0049afcf19049680f97a2ee6ddeb2 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Mon, 29 Aug 2022 10:58:03 +0530
Subject: [PATCH 12/34] fix: spelling correction

---
 Libraries/Components/Button.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index ca01f3a8a8ae6f..68c1262b00e438 100644
--- a/Libraries/Components/Button.js
+++ b/Libraries/Components/Button.js
@@ -276,7 +276,7 @@ class Button extends React.Component<ButtonProps> {
   render(): React.Node {
     const {
       accessibilityLabel,
-      'aria-lable': ariaLable,
+      'aria-label': ariaLabel,
       importantForAccessibility,
       color,
       onPress,
@@ -340,7 +340,7 @@ class Button extends React.Component<ButtonProps> {
         accessible={accessible}
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}
-        accessibilityLabel={ariaLable || accessibilityLabel}
+        accessibilityLabel={ariaLabel || accessibilityLabel}
         accessibilityHint={accessibilityHint}
         accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"

From 9c37a35388ede320be4c6381e9bda78fdc328906 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 30 Aug 2022 12:45:30 +0530
Subject: [PATCH 13/34] feat: added aria-label alias in text

---
 Libraries/Text/Text.js      | 4 ++++
 Libraries/Text/TextProps.js | 1 +
 2 files changed, 5 insertions(+)

diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
index 57b6a2ea82ca28..27e9928a0f4b7b 100644
--- a/Libraries/Text/Text.js
+++ b/Libraries/Text/Text.js
@@ -46,6 +46,8 @@ const Text: React.AbstractComponent<
     onStartShouldSetResponder,
     pressRetentionOffset,
     suppressHighlighting,
+    accessibilityLabel,
+    'aria-label': ariaLabel,
     ...restProps
   } = props;
 
@@ -184,6 +186,7 @@ const Text: React.AbstractComponent<
       isPressable={isPressable}
       numberOfLines={numberOfLines}
       selectionColor={selectionColor}
+      accessibilityLabel={ariaLabel ?? accessibilityLabel}
       style={style}
       ref={forwardedRef}
     />
@@ -194,6 +197,7 @@ const Text: React.AbstractComponent<
         {...eventHandlersForText}
         disabled={_disabled}
         accessible={_accessible}
+        accessibilityLabel={ariaLabel ?? accessibilityLabel}
         accessibilityState={_accessibilityState}
         allowFontScaling={allowFontScaling !== false}
         ellipsizeMode={ellipsizeMode ?? 'tail'}
diff --git a/Libraries/Text/TextProps.js b/Libraries/Text/TextProps.js
index 84556c43b50046..9d436a22a47a33 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.

From a6463977ed07ab346a5042291ffc997fc1507f65 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 30 Aug 2022 13:14:48 +0530
Subject: [PATCH 14/34] fix: alphabetic order in props

---
 Libraries/Components/Pressable/Pressable.js           |  4 ++--
 Libraries/Components/View/View.js                     |  8 +-------
 Libraries/Components/View/ViewPropTypes.js            | 11 ++++++-----
 Libraries/Text/Text.js                                |  6 +++---
 .../js/examples/Pressable/PressableExample.js         |  4 ++--
 5 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
index f30412cecc8a1a..20baed2835f672 100644
--- a/Libraries/Components/Pressable/Pressable.js
+++ b/Libraries/Components/Pressable/Pressable.js
@@ -182,6 +182,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     accessible,
     android_disableSound,
     android_ripple,
+    'aria-label': ariaLabel,
     cancelable,
     children,
     delayHoverIn,
@@ -200,7 +201,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
     style,
     testOnly_pressed,
     unstable_pressDelay,
-    'aria-label': ariaLabel,
     ...restProps
   } = props;
 
@@ -221,8 +221,8 @@ function Pressable(props: Props, forwardedRef): React.Node {
     ...restProps,
     ...android_rippleConfig?.viewProps,
     accessible: accessible !== false,
-    accessibilityState,
     accessibilityLabel,
+    accessibilityState,
     focusable: focusable !== false,
     hitSlop,
   };
diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
index b3beddf3673d24..368fcac256d766 100644
--- a/Libraries/Components/View/View.js
+++ b/Libraries/Components/View/View.js
@@ -28,13 +28,7 @@ const View: React.AbstractComponent<
   React.ElementRef<typeof ViewNativeComponent>,
 > = React.forwardRef(
   (
-    {
-      tabIndex,
-      focusable,
-      accessibilityLabel,
-      'aria-label': ariaLable,
-      ...otherProps
-    }: ViewProps,
+    {accessibilityLabel, 'aria-label': ariaLable, ...otherProps}: ViewProps,
     forwardedRef,
   ) => {
     return (
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
index 8e26043649d9bf..edfc681ea299d6 100644
--- a/Libraries/Components/View/ViewPropTypes.js
+++ b/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
@@ -547,9 +553,4 @@ export type ViewProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/view#removeclippedsubviews
    */
   removeClippedSubviews?: ?boolean,
-  /**
-   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
-   * https://github.com/facebook/react-native/issues/34424
-   */
-  'aria-label'?: ?string,
 |}>;
diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
index 27e9928a0f4b7b..b8bf8a47df598b 100644
--- a/Libraries/Text/Text.js
+++ b/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,
@@ -46,8 +48,6 @@ const Text: React.AbstractComponent<
     onStartShouldSetResponder,
     pressRetentionOffset,
     suppressHighlighting,
-    accessibilityLabel,
-    'aria-label': ariaLabel,
     ...restProps
   } = props;
 
@@ -182,11 +182,11 @@ const Text: React.AbstractComponent<
     <NativeVirtualText
       {...restProps}
       {...eventHandlersForText}
+      accessibilityLabel={ariaLabel ?? accessibilityLabel}
       isHighlighted={isHighlighted}
       isPressable={isPressable}
       numberOfLines={numberOfLines}
       selectionColor={selectionColor}
-      accessibilityLabel={ariaLabel ?? accessibilityLabel}
       style={style}
       ref={forwardedRef}
     />
diff --git a/packages/rn-tester/js/examples/Pressable/PressableExample.js b/packages/rn-tester/js/examples/Pressable/PressableExample.js
index c921f1b311295f..e7a32024c193c5 100644
--- a/packages/rn-tester/js/examples/Pressable/PressableExample.js
+++ b/packages/rn-tester/js/examples/Pressable/PressableExample.js
@@ -23,8 +23,8 @@ import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNat
 
 const {useEffect, useRef, useState} = React;
 
-function onPressablePress(buttonName: string) {
-  Alert.alert(`Your application has been ${buttonName}!`);
+function onPressablePress(pressableName: string) {
+  Alert.alert(`Your application has been ${pressableName}!`);
 }
 
 const forceTouchAvailable =

From b6f0885d29e286844580a52f71c04a805d7c8da2 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Fri, 26 Aug 2022 09:05:34 +0530
Subject: [PATCH 15/34] feat: adding alias for aria-label button

---
 Libraries/Components/Button.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index d396acebf5e59f..08ee5e0aa53c80 100644
--- a/Libraries/Components/Button.js
+++ b/Libraries/Components/Button.js
@@ -153,6 +153,12 @@ type ButtonProps = $ReadOnly<{|
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   accessibilityHint?: ?string,
   accessibilityLanguage?: ?Stringish,
+
+  /**
+   * Web to Native Accessibilty props
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-lable'?: ?string,
 |}>;
 
 /**
@@ -270,6 +276,7 @@ class Button extends React.Component<ButtonProps> {
   render(): React.Node {
     const {
       accessibilityLabel,
+      'aria-lable': ariaLable,
       importantForAccessibility,
       color,
       onPress,
@@ -333,7 +340,7 @@ class Button extends React.Component<ButtonProps> {
         accessible={accessible}
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={accessibilityLabel || ariaLable}
         accessibilityHint={accessibilityHint}
         accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"

From 56d844db78f0b62abc780cd40bbc907381be8989 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Mon, 29 Aug 2022 10:34:28 +0530
Subject: [PATCH 16/34] feat: added example in rn tester and requested changes

---
 Libraries/Components/Button.js                |  6 ++---
 .../js/examples/Button/ButtonExample.js       | 22 +++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index 08ee5e0aa53c80..ca01f3a8a8ae6f 100644
--- a/Libraries/Components/Button.js
+++ b/Libraries/Components/Button.js
@@ -155,10 +155,10 @@ type ButtonProps = $ReadOnly<{|
   accessibilityLanguage?: ?Stringish,
 
   /**
-   * Web to Native Accessibilty props
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
    * https://github.com/facebook/react-native/issues/34424
    */
-  'aria-lable'?: ?string,
+  'aria-label'?: ?string,
 |}>;
 
 /**
@@ -340,7 +340,7 @@ class Button extends React.Component<ButtonProps> {
         accessible={accessible}
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}
-        accessibilityLabel={accessibilityLabel || ariaLable}
+        accessibilityLabel={ariaLable || accessibilityLabel}
         accessibilityHint={accessibilityHint}
         accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"
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:

From 4e1ade3b1cd31becd1ed044a934201bff18bd7cc Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 30 Aug 2022 15:35:55 +0530
Subject: [PATCH 17/34] rebase to react-native main

---
 Libraries/Components/View/View.js                  | 12 +++++++++++-
 Libraries/Components/View/ViewPropTypes.js         |  5 +++++
 packages/rn-tester/js/examples/View/ViewExample.js | 12 ++++++++++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
index 7822e8184f214b..b3beddf3673d24 100644
--- a/Libraries/Components/View/View.js
+++ b/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) => {
+  (
+    {
+      tabIndex,
+      focusable,
+      accessibilityLabel,
+      'aria-label': ariaLable,
+      ...otherProps
+    }: ViewProps,
+    forwardedRef,
+  ) => {
     return (
       <TextAncestor.Provider value={false}>
         <ViewNativeComponent
+          accessibilityLabel={ariaLable ?? accessibilityLabel}
           focusable={tabIndex !== undefined ? !tabIndex : focusable}
           {...otherProps}
           ref={forwardedRef}
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
index effed17622cfda..8e26043649d9bf 100644
--- a/Libraries/Components/View/ViewPropTypes.js
+++ b/Libraries/Components/View/ViewPropTypes.js
@@ -547,4 +547,9 @@ export type ViewProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/view#removeclippedsubviews
    */
   removeClippedSubviews?: ?boolean,
+  /**
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?string,
 |}>;
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>
+      );
+    },
+  },
 ];

From 36ae9a9c16ec1099576ee3a1b2caca051a844fa5 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Mon, 29 Aug 2022 10:37:21 +0530
Subject: [PATCH 18/34] feat: added aria-label alias in pressable

---
 Libraries/Components/Pressable/Pressable.js   |  8 ++++++
 .../js/examples/Pressable/PressableExample.js | 27 +++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
index aab4f21d33ed89..f30412cecc8a1a 100644
--- a/Libraries/Components/Pressable/Pressable.js
+++ b/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,
 |}>;
 
 /**
@@ -195,6 +200,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     style,
     testOnly_pressed,
     unstable_pressDelay,
+    'aria-label': ariaLabel,
     ...restProps
   } = props;
 
@@ -210,11 +216,13 @@ 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,
     accessibilityState,
+    accessibilityLabel,
     focusable: focusable !== false,
     hitSlop,
   };
diff --git a/packages/rn-tester/js/examples/Pressable/PressableExample.js b/packages/rn-tester/js/examples/Pressable/PressableExample.js
index b13987f1246586..c921f1b311295f 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(buttonName: string) {
+  Alert.alert(`Your application has been ${buttonName}!`);
+}
+
 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()) {

From 40c472880211407ea456baa6c75d23502fe2888c Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Mon, 29 Aug 2022 10:58:03 +0530
Subject: [PATCH 19/34] fix: spelling correction

---
 Libraries/Components/Button.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index ca01f3a8a8ae6f..68c1262b00e438 100644
--- a/Libraries/Components/Button.js
+++ b/Libraries/Components/Button.js
@@ -276,7 +276,7 @@ class Button extends React.Component<ButtonProps> {
   render(): React.Node {
     const {
       accessibilityLabel,
-      'aria-lable': ariaLable,
+      'aria-label': ariaLabel,
       importantForAccessibility,
       color,
       onPress,
@@ -340,7 +340,7 @@ class Button extends React.Component<ButtonProps> {
         accessible={accessible}
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}
-        accessibilityLabel={ariaLable || accessibilityLabel}
+        accessibilityLabel={ariaLabel || accessibilityLabel}
         accessibilityHint={accessibilityHint}
         accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"

From f41647dc9831962bbd121802afe0562ff19c6d47 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 30 Aug 2022 12:45:30 +0530
Subject: [PATCH 20/34] feat: added aria-label alias in text

---
 Libraries/Text/Text.js      | 4 ++++
 Libraries/Text/TextProps.js | 1 +
 2 files changed, 5 insertions(+)

diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
index 57b6a2ea82ca28..27e9928a0f4b7b 100644
--- a/Libraries/Text/Text.js
+++ b/Libraries/Text/Text.js
@@ -46,6 +46,8 @@ const Text: React.AbstractComponent<
     onStartShouldSetResponder,
     pressRetentionOffset,
     suppressHighlighting,
+    accessibilityLabel,
+    'aria-label': ariaLabel,
     ...restProps
   } = props;
 
@@ -184,6 +186,7 @@ const Text: React.AbstractComponent<
       isPressable={isPressable}
       numberOfLines={numberOfLines}
       selectionColor={selectionColor}
+      accessibilityLabel={ariaLabel ?? accessibilityLabel}
       style={style}
       ref={forwardedRef}
     />
@@ -194,6 +197,7 @@ const Text: React.AbstractComponent<
         {...eventHandlersForText}
         disabled={_disabled}
         accessible={_accessible}
+        accessibilityLabel={ariaLabel ?? accessibilityLabel}
         accessibilityState={_accessibilityState}
         allowFontScaling={allowFontScaling !== false}
         ellipsizeMode={ellipsizeMode ?? 'tail'}
diff --git a/Libraries/Text/TextProps.js b/Libraries/Text/TextProps.js
index 84556c43b50046..9d436a22a47a33 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.

From 5a68f08469c4ae433bf1f0ca5a2fa8f9be713e0e Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 30 Aug 2022 13:14:48 +0530
Subject: [PATCH 21/34] fix: alphabetic order in props

---
 Libraries/Components/Pressable/Pressable.js           |  4 ++--
 Libraries/Components/View/View.js                     |  8 +-------
 Libraries/Components/View/ViewPropTypes.js            | 11 ++++++-----
 Libraries/Text/Text.js                                |  6 +++---
 .../js/examples/Pressable/PressableExample.js         |  4 ++--
 5 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
index f30412cecc8a1a..20baed2835f672 100644
--- a/Libraries/Components/Pressable/Pressable.js
+++ b/Libraries/Components/Pressable/Pressable.js
@@ -182,6 +182,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     accessible,
     android_disableSound,
     android_ripple,
+    'aria-label': ariaLabel,
     cancelable,
     children,
     delayHoverIn,
@@ -200,7 +201,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
     style,
     testOnly_pressed,
     unstable_pressDelay,
-    'aria-label': ariaLabel,
     ...restProps
   } = props;
 
@@ -221,8 +221,8 @@ function Pressable(props: Props, forwardedRef): React.Node {
     ...restProps,
     ...android_rippleConfig?.viewProps,
     accessible: accessible !== false,
-    accessibilityState,
     accessibilityLabel,
+    accessibilityState,
     focusable: focusable !== false,
     hitSlop,
   };
diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
index b3beddf3673d24..368fcac256d766 100644
--- a/Libraries/Components/View/View.js
+++ b/Libraries/Components/View/View.js
@@ -28,13 +28,7 @@ const View: React.AbstractComponent<
   React.ElementRef<typeof ViewNativeComponent>,
 > = React.forwardRef(
   (
-    {
-      tabIndex,
-      focusable,
-      accessibilityLabel,
-      'aria-label': ariaLable,
-      ...otherProps
-    }: ViewProps,
+    {accessibilityLabel, 'aria-label': ariaLable, ...otherProps}: ViewProps,
     forwardedRef,
   ) => {
     return (
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
index 8e26043649d9bf..edfc681ea299d6 100644
--- a/Libraries/Components/View/ViewPropTypes.js
+++ b/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
@@ -547,9 +553,4 @@ export type ViewProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/view#removeclippedsubviews
    */
   removeClippedSubviews?: ?boolean,
-  /**
-   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
-   * https://github.com/facebook/react-native/issues/34424
-   */
-  'aria-label'?: ?string,
 |}>;
diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
index 27e9928a0f4b7b..b8bf8a47df598b 100644
--- a/Libraries/Text/Text.js
+++ b/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,
@@ -46,8 +48,6 @@ const Text: React.AbstractComponent<
     onStartShouldSetResponder,
     pressRetentionOffset,
     suppressHighlighting,
-    accessibilityLabel,
-    'aria-label': ariaLabel,
     ...restProps
   } = props;
 
@@ -182,11 +182,11 @@ const Text: React.AbstractComponent<
     <NativeVirtualText
       {...restProps}
       {...eventHandlersForText}
+      accessibilityLabel={ariaLabel ?? accessibilityLabel}
       isHighlighted={isHighlighted}
       isPressable={isPressable}
       numberOfLines={numberOfLines}
       selectionColor={selectionColor}
-      accessibilityLabel={ariaLabel ?? accessibilityLabel}
       style={style}
       ref={forwardedRef}
     />
diff --git a/packages/rn-tester/js/examples/Pressable/PressableExample.js b/packages/rn-tester/js/examples/Pressable/PressableExample.js
index c921f1b311295f..e7a32024c193c5 100644
--- a/packages/rn-tester/js/examples/Pressable/PressableExample.js
+++ b/packages/rn-tester/js/examples/Pressable/PressableExample.js
@@ -23,8 +23,8 @@ import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNat
 
 const {useEffect, useRef, useState} = React;
 
-function onPressablePress(buttonName: string) {
-  Alert.alert(`Your application has been ${buttonName}!`);
+function onPressablePress(pressableName: string) {
+  Alert.alert(`Your application has been ${pressableName}!`);
 }
 
 const forceTouchAvailable =

From 8c566ec6d6e98b518e2bcaff588cf3d97606821c Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Mon, 29 Aug 2022 10:35:02 +0530
Subject: [PATCH 22/34] feat: added aria-label alias in view

---
 Libraries/Components/View/ViewPropTypes.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
index edfc681ea299d6..bd4f2ee6dc3169 100644
--- a/Libraries/Components/View/ViewPropTypes.js
+++ b/Libraries/Components/View/ViewPropTypes.js
@@ -553,4 +553,9 @@ export type ViewProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/view#removeclippedsubviews
    */
   removeClippedSubviews?: ?boolean,
+  /**
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?string,
 |}>;

From 814194dc41b37bb353c9f26c1e2a0b2c925758ee Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Mon, 29 Aug 2022 10:37:21 +0530
Subject: [PATCH 23/34] feat: added aria-label alias in pressable

---
 Libraries/Components/Pressable/Pressable.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
index 20baed2835f672..5e36274031eb48 100644
--- a/Libraries/Components/Pressable/Pressable.js
+++ b/Libraries/Components/Pressable/Pressable.js
@@ -223,6 +223,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     accessible: accessible !== false,
     accessibilityLabel,
     accessibilityState,
+    accessibilityLabel,
     focusable: focusable !== false,
     hitSlop,
   };

From 6395736ce8deb94e57675dac3bb0c280c7f14d3b Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Mon, 29 Aug 2022 10:58:03 +0530
Subject: [PATCH 24/34] fix: spelling correction

---
 Libraries/Components/View/View.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
index 368fcac256d766..5cc851162b8ec6 100644
--- a/Libraries/Components/View/View.js
+++ b/Libraries/Components/View/View.js
@@ -28,7 +28,13 @@ const View: React.AbstractComponent<
   React.ElementRef<typeof ViewNativeComponent>,
 > = React.forwardRef(
   (
-    {accessibilityLabel, 'aria-label': ariaLable, ...otherProps}: ViewProps,
+    {
+      accessibilityLabel,
+      'aria-label': ariaLable,
+      focusable,
+      tabIndex,
+      ...otherProps
+    }: ViewProps,
     forwardedRef,
   ) => {
     return (

From a24cd6329d0214d00e89e1efa696c3860c5e0b9a Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 30 Aug 2022 12:45:30 +0530
Subject: [PATCH 25/34] feat: added aria-label alias in text

---
 Libraries/Text/Text.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
index b8bf8a47df598b..43c0eaec576f77 100644
--- a/Libraries/Text/Text.js
+++ b/Libraries/Text/Text.js
@@ -48,6 +48,8 @@ const Text: React.AbstractComponent<
     onStartShouldSetResponder,
     pressRetentionOffset,
     suppressHighlighting,
+    accessibilityLabel,
+    'aria-label': ariaLabel,
     ...restProps
   } = props;
 
@@ -187,6 +189,7 @@ const Text: React.AbstractComponent<
       isPressable={isPressable}
       numberOfLines={numberOfLines}
       selectionColor={selectionColor}
+      accessibilityLabel={ariaLabel ?? accessibilityLabel}
       style={style}
       ref={forwardedRef}
     />

From cef1874be0bebb2b347a3b436c581e96b0e7512f Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 30 Aug 2022 13:14:48 +0530
Subject: [PATCH 26/34] fix: alphabetic order in props

---
 Libraries/Components/Pressable/Pressable.js | 1 +
 Libraries/Components/View/ViewPropTypes.js  | 5 -----
 Libraries/Text/Text.js                      | 3 ---
 3 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
index 5e36274031eb48..fb36b584ea72b1 100644
--- a/Libraries/Components/Pressable/Pressable.js
+++ b/Libraries/Components/Pressable/Pressable.js
@@ -224,6 +224,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     accessibilityLabel,
     accessibilityState,
     accessibilityLabel,
+    accessibilityState,
     focusable: focusable !== false,
     hitSlop,
   };
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
index bd4f2ee6dc3169..edfc681ea299d6 100644
--- a/Libraries/Components/View/ViewPropTypes.js
+++ b/Libraries/Components/View/ViewPropTypes.js
@@ -553,9 +553,4 @@ export type ViewProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/view#removeclippedsubviews
    */
   removeClippedSubviews?: ?boolean,
-  /**
-   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
-   * https://github.com/facebook/react-native/issues/34424
-   */
-  'aria-label'?: ?string,
 |}>;
diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
index 43c0eaec576f77..b8bf8a47df598b 100644
--- a/Libraries/Text/Text.js
+++ b/Libraries/Text/Text.js
@@ -48,8 +48,6 @@ const Text: React.AbstractComponent<
     onStartShouldSetResponder,
     pressRetentionOffset,
     suppressHighlighting,
-    accessibilityLabel,
-    'aria-label': ariaLabel,
     ...restProps
   } = props;
 
@@ -189,7 +187,6 @@ const Text: React.AbstractComponent<
       isPressable={isPressable}
       numberOfLines={numberOfLines}
       selectionColor={selectionColor}
-      accessibilityLabel={ariaLabel ?? accessibilityLabel}
       style={style}
       ref={forwardedRef}
     />

From f3a86764c2a4c32ff8ed6dc07c816e34ea73ce6a Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 30 Aug 2022 16:22:15 +0530
Subject: [PATCH 27/34] fix: test case for button props

---
 Libraries/Components/Button.flow.js |  6 +++++-
 Libraries/Components/Button.js      | 12 +++++-------
 2 files changed, 10 insertions(+), 8 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 68c1262b00e438..f1d09ad8431e07 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.
 
@@ -153,12 +157,6 @@ 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,
 |}>;
 
 /**

From 006a947532a661a12bde4ef749ec36e28502aa78 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Mon, 5 Sep 2022 19:16:30 +0530
Subject: [PATCH 28/34] fix: removing duplicates

---
 Libraries/Components/Pressable/Pressable.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
index fb36b584ea72b1..20baed2835f672 100644
--- a/Libraries/Components/Pressable/Pressable.js
+++ b/Libraries/Components/Pressable/Pressable.js
@@ -223,8 +223,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
     accessible: accessible !== false,
     accessibilityLabel,
     accessibilityState,
-    accessibilityLabel,
-    accessibilityState,
     focusable: focusable !== false,
     hitSlop,
   };

From ffeb392bfcb827445451d9d67a51f67f8c0ade65 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 6 Sep 2022 00:36:31 +0530
Subject: [PATCH 29/34] feat: added aria-label alias in touchable

---
 Libraries/Components/Touchable/TouchableBounce.js          | 4 +++-
 Libraries/Components/Touchable/TouchableHighlight.js       | 4 +++-
 Libraries/Components/Touchable/TouchableNativeFeedback.js  | 4 +++-
 Libraries/Components/Touchable/TouchableOpacity.js         | 4 +++-
 Libraries/Components/Touchable/TouchableWithoutFeedback.js | 1 +
 5 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js
index f77ab0f5738fcf..2eca53dbbeaa5c 100644
--- a/Libraries/Components/Touchable/TouchableBounce.js
+++ b/Libraries/Components/Touchable/TouchableBounce.js
@@ -131,11 +131,13 @@ class TouchableBounce extends React.Component<Props, State> {
     const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} =
       this.state.pressability.getEventHandlers();
 
+    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 d41513b189b55d..6a1f1e08458004 100644
--- a/Libraries/Components/Touchable/TouchableHighlight.js
+++ b/Libraries/Components/Touchable/TouchableHighlight.js
@@ -291,10 +291,12 @@ class TouchableHighlight extends React.Component<Props, State> {
           }
         : this.props.accessibilityState;
 
+    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 8fff2f302397f2..9fd86099a2ac9b 100644
--- a/Libraries/Components/Touchable/TouchableNativeFeedback.js
+++ b/Libraries/Components/Touchable/TouchableNativeFeedback.js
@@ -259,6 +259,8 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
           }
         : this.props.accessibilityState;
 
+    const accessibilityLabel =
+      this.props['aria-label'] ?? this.props.accessibilityLabel;
     return React.cloneElement(
       element,
       {
@@ -272,7 +274,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 67e18c06d54c83..d511ea7ad433c8 100644
--- a/Libraries/Components/Touchable/TouchableOpacity.js
+++ b/Libraries/Components/Touchable/TouchableOpacity.js
@@ -220,10 +220,12 @@ class TouchableOpacity extends React.Component<Props, State> {
           }
         : this.props.accessibilityState;
 
+    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 2b3bd4b930e14b..36ed1e57741a61 100755
--- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js
+++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
@@ -42,6 +42,7 @@ type Props = $ReadOnly<{|
   accessibilityValue?: ?AccessibilityValue,
   accessibilityViewIsModal?: ?boolean,
   accessible?: ?boolean,
+  'aria-label'?: ?ariaLabel,
   children?: ?React.Node,
   delayLongPress?: ?number,
   delayPressIn?: ?number,

From 1365d7082749a0d9a5a8e0f1b18f85bb936c39f4 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 6 Sep 2022 00:41:54 +0530
Subject: [PATCH 30/34] feat: added aria-label alias in image

---
 Libraries/Image/Image.android.js | 1 +
 Libraries/Image/Image.ios.js     | 3 +++
 Libraries/Image/ImageProps.js    | 6 ++++++
 3 files changed, 10 insertions(+)

diff --git a/Libraries/Image/Image.android.js b/Libraries/Image/Image.android.js
index eac8a56c63eba7..fc2c85b9b97068 100644
--- a/Libraries/Image/Image.android.js
+++ b/Libraries/Image/Image.android.js
@@ -186,6 +186,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
       ? loadingIndicatorSource.uri
       : null,
     ref: forwardedRef,
+    accessibilityLabel: props['aria-label'] ?? props.accessibilityLabel,
   };
 
   return (
diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js
index 98631a33555bc5..54ab93034234de 100644
--- a/Libraries/Image/Image.ios.js
+++ b/Libraries/Image/Image.ios.js
@@ -142,6 +142,8 @@ 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 =
+    this.props['aria-label'] ?? this.props.accessibilityLabel;
 
   return (
     <ImageAnalyticsTagContext.Consumer>
@@ -149,6 +151,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
         return (
           <ImageViewNativeComponent
             {...props}
+            accessibilityLabel={accessibilityLabel}
             ref={forwardedRef}
             style={style}
             resizeMode={resizeMode}
diff --git a/Libraries/Image/ImageProps.js b/Libraries/Image/ImageProps.js
index d640bd7f543892..ba997ffed75861 100644
--- a/Libraries/Image/ImageProps.js
+++ b/Libraries/Image/ImageProps.js
@@ -86,6 +86,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
    *

From 8b835f77f420675683071d57b21885dd0dad629c Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 6 Sep 2022 00:50:14 +0530
Subject: [PATCH 31/34] fix: test cases for ios

---
 Libraries/Image/Image.ios.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js
index 54ab93034234de..6ac31d47a1d589 100644
--- a/Libraries/Image/Image.ios.js
+++ b/Libraries/Image/Image.ios.js
@@ -142,8 +142,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 =
-    this.props['aria-label'] ?? this.props.accessibilityLabel;
+  const accessibilityLabel = props['aria-label'] ?? props.accessibilityLabel;
 
   return (
     <ImageAnalyticsTagContext.Consumer>

From 81df035dbed32e4c61b0e5fa0b19478231f63f15 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Tue, 6 Sep 2022 00:56:55 +0530
Subject: [PATCH 32/34] fix: flow test fix

---
 Libraries/Components/Touchable/TouchableWithoutFeedback.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
index 36ed1e57741a61..da96fd2719e688 100755
--- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js
+++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
@@ -42,7 +42,7 @@ type Props = $ReadOnly<{|
   accessibilityValue?: ?AccessibilityValue,
   accessibilityViewIsModal?: ?boolean,
   accessible?: ?boolean,
-  'aria-label'?: ?ariaLabel,
+  'aria-label'?: ?Stringish,
   children?: ?React.Node,
   delayLongPress?: ?number,
   delayPressIn?: ?number,

From 0169fef2778943882f9f5920ea1763c421ac6e86 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Wed, 7 Sep 2022 07:56:00 +0530
Subject: [PATCH 33/34] fix: spelling and types button and view

---
 Libraries/Components/Button.js    | 6 ------
 Libraries/Components/View/View.js | 4 ++--
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index 3ea877cb100235..f1d09ad8431e07 100644
--- a/Libraries/Components/Button.js
+++ b/Libraries/Components/Button.js
@@ -157,12 +157,6 @@ 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,
 |}>;
 
 /**
diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
index c71fe40e7fc03f..7b56779e6e3ef7 100644
--- a/Libraries/Components/View/View.js
+++ b/Libraries/Components/View/View.js
@@ -31,7 +31,7 @@ const View: React.AbstractComponent<
   (
     {
       accessibilityLabel,
-      'aria-label': ariaLable,
+      'aria-label': ariaLabel,
       tabIndex,
       focusable,
       role,
@@ -116,7 +116,7 @@ const View: React.AbstractComponent<
     return (
       <TextAncestor.Provider value={false}>
         <ViewNativeComponent
-          accessibilityLabel={ariaLable ?? accessibilityLabel}
+          accessibilityLabel={ariaLabel ?? accessibilityLabel}
           focusable={tabIndex !== undefined ? !tabIndex : focusable}
           accessibilityRole={
             role ? roleToAccessibilityRoleMapping[role] : accessibilityRole

From 3179b6682c676473f883905d1b16817517a58309 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Thu, 8 Sep 2022 16:35:58 +0530
Subject: [PATCH 34/34] fix: test case pressable

---
 Libraries/Components/Pressable/Pressable.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
index 2ee94b2b88dde7..fec868a98322a0 100644
--- a/Libraries/Components/Pressable/Pressable.js
+++ b/Libraries/Components/Pressable/Pressable.js
@@ -250,7 +250,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
     ...android_rippleConfig?.viewProps,
     accessible: accessible !== false,
     accessibilityLabel,
-    accessibilityState,
     accessibilityState: _accessibilityState,
     focusable: focusable !== false,
     hitSlop,