fix(fabric, a11y): implement accessibility role

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

@@ -56,7 +56,7 @@ NS_ASSUME_NONNULL_BEGIN
  * transparent in favour of some subview.
  * Defaults to `self`.
  */
-@property (nonatomic, strong, nullable, readonly) NSObject *accessibilityElement;
+@property (nonatomic, strong, nullable, readonly) RCTPlatformView *accessibilityElement; // [macOS]
 
 /**
  * Insets used when hit testing inside this view.

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

@@ -17,6 +17,7 @@
 #import <React/RCTConversions.h>
 #import <React/RCTCursor.h> // [macOS]
 #import <React/RCTLocalizedString.h>
+#import <React/UIView+React.h> // [macOS]
 #import <react/featureflags/ReactNativeFeatureFlags.h>
 #import <react/renderer/components/view/ViewComponentDescriptor.h>
 #import <react/renderer/components/view/ViewEventEmitter.h>
@@ -373,10 +374,13 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
     self.nativeId = RCTNSStringFromStringNilIfEmpty(newViewProps.nativeId);
   }
 
-#if !TARGET_OS_OSX // [macOS]
   // `accessible`
   if (oldViewProps.accessible != newViewProps.accessible) {
+#if !TARGET_OS_OSX // [macOS]
     self.accessibilityElement.isAccessibilityElement = newViewProps.accessible;
+#else // [macOS
+    self.accessibilityElement.accessibilityElement = newViewProps.accessible;
+#endif // macOS]
   }
 
   // `accessibilityLabel`
@@ -392,9 +396,14 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
 
   // `accessibilityHint`
   if (oldViewProps.accessibilityHint != newViewProps.accessibilityHint) {
+#if !TARGET_OS_OSX // [macOS]
     self.accessibilityElement.accessibilityHint = RCTNSStringFromStringNilIfEmpty(newViewProps.accessibilityHint);
+#else // [macOS
+    self.accessibilityElement.accessibilityHelp = RCTNSStringFromStringNilIfEmpty(newViewProps.accessibilityHint);
+#endif // macOS]
   }
 
+#if !TARGET_OS_OSX // [macOS]
   // `accessibilityViewIsModal`
   if (oldViewProps.accessibilityViewIsModal != newViewProps.accessibilityViewIsModal) {
     self.accessibilityElement.accessibilityViewIsModal = newViewProps.accessibilityViewIsModal;
@@ -404,6 +413,7 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
   if (oldViewProps.accessibilityElementsHidden != newViewProps.accessibilityElementsHidden) {
     self.accessibilityElement.accessibilityElementsHidden = newViewProps.accessibilityElementsHidden;
   }
+#endif // [macOS]
 
   // `accessibilityShowsLargeContentViewer`
   if (oldViewProps.accessibilityShowsLargeContentViewer != newViewProps.accessibilityShowsLargeContentViewer) {
@@ -427,10 +437,15 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
 
   // `accessibilityTraits`
   if (oldViewProps.accessibilityTraits != newViewProps.accessibilityTraits) {
+#if !TARGET_OS_OSX // [macOS]
     self.accessibilityElement.accessibilityTraits =
         RCTUIAccessibilityTraitsFromAccessibilityTraits(newViewProps.accessibilityTraits);
+#else // [macOS
+    self.accessibilityElement.accessibilityRole = RCTUIAccessibilityRoleFromAccessibilityTraits(newViewProps.accessibilityTraits);
+#endif // macOS]
   }
 
+#if !TARGET_OS_OSX // [macOS]
   // `accessibilityState`
   if (oldViewProps.accessibilityState != newViewProps.accessibilityState) {
     self.accessibilityTraits &= ~(UIAccessibilityTraitNotEnabled | UIAccessibilityTraitSelected);
@@ -447,6 +462,7 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
   if (oldViewProps.accessibilityIgnoresInvertColors != newViewProps.accessibilityIgnoresInvertColors) {
     self.accessibilityIgnoresInvertColors = newViewProps.accessibilityIgnoresInvertColors;
   }
+#endif // [macOS]
 
   // `accessibilityValue`
   if (oldViewProps.accessibilityValue != newViewProps.accessibilityValue) {
@@ -465,8 +481,7 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
       self.accessibilityElement.accessibilityValue = nil;
     }
   }
-#endif // [macOS]
-
+
   // `testId`
   if (oldViewProps.testId != newViewProps.testId) {
     SEL setAccessibilityIdentifierSelector = @selector(setAccessibilityIdentifier:);
@@ -1236,7 +1251,7 @@ - (void)clearExistingGradientLayers
 
 #pragma mark - Accessibility
 
-- (NSObject *)accessibilityElement
+- (RCTPlatformView *)accessibilityElement
 {
   return self;
 }

packages/react-native/React/Fabric/RCTConversions.h

@@ -124,7 +124,99 @@ inline UIAccessibilityTraits RCTUIAccessibilityTraitsFromAccessibilityTraits(
   }
   return result;
 };
-#endif // [macOS]
+#else // [macOS
+inline NSAccessibilityRole RCTUIAccessibilityRoleFromAccessibilityTraits(
+    facebook::react::AccessibilityTraits accessibilityTraits)
+{
+  using AccessibilityTraits = facebook::react::AccessibilityTraits;
+  if ((accessibilityTraits & AccessibilityTraits::Button) != AccessibilityTraits::None) {
+    if ((accessibilityTraits & AccessibilityTraits::Bar) != AccessibilityTraits::None) {
+      return NSAccessibilityToolbarRole;
+    }
+    if ((accessibilityTraits & AccessibilityTraits::PopUp) != AccessibilityTraits::None) {
+      return NSAccessibilityPopUpButtonRole;
+    }
+    if ((accessibilityTraits & AccessibilityTraits::Menu) != AccessibilityTraits::None) {
+      return NSAccessibilityMenuButtonRole;
+    }
+    return NSAccessibilityButtonRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::Link) != AccessibilityTraits::None) {
+    return NSAccessibilityLinkRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::Image) != AccessibilityTraits::None) {
+    return NSAccessibilityImageRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::KeyboardKey) != AccessibilityTraits::None) {
+    return NSAccessibilityButtonRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::StaticText) != AccessibilityTraits::None) {
+    return NSAccessibilityStaticTextRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::SummaryElement) != AccessibilityTraits::None) {
+    return NSAccessibilityStaticTextRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::SearchField) != AccessibilityTraits::None) {
+    return NSAccessibilityTextFieldRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::Adjustable) != AccessibilityTraits::None) {
+    return NSAccessibilitySliderRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::Header) != AccessibilityTraits::None) {
+    return NSAccessibilityStaticTextRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::Switch) != AccessibilityTraits::None) {
+    return NSAccessibilityCheckBoxRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::UpdatesFrequently) != AccessibilityTraits::None) {
+    return NSAccessibilityProgressIndicatorRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::ComboBox) != AccessibilityTraits::None) {
+    return NSAccessibilityComboBoxRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::Menu) != AccessibilityTraits::None) {
+    if ((accessibilityTraits & AccessibilityTraits::Bar) != AccessibilityTraits::None) {
+      return NSAccessibilityMenuBarRole;
+    }
+    if ((accessibilityTraits & AccessibilityTraits::Item) != AccessibilityTraits::None) {
+      return NSAccessibilityMenuItemRole;
+    }
+    return NSAccessibilityMenuRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::Radio) != AccessibilityTraits::None) {
+    if ((accessibilityTraits & AccessibilityTraits::Group) != AccessibilityTraits::None) {
+      return NSAccessibilityRadioGroupRole;
+    }
+    return NSAccessibilityRadioButtonRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::ScrollBar) != AccessibilityTraits::None) {
+    return NSAccessibilityScrollBarRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::SpinButton) != AccessibilityTraits::None) {
+    return NSAccessibilityIncrementorRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::Tab) != AccessibilityTraits::None) {
+    if ((accessibilityTraits & AccessibilityTraits::List) != AccessibilityTraits::None) {
+      return NSAccessibilityTabGroupRole;
+    }
+    return NSAccessibilityButtonRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::Disclosure) != AccessibilityTraits::None) {
+    return NSAccessibilityDisclosureTriangleRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::Group) != AccessibilityTraits::None) {
+    return NSAccessibilityGroupRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::List) != AccessibilityTraits::None) {
+    return NSAccessibilityListRole;
+  }
+  if ((accessibilityTraits & AccessibilityTraits::Table) != AccessibilityTraits::None) {
+    return NSAccessibilityTableRole;
+  }
+
+  return NSAccessibilityUnknownRole;
+};
+#endif // macOS]
 
 inline CATransform3D RCTCATransform3DFromTransformMatrix(const facebook::react::Transform &transformMatrix)
 {

packages/react-native/ReactCommon/react/renderer/components/view/AccessibilityPrimitives.h

@@ -34,6 +34,21 @@ enum class AccessibilityTraits : uint32_t {
   Header = (1 << 15),
   Switch = (1 << 16),
   TabBar = (1 << 17),
+// [macOS
+  ComboBox = (1 << 18),
+  Menu = (1 << 19),
+  PopUp = (1 << 20),
+  Bar = (1 << 21),
+  Item = (1 << 22),
+  Group = (1 << 23),
+  List = (1 << 24),
+  Tab = (1 << 25),
+  Table = (1 << 26),
+  Disclosure = (1 << 27),
+  Radio = (1 << 28),
+  ScrollBar = (1 << 29),
+  SpinButton = (1 << 30),
+// macOS]
 };
 
 constexpr enum AccessibilityTraits operator|(