Announce collapsed state for expanded: false on iOS (#58748)

Summary:
On the new architecture, VoiceOver reads nothing for `aria-expanded={false}` / `accessibilityState={{expanded: false}}`, so a collapsed accordion header sounds like a plain button. `RCTViewComponentView` only adds "expanded" to the accessibility value when the state is true and has no branch for false. The old `RCTView` announces "collapsed" there, and so does TalkBack.

This adds the missing branch, reusing the same localized "collapsed" string `RCTView.m` already has. An unset `expanded` still adds nothing.

Fixes #58746

## Changelog:

[IOS] [FIXED] - VoiceOver announces "collapsed" for `aria-expanded={false}` on the new architecture

Pull Request resolved: #58748

Test Plan: Added XCTest cases to `RCTViewComponentViewTests.mm` for `expanded` true, false and unset. Ran the repo's clang-format on both files. I couldn't run the iOS tests locally (no Xcode on this machine), so they rely on CI.

Reviewed By: cipolleschi

Differential Revision: D122875216

Pulled By: zeyap

fbshipit-source-id: ecca5825fcb6443cbaca57a3998be1efac893c35

Author: lazerg

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -1614,9 +1614,15 @@ - (NSString *)accessibilityValue
         addObject:RCTLocalizedString(
                       "mixed", "a checkbox, radio button, or other widget which is both checked and unchecked")];
   }
-  if (accessibilityState.expanded.value_or(false)) {
-    [valueComponents
-        addObject:RCTLocalizedString("expanded", "a menu, dialog, accordian panel, or other widget which is expanded")];
+  if (const auto expanded = accessibilityState.expanded; expanded.has_value()) {
+    if (expanded.value()) {
+      [valueComponents addObject:RCTLocalizedString(
+                                     "expanded", "a menu, dialog, accordian panel, or other widget which is expanded")];
+    } else {
+      [valueComponents
+          addObject:RCTLocalizedString(
+                        "collapsed", "a menu, dialog, accordian panel, or other widget which is collapsed")];
+    }
   }
 
   if (accessibilityState.busy) {

packages/react-native/React/Tests/Mounting/RCTViewComponentViewTests.mm

@@ -238,6 +238,39 @@ - (void)testViewWithoutRoleIsNotKeyboardFocusable
   XCTAssertFalse(view.canBecomeFocused);
 }
 
+#pragma mark - accessibilityValue for expanded state
+
+static RCTViewComponentView *makeViewWithExpandedState(std::optional<bool> expanded)
+{
+  RCTViewComponentView *view = [RCTViewComponentView new];
+  auto props = std::make_shared<ViewProps>();
+  props->accessible = true;
+  props->accessibilityRole = "button";
+  AccessibilityState accessibilityState;
+  accessibilityState.expanded = expanded;
+  props->accessibilityState = accessibilityState;
+  [view updateProps:props oldProps:ViewShadowNode::defaultSharedProps()];
+  return view;
+}
+
+- (void)testAccessibilityValueAnnouncesExpanded
+{
+  RCTViewComponentView *view = makeViewWithExpandedState(true);
+  XCTAssertEqualObjects(view.accessibilityValue, @"expanded");
+}
+
+- (void)testAccessibilityValueAnnouncesCollapsed
+{
+  RCTViewComponentView *view = makeViewWithExpandedState(false);
+  XCTAssertEqualObjects(view.accessibilityValue, @"collapsed");
+}
+
+- (void)testAccessibilityValueIsNilWithoutExpandedState
+{
+  RCTViewComponentView *view = makeViewWithExpandedState(std::nullopt);
+  XCTAssertNil(view.accessibilityValue);
+}
+
 #pragma mark - outline style on square corners (#57841)
 
 static RCTViewComponentView *makeViewWithOutlineStyle(OutlineStyle outlineStyle)