Native ARIA Roles: Shared code (#37305)

Summary:
Pull Request resolved: #37305

### Stack

ARIA roles in React Native are implemented on top of `accessibilityRole`. This is lossy because there are many more ARIA roles than `accessibilityRole`. This is especially true for RN on desktop where `accessibilityRole` was designed around accessibility APIs only available on mobile.

This series of changes aims to change this implementation to instead pass the ARIA role to native, alongside any existing `accessibilityRole`. This gives the platform more control in exactly how to map an ARIA role to native behavior.

As an example, this would allow mapping any ARIA role to [`AutomationControlType`](https://learn.microsoft.com/en-us/dotnet/api/system.windows.automation.peers.automationcontroltype?view=windowsdesktop-7.0&viewFallbackFrom=dotnet-uwp-10.0) on Windows without needing to fork to add new options to `accessibilityRole`.

It also allows greater implementation flexibility for other platforms down the line, but for now, iOS and Android behave the same as before (though with their implementation living in native).

### Diff

This syncs the Fabric representations of Roles to the current state of the world in JS, and adds usage to the view configs.
1. `Role` enum for the View `role` prop (ARIA role)
2. Sync enums and conversions to JS `AccessibilityRole`
    1. This parsing is done for `TextAttributes` only. `View` uses the string directly
    2. Add ARIA roles, and parse those to their enum form.
    3. Move enums from attributedstring primitves to accessibility primitives
3. Add to viewconfig to allow it to be passed

Changelog: [Internal]

Reviewed By: sammy-SC

Differential Revision: D45431372

fbshipit-source-id: 0150538345bbb6cb4d9426c4eebd0f67c2a33f3d

Author: NickGerleman

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

@@ -35,6 +35,7 @@ const UIView = {
   collapsable: true,
   needsOffscreenAlphaCompositing: true,
   style: ReactNativeStyleAttributes,
+  role: true,
 };
 
 const RCTView = {

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

@@ -179,6 +179,7 @@ const validAttributesForNonEventProps = {
   accessibilityActions: true,
   accessibilityValue: true,
   importantForAccessibility: true,
+  role: true,
   rotation: true,
   scaleX: true,
   scaleY: true,

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

@@ -198,6 +198,7 @@ const validAttributesForNonEventProps = {
   nativeID: true,
   pointerEvents: true,
   removeClippedSubviews: true,
+  role: true,
   borderRadius: true,
   borderColor: {process: require('../StyleSheet/processColor').default},
   borderCurve: true,

packages/react-native/ReactCommon/react/renderer/attributedstring/CMakeLists.txt

@@ -26,6 +26,7 @@ target_link_libraries(react_render_attributedstring
         glog
         glog_init
         react_debug
+        rrc_view
         react_render_core
         react_render_debug
         react_render_graphics

packages/react-native/ReactCommon/react/renderer/attributedstring/TextAttributes.cpp

@@ -101,6 +101,7 @@ void TextAttributes::apply(TextAttributes textAttributes) {
   accessibilityRole = textAttributes.accessibilityRole.has_value()
       ? textAttributes.accessibilityRole
       : accessibilityRole;
+  role = textAttributes.role.has_value() ? textAttributes.role : role;
 }
 
 #pragma mark - Operators
@@ -126,6 +127,7 @@ bool TextAttributes::operator==(const TextAttributes &rhs) const {
              isHighlighted,
              layoutDirection,
              accessibilityRole,
+             role,
              textTransform) ==
       std::tie(
              rhs.foregroundColor,
@@ -147,6 +149,7 @@ bool TextAttributes::operator==(const TextAttributes &rhs) const {
              rhs.isHighlighted,
              rhs.layoutDirection,
              rhs.accessibilityRole,
+             rhs.role,
              rhs.textTransform) &&
       floatEquality(opacity, rhs.opacity) &&
       floatEquality(fontSize, rhs.fontSize) &&
@@ -215,6 +218,7 @@ SharedDebugStringConvertibleList TextAttributes::getDebugProps() const {
       debugStringConvertibleItem("isHighlighted", isHighlighted),
       debugStringConvertibleItem("layoutDirection", layoutDirection),
       debugStringConvertibleItem("accessibilityRole", accessibilityRole),
+      debugStringConvertibleItem("role", role),
   };
 }
 #endif

packages/react-native/ReactCommon/react/renderer/attributedstring/TextAttributes.h

@@ -13,6 +13,7 @@
 
 #include <folly/Hash.h>
 #include <react/renderer/attributedstring/primitives.h>
+#include <react/renderer/components/view/AccessibilityPrimitives.h>
 #include <react/renderer/core/LayoutPrimitives.h>
 #include <react/renderer/core/ReactPrimitives.h>
 #include <react/renderer/debug/DebugStringConvertible.h>
@@ -80,6 +81,7 @@ class TextAttributes : public DebugStringConvertible {
   // construction.
   std::optional<LayoutDirection> layoutDirection{};
   std::optional<AccessibilityRole> accessibilityRole{};
+  std::optional<Role> role{};
 
 #pragma mark - Operations
 
@@ -131,7 +133,8 @@ struct hash<facebook::react::TextAttributes> {
         textAttributes.textShadowColor,
         textAttributes.isHighlighted,
         textAttributes.layoutDirection,
-        textAttributes.accessibilityRole);
+        textAttributes.accessibilityRole,
+        textAttributes.role);
   }
 };
 } // namespace std

packages/react-native/ReactCommon/react/renderer/attributedstring/conversions.h

@@ -15,6 +15,7 @@
 #include <react/renderer/attributedstring/TextAttributes.h>
 #include <react/renderer/attributedstring/conversions.h>
 #include <react/renderer/attributedstring/primitives.h>
+#include <react/renderer/components/view/accessibilityPropsConversions.h>
 #include <react/renderer/core/LayoutableShadowNode.h>
 #include <react/renderer/core/PropsParserContext.h>
 #include <react/renderer/core/ShadowNode.h>
@@ -641,150 +642,6 @@ inline std::string toString(const TextDecorationStyle &textDecorationStyle) {
   return "solid";
 }
 
-inline std::string toString(const AccessibilityRole &accessibilityRole) {
-  switch (accessibilityRole) {
-    case AccessibilityRole::None:
-      return "none";
-    case AccessibilityRole::Button:
-      return "button";
-    case AccessibilityRole::Link:
-      return "link";
-    case AccessibilityRole::Search:
-      return "search";
-    case AccessibilityRole::Image:
-      return "image";
-    case AccessibilityRole::Imagebutton:
-      return "imagebutton";
-    case AccessibilityRole::Keyboardkey:
-      return "keyboardkey";
-    case AccessibilityRole::Text:
-      return "text";
-    case AccessibilityRole::Adjustable:
-      return "adjustable";
-    case AccessibilityRole::Summary:
-      return "summary";
-    case AccessibilityRole::Header:
-      return "header";
-    case AccessibilityRole::Alert:
-      return "alert";
-    case AccessibilityRole::Checkbox:
-      return "checkbox";
-    case AccessibilityRole::Combobox:
-      return "combobox";
-    case AccessibilityRole::Menu:
-      return "menu";
-    case AccessibilityRole::Menubar:
-      return "menubar";
-    case AccessibilityRole::Menuitem:
-      return "menuitem";
-    case AccessibilityRole::Progressbar:
-      return "progressbar";
-    case AccessibilityRole::Radio:
-      return "radio";
-    case AccessibilityRole::Radiogroup:
-      return "radiogroup";
-    case AccessibilityRole::Scrollbar:
-      return "scrollbar";
-    case AccessibilityRole::Spinbutton:
-      return "spinbutton";
-    case AccessibilityRole::Switch:
-      return "switch";
-    case AccessibilityRole::Tab:
-      return "tab";
-    case AccessibilityRole::TabBar:
-      return "tabbar";
-    case AccessibilityRole::Tablist:
-      return "tablist";
-    case AccessibilityRole::Timer:
-      return "timer";
-    case AccessibilityRole::Toolbar:
-      return "toolbar";
-  }
-
-  LOG(ERROR) << "Unsupported AccessibilityRole value";
-  react_native_expect(false);
-  // sane default for prod
-  return "none";
-}
-
-inline void fromRawValue(
-    const PropsParserContext &context,
-    const RawValue &value,
-    AccessibilityRole &result) {
-  react_native_expect(value.hasType<std::string>());
-  if (value.hasType<std::string>()) {
-    auto string = (std::string)value;
-    if (string == "none") {
-      result = AccessibilityRole::None;
-    } else if (string == "button" || string == "togglebutton") {
-      result = AccessibilityRole::Button;
-    } else if (string == "link") {
-      result = AccessibilityRole::Link;
-    } else if (string == "search") {
-      result = AccessibilityRole::Search;
-    } else if (string == "image") {
-      result = AccessibilityRole::Image;
-    } else if (string == "imagebutton") {
-      result = AccessibilityRole::Imagebutton;
-    } else if (string == "keyboardkey") {
-      result = AccessibilityRole::Keyboardkey;
-    } else if (string == "text") {
-      result = AccessibilityRole::Text;
-    } else if (string == "adjustable") {
-      result = AccessibilityRole::Adjustable;
-    } else if (string == "summary") {
-      result = AccessibilityRole::Summary;
-    } else if (string == "header") {
-      result = AccessibilityRole::Header;
-    } else if (string == "alert") {
-      result = AccessibilityRole::Alert;
-    } else if (string == "checkbox") {
-      result = AccessibilityRole::Checkbox;
-    } else if (string == "combobox") {
-      result = AccessibilityRole::Combobox;
-    } else if (string == "menu") {
-      result = AccessibilityRole::Menu;
-    } else if (string == "menubar") {
-      result = AccessibilityRole::Menubar;
-    } else if (string == "menuitem") {
-      result = AccessibilityRole::Menuitem;
-    } else if (string == "progressbar") {
-      result = AccessibilityRole::Progressbar;
-    } else if (string == "radio") {
-      result = AccessibilityRole::Radio;
-    } else if (string == "radiogroup") {
-      result = AccessibilityRole::Radiogroup;
-    } else if (string == "scrollbar") {
-      result = AccessibilityRole::Scrollbar;
-    } else if (string == "spinbutton") {
-      result = AccessibilityRole::Spinbutton;
-    } else if (string == "switch") {
-      result = AccessibilityRole::Switch;
-    } else if (string == "tab") {
-      result = AccessibilityRole::Tab;
-    } else if (string == "tabbar") {
-      result = AccessibilityRole::TabBar;
-    } else if (string == "tablist") {
-      result = AccessibilityRole::Tablist;
-    } else if (string == "timer") {
-      result = AccessibilityRole::Timer;
-    } else if (string == "toolbar") {
-      result = AccessibilityRole::Toolbar;
-    } else {
-      LOG(ERROR) << "Unsupported AccessibilityRole value: " << string;
-      react_native_expect(false);
-      // sane default for prod
-      result = AccessibilityRole::None;
-    }
-    return;
-  }
-
-  LOG(ERROR) << "Unsupported AccessibilityRole type";
-  react_native_expect(false);
-  // sane default for prod
-  result = AccessibilityRole::None;
-}
-
 inline std::string toString(const HyphenationFrequency &hyphenationFrequency) {
   switch (hyphenationFrequency) {
     case HyphenationFrequency::None:

packages/react-native/ReactCommon/react/renderer/attributedstring/primitives.h

@@ -105,37 +105,6 @@ enum class TextDecorationLineType {
 
 enum class TextDecorationStyle { Solid, Double, Dotted, Dashed };
 
-enum class AccessibilityRole {
-  None,
-  Button,
-  Link,
-  Search,
-  Image,
-  Imagebutton,
-  Keyboardkey,
-  Text,
-  Adjustable,
-  Summary,
-  Header,
-  Alert,
-  Checkbox,
-  Combobox,
-  Menu,
-  Menubar,
-  Menuitem,
-  Progressbar,
-  Radio,
-  Radiogroup,
-  Scrollbar,
-  Spinbutton,
-  Switch,
-  Tab,
-  TabBar,
-  Tablist,
-  Timer,
-  Toolbar,
-};
-
 enum class TextTransform {
   None,
   Uppercase,
@@ -223,13 +192,6 @@ struct hash<facebook::react::TextBreakStrategy> {
   }
 };
 
-template <>
-struct hash<facebook::react::AccessibilityRole> {
-  size_t operator()(const facebook::react::AccessibilityRole &v) const {
-    return hash<int>()(static_cast<int>(v));
-  }
-};
-
 template <>
 struct hash<facebook::react::TextTransform> {
   size_t operator()(const facebook::react::TextTransform &v) const {

packages/react-native/ReactCommon/react/renderer/components/text/BaseTextProps.cpp

@@ -183,6 +183,13 @@ static TextAttributes convertRawProp(
       sourceTextAttributes.accessibilityRole,
       defaultTextAttributes.accessibilityRole);
 
+  textAttributes.role = convertRawProp(
+      context,
+      rawProps,
+      "role",
+      sourceTextAttributes.role,
+      defaultTextAttributes.role);
+
   // Color (accessed in this order by ViewProps)
   textAttributes.opacity = convertRawProp(
       context,
@@ -293,6 +300,7 @@ void BaseTextProps::setProp(
         textAttributes,
         accessibilityRole,
         "accessibilityRole");
+    REBUILD_FIELD_SWITCH_CASE(defaults, value, textAttributes, role, "role");
     REBUILD_FIELD_SWITCH_CASE(
         defaults, value, textAttributes, opacity, "opacity");
     REBUILD_FIELD_SWITCH_CASE(