fix(View): do not flatten a view whose accessibility props a container uses

packages/react-native/Libraries/Components/View/__tests__/View-itest.js

@@ -481,7 +481,7 @@ describe('<View>', () => {
           );
         });
 
-        it('does not unflatten view', () => {
+        it('unflattens view', () => {
           const root = Fantom.createRoot();
 
           Fantom.runTask(() => {
@@ -496,8 +496,10 @@ describe('<View>', () => {
           });
 
           expect(
-            root.getRenderedOutput({props: ['accessibilityRole']}).toJSX(),
-          ).toEqual(null);
+            root.getRenderedOutput({props: ['accessibilityActions']}).toJSX(),
+          ).toEqual(
+            <rn-view accessibilityActions="[activate, increment: 'random label']" />,
+          );
         });
       });
 
@@ -596,7 +598,7 @@ describe('<View>', () => {
           ).toEqual(<rn-view accessibilityLabel="custom label" />);
         });
 
-        it('does not unflatten view', () => {
+        it('unflattens view', () => {
           const root = Fantom.createRoot();
 
           Fantom.runTask(() => {
@@ -605,7 +607,7 @@ describe('<View>', () => {
 
           expect(
             root.getRenderedOutput({props: ['accessibilityLabel']}).toJSX(),
-          ).toEqual(null);
+          ).toEqual(<rn-view accessibilityLabel="custom label" />);
         });
       });
 
@@ -656,7 +658,7 @@ describe('<View>', () => {
           ).toEqual(<rn-view accessibilityRole="button" />);
         });
 
-        it('does not unflatten view', () => {
+        it('unflattens view', () => {
           const root = Fantom.createRoot();
 
           Fantom.runTask(() => {
@@ -665,9 +667,22 @@ describe('<View>', () => {
 
           expect(
             root.getRenderedOutput({props: ['accessibilityRole']}).toJSX(),
-          ).toEqual(null);
+          ).toEqual(<rn-view accessibilityRole="button" />);
         });
       });
+
+      describe('role', () => {
+        it('unflattens view', () => {
+          const root = Fantom.createRoot();
+
+          Fantom.runTask(() => {
+            root.render(<View role="heading" />);
+          });
+
+          expect(root.getRenderedOutput().toJSX()).toEqual(<rn-view />);
+        });
+      });
+
       describe('aria-label', () => {
         it('is mapped to accessibilityLabel', () => {
           const root = Fantom.createRoot();
@@ -914,6 +929,18 @@ describe('<View>', () => {
             root.getRenderedOutput({props: ['accessibilityState']}).toJSX(),
           ).toEqual(<rn-view />);
         });
+
+        it('does not unflatten view', () => {
+          const root = Fantom.createRoot();
+
+          Fantom.runTask(() => {
+            root.render(<View aria-busy={true} />);
+          });
+
+          expect(
+            root.getRenderedOutput({props: ['accessibilityState']}).toJSX(),
+          ).toEqual(null);
+        });
       });
 
       describe('aria-disabled', () => {
@@ -1050,6 +1077,32 @@ describe('<View>', () => {
             root.getRenderedOutput({props: ['accessibilityState']}).toJSX(),
           ).toEqual(<rn-view />);
         });
+
+        it('unflattens view', () => {
+          const root = Fantom.createRoot();
+
+          Fantom.runTask(() => {
+            root.render(<View aria-checked={true} />);
+          });
+
+          expect(
+            root.getRenderedOutput({props: ['accessibilityState']}).toJSX(),
+          ).toEqual(
+            <rn-view accessibilityState="{disabled:false,selected:null,checked:Checked,busy:false,expanded:null}" />,
+          );
+        });
+
+        it('does not unflatten view when mixed', () => {
+          const root = Fantom.createRoot();
+
+          Fantom.runTask(() => {
+            root.render(<View aria-checked="mixed" />);
+          });
+
+          expect(
+            root.getRenderedOutput({props: ['accessibilityState']}).toJSX(),
+          ).toEqual(null);
+        });
       });
     });
 

packages/react-native/ReactCommon/react/renderer/components/view/ViewShadowNode.cpp

@@ -41,6 +41,21 @@ void ViewShadowNode::initialize() noexcept {
     return false;
   };
 
+  auto hasContainerAccessibilityProps = [&]() {
+    const auto& state = viewProps.accessibilityState;
+    bool hasState = state.has_value() &&
+        (state->disabled || state->selected.has_value() ||
+         state->expanded.has_value() ||
+         state->checked == AccessibilityState::Checked ||
+         state->checked == AccessibilityState::Unchecked);
+    return !viewProps.accessibilityLabel.empty() ||
+        !viewProps.accessibilityRole.empty() || viewProps.role.has_value() ||
+        hasState || !viewProps.accessibilityActions.empty() ||
+        viewProps.onAccessibilityEscape || viewProps.onAccessibilityMagicTap ||
+        viewProps.accessibilityShowsLargeContentViewer ||
+        viewProps.accessibilityIgnoresInvertColors;
+  };
+
   bool formsStackingContext = !viewProps.collapsable ||
       viewProps.pointerEvents == PointerEventsMode::BoxOnly ||
       viewProps.pointerEvents == PointerEventsMode::None ||
@@ -60,7 +75,7 @@ void ViewShadowNode::initialize() noexcept {
       viewProps.mixBlendMode != BlendMode::Normal ||
       viewProps.isolation == Isolation::Isolate ||
       HostPlatformViewTraitsInitializer::formsStackingContext(viewProps) ||
-      !viewProps.accessibilityOrder.empty();
+      !viewProps.accessibilityOrder.empty() || hasContainerAccessibilityProps();
 
   bool formsView = formsStackingContext ||
       isColorMeaningful(viewProps.backgroundColor) || hasBorder() ||