fix(accessibility): Derive accessibilityTraits from role and state (#57515) (#57516)

Summary:
Replaces the two independent writers on `accessibilityTraits` (one in C++ for role, one in ObjC for state) with a single `deriveAccessibilityTraits()` helper that rebuilds the full mask from `None` each commit.

On recycled Fabric views, the ObjC writer's diff guard can skip when the stale `_props` match the new props, leaving `Selected` and `NotEnabled` traits stale.

Fixes #57515

NOTE: this is a fix, not a breaking change (see below)

0.88 is a non-breaking release, and two behaviours change here, so this was worth settling explicitly rather than by omission. Both stop the code doing something it should never have done, so the window does not gate this diff.

The first is `Selected` and `NotEnabled` surviving a view recycle, which is issue #57515 itself.

The second is that `role` no longer honours values outside the `Role` type. The old code parsed the raw `role` string into traits without validating it, so `role="image"` set the Image trait. The public `Role` type in `Libraries/Components/View/ViewAccessibility.js` has 65 members, matching the 65 `toString(Role)` outputs one for one, and none of the 17 affected trait names appear in it. `role="image"` was always a Flow and TypeScript error. Nine of the 17 are valid `accessibilityRole` values and keep working through that prop and the new fallback branch; the remaining eight are internal trait names that appear in neither public type. The full breakdown is in the test plan.

Residual risk worth naming: untyped JS that passes a runtime-computed string into `role` and happens to hit one of those nine would silently lose a trait. Typed code cannot reach this, and untyped code was relying on undocumented behaviour, but the determination rests on the declared types rather than on field data.

## Changelog:

[IOS] [FIXED] - Derive `accessibilityTraits` from role and state in a single writer so `Selected` and `NotEnabled` traits are not lost on recycled Fabric views

Pull Request resolved: #57516

Test Plan:
Reproducer repo: https://github.com/cgoldsby/rn-accessibility-traits-bug ([[steps](https://github.com/cgoldsby/rn-accessibility-traits-bug#steps-to-reproduce-bug)](https://github.com/cgoldsby/rn-accessibility-traits-bug#steps-to-reproduce-bug))

```sh
git clone https://github.com/cgoldsby/rn-accessibility-traits-bug.git
cd rn-accessibility-traits-bug
yarn install
cd ios && pod install && cd ..
yarn ios
```

1. Open Accessibility Inspector
2. Focus the target View
3. Tap "Toggle Role" to switch from `role="button"` to no role

**Before fix:** `Selected` trait is missing
**After fix:**

```sh
git apply patches/react-native+0.86.0.patch
cd ios && pod install && cd ..
yarn ios
```

`Selected` trait persists through the role change.

https://github.com/user-attachments/assets/79974b9d-59da-4066-9b31-e2feff91c407

## Unit tests

Adds `ReactCommon/react/renderer/components/view/tests/AccessibilityPropsTest.cpp`, picked up by the existing `:tests` glob. `AccessibilityProps` is a mixin rather than a `Props` descendant, so the tests parse through `ViewProps`, the concrete type that inherits it.

```
buck2 test fbsource//xplat/js/react-native-github/packages/react-native/ReactCommon/react/renderer/components/view:tests
→ Pass 87. Fail 0.
```

Three of the eight are true regression tests. Restoring the pre-fix `AccessibilityProps.cpp` and re-running fails exactly those three, with the other 84 still green:

```
✗ AccessibilityPropsTest.folds_selected_state_into_role_traits
✗ AccessibilityPropsTest.folds_disabled_state_into_role_traits
✗ AccessibilityPropsTest.clearing_selected_state_drops_the_trait
Tests finished: Pass 84. Fail 3.
```

The remaining five pin behaviour the refactor is *not* meant to change, and they pass against both the old and new code: traits derived from `role`, traits derived from `accessibilityRole`, `role` winning over `accessibilityRole`, no state traits when state is absent, and inheritance from `sourceProps` when the raw props are absent.

## NOTE: `role` no longer honours non-`Role` values (a fix, not a break)

The old code parsed the raw `role` value straight into traits. The new code only consults `role` once it has parsed to a valid `Role` enum, and otherwise falls back to `accessibilityRole`. Comparing the two string tables in `accessibilityPropsConversions.h`:

- `toString(Role)` can emit 65 strings; `fromString(-> AccessibilityTraits)` recognises 25.
- Only 8 overlap, so only these ever produced a trait, before or after: `button`, `heading`, `img`, `link`, `none`, `progressbar`, `summary`, `switch`.
- 17 trait names have no corresponding `Role`: `adjustable`, `allowsDirectInteraction`, `disabled`, `frequentUpdates`, `header`, `image`, `imagebutton`, `key`, `keyboardkey`, `pageTurn`, `plays`, `search`, `selected`, `startsMedia`, `tabbar`, `text`, `togglebutton`. Passing one of those through `role` used to set a trait and now yields `None`.

This is not a breaking change, because none of those were ever valid `role` values. The public `Role` type in `Libraries/Components/View/ViewAccessibility.js` has exactly 65 members, matching the 65 `toString(Role)` outputs one for one, and **none** of the 17 appear in it. `role="image"` was always a Flow and TypeScript type error; the old C++ honoured it only because it parsed the raw string into traits without validating it against the `Role` enum.

Of the 17, nine (`adjustable`, `header`, `image`, `imagebutton`, `keyboardkey`, `search`, `tabbar`, `text`, `togglebutton`) are valid `accessibilityRole` values and keep working through that prop and the fallback branch. The remaining eight are internal trait names that appear in neither public type.

The new code is also better in the mixed case: with an invalid `role` plus a valid `accessibilityRole`, the old code let the bad `role` win, whereas the new code falls back correctly.

## Also restored

The `// It is a (severe!) perf deoptimization to request props out-of-order` comment above the two `rawProps.at()` lookups. Its original rationale (needing `accessibilityRole` twice) is obsolete, but the general hazard is not, and the two lookups still have to stay adjacent and in order.

Reviewed By: javache

Differential Revision: D114880897

Pulled By: fabriziocucci

fbshipit-source-id: bfefa0db0d0c38895ad43d781afa99e9b0283ee7

Author: cgoldsby

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

@@ -539,18 +539,6 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
         RCTUIAccessibilityTraitsFromAccessibilityTraits(newViewProps.accessibilityTraits);
   }
 
-  // `accessibilityState`
-  if (oldViewProps.accessibilityState != newViewProps.accessibilityState) {
-    self.accessibilityTraits &= ~(UIAccessibilityTraitNotEnabled | UIAccessibilityTraitSelected);
-    const auto accessibilityState = newViewProps.accessibilityState.value_or(AccessibilityState{});
-    if (accessibilityState.selected) {
-      self.accessibilityTraits |= UIAccessibilityTraitSelected;
-    }
-    if (accessibilityState.disabled) {
-      self.accessibilityTraits |= UIAccessibilityTraitNotEnabled;
-    }
-  }
-
   // `accessibilityIgnoresInvertColors`
   if (oldViewProps.accessibilityIgnoresInvertColors != newViewProps.accessibilityIgnoresInvertColors) {
     self.accessibilityIgnoresInvertColors = newViewProps.accessibilityIgnoresInvertColors;

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

@@ -14,6 +14,31 @@
 
 namespace facebook::react {
 
+// Derive accessibilityTraits from the resolved role and accessibilityState
+// members. This makes accessibilityTraits the single source of truth.
+// See: github.com/facebook/react-native/issues/57515
+static AccessibilityTraits deriveAccessibilityTraits(
+    Role role,
+    const std::string& accessibilityRole,
+    const std::optional<AccessibilityState>& accessibilityState) {
+  AccessibilityTraits traits = AccessibilityTraits::None;
+  if (role != Role::None) {
+    fromString(toString(role), traits);
+  } else if (!accessibilityRole.empty()) {
+    fromString(accessibilityRole, traits);
+  }
+
+  const auto state = accessibilityState.value_or(AccessibilityState{});
+  if (state.selected) {
+    traits = traits | AccessibilityTraits::Selected;
+  }
+  if (state.disabled) {
+    traits = traits | AccessibilityTraits::NotEnabled;
+  }
+
+  return traits;
+}
+
 AccessibilityProps::AccessibilityProps(
     const PropsParserContext& context,
     const AccessibilityProps& sourceProps,
@@ -146,19 +171,11 @@ AccessibilityProps::AccessibilityProps(
           ImportantForAccessibility::Auto)),
       testId(
           convertRawProp(context, rawProps, "testID", sourceProps.testId, "")) {
-  // It is a (severe!) perf deoptimization to request props out-of-order.
-  // Thus, since we need to request the same prop twice here
-  // (accessibilityRole) we "must" do them subsequently here to prevent
-  // a regression. It is reasonable to ask if the `at` function can be improved;
-  // it probably can, but this is a fairly rare edge-case that (1) is easy-ish
-  // to work around here, and (2) would require very careful work to address
-  // this case and not regress the more common cases.
+  // It is a (severe!) perf deoptimization to request props out-of-order, so
+  // these two lookups stay adjacent and in this order.
   auto* accessibilityRoleValue = rawProps.at("accessibilityRole");
   auto* roleValue = rawProps.at("role");
 
-  auto* precedentRoleValue =
-      roleValue != nullptr ? roleValue : accessibilityRoleValue;
-
   if (accessibilityRoleValue == nullptr ||
       !accessibilityRoleValue->hasValue()) {
     accessibilityRole = sourceProps.accessibilityRole;
@@ -172,11 +189,8 @@ AccessibilityProps::AccessibilityProps(
     fromRawValue(context, *roleValue, role);
   }
 
-  if (precedentRoleValue == nullptr || !precedentRoleValue->hasValue()) {
-    accessibilityTraits = sourceProps.accessibilityTraits;
-  } else {
-    fromRawValue(context, *precedentRoleValue, accessibilityTraits);
-  }
+  accessibilityTraits =
+      deriveAccessibilityTraits(role, accessibilityRole, accessibilityState);
 }
 
 void AccessibilityProps::setProp(
@@ -188,39 +202,48 @@ void AccessibilityProps::setProp(
 
   switch (hash) {
     RAW_SET_PROP_SWITCH_CASE_BASIC(accessible);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityState);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityLabel);
-    RAW_SET_PROP_SWITCH_CASE(
-        accessibilityOrder, "experimental_accessibilityOrder");
-    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityLabelledBy);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityLiveRegion);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityHint);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityLanguage);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityShowsLargeContentViewer);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityLargeContentTitle);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityValue);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityActions);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityViewIsModal);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityElementsHidden);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityIgnoresInvertColors);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityRespondsToUserInteraction);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(onAccessibilityTap);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(onAccessibilityMagicTap);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(onAccessibilityEscape);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(onAccessibilityAction);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(importantForAccessibility);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(role);
-    RAW_SET_PROP_SWITCH_CASE(testId, "testID");
+    case CONSTEXPR_RAW_PROPS_KEY_HASH("accessibilityState"): {
+      fromRawValue(
+          context, value, accessibilityState, defaults.accessibilityState);
+      accessibilityTraits = deriveAccessibilityTraits(
+          role, accessibilityRole, accessibilityState);
+      return;
+    }
+      RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityLabel);
+      RAW_SET_PROP_SWITCH_CASE(
+          accessibilityOrder, "experimental_accessibilityOrder");
+      RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityLabelledBy);
+      RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityLiveRegion);
+      RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityHint);
+      RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityLanguage);
+      RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityShowsLargeContentViewer);
+      RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityLargeContentTitle);
+      RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityValue);
+      RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityActions);
+      RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityViewIsModal);
+      RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityElementsHidden);
+      RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityIgnoresInvertColors);
+      RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityRespondsToUserInteraction);
+      RAW_SET_PROP_SWITCH_CASE_BASIC(onAccessibilityTap);
+      RAW_SET_PROP_SWITCH_CASE_BASIC(onAccessibilityMagicTap);
+      RAW_SET_PROP_SWITCH_CASE_BASIC(onAccessibilityEscape);
+      RAW_SET_PROP_SWITCH_CASE_BASIC(onAccessibilityAction);
+      RAW_SET_PROP_SWITCH_CASE_BASIC(importantForAccessibility);
+    case CONSTEXPR_RAW_PROPS_KEY_HASH("role"): {
+      fromRawValue(context, value, role, defaults.role);
+      accessibilityTraits = deriveAccessibilityTraits(
+          role, accessibilityRole, accessibilityState);
+      return;
+    }
+      RAW_SET_PROP_SWITCH_CASE(testId, "testID");
     case CONSTEXPR_RAW_PROPS_KEY_HASH("accessibilityRole"): {
-      AccessibilityTraits traits = AccessibilityTraits::None;
       std::string roleString;
       if (value.hasValue()) {
-        fromRawValue(context, value, traits);
         fromRawValue(context, value, roleString);
       }
-
-      accessibilityTraits = traits;
       accessibilityRole = roleString;
+      accessibilityTraits = deriveAccessibilityTraits(
+          role, accessibilityRole, accessibilityState);
       return;
     }
   }

packages/react-native/ReactCommon/react/renderer/components/view/tests/AccessibilityPropsTest.cpp

@@ -0,0 +1,121 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include <gtest/gtest.h>
+
+#include <react/renderer/components/view/AccessibilityPrimitives.h>
+#include <react/renderer/components/view/ViewProps.h>
+#include <react/renderer/core/RawProps.h>
+#include <react/renderer/core/RawPropsParser.h>
+
+namespace facebook::react {
+
+namespace {
+
+// AccessibilityProps is a mixin rather than a Props descendant, so it is
+// parsed through ViewProps, the concrete type that inherits it.
+ViewProps parse(
+    const folly::dynamic& rawPropsValue,
+    const ViewProps& sourceProps = ViewProps()) {
+  ContextContainer contextContainer{};
+  PropsParserContext parserContext{-1, contextContainer};
+
+  auto raw = RawProps(rawPropsValue);
+  auto parser = RawPropsParser();
+  parser.prepare<ViewProps>();
+  raw.parse(parser);
+
+  return {parserContext, sourceProps, raw};
+}
+
+bool hasTrait(AccessibilityTraits traits, AccessibilityTraits expected) {
+  return (traits & expected) == expected;
+}
+
+} // namespace
+
+TEST(AccessibilityPropsTest, derives_traits_from_role) {
+  auto props = parse(folly::dynamic::object("role", "button"));
+
+  EXPECT_TRUE(hasTrait(props.accessibilityTraits, AccessibilityTraits::Button));
+}
+
+TEST(AccessibilityPropsTest, derives_traits_from_accessibility_role) {
+  auto props = parse(folly::dynamic::object("accessibilityRole", "image"));
+
+  EXPECT_TRUE(hasTrait(props.accessibilityTraits, AccessibilityTraits::Image));
+}
+
+TEST(AccessibilityPropsTest, role_takes_precedence_over_accessibility_role) {
+  auto props = parse(
+      folly::dynamic::object("role", "button")("accessibilityRole", "image"));
+
+  EXPECT_TRUE(hasTrait(props.accessibilityTraits, AccessibilityTraits::Button));
+  EXPECT_FALSE(hasTrait(props.accessibilityTraits, AccessibilityTraits::Image));
+}
+
+// The selected/disabled bits used to be applied by RCTViewComponentView on top
+// of the role-derived bitmask, which meant they were lost whenever the traits
+// were rewritten. They are now folded in at the props layer.
+TEST(AccessibilityPropsTest, folds_selected_state_into_role_traits) {
+  auto props = parse(
+      folly::dynamic::object("role", "button")(
+          "accessibilityState", folly::dynamic::object("selected", true)));
+
+  EXPECT_TRUE(hasTrait(props.accessibilityTraits, AccessibilityTraits::Button));
+  EXPECT_TRUE(
+      hasTrait(props.accessibilityTraits, AccessibilityTraits::Selected));
+}
+
+TEST(AccessibilityPropsTest, folds_disabled_state_into_role_traits) {
+  auto props = parse(
+      folly::dynamic::object("role", "button")(
+          "accessibilityState", folly::dynamic::object("disabled", true)));
+
+  EXPECT_TRUE(hasTrait(props.accessibilityTraits, AccessibilityTraits::Button));
+  EXPECT_TRUE(
+      hasTrait(props.accessibilityTraits, AccessibilityTraits::NotEnabled));
+}
+
+TEST(AccessibilityPropsTest, omits_state_traits_when_state_is_absent) {
+  auto props = parse(folly::dynamic::object("role", "button"));
+
+  EXPECT_FALSE(
+      hasTrait(props.accessibilityTraits, AccessibilityTraits::Selected));
+  EXPECT_FALSE(
+      hasTrait(props.accessibilityTraits, AccessibilityTraits::NotEnabled));
+}
+
+// A recycled view is re-parsed against the previous mount's props as source.
+// Clearing selected must drop the trait rather than leave it latched on.
+TEST(AccessibilityPropsTest, clearing_selected_state_drops_the_trait) {
+  auto selected = parse(
+      folly::dynamic::object("role", "button")(
+          "accessibilityState", folly::dynamic::object("selected", true)));
+  ASSERT_TRUE(
+      hasTrait(selected.accessibilityTraits, AccessibilityTraits::Selected));
+
+  auto cleared = parse(
+      folly::dynamic::object("role", "button")(
+          "accessibilityState", folly::dynamic::object("selected", false)),
+      selected);
+
+  EXPECT_TRUE(
+      hasTrait(cleared.accessibilityTraits, AccessibilityTraits::Button));
+  EXPECT_FALSE(
+      hasTrait(cleared.accessibilityTraits, AccessibilityTraits::Selected));
+}
+
+TEST(AccessibilityPropsTest, inherits_role_traits_when_raw_props_are_absent) {
+  auto source = parse(folly::dynamic::object("role", "button"));
+
+  auto props = parse(folly::dynamic::object("nativeID", "abc"), source);
+
+  EXPECT_TRUE(hasTrait(props.accessibilityTraits, AccessibilityTraits::Button));
+}
+
+} // namespace facebook::react