[Fabric] Add Support for Role Prop (#14352)

chiaramooney · TatianaKapos · web-flow · commit 74a161e31efb · 2025-03-11T10:22:36.000-07:00
* Add Support for Role Prop

* Change files

* Format

* Update Tests

---------

Co-authored-by: Tatiana Kapos &lt;tatianakapos@microsoft.com&gt;
diff --git a/change/react-native-windows-56f137a7-212a-483c-9771-7bf7c0fad2a8.json b/change/react-native-windows-56f137a7-212a-483c-9771-7bf7c0fad2a8.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add Support for Role Prop",
+  "packageName": "react-native-windows",
+  "email": "34109996+chiaramooney@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/@react-native-windows/tester/src/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx b/packages/@react-native-windows/tester/src/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx
@@ -475,7 +475,7 @@ class AccessibilityStateExamples extends React.Component {
           accessibilityValue={{
             text: this.state.viewValueText,
           }}
-          accessibilityRole="combobox"
+          role="combobox"
           testID="accessibilityValue-text"
           accessible
           aria-readonly>
diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap
@@ -751,14 +751,14 @@ exports[`snapshotAllPages Accessibility Windows 4`] = `
     The following View exposes the accessibilityValue.Text field
   </Text>
   <View
-    accessibilityRole="combobox"
     accessibilityValue={
       {
         "text": "testText",
       }
     }
     accessible={true}
     aria-readonly={true}
+    role="combobox"
     style={
       {
         "backgroundColor": "gray",
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionDynamicAutomationProvider.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionDynamicAutomationProvider.cpp
@@ -283,7 +283,7 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetPatternProvider(PATTE
   return S_OK;
 }
 
-long GetControlType(const std::string &role) noexcept {
+long GetControlTypeFromString(const std::string &role) noexcept {
   if (role == "adjustable") {
     return UIA_SliderControlTypeId;
   } else if (role == "group" || role == "search" || role == "radiogroup" || role == "timer" || role.empty()) {
@@ -346,6 +346,96 @@ long GetControlType(const std::string &role) noexcept {
   return UIA_GroupControlTypeId;
 }
 
+long GetControlTypeFromRole(const facebook::react::Role &role) noexcept {
+  switch (role) {
+    case facebook::react::Role::Alert:
+      return UIA_TextControlTypeId;
+    case facebook::react::Role::Application:
+      return UIA_WindowControlTypeId;
+    case facebook::react::Role::Button:
+      return UIA_ButtonControlTypeId;
+    case facebook::react::Role::Checkbox:
+      return UIA_CheckBoxControlTypeId;
+    case facebook::react::Role::Columnheader:
+      return UIA_HeaderControlTypeId;
+    case facebook::react::Role::Combobox:
+      return UIA_ComboBoxControlTypeId;
+    case facebook::react::Role::Document:
+      return UIA_DocumentControlTypeId;
+    case facebook::react::Role::Grid:
+      return UIA_GroupControlTypeId;
+    case facebook::react::Role::Group:
+      return UIA_GroupControlTypeId;
+    case facebook::react::Role::Heading:
+      return UIA_TextControlTypeId;
+    case facebook::react::Role::Img:
+      return UIA_ImageControlTypeId;
+    case facebook::react::Role::Link:
+      return UIA_HyperlinkControlTypeId;
+    case facebook::react::Role::List:
+      return UIA_ListControlTypeId;
+    case facebook::react::Role::Listitem:
+      return UIA_ListItemControlTypeId;
+    case facebook::react::Role::Menu:
+      return UIA_MenuControlTypeId;
+    case facebook::react::Role::Menubar:
+      return UIA_MenuBarControlTypeId;
+    case facebook::react::Role::Menuitem:
+      return UIA_MenuItemControlTypeId;
+    case facebook::react::Role::None:
+      return UIA_GroupControlTypeId;
+    case facebook::react::Role::Presentation:
+      return UIA_GroupControlTypeId;
+    case facebook::react::Role::Progressbar:
+      return UIA_ProgressBarControlTypeId;
+    case facebook::react::Role::Radio:
+      return UIA_RadioButtonControlTypeId;
+    case facebook::react::Role::Radiogroup:
+      return UIA_GroupControlTypeId;
+    case facebook::react::Role::Rowgroup:
+      return UIA_GroupControlTypeId;
+    case facebook::react::Role::Rowheader:
+      return UIA_HeaderControlTypeId;
+    case facebook::react::Role::Scrollbar:
+      return UIA_ScrollBarControlTypeId;
+    case facebook::react::Role::Searchbox:
+      return UIA_EditControlTypeId;
+    case facebook::react::Role::Separator:
+      return UIA_SeparatorControlTypeId;
+    case facebook::react::Role::Slider:
+      return UIA_SliderControlTypeId;
+    case facebook::react::Role::Spinbutton:
+      return UIA_SpinnerControlTypeId;
+    case facebook::react::Role::Status:
+      return UIA_StatusBarControlTypeId;
+    case facebook::react::Role::Summary:
+      return UIA_GroupControlTypeId;
+    case facebook::react::Role::Switch:
+      return UIA_ButtonControlTypeId;
+    case facebook::react::Role::Tab:
+      return UIA_TabItemControlTypeId;
+    case facebook::react::Role::Table:
+      return UIA_TableControlTypeId;
+    case facebook::react::Role::Tablist:
+      return UIA_TabControlTypeId;
+    case facebook::react::Role::Tabpanel:
+      return UIA_TabControlTypeId;
+    case facebook::react::Role::Timer:
+      return UIA_ButtonControlTypeId;
+    case facebook::react::Role::Toolbar:
+      return UIA_ToolBarControlTypeId;
+    case facebook::react::Role::Tooltip:
+      return UIA_ToolTipControlTypeId;
+    case facebook::react::Role::Tree:
+      return UIA_TreeControlTypeId;
+    case facebook::react::Role::Treegrid:
+      return UIA_TreeControlTypeId;
+    case facebook::react::Role::Treeitem:
+      return UIA_TreeItemControlTypeId;
+  }
+  return UIA_GroupControlTypeId;
+}
+
 HRESULT __stdcall CompositionDynamicAutomationProvider::GetPropertyValue(PROPERTYID propertyId, VARIANT *pRetVal) {
   if (pRetVal == nullptr)
     return E_POINTER;
@@ -371,8 +461,10 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetPropertyValue(PROPERT
   switch (propertyId) {
     case UIA_ControlTypePropertyId: {
       pRetVal->vt = VT_I4;
-      auto role = props->accessibilityRole.empty() ? compositionView->DefaultControlType() : props->accessibilityRole;
-      pRetVal->lVal = GetControlType(role);
+      pRetVal->lVal = props->role == facebook::react::Role::None ? props->accessibilityRole.empty()
+              ? GetControlTypeFromString(compositionView->DefaultControlType())
+              : GetControlTypeFromString(props->accessibilityRole)
+                                                                 : GetControlTypeFromRole(props->role);
       break;
     }
     case UIA_AutomationIdPropertyId: {
@@ -412,12 +504,18 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetPropertyValue(PROPERT
     }
     case UIA_IsContentElementPropertyId: {
       pRetVal->vt = VT_BOOL;
-      pRetVal->boolVal = (props->accessible && props->accessibilityRole != "none") ? VARIANT_TRUE : VARIANT_FALSE;
+      pRetVal->boolVal =
+          (props->accessible && (props->accessibilityRole != "none" || props->role != facebook::react::Role::None))
+          ? VARIANT_TRUE
+          : VARIANT_FALSE;
       break;
     }
     case UIA_IsControlElementPropertyId: {
       pRetVal->vt = VT_BOOL;
-      pRetVal->boolVal = (props->accessible && props->accessibilityRole != "none") ? VARIANT_TRUE : VARIANT_FALSE;
+      pRetVal->boolVal =
+          (props->accessible && (props->accessibilityRole != "none" || props->role != facebook::react::Role::None))
+          ? VARIANT_TRUE
+          : VARIANT_FALSE;
       break;
     }
     case UIA_IsOffscreenPropertyId: {
@@ -564,7 +662,6 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::get_IsReadOnly(BOOL *pRe
       winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->props());
   if (props == nullptr)
     return UIA_E_ELEMENTNOTAVAILABLE;
-  auto accessibilityRole = props->accessibilityRole;
   if (props->accessibilityState.has_value() && props->accessibilityState->readOnly.has_value()) {
     *pRetVal = props->accessibilityState->readOnly.value();
   } else {

Original file line number	Diff line number	Diff line change
@@ -751,14 +751,14 @@ exports[`snapshotAllPages Accessibility Windows 4`] = `
`751`	`751`	`The following View exposes the accessibilityValue.Text field`
`752`	`752`	`</Text>`
`753`	`753`	`<View`
`754`		`- accessibilityRole="combobox"`
`755`	`754`	`accessibilityValue={`
`756`	`755`	`{`
`757`	`756`	`"text": "testText",`
`758`	`757`	`}`
`759`	`758`	`}`
`760`	`759`	`accessible={true}`
`761`	`760`	`aria-readonly={true}`
	`761`	`+ role="combobox"`
`762`	`762`	`style={`
`763`	`763`	`{`
`764`	`764`	`"backgroundColor": "gray",`