Update ControlType values to match corresponding accessibilityRole values

change/react-native-windows-5797e623-a2b1-4fee-8558-d92058803600.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update controltype with accessibilityRole",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Views/FrameworkElementViewManager.cpp

@@ -25,6 +25,7 @@
 #include "DynamicAutomationProperties.h"
 
 #include <Views/ViewPanel.h>
+#include "FrameworkElementViewManager.h"
 #include "Unicode.h"
 #include "cdebug.h"
 
@@ -422,13 +423,24 @@ bool FrameworkElementViewManager::UpdateProperty(
         else if (role == "toolbar")
           DynamicAutomationProperties::SetAccessibilityRole(
               element, winrt::Microsoft::ReactNative::AccessibilityRoles::ToolBar);
-        else if (role == "list")
+        else if (role == "list") {
           DynamicAutomationProperties::SetAccessibilityRole(
               element, winrt::Microsoft::ReactNative::AccessibilityRoles::List);
-        else if (role == "listitem")
+          if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::String) {
+            winrt::hstring controlType = FrameworkElementViewManager::getControlTypeFromAccessibilityRole(
+                winrt::Microsoft::ReactNative::AccessibilityRoles::List);
+            FrameworkElementViewManager::setLocalizedControlTypeFromAccessibilityRole(element, controlType);
+          }
+        } else if (role == "listitem") {
           DynamicAutomationProperties::SetAccessibilityRole(
               element, winrt::Microsoft::ReactNative::AccessibilityRoles::ListItem);
-        else
+          if (propertyValue.Type() ==
+              winrt::Microsoft::ReactNative::JSValueType::String) { // Set localized control type
+            winrt::hstring controlType = FrameworkElementViewManager::getControlTypeFromAccessibilityRole(
+                winrt::Microsoft::ReactNative::AccessibilityRoles::ListItem);
+            FrameworkElementViewManager::setLocalizedControlTypeFromAccessibilityRole(element, controlType);
+          }
+        } else
           DynamicAutomationProperties::SetAccessibilityRole(
               element, winrt::Microsoft::ReactNative::AccessibilityRoles::Unknown);
       } else if (propertyValue.IsNull()) {
@@ -823,6 +835,71 @@ bool FrameworkElementViewManager::UpdateProperty(
   return true;
 }
 
+winrt::hstring FrameworkElementViewManager::getControlTypeFromAccessibilityRole(
+    winrt::Microsoft::ReactNative::AccessibilityRoles role) {
+  switch (role) {
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::Button:
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::ImageButton:
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::Switch:
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::ToggleButton:
+      return winrt::to_hstring("button");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::Link:
+      return winrt::to_hstring("link");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::Image:
+      return winrt::to_hstring("image");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::KeyboardKey:
+      return winrt::to_hstring("custom");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::Text:
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::Header:
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::Summary:
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::Alert:
+      return winrt::to_hstring("text");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::Adjustable:
+      return winrt::to_hstring("slider");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::CheckBox:
+      return winrt::to_hstring("checkbox");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::ComboBox:
+      return winrt::to_hstring("combobox");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::Menu:
+      return winrt::to_hstring("menu");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::MenuBar:
+      return winrt::to_hstring("menubar");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::MenuItem:
+      return winrt::to_hstring("menuitem");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::ProgressBar:
+      return winrt::to_hstring("progressbar");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::Radio:
+      return winrt::to_hstring("radiobutton");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::ScrollBar:
+      return winrt::to_hstring("scrollbar");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::SpinButton:
+      return winrt::to_hstring("spinner");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::Tab:
+      return winrt::to_hstring("tabitem");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::TabList:
+      return winrt::to_hstring("tab");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::ToolBar:
+      return winrt::to_hstring("toolbar");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::List:
+      return winrt::to_hstring("list");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::ListItem:
+      return winrt::to_hstring("listitem");
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::None:
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::Search:
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::RadioGroup:
+    case winrt::Microsoft::ReactNative::AccessibilityRoles::Timer:
+      return winrt::to_hstring("group");
+  }
+  return winrt::to_hstring("custom");
+}
+
+void FrameworkElementViewManager::setLocalizedControlTypeFromAccessibilityRole(
+    xaml::UIElement element,
+    winrt::hstring value) {
+  auto controlTypeBoxedValue = winrt::Windows::Foundation::PropertyValue::CreateString(value);
+  element.SetValue(xaml::Automation::AutomationProperties::LocalizedControlTypeProperty(), controlTypeBoxedValue);
+}
+
 // Applies a TransformMatrix to the backing UIElement.
 // In react-native, rotates and scales are applied about the center of the
 // component, unlike XAML. Since the javascript layer sends a non-centered

vnext/Microsoft.ReactNative/Views/FrameworkElementViewManager.h

@@ -13,6 +13,10 @@ class REACTWINDOWS_EXPORT FrameworkElementViewManager : public ViewManagerBase {
  public:
   FrameworkElementViewManager(const Mso::React::IReactContext &context);
 
+  static winrt::hstring getControlTypeFromAccessibilityRole(winrt::Microsoft::ReactNative::AccessibilityRoles role);
+
+  void setLocalizedControlTypeFromAccessibilityRole(xaml::UIElement element, winrt::hstring value);
+
   void GetNativeProps(const winrt::Microsoft::ReactNative::IJSValueWriter &writer) const override;
 
   // Helper functions related to setting/updating TransformMatrix