Implement RCTViewAccessibilityElement and RCTUIAccessibilityTraits

Author: Saadnajmi

packages/react-native/React/Base/RCTUIKit.h

@@ -99,6 +99,29 @@ UIKIT_STATIC_INLINE CGRect CGRectValue(NSValue *value)
 
 #define RCTUIColor UIColor
 
+// RCTUIAccessibilityTraits - typedef to UIAccessibilityTraits on iOS
+static const UIAccessibilityTraits RCTUIAccessibilityTraitSwitch = 0x20000000000001;
+
+typedef UIAccessibilityTraits RCTUIAccessibilityTraits;
+#define RCTUIAccessibilityTraitNone UIAccessibilityTraitNone
+#define RCTUIAccessibilityTraitButton UIAccessibilityTraitButton
+#define RCTUIAccessibilityTraitLink UIAccessibilityTraitLink
+#define RCTUIAccessibilityTraitImage UIAccessibilityTraitImage
+#define RCTUIAccessibilityTraitSelected UIAccessibilityTraitSelected
+#define RCTUIAccessibilityTraitPlaysSound UIAccessibilityTraitPlaysSound
+#define RCTUIAccessibilityTraitKeyboardKey UIAccessibilityTraitKeyboardKey
+#define RCTUIAccessibilityTraitStaticText UIAccessibilityTraitStaticText
+#define RCTUIAccessibilityTraitSummaryElement UIAccessibilityTraitSummaryElement
+#define RCTUIAccessibilityTraitNotEnabled UIAccessibilityTraitNotEnabled
+#define RCTUIAccessibilityTraitUpdatesFrequently UIAccessibilityTraitUpdatesFrequently
+#define RCTUIAccessibilityTraitSearchField UIAccessibilityTraitSearchField
+#define RCTUIAccessibilityTraitStartsMediaSession UIAccessibilityTraitStartsMediaSession
+#define RCTUIAccessibilityTraitAdjustable UIAccessibilityTraitAdjustable
+#define RCTUIAccessibilityTraitAllowsDirectInteraction UIAccessibilityTraitAllowsDirectInteraction
+#define RCTUIAccessibilityTraitCausesPageTurn UIAccessibilityTraitCausesPageTurn
+#define RCTUIAccessibilityTraitHeader UIAccessibilityTraitHeader
+#define RCTUIAccessibilityTraitTabBar UIAccessibilityTraitTabBar
+
 UIKIT_STATIC_INLINE UIFont *UIFontWithSize(UIFont *font, CGFloat pointSize)
 {
   return [font fontWithSize:pointSize];
@@ -281,6 +304,74 @@ CGContextRef UIGraphicsGetCurrentContext(void);
 // UIAccessibility.h/NSAccessibility.h
 @compatibility_alias UIAccessibilityCustomAction NSAccessibilityCustomAction;
 
+// RCTUIAccessibilityTraits - define as bitmask type for macOS
+// On macOS these don't directly map to behavior, but allow code to compile
+// The actual accessibility role mapping is done in RCTViewAccessibilityElement
+typedef uint64_t RCTUIAccessibilityTraits;
+
+// Trait constants matching iOS UIAccessibilityConstants.h
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitNone = 0;
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitButton = (1ULL << 0);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitLink = (1ULL << 1);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitImage = (1ULL << 2);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitSelected = (1ULL << 3);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitPlaysSound = (1ULL << 4);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitKeyboardKey = (1ULL << 5);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitStaticText = (1ULL << 6);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitSummaryElement = (1ULL << 7);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitNotEnabled = (1ULL << 8);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitUpdatesFrequently = (1ULL << 9);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitSearchField = (1ULL << 10);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitStartsMediaSession = (1ULL << 11);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitAdjustable = (1ULL << 12);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitAllowsDirectInteraction = (1ULL << 13);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitCausesPageTurn = (1ULL << 14);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitHeader = (1ULL << 15);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitTabBar = (1ULL << 16);
+static const RCTUIAccessibilityTraits RCTUIAccessibilityTraitSwitch = (1ULL << 17);
+
+// Convert RCTUIAccessibilityTraits to NSAccessibilityRole for macOS
+NS_INLINE NSAccessibilityRole RCTAccessibilityRoleFromTraits(RCTUIAccessibilityTraits traits)
+{
+  if (traits & RCTUIAccessibilityTraitSwitch) {
+    return NSAccessibilityCheckBoxRole;
+  }
+  if (traits & RCTUIAccessibilityTraitButton) {
+    return NSAccessibilityButtonRole;
+  }
+  if (traits & RCTUIAccessibilityTraitLink) {
+    return NSAccessibilityLinkRole;
+  }
+  if (traits & RCTUIAccessibilityTraitImage) {
+    return NSAccessibilityImageRole;
+  }
+  if (traits & RCTUIAccessibilityTraitKeyboardKey) {
+    return NSAccessibilityButtonRole;
+  }
+  if (traits & RCTUIAccessibilityTraitHeader) {
+    return NSAccessibilityStaticTextRole;
+  }
+  if (traits & RCTUIAccessibilityTraitStaticText) {
+    return NSAccessibilityStaticTextRole;
+  }
+  if (traits & RCTUIAccessibilityTraitSummaryElement) {
+    return NSAccessibilityStaticTextRole;
+  }
+  if (traits & RCTUIAccessibilityTraitSearchField) {
+    return NSAccessibilityTextFieldRole;
+  }
+  if (traits & RCTUIAccessibilityTraitAdjustable) {
+    return NSAccessibilitySliderRole;
+  }
+  if (traits & RCTUIAccessibilityTraitUpdatesFrequently) {
+    return NSAccessibilityProgressIndicatorRole;
+  }
+  if (traits & RCTUIAccessibilityTraitTabBar) {
+    return NSAccessibilityTabGroupRole;
+  }
+  return NSAccessibilityUnknownRole;
+}
+
 // UIColor.h/NSColor.h
 #define RCTUIColor NSColor
 
@@ -438,6 +529,11 @@ void UIBezierPathAppendPath(UIBezierPath *path, UIBezierPath *appendPath);
  */
 @property (nonatomic, assign) BOOL enableFocusRing;
 
+/**
+ * iOS compatibility shim. On macOS, this forwards to accessibilityChildren.
+ */
+@property (nonatomic, copy) NSArray *accessibilityElements;
+
 @end
 
 // UIScrollView

packages/react-native/React/Base/macOS/RCTUIKit.m

@@ -333,6 +333,17 @@ - (BOOL)becomeFirstResponder
 
 @synthesize userInteractionEnabled = _userInteractionEnabled;
 
+// iOS compatibility: accessibilityElements forwards to accessibilityChildren on macOS
+- (NSArray *)accessibilityElements
+{
+  return self.accessibilityChildren;
+}
+
+- (void)setAccessibilityElements:(NSArray *)accessibilityElements
+{
+  self.accessibilityChildren = accessibilityElements;
+}
+
 - (NSView *)hitTest:(CGPoint)point withEvent:(__unused UIEvent *)event
 {
 // [macOS

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

@@ -24,6 +24,13 @@ NS_ASSUME_NONNULL_BEGIN
 #endif // macOS]
 
 @property (readonly) RCTViewComponentView *view;
+#if TARGET_OS_OSX // [macOS
+@property (nonatomic, assign) RCTUIAccessibilityTraits accessibilityTraits;
+/**
+ * iOS compatibility shim. On macOS, this forwards to accessibilityElement.
+ */
+@property (nonatomic, assign) BOOL isAccessibilityElement;
+#endif // macOS]
 
 - (instancetype)initWithView:(RCTViewComponentView *)view;
 

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

@@ -8,21 +8,42 @@
 #import "RCTViewAccessibilityElement.h"
 
 @implementation RCTViewAccessibilityElement
+{
+#if TARGET_OS_OSX // [macOS
+  RCTUIAccessibilityTraits _accessibilityTraits;
+#endif // macOS]
+}
 
-#if !TARGET_OS_OSX // [macOS]
 - (instancetype)initWithView:(RCTViewComponentView *)view
 {
+#if !TARGET_OS_OSX // [macOS]
   if (self = [super initWithAccessibilityContainer:view]) {
+#else // [macOS
+  if (self = [super init]) {
+    [self setAccessibilityParent:view];
+    _accessibilityTraits = RCTUIAccessibilityTraitNone;
+#endif // macOS]
     _view = view;
   }
-
   return self;
 }
 
 - (CGRect)accessibilityFrame
 {
+#if !TARGET_OS_OSX // [macOS]
   return UIAccessibilityConvertFrameToScreenCoordinates(_view.bounds, _view);
+#else // [macOS
+  NSRect boundsInWindow = [_view convertRect:_view.bounds toView:nil];
+  return [_view.window convertRectToScreen:boundsInWindow];
+#endif // macOS]
+}
+
+#if TARGET_OS_OSX // [macOS
+- (id)accessibilityParent
+{
+  return _view;
 }
+#endif // macOS]
 
 #pragma mark - Forwarding to _view
 
@@ -36,6 +57,7 @@ - (NSString *)accessibilityValue
   return _view.accessibilityValue;
 }
 
+#if !TARGET_OS_OSX // [macOS]
 - (UIAccessibilityTraits)accessibilityTraits
 {
   return _view.accessibilityTraits;
@@ -80,6 +102,84 @@ - (BOOL)accessibilityRespondsToUserInteraction
 {
   return _view.accessibilityRespondsToUserInteraction;
 }
-#endif // [macOS]
+#else // [macOS
+- (RCTUIAccessibilityTraits)accessibilityTraits
+{
+  return _accessibilityTraits;
+}
+
+- (void)setAccessibilityTraits:(RCTUIAccessibilityTraits)accessibilityTraits
+{
+  if (_accessibilityTraits == accessibilityTraits) {
+    return;
+  }
+  _accessibilityTraits = accessibilityTraits;
+
+  // Map traits to AppKit accessibility role
+  // Order matters - more specific traits should be checked first
+  NSAccessibilityRole role = NSAccessibilityUnknownRole;
+
+  if (accessibilityTraits & RCTUIAccessibilityTraitSwitch) {
+    role = NSAccessibilityCheckBoxRole;
+  } else if (accessibilityTraits & RCTUIAccessibilityTraitButton) {
+    role = NSAccessibilityButtonRole;
+  } else if (accessibilityTraits & RCTUIAccessibilityTraitLink) {
+    role = NSAccessibilityLinkRole;
+  } else if (accessibilityTraits & RCTUIAccessibilityTraitImage) {
+    role = NSAccessibilityImageRole;
+  } else if (accessibilityTraits & RCTUIAccessibilityTraitKeyboardKey) {
+    role = NSAccessibilityButtonRole;
+  } else if (accessibilityTraits & RCTUIAccessibilityTraitHeader) {
+    role = NSAccessibilityStaticTextRole;
+  } else if (accessibilityTraits & RCTUIAccessibilityTraitStaticText) {
+    role = NSAccessibilityStaticTextRole;
+  } else if (accessibilityTraits & RCTUIAccessibilityTraitSummaryElement) {
+    role = NSAccessibilityStaticTextRole;
+  } else if (accessibilityTraits & RCTUIAccessibilityTraitSearchField) {
+    role = NSAccessibilityTextFieldRole;
+  } else if (accessibilityTraits & RCTUIAccessibilityTraitAdjustable) {
+    role = NSAccessibilitySliderRole;
+  } else if (accessibilityTraits & RCTUIAccessibilityTraitUpdatesFrequently) {
+    role = NSAccessibilityProgressIndicatorRole;
+  } else if (accessibilityTraits & RCTUIAccessibilityTraitTabBar) {
+    role = NSAccessibilityTabGroupRole;
+  }
+
+  [self setAccessibilityRole:role];
+
+  // State traits
+  // Selected trait -> accessibilitySelected
+  [self setAccessibilitySelected:(accessibilityTraits & RCTUIAccessibilityTraitSelected) != 0];
+
+  // NotEnabled trait -> accessibilityEnabled (inverted)
+  [self setAccessibilityEnabled:(accessibilityTraits & RCTUIAccessibilityTraitNotEnabled) == 0];
+
+  // Behavior traits that don't need AppKit mapping:
+  // - RCTUIAccessibilityTraitPlaysSound
+  // - RCTUIAccessibilityTraitStartsMediaSession
+  // - RCTUIAccessibilityTraitAllowsDirectInteraction
+  // - RCTUIAccessibilityTraitCausesPageTurn
+}
+
+- (NSString *)accessibilityHelp
+{
+  return _view.accessibilityHelp;
+}
+
+- (BOOL)isAccessibilityElement
+{
+  return _view.isAccessibilityElement;
+}
+
+- (void)setIsAccessibilityElement:(BOOL)isAccessibilityElement
+{
+  self.accessibilityElement = isAccessibilityElement;
+}
+
+- (NSArray *)accessibilityChildren
+{
+  return _view.accessibilityChildren;
+}
+#endif // macOS]
 
 @end

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

@@ -495,11 +495,14 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
 
   // `accessibilityTraits`
   if (oldViewProps.accessibilityTraits != newViewProps.accessibilityTraits) {
+    RCTUIAccessibilityTraits traits = RCTUIAccessibilityTraitsFromAccessibilityTraits(newViewProps.accessibilityTraits);
 #if !TARGET_OS_OSX // [macOS]
-    self.accessibilityElement.accessibilityTraits =
-        RCTUIAccessibilityTraitsFromAccessibilityTraits(newViewProps.accessibilityTraits);
+    self.accessibilityElement.accessibilityTraits = traits;
 #else // [macOS
-    self.accessibilityElement.accessibilityRole = RCTUIAccessibilityRoleFromAccessibilityTraits(newViewProps.accessibilityTraits);
+    // On macOS, accessibilityElement returns self (NSView*) which doesn't have accessibilityTraits.
+    // Set role directly on self based on traits.
+    self.accessibilityRole = RCTAccessibilityRoleFromTraits(traits);
+    self.accessibilityEnabled = (traits & RCTUIAccessibilityTraitNotEnabled) == 0;
 #endif // macOS]
   }
 
@@ -1436,8 +1439,7 @@ - (NSView *)accessibilityElement // macOS]
   return self;
 }
 
-#if !TARGET_OS_OSX // [macOS
-- (NSArray<NSObject *> *)accessibilityElements
+- (NSArray *)accessibilityElements // [macOS]
 {
   if ([_accessibilityOrderNativeIDs count] <= 0) {
     return super.accessibilityElements;
@@ -1450,7 +1452,7 @@ - (NSView *)accessibilityElement // macOS]
     return _accessibilityElements;
   }
 
-  NSMutableDictionary<NSString *, UIView *> *nativeIdToView = [NSMutableDictionary new];
+  NSMutableDictionary<NSString *, RCTPlatformView *> *nativeIdToView = [NSMutableDictionary new]; // [macOS]
 
   [RCTViewComponentView collectAccessibilityElements:self
                                       intoDictionary:nativeIdToView
@@ -1466,7 +1468,7 @@ - (NSView *)accessibilityElement // macOS]
       _axElementDescribingSelf.isAccessibilityElement = [super isAccessibilityElement];
       [_accessibilityElements addObject:_axElementDescribingSelf];
     } else {
-      UIView *viewWithMatchingNativeId = [nativeIdToView objectForKey:nsStringChildId];
+      RCTPlatformView *viewWithMatchingNativeId = [nativeIdToView objectForKey:nsStringChildId]; // [macOS]
       if (viewWithMatchingNativeId) {
         [_accessibilityElements addObject:viewWithMatchingNativeId];
       }
@@ -1475,7 +1477,6 @@ - (NSView *)accessibilityElement // macOS]
 
   return _accessibilityElements;
 }
-#endif // macOS]
 
 + (void)collectAccessibilityElements:(RCTPlatformView *)view // [macOS]
                       intoDictionary:(NSMutableDictionary<NSString *, RCTPlatformView *> *)dict // [macOS]