Add Functionality to announceForAccessibility to Support Xaml Islands

change/react-native-windows-2fe5aef3-7497-4418-8cf6-038834f023b1.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add method support for Xaml Islands",
+  "packageName": "react-native-windows",
+  "email": "34109996+chiaramooney@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Modules/AccessibilityInfoModule.cpp

@@ -42,15 +42,21 @@ void AccessibilityInfo::setAccessibilityFocus(double /*reactTag*/) noexcept {
 void AccessibilityInfo::announceForAccessibility(std::string announcement) noexcept {
   m_context.UIDispatcher().Post([context = m_context, announcement = std::move(announcement)] {
     // Windows requires a specific element to announce from. Unfortunately the react-native API does not provide a tag
-    // So we need to add a temporary control to raise the notification event from.
+    // So we need to find something to raise the notification event from.
+    xaml::UIElement element{nullptr};
 
-    auto textBlock = xaml::Controls::TextBlock();
-
-    if (!textBlock) {
-      return;
+    if (react::uwp::IsXamlIsland()) {
+      if (auto accessibleRoot =
+              winrt::Microsoft::ReactNative::XamlUIService::GetAccessibleRoot(context.Properties().Handle())) {
+        element = accessibleRoot;
+      } else {
+        return;
+      }
+    } else {
+      element = xaml::Controls::TextBlock();
     }
 
-    auto peer = xaml::Automation::Peers::FrameworkElementAutomationPeer::FromElement(textBlock);
+    auto peer = xaml::Automation::Peers::FrameworkElementAutomationPeer::FromElement(element);
 
     if (!peer) {
       return;

vnext/Microsoft.ReactNative/XamlUIService.cpp

@@ -56,16 +56,31 @@ ReactPropertyId<xaml::XamlRoot> XamlRootProperty() noexcept {
   return propId;
 }
 
+ReactPropertyId<xaml::FrameworkElement> AccessibleRootProperty() noexcept {
+  static ReactPropertyId<xaml::FrameworkElement> propId{L"ReactNative.UIManager", L"AccessibleRoot"};
+  return propId;
+}
+
 /*static*/ void XamlUIService::SetXamlRoot(
     IReactPropertyBag const &properties,
     xaml::XamlRoot const &xamlRoot) noexcept {
   winrt::Microsoft::ReactNative::ReactPropertyBag(properties).Set(XamlRootProperty(), xamlRoot);
 }
 
+/*static*/ void XamlUIService::SetAccessibleRoot(
+    IReactPropertyBag const &properties,
+    xaml::FrameworkElement const &accessibleRoot) noexcept {
+  winrt::Microsoft::ReactNative::ReactPropertyBag(properties).Set(AccessibleRootProperty(), accessibleRoot);
+}
+
 /*static*/ xaml::XamlRoot XamlUIService::GetXamlRoot(IReactPropertyBag const &properties) noexcept {
   return winrt::Microsoft::ReactNative::ReactPropertyBag(properties).Get(XamlRootProperty());
 }
 
+/*static*/ xaml::FrameworkElement XamlUIService::GetAccessibleRoot(IReactPropertyBag const &properties) noexcept {
+  return winrt::Microsoft::ReactNative::ReactPropertyBag(properties).Get(AccessibleRootProperty());
+}
+
 ReactPropertyId<uint64_t> XamlIslandProperty() noexcept {
   static ReactPropertyId<uint64_t> propId{L"ReactNative.UIManager", L"XamlIsland"};
   return propId;

vnext/Microsoft.ReactNative/XamlUIService.h

@@ -23,7 +23,11 @@ struct XamlUIService : XamlUIServiceT<XamlUIService> {
       JSValueArgWriter const &eventDataArgWriter) noexcept;
 
   static void SetXamlRoot(IReactPropertyBag const &properties, xaml::XamlRoot const &xamlRoot) noexcept;
+  static void SetAccessibleRoot(
+      IReactPropertyBag const &properties,
+      xaml::FrameworkElement const &accessibleRoot) noexcept;
   static xaml::XamlRoot GetXamlRoot(IReactPropertyBag const &properties) noexcept;
+  static xaml::FrameworkElement GetAccessibleRoot(IReactPropertyBag const &properties) noexcept;
 
   static void SetIslandWindowHandle(IReactPropertyBag const &properties, uint64_t hwnd) noexcept;
   static uint64_t GetIslandWindowHandle(IReactPropertyBag const &properties) noexcept;

vnext/Microsoft.ReactNative/XamlUIService.idl

@@ -23,8 +23,15 @@ namespace Microsoft.ReactNative {
     void DispatchEvent(XAML_NAMESPACE.FrameworkElement view, String eventName, JSValueArgWriter eventDataArgWriter);
 
     // This needs to be manually provided to the ReactInstanceSettings when using XamlIslands
+    DOC_STRING("Set XamlRoot for app. This must be manually provided to the ReactInstanceSettings when using XamlIslands.")
     static void SetXamlRoot(IReactPropertyBag properties, XAML_NAMESPACE.XamlRoot xamlRoot);
+    // This needs to be manually provided to the ReactInstanceSettings when using XamlIslands
+    DOC_STRING("Set accessible FrameworkElement for app. Make sure the element is able to create an automation peer. This must be manually provided to the ReactInstanceSettings when using XamlIslands to have access to accessibility methods.")
+    static void SetAccessibleRoot(IReactPropertyBag properties, XAML_NAMESPACE.FrameworkElement accessibleRoot);
+    DOC_STRING("Retrieve XamlRoot for app.")
     static XAML_NAMESPACE.XamlRoot GetXamlRoot(IReactPropertyBag properties);
+    DOC_STRING("Retrieve accessible FrameworkElement for app.")
+    static XAML_NAMESPACE.FrameworkElement GetAccessibleRoot(IReactPropertyBag properties);
 
     static UInt64 GetIslandWindowHandle(IReactPropertyBag properties);
     DOC_STRING("Sets the windowHandle HWND (as an uint64) to be the XAML Island window for the current React instance. Pass the value returned by IDesktopWindowXamlSourceNative get_WindowHandle.")