[0.76] Update ControlType values to match corresponding accessibility…

…Role values (#14282) * Update ControlType values to match corresponding `accessibilityRole` values (#14215) * update controltype with accessibilityRole * update accessibilityRole <-> controltype mapping * Change files * add default return val * Change files
microsoft · Jan 16, 2025 · d8923f7 · d8923f7
1 parent 5cb3aed
commit d8923f7
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 3 deletions.
diff --git a/change/react-native-windows-61c2410d-25ba-411e-b04c-b7a6f3fa4891.json b/change/react-native-windows-61c2410d-25ba-411e-b04c-b7a6f3fa4891.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update ControlType values to match corresponding `accessibilityRole` values (#14215)",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Views/FrameworkElementViewManager.cpp b/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

diff --git a/vnext/Microsoft.ReactNative/Views/FrameworkElementViewManager.h b/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