Add stable accessibilityOrder prop

packages/react-native/Libraries/Components/ScrollView/ScrollView.js

@@ -685,7 +685,7 @@ type ScrollViewBaseProps = Readonly<{
 
 /** @build-types emit-as-interface Nativewind compatibility */
 export type ScrollViewProps = Readonly<{
-  ...Omit<ViewProps, 'experimental_accessibilityOrder'>,
+  ...Omit<ViewProps, 'accessibilityOrder' | 'experimental_accessibilityOrder'>,
   ...ScrollViewPropsIOS,
   ...ScrollViewPropsAndroid,
   ...ScrollViewBaseProps,

packages/react-native/Libraries/Components/TextInput/TextInput.flow.js

@@ -1058,7 +1058,10 @@ type TextInputBaseProps = Readonly<{
 
 /** @build-types emit-as-interface Uniwind compatibility */
 export type TextInputProps = Readonly<{
-  ...Omit<ViewProps, 'style' | 'experimental_accessibilityOrder'>,
+  ...Omit<
+    ViewProps,
+    'style' | 'accessibilityOrder' | 'experimental_accessibilityOrder',
+  >,
   ...TextInputIOSProps,
   ...TextInputAndroidProps,
   ...TextInputBaseProps,

packages/react-native/Libraries/Components/View/ViewAccessibility.d.ts

@@ -47,6 +47,13 @@ export interface AccessibilityProps
    */
   accessibilityState?: AccessibilityState | undefined;
 
+  /**
+   * Defines the order in which descendant elements receive accessibility focus.
+   * The elements in the array represent nativeID values for the respective
+   * descendant elements.
+   */
+  accessibilityOrder?: ReadonlyArray<string> | undefined;
+
   /**
    * alias for accessibilityState
    *

packages/react-native/Libraries/Components/View/ViewPropTypes.js

@@ -507,6 +507,11 @@ type ViewBaseProps = Readonly<{
    * The elements in the array represent nativeID values for the respective
    * descendant elements.
    */
+  accessibilityOrder?: ?Array<string>,
+
+  /**
+   * Deprecated. Use accessibilityOrder instead.
+   */
   experimental_accessibilityOrder?: ?Array<string>,
 }>;
 

packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -224,6 +224,7 @@ const validAttributesForNonEventProps = {
   accessibilityState: true,
   accessibilityActions: true,
   accessibilityValue: true,
+  accessibilityOrder: true,
   experimental_accessibilityOrder: true,
   importantForAccessibility: true,
   screenReaderFocusable: true,

packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -200,6 +200,7 @@ const validAttributesForNonEventProps = {
   accessibilityIgnoresInvertColors: true,
   accessibilityShowsLargeContentViewer: true,
   accessibilityLargeContentTitle: true,
+  accessibilityOrder: true,
   experimental_accessibilityOrder: true,
   accessibilityRespondsToUserInteraction: true,
   testID: true,

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.kt

@@ -159,7 +159,8 @@ public object ViewProps {
   public const val ACCESSIBILITY_ACTIONS: String = "accessibilityActions"
   public const val ACCESSIBILITY_VALUE: String = "accessibilityValue"
   public const val ACCESSIBILITY_LABELLED_BY: String = "accessibilityLabelledBy"
-  public const val ACCESSIBILITY_ORDER: String = "experimental_accessibilityOrder"
+  public const val ACCESSIBILITY_ORDER: String = "accessibilityOrder"
+  public const val EXPERIMENTAL_ACCESSIBILITY_ORDER: String = "experimental_accessibilityOrder"
   public const val IMPORTANT_FOR_ACCESSIBILITY: String = "importantForAccessibility"
   public const val SCREEN_READER_FOCUSABLE: String = "screenReaderFocusable"
   public const val ROLE: String = "role"

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.kt

@@ -99,6 +99,15 @@ public open class ReactViewManager : ReactClippingViewManager<ReactViewGroup>()
 
   @ReactProp(name = ViewProps.ACCESSIBILITY_ORDER)
   public open fun setAccessibilityOrder(view: ReactViewGroup, nativeIds: ReadableArray?) {
+    updateAccessibilityOrder(view, nativeIds)
+  }
+
+  @ReactProp(name = ViewProps.EXPERIMENTAL_ACCESSIBILITY_ORDER)
+  public open fun setExperimentalAccessibilityOrder(view: ReactViewGroup, nativeIds: ReadableArray?) {
+    updateAccessibilityOrder(view, nativeIds)
+  }
+
+  private fun updateAccessibilityOrder(view: ReactViewGroup, nativeIds: ReadableArray?) {
     if (!ReactNativeFeatureFlags.enableAccessibilityOrder()) {
       return
     }

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

@@ -52,8 +52,13 @@ AccessibilityProps::AccessibilityProps(
               : convertRawProp(
                     context,
                     rawProps,
-                    "experimental_accessibilityOrder",
-                    sourceProps.accessibilityOrder,
+                    "accessibilityOrder",
+                    convertRawProp(
+                        context,
+                        rawProps,
+                        "experimental_accessibilityOrder",
+                        sourceProps.accessibilityOrder,
+                        {}),
                     {})),
       accessibilityLabelledBy(
           ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
@@ -269,6 +274,7 @@ void AccessibilityProps::setProp(
     RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityState);
     RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityLabel);
     RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityOrder);
+    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);

packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp

@@ -914,7 +914,7 @@ folly::dynamic HostPlatformViewProps::getDiffProps(
     for (const auto& accessibilityChildId : accessibilityOrder) {
       accessibilityChildrenIds.push_back(accessibilityChildId);
     }
-    result["experimental_accessibilityOrder"] = accessibilityChildrenIds;
+    result["accessibilityOrder"] = accessibilityChildrenIds;
   }
 
   if (accessibilityLiveRegion != oldProps->accessibilityLiveRegion) {

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

@@ -14,7 +14,9 @@
 #include <react/renderer/components/root/RootComponentDescriptor.h>
 #include <react/renderer/components/scrollview/ScrollViewComponentDescriptor.h>
 #include <react/renderer/components/view/ViewComponentDescriptor.h>
+#include <react/renderer/components/view/ViewShadowNode.h>
 #include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/RawPropsParser.h>
 #include <react/renderer/element/ComponentBuilder.h>
 
 #include <react/renderer/components/view/YogaLayoutableShadowNode.h>
@@ -130,6 +132,44 @@ TEST_F(YogaDirtyFlagTest, changingNonLayoutSubPropsMustNotDirtyYogaNode) {
       static_cast<RootShadowNode&>(*newRootShadowNode).layoutIfNeeded());
 }
 
+TEST(ViewPropsTest, accessibilityOrderCanBeParsedFromStablePropName) {
+  ContextContainer contextContainer{};
+  PropsParserContext parserContext{-1, contextContainer};
+
+  auto rawProps = RawProps(folly::dynamic::object(
+      "accessibilityOrder",
+      folly::dynamic::array("second", "first", "third")));
+  auto parser = RawPropsParser();
+  parser.prepare<ViewShadowNodeProps>();
+  rawProps.parse(parser);
+
+  auto props =
+      ViewShadowNodeProps(parserContext, ViewShadowNodeProps(), rawProps);
+
+  EXPECT_EQ(
+      props.accessibilityOrder,
+      (std::vector<std::string>{"second", "first", "third"}));
+}
+
+TEST(ViewPropsTest, accessibilityOrderCanBeParsedFromExperimentalPropName) {
+  ContextContainer contextContainer{};
+  PropsParserContext parserContext{-1, contextContainer};
+
+  auto rawProps = RawProps(folly::dynamic::object(
+      "experimental_accessibilityOrder",
+      folly::dynamic::array("second", "first", "third")));
+  auto parser = RawPropsParser();
+  parser.prepare<ViewShadowNodeProps>();
+  rawProps.parse(parser);
+
+  auto props =
+      ViewShadowNodeProps(parserContext, ViewShadowNodeProps(), rawProps);
+
+  EXPECT_EQ(
+      props.accessibilityOrder,
+      (std::vector<std::string>{"second", "first", "third"}));
+}
+
 TEST_F(YogaDirtyFlagTest, changingLayoutSubPropsMustDirtyYogaNode) {
   /*
    * Changing *layout* sub-props *must* dirty a Yoga node.