From b4c9698bbc5866a4d9d77475c30ac1338e522567 Mon Sep 17 00:00:00 2001
From: fabriziobertoglio1987 <fabrizio.bertoglio@gmail.com>
Date: Wed, 7 Dec 2022 14:59:13 +0100
Subject: [PATCH] Over-riding accessibilityLiveRegion in child component

---
 .../View/RCTViewComponentView.mm              | 17 +++++++-----
 .../Accessibility/AccessibilityExample.js     | 27 ++++++++++---------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm b/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm
index 3947a84e504fcc..59ff97541b3899 100644
--- a/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm
+++ b/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm
@@ -304,11 +304,16 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     if (newViewProps.accessibilityLiveRegion == AccessibilityLiveRegion::None) {
       newValueLiveRegion = @"none";
     };
-
-    for (RCTViewComponentView *subview in self.subviews) {
-      // add logic to over-ride behaviour when subview accessibilityLiveRegion is Polite or Assertive
-      if ([newValueLiveRegion length] != 0) {
-        subview.accessibilityLiveRegionAnnouncementType = newValueLiveRegion;
+    
+    if (![newValueLiveRegion isEqual:@"none"] && [newValueLiveRegion length] != 0) {
+      for (RCTViewComponentView *subview in self.subviews) {
+        // add logic to over-ride behaviour when subview accessibilityLiveRegion is Polite or Assertive
+        auto const &childAccessibilityProps = *std::static_pointer_cast<AccessibilityProps const>(_props);
+        if (childAccessibilityProps.accessibilityLiveRegion != AccessibilityLiveRegion::None) {
+          break;
+        } else {
+          subview.accessibilityLiveRegionAnnouncementType = newValueLiveRegion;
+        }
       }
     }
     self.accessibilityLiveRegionAnnouncementType = newValueLiveRegion;
@@ -318,7 +323,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
   NSMutableArray *accessibilityLiveRegionAnnouncementUpdate = [accessibilityLiveRegionAnnouncement mutableCopy];
   BOOL accessibilityLiveRegionEnabledFromParent = self.accessibilityLiveRegionAnnouncementType && ![self.accessibilityLiveRegionAnnouncementType isEqual:@"none"];
   BOOL isReactRootView = RCTIsReactRootView(self.reactTag);
-  BOOL accessibilityLiveRegionEnabled = newViewProps.accessibilityLiveRegion != AccessibilityLiveRegion::None;
+  BOOL accessibilityLiveRegionEnabled = newViewProps.accessible && newViewProps.accessibilityLiveRegion != AccessibilityLiveRegion::None;
   BOOL shouldAnnounceLiveRegionChanges = (accessibilityLiveRegionEnabledFromParent || accessibilityLiveRegionEnabled) && !isReactRootView;
   
   // `accessibilityLabel`
diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
index 6ec8b952672afb..923254d4443085 100644
--- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
+++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
@@ -1588,16 +1588,7 @@ function AccessibilityLiveRegion(): React.Node {
   const [liveRegion, setLiveRegion] = React.useState(true);
   return (
     <>
-      <RNTesterBlock title="LiveRegion with Text Component">
-        <TouchableWithoutFeedback
-          onPress={() => setCount(previousCount => previousCount + 1)}>
-          <View style={styles.embedded}>
-            <Text>Click me</Text>
-          </View>
-        </TouchableWithoutFeedback>
-        <Text accessibilityLiveRegion="polite">Clicked {count} times</Text>
-      </RNTesterBlock>
-      <RNTesterBlock title="LiveRegion with child component">
+      <RNTesterBlock title="Child liveRegion assertive stops the parent component announcement">
         <TouchableWithoutFeedback
           onPress={() =>
             setLiveRegion(liveRegionEnabled => !liveRegionEnabled)
@@ -1617,9 +1608,10 @@ function AccessibilityLiveRegion(): React.Node {
         <View
           accessible={true}
           focusable={true}
-          accessibilityLiveRegion={liveRegion ? 'assertive' : null}>
-          <TouchableOpacity
-            accessibilityLabel={enabled ? 'my label' : null}
+          accessibilityLabel={enabled ? 'my parent' : null}
+          accessibilityLiveRegion={liveRegion ? 'polite' : null}>
+          <View
+            accessible={false}
             accessibilityState={{disabled: enabled}}
             accessibilityHint={enabled ? 'my hint' : null}
             accessibilityValue={enabled ? {now: 5, min: 1, max: 10} : {}}
@@ -1631,6 +1623,15 @@ function AccessibilityLiveRegion(): React.Node {
           />
         </View>
       </RNTesterBlock>
+      <RNTesterBlock title="LiveRegion with Text Component">
+        <TouchableWithoutFeedback
+          onPress={() => setCount(previousCount => previousCount + 1)}>
+          <View style={styles.embedded}>
+            <Text>Click me</Text>
+          </View>
+        </TouchableWithoutFeedback>
+        <Text accessibilityLiveRegion="polite">Clicked {count} times</Text>
+      </RNTesterBlock>
     </>
   );
 }