feat: added aria-live as a alias for accessibility-live-region

Libraries/Components/Pressable/Pressable.js

@@ -52,6 +52,7 @@ type Props = $ReadOnly<{|
   accessibilityValue?: ?AccessibilityValue,
   accessibilityViewIsModal?: ?boolean,
   accessible?: ?boolean,
+  'aria-live'?: ?('polite' | 'assertive' | 'off'),
   focusable?: ?boolean,
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
@@ -175,6 +176,7 @@ type Props = $ReadOnly<{|
 function Pressable(props: Props, forwardedRef): React.Node {
   const {
     accessible,
+    'aria-live': ariaLive,
     android_disableSound,
     android_ripple,
     cancelable,
@@ -210,10 +212,14 @@ function Pressable(props: Props, forwardedRef): React.Node {
       ? {...props.accessibilityState, disabled}
       : props.accessibilityState;
 
+  const accessibilityLiveRegion =
+    ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion;
+
   const restPropsWithDefaults: React.ElementConfig<typeof View> = {
     ...restProps,
     ...android_rippleConfig?.viewProps,
     accessible: accessible !== false,
+    accessibilityLiveRegion,
     accessibilityState,
     focusable: focusable !== false,
     hitSlop,

Libraries/Components/Touchable/TouchableBounce.js

@@ -130,7 +130,10 @@ class TouchableBounce extends React.Component<Props, State> {
     // adopting `Pressability`, so preserve that behavior.
     const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} =
       this.state.pressability.getEventHandlers();
-
+    const accessibilityLiveRegion =
+      this.props['aria-live'] === 'off'
+        ? 'none'
+        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
     return (
       <Animated.View
         style={[{transform: [{scale: this.state.scale}]}, this.props.style]}
@@ -144,7 +147,7 @@ class TouchableBounce extends React.Component<Props, State> {
         onAccessibilityAction={this.props.onAccessibilityAction}
         accessibilityValue={this.props.accessibilityValue}
         importantForAccessibility={this.props.importantForAccessibility}
-        accessibilityLiveRegion={this.props.accessibilityLiveRegion}
+        accessibilityLiveRegion={accessibilityLiveRegion}
         accessibilityViewIsModal={this.props.accessibilityViewIsModal}
         accessibilityElementsHidden={this.props.accessibilityElementsHidden}
         nativeID={this.props.nativeID}

Libraries/Components/Touchable/TouchableHighlight.js

@@ -290,7 +290,10 @@ class TouchableHighlight extends React.Component<Props, State> {
             disabled: this.props.disabled,
           }
         : this.props.accessibilityState;
-
+    const accessibilityLiveRegion =
+      this.props['aria-live'] === 'off'
+        ? 'none'
+        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
     return (
       <View
         accessible={this.props.accessible !== false}
@@ -303,7 +306,7 @@ class TouchableHighlight extends React.Component<Props, State> {
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
         importantForAccessibility={this.props.importantForAccessibility}
-        accessibilityLiveRegion={this.props.accessibilityLiveRegion}
+        accessibilityLiveRegion={accessibilityLiveRegion}
         accessibilityViewIsModal={this.props.accessibilityViewIsModal}
         accessibilityElementsHidden={this.props.accessibilityElementsHidden}
         style={StyleSheet.compose(

Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -259,6 +259,11 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
           }
         : this.props.accessibilityState;
 
+    const accessibilityLiveRegion =
+      this.props['aria-live'] === 'off'
+        ? 'none'
+        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
+
     return React.cloneElement(
       element,
       {
@@ -279,7 +284,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
         onAccessibilityAction: this.props.onAccessibilityAction,
         accessibilityValue: this.props.accessibilityValue,
         importantForAccessibility: this.props.importantForAccessibility,
-        accessibilityLiveRegion: this.props.accessibilityLiveRegion,
+        accessibilityLiveRegion: accessibilityLiveRegion,
         accessibilityViewIsModal: this.props.accessibilityViewIsModal,
         accessibilityElementsHidden: this.props.accessibilityElementsHidden,
         hasTVPreferredFocus: this.props.hasTVPreferredFocus,

Libraries/Components/Touchable/TouchableOpacity.js

@@ -220,6 +220,11 @@ class TouchableOpacity extends React.Component<Props, State> {
           }
         : this.props.accessibilityState;
 
+    const accessibilityLiveRegion =
+      this.props['aria-live'] === 'off'
+        ? 'none'
+        : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
+
     return (
       <Animated.View
         accessible={this.props.accessible !== false}
@@ -232,7 +237,7 @@ class TouchableOpacity extends React.Component<Props, State> {
         onAccessibilityAction={this.props.onAccessibilityAction}
         accessibilityValue={this.props.accessibilityValue}
         importantForAccessibility={this.props.importantForAccessibility}
-        accessibilityLiveRegion={this.props.accessibilityLiveRegion}
+        accessibilityLiveRegion={accessibilityLiveRegion}
         accessibilityViewIsModal={this.props.accessibilityViewIsModal}
         accessibilityElementsHidden={this.props.accessibilityElementsHidden}
         style={[this.props.style, {opacity: this.state.anim}]}

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -42,6 +42,7 @@ type Props = $ReadOnly<{|
   accessibilityValue?: ?AccessibilityValue,
   accessibilityViewIsModal?: ?boolean,
   accessible?: ?boolean,
+  'aria-live'?: ?('polite' | 'assertive' | 'off'),
   children?: ?React.Node,
   delayLongPress?: ?number,
   delayPressIn?: ?number,
@@ -76,7 +77,6 @@ const PASSTHROUGH_PROPS = [
   'accessibilityLanguage',
   'accessibilityIgnoresInvertColors',
   'accessibilityLabel',
-  'accessibilityLiveRegion',
   'accessibilityRole',
   'accessibilityValue',
   'accessibilityViewIsModal',
@@ -98,6 +98,8 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
   render(): React.Node {
     const element = React.Children.only(this.props.children);
     const children = [element.props.children];
+    const ariaLive = this.props['aria-live'];
+
     if (__DEV__) {
       if (element.type === View) {
         children.push(
@@ -123,6 +125,10 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
           : this.props.accessibilityState,
       focusable:
         this.props.focusable !== false && this.props.onPress !== undefined,
+      accessibilityLiveRegion:
+        ariaLive === 'off'
+          ? 'none'
+          : ariaLive ?? this.props.accessibilityLiveRegion,
     };
     for (const prop of PASSTHROUGH_PROPS) {
       if (this.props[prop] !== undefined) {

Libraries/Components/View/View.js

@@ -27,10 +27,22 @@ const View: React.AbstractComponent<
   ViewProps,
   React.ElementRef<typeof ViewNativeComponent>,
 > = React.forwardRef(
-  ({tabIndex, focusable, ...otherProps}: ViewProps, forwardedRef) => {
+  (
+    {
+      accessibilityLiveRegion,
+      'aria-live': ariaLive,
+      tabIndex,
+      focusable,
+      ...otherProps
+    }: ViewProps,
+    forwardedRef,
+  ) => {
     return (
       <TextAncestor.Provider value={false}>
         <ViewNativeComponent
+          accessibilityLiveRegion={
+            ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
+          }
           focusable={tabIndex !== undefined ? !tabIndex : focusable}
           {...otherProps}
           ref={forwardedRef}

Libraries/Components/View/ViewPropTypes.js

@@ -292,6 +292,16 @@ type AndroidViewProps = $ReadOnly<{|
    */
   accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
 
+  /**
+   * Indicates to accessibility services whether the user should be notified
+   * when this view changes. Works for Android API >= 19 only.
+   *
+   * @platform android
+   *
+   * See https://reactnative.dev/docs/view#accessibilityliveregion
+   */
+  'aria-live'?: ?('polite' | 'assertive' | 'off'),
+
   /**
    * Controls how view is important for accessibility which is if it
    * fires accessibility events and if it is reported to accessibility services