diff --git a/change/react-native-windows-5797e623-a2b1-4fee-8558-d92058803600.json b/change/react-native-windows-5797e623-a2b1-4fee-8558-d92058803600.json new file mode 100644 index 00000000000..5442df6e80c --- /dev/null +++ b/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": "yajurgrover24@gmail.com", + "dependentChangeType": "patch" +} diff --git a/vnext/Microsoft.ReactNative/Views/FrameworkElementViewManager.cpp b/vnext/Microsoft.ReactNative/Views/FrameworkElementViewManager.cpp index 4954c3535c0..99792880b7e 100644 --- a/vnext/Microsoft.ReactNative/Views/FrameworkElementViewManager.cpp +++ b/vnext/Microsoft.ReactNative/Views/FrameworkElementViewManager.cpp @@ -25,6 +25,7 @@ #include "DynamicAutomationProperties.h" #include +#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 index 508061c7f11..4835e4439fc 100644 --- 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