Allow accessibilityOrder to reference itself (facebook#51004)

Summary:

It would be very convenient if `accessibilityOrder` could reference itself. Meaning the View with the `accessibilityOrder` prop can include its own `nativeID` in the array. This makes sense API wise - we allow for referencing parents and their descendants, so long as they are treated as an element and not a container. This is pretty nice since you no longer have to wrap everything in a View who's sole purpose is `accessibilityOrder`.

Under the hood things get a bit garbled, however, since iOS only lets you have UIViews that are either accessibility elements or accessibility containers - and we need to support both at the same time for this to work. To do this, we make use of the `UIAccessibilityElement` class and just forward all of the logic to the View with the `accessibilityOrder` prop. This View will also not be an accessibility element from the point of view of iOS.

Changelog: [Internal]

Differential Revision: D73792934

Author: joevilches

packages/react-native/React/Fabric/Mounting/ComponentViews/Text/RCTParagraphComponentView.mm

@@ -9,6 +9,7 @@
 #import "RCTParagraphComponentAccessibilityProvider.h"
 
 #import <MobileCoreServices/UTCoreTypes.h>
+#import <React/RCTViewAccessibilityElement.h>
 #import <react/renderer/components/text/ParagraphComponentDescriptor.h>
 #import <react/renderer/components/text/ParagraphProps.h>
 #import <react/renderer/components/text/ParagraphState.h>
@@ -212,23 +213,26 @@ - (BOOL)isAccessibilityCoopted
   NSMutableSet<UIView *> *cooptingCandidates = [NSMutableSet new];
   while (ancestor) {
     if ([ancestor isKindOfClass:[RCTViewComponentView class]]) {
+      if ([((RCTViewComponentView *)ancestor) accessibilityLabelForCoopting]) {
+        // We found a label above us. That would be coopted before we would be
+        return NO;
+      } else if ([((RCTViewComponentView *)ancestor) wantsToCooptLabel]) {
+        // We found an view that is looking to coopt a label below it
+        [cooptingCandidates addObject:ancestor];
+      }
+
       NSArray *elements = ancestor.accessibilityElements;
       if ([elements count] > 0 && [cooptingCandidates count] > 0) {
-        for (UIView *element in elements) {
-          if ([cooptingCandidates containsObject:element]) {
+        for (NSObject *element in elements) {
+          if ([element isKindOfClass:[UIView class]] && [cooptingCandidates containsObject:((UIView *)element)]) {
+            return YES;
+          } else if (
+              [element isKindOfClass:[RCTViewAccessibilityElement class]] &&
+              [cooptingCandidates containsObject:((RCTViewAccessibilityElement *)element).view]) {
             return YES;
           }
         }
       }
-
-      if ([((RCTViewComponentView *)ancestor) accessibilityLabelForCoopting]) {
-        // We found a label above us. That would be coopted before we would be
-        return NO;
-      } else if (ancestor.isAccessibilityElement) {
-        // We found an accessible view without a label for coopting before anything
-        // else, if it is in some accessibilityElements somewhere then it will coopt
-        [cooptingCandidates addObject:ancestor];
-      }
     } else if (![ancestor isKindOfClass:[RCTViewComponentView class]] && ancestor.accessibilityLabel) {
       // Same as above, for UIView case. Cannot call this on RCTViewComponentView
       // as it is recursive and quite expensive.

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewAccessibilityElement.h

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+#import "RCTViewComponentView.h"
+
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/*
+ * A UIAcccessibilityElement representing a RCTViewComponentView from an
+ * accessibility standpoint. This enables RCTViewComponentView's to reference
+ * themselves in `accessibilityElements` without actually being an accessibility
+ * element. If it were, then iOS would not call into `accessibilityElements`.
+ */
+@interface RCTViewAccessibilityElement : UIAccessibilityElement
+
+@property (readonly) RCTViewComponentView *view;
+
+- (instancetype)initWithView:(RCTViewComponentView *)view;
+
+@end
+
+NS_ASSUME_NONNULL_END

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

@@ -0,0 +1,83 @@
+/*
+ * 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.
+ */
+
+#import "RCTViewAccessibilityElement.h"
+
+@implementation RCTViewAccessibilityElement
+
+- (instancetype)initWithView:(RCTViewComponentView *)view
+{
+  if (self = [super initWithAccessibilityContainer:view]) {
+    _view = view;
+  }
+
+  return self;
+}
+
+- (CGRect)accessibilityFrame
+{
+  return UIAccessibilityConvertFrameToScreenCoordinates(_view.bounds, _view);
+}
+
+#pragma mark - Forwarding to _view
+
+- (NSString *)accessibilityLabel
+{
+  return _view.accessibilityLabel;
+}
+
+- (NSString *)accessibilityValue
+{
+  return _view.accessibilityValue;
+}
+
+- (UIAccessibilityTraits)accessibilityTraits
+{
+  return _view.accessibilityTraits;
+}
+
+- (NSString *)accessibilityHint
+{
+  return _view.accessibilityHint;
+}
+
+- (BOOL)accessibilityIgnoresInvertColors
+{
+  return _view.accessibilityIgnoresInvertColors;
+}
+
+- (BOOL)shouldGroupAccessibilityChildren
+{
+  return _view.shouldGroupAccessibilityChildren;
+}
+
+- (NSArray<UIAccessibilityCustomAction *> *)accessibilityCustomActions
+{
+  return _view.accessibilityCustomActions;
+}
+
+- (NSString *)accessibilityLanguage
+{
+  return _view.accessibilityLanguage;
+}
+
+- (BOOL)accessibilityViewIsModal
+{
+  return _view.accessibilityViewIsModal;
+}
+
+- (BOOL)accessibilityElementsHidden
+{
+  return _view.accessibilityElementsHidden;
+}
+
+- (BOOL)accessibilityRespondsToUserInteraction
+{
+  return _view.accessibilityRespondsToUserInteraction;
+}
+
+@end

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

@@ -81,6 +81,11 @@ NS_ASSUME_NONNULL_BEGIN
  */
 - (NSString *)accessibilityLabelForCoopting;
 
+/*
+ * This View has no label and will look to coopt something below it
+ */
+- (BOOL)wantsToCooptLabel;
+
 /*
  * This is a fragment of temporary workaround that we need only temporary and will get rid of soon.
  */

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

@@ -6,6 +6,7 @@
  */
 
 #import "RCTViewComponentView.h"
+#import "RCTViewAccessibilityElement.h"
 
 #import <CoreGraphics/CoreGraphics.h>
 #import <QuartzCore/QuartzCore.h>
@@ -49,7 +50,8 @@ @implementation RCTViewComponentView {
   NSSet<NSString *> *_Nullable _propKeysManagedByAnimated_DO_NOT_USE_THIS_IS_BROKEN;
   UIView *_containerView;
   BOOL _useCustomContainerView;
-  NSMutableArray<NSString *> *_accessibleElementsNativeIds;
+  NSMutableSet<NSString *> *_accessibilityOrderNativeIDs;
+  RCTViewAccessibilityElement *_axElementDescribingSelf;
 }
 
 #ifdef RCT_DYNAMIC_FRAMEWORKS
@@ -391,11 +393,15 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
     }
   }
 
+  // `accessibilityOrder`
   if (oldViewProps.accessibilityOrder != newViewProps.accessibilityOrder &&
       ReactNativeFeatureFlags::enableAccessibilityOrder()) {
-    _accessibleElementsNativeIds = [NSMutableArray new];
+    // Creating a set since a lot of logic requires lookups in here. However,
+    // we still need to preserve the orginal order. So just read from props
+    // if need to access that
+    _accessibilityOrderNativeIDs = [NSMutableSet new];
     for (const std::string &childId : newViewProps.accessibilityOrder) {
-      [_accessibleElementsNativeIds addObject:RCTNSStringFromString(childId)];
+      [_accessibilityOrderNativeIDs addObject:RCTNSStringFromString(childId)];
     }
   }
 
@@ -1141,20 +1147,31 @@ - (NSObject *)accessibilityElement
 
 - (NSArray<NSObject *> *)accessibilityElements
 {
-  if ([_accessibleElementsNativeIds count] <= 0) {
+  if ([_accessibilityOrderNativeIDs count] <= 0) {
     return super.accessibilityElements;
   }
 
   NSMutableDictionary<NSString *, UIView *> *nativeIdToView = [NSMutableDictionary new];
-  NSSet<NSString *> *nativeIdSet = [[NSSet alloc] initWithArray:_accessibleElementsNativeIds];
 
-  [RCTViewComponentView collectAccessibilityElements:self intoDictionary:nativeIdToView nativeIds:nativeIdSet];
-
-  NSMutableArray<UIView *> *elements = [NSMutableArray new];
-  for (NSString *childId : _accessibleElementsNativeIds) {
-    UIView *viewWithMatchingNativeId = [nativeIdToView objectForKey:childId];
-    if (viewWithMatchingNativeId) {
-      [elements addObject:viewWithMatchingNativeId];
+  [RCTViewComponentView collectAccessibilityElements:self
+                                      intoDictionary:nativeIdToView
+                                           nativeIds:_accessibilityOrderNativeIDs];
+
+  NSMutableArray<NSObject *> *elements = [NSMutableArray new];
+  for (auto childId : _props->accessibilityOrder) {
+    NSString *nsStringChildId = RCTNSStringFromString(childId);
+    // Special case to allow for self-referencing with accessibilityOrder
+    if (nsStringChildId == self.nativeId) {
+      if (!_axElementDescribingSelf) {
+        _axElementDescribingSelf = [[RCTViewAccessibilityElement alloc] initWithView:self];
+      }
+      _axElementDescribingSelf.isAccessibilityElement = [super isAccessibilityElement];
+      [elements addObject:_axElementDescribingSelf];
+    } else {
+      UIView *viewWithMatchingNativeId = [nativeIdToView objectForKey:nsStringChildId];
+      if (viewWithMatchingNativeId) {
+        [elements addObject:viewWithMatchingNativeId];
+      }
     }
   }
 
@@ -1211,12 +1228,24 @@ - (NSString *)accessibilityLabelForCoopting
   return super.accessibilityLabel;
 }
 
+- (BOOL)wantsToCooptLabel
+{
+  return !super.accessibilityLabel && super.isAccessibilityElement;
+}
+
 - (BOOL)isAccessibilityElement
 {
   if (self.contentView != nil) {
     return self.contentView.isAccessibilityElement;
   }
 
+  // If we reference ourselves in accessibilityOrder then we will make a
+  // UIAccessibilityElement object to represent ourselves since returning YES
+  // here would mean iOS would not call into accessibilityElements
+  if ([_accessibilityOrderNativeIDs containsObject:self.nativeId]) {
+    return NO;
+  }
+
   return [super isAccessibilityElement];
 }