Initial support for UIA and tab navigation for a child Island

change/react-native-windows-96dd8a87-4b77-4f7e-bf40-fb214350e0f3.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Basic support for stitching the UIA tree for a ContentIslandComponentView's child",
+  "packageName": "react-native-windows",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionDynamicAutomationProvider.cpp

@@ -4,6 +4,7 @@
 #include <Fabric/Composition/SwitchComponentView.h>
 #include <Fabric/Composition/TextInput/WindowsTextInputComponentView.h>
 #include <Unicode.h>
+#include <winrt/Microsoft.UI.Content.h>
 #include "RootComponentView.h"
 #include "UiaHelpers.h"
 
@@ -27,12 +28,69 @@ CompositionDynamicAutomationProvider::CompositionDynamicAutomationProvider(
   }
 }
 
+#ifdef USE_EXPERIMENTAL_WINUI3
+CompositionDynamicAutomationProvider::CompositionDynamicAutomationProvider(
+    const winrt::Microsoft::ReactNative::Composition::ComponentView &componentView,
+    const winrt::Microsoft::UI::Content::ChildSiteLink &childSiteLink) noexcept
+    : m_view{componentView}, m_childSiteLink{childSiteLink} {
+  // These events are raised in response to the child ContentIsland asking for providers.
+  // For example, the ContentIsland.FragmentRootAutomationProvider property will return
+  // the provider we provide here in FragmentRootAutomationProviderRequested.
+
+  m_fragmentRootAutomationProviderRequestedRevoker = m_childSiteLink.FragmentRootAutomationProviderRequested(
+      [this](
+          const winrt::Microsoft::UI::Content::IContentSiteAutomation &,
+          const winrt::Microsoft::UI::Content::ContentSiteAutomationProviderRequestedEventArgs &args) {
+        // The child island's fragment tree doesn't have its own root.
+        // Here's how we can provide the correct root to the child's UIA logic.
+        winrt::com_ptr<IRawElementProviderFragmentRoot> fragmentRoot = nullptr;
+        HRESULT hr = this->get_FragmentRoot(fragmentRoot.put());
+        args.AutomationProvider(fragmentRoot.as<IInspectable>());
+        args.Handled(true);
+      });
+
+  m_parentAutomationProviderRequestedRevoker = m_childSiteLink.ParentAutomationProviderRequested(
+      [this](
+          const winrt::Microsoft::UI::Content::IContentSiteAutomation &,
+          const winrt::Microsoft::UI::Content::ContentSiteAutomationProviderRequestedEventArgs &args) {
+        args.AutomationProvider(*this);
+        args.Handled(true);
+      });
+
+  m_nextSiblingAutomationProviderRequestedRevoker = m_childSiteLink.NextSiblingAutomationProviderRequested(
+      [](const winrt::Microsoft::UI::Content::IContentSiteAutomation &,
+         const winrt::Microsoft::UI::Content::ContentSiteAutomationProviderRequestedEventArgs &args) {
+        // The ContentIsland will always be the one and only child of this node, so it won't have siblings.
+        args.AutomationProvider(nullptr);
+        args.Handled(true);
+      });
+
+  m_previousSiblingAutomationProviderRequestedRevoker = m_childSiteLink.PreviousSiblingAutomationProviderRequested(
+      [](const winrt::Microsoft::UI::Content::IContentSiteAutomation &,
+         const winrt::Microsoft::UI::Content::ContentSiteAutomationProviderRequestedEventArgs &args) {
+        // The ContentIsland will always be the one and only child of this node, so it won't have siblings.
+        args.AutomationProvider(nullptr);
+        args.Handled(true);
+      });
+}
+#endif // USE_EXPERIMENTAL_WINUI3
+
 HRESULT __stdcall CompositionDynamicAutomationProvider::Navigate(
     NavigateDirection direction,
     IRawElementProviderFragment **pRetVal) {
   if (pRetVal == nullptr)
     return E_POINTER;
 
+#ifdef USE_EXPERIMENTAL_WINUI3
+  if (m_childSiteLink) {
+    if (direction == NavigateDirection_FirstChild || direction == NavigateDirection_LastChild) {
+      auto fragment = m_childSiteLink.AutomationProvider().try_as<IRawElementProviderFragment>();
+      *pRetVal = fragment.detach();
+      return S_OK;
+    }
+  }
+#endif // USE_EXPERIMENTAL_WINUI3
+
   return UiaNavigateHelper(m_view.view(), direction, *pRetVal);
 }
 

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionDynamicAutomationProvider.h

@@ -25,6 +25,12 @@ class CompositionDynamicAutomationProvider : public winrt::implements<
   CompositionDynamicAutomationProvider(
       const winrt::Microsoft::ReactNative::Composition::ComponentView &componentView) noexcept;
 
+#ifdef USE_EXPERIMENTAL_WINUI3
+  CompositionDynamicAutomationProvider(
+      const winrt::Microsoft::ReactNative::Composition::ComponentView &componentView,
+      const winrt::Microsoft::UI::Content::ChildSiteLink &childContentLink) noexcept;
+#endif // USE_EXPERIMENTAL_WINUI3
+
   // inherited via IRawElementProviderFragment
   virtual HRESULT __stdcall Navigate(NavigateDirection direction, IRawElementProviderFragment **pRetVal) override;
   virtual HRESULT __stdcall GetRuntimeId(SAFEARRAY **pRetVal) override;
@@ -86,6 +92,18 @@ class CompositionDynamicAutomationProvider : public winrt::implements<
  private:
   ::Microsoft::ReactNative::ReactTaggedView m_view;
   std::vector<winrt::com_ptr<IRawElementProviderSimple>> m_selectionItems;
+#ifdef USE_EXPERIMENTAL_WINUI3
+  // Non-null when this UIA node is the peer of a ContentIslandComponentView.
+  winrt::Microsoft::UI::Content::ChildSiteLink m_childSiteLink{nullptr};
+  winrt::Microsoft::UI::Content::ChildSiteLink::FragmentRootAutomationProviderRequested_revoker
+      m_fragmentRootAutomationProviderRequestedRevoker;
+  winrt::Microsoft::UI::Content::ChildSiteLink::ParentAutomationProviderRequested_revoker
+      m_parentAutomationProviderRequestedRevoker;
+  winrt::Microsoft::UI::Content::ChildSiteLink::NextSiblingAutomationProviderRequested_revoker
+      m_nextSiblingAutomationProviderRequestedRevoker;
+  winrt::Microsoft::UI::Content::ChildSiteLink::PreviousSiblingAutomationProviderRequested_revoker
+      m_previousSiblingAutomationProviderRequestedRevoker;
+#endif
 };
 
 } // namespace winrt::Microsoft::ReactNative::implementation

vnext/Microsoft.ReactNative/Fabric/Composition/ContentIslandComponentView.cpp

@@ -11,12 +11,15 @@
 #include <UI.Xaml.Controls.h>
 #include <Utils/ValueUtils.h>
 #include <winrt/Microsoft.UI.Content.h>
+#include <winrt/Microsoft.UI.Input.h>
 #include <winrt/Windows.UI.Composition.h>
 #include "CompositionContextHelper.h"
 #include "RootComponentView.h"
 
 #include "Composition.ContentIslandComponentView.g.cpp"
 
+#include "CompositionDynamicAutomationProvider.h"
+
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
 ContentIslandComponentView::ContentIslandComponentView(
@@ -47,6 +50,23 @@ void ContentIslandComponentView::OnMounted() noexcept {
       winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(Visual())
           .as<winrt::Microsoft::UI::Composition::ContainerVisual>());
   m_childSiteLink.ActualSize({m_layoutMetrics.frame.size.width, m_layoutMetrics.frame.size.height});
+
+  m_navigationHost = winrt::Microsoft::UI::Input::InputFocusNavigationHost::GetForSiteLink(m_childSiteLink);
+
+  m_departFocusRequestedRevoker =
+      m_navigationHost.DepartFocusRequested(winrt::auto_revoke, [wkThis = get_weak()](const auto &, const auto &args) {
+        if (auto strongThis = wkThis.get()) {
+          const bool next = (args.Request().Reason() == winrt::Microsoft::UI::Input::FocusNavigationReason::First);
+          strongThis->rootComponentView()->TryMoveFocus(next);
+          args.Result(winrt::Microsoft::UI::Input::FocusNavigationResult::Moved);
+        }
+      });
+
+  // This automation mode must be set before connecting the child content island.
+  // It puts the child content into a mode where it won't own its own framework root.  Instead, the child island's
+  // automation peers will use the same framework root as the automation peer of this ContentIslandComponentView.
+  m_childSiteLink.AutomationTreeOption(winrt::Microsoft::UI::Content::AutomationTreeOptions::FragmentBased);
+
   if (m_islandToConnect) {
     m_childSiteLink.Connect(m_islandToConnect);
     m_islandToConnect = nullptr;
@@ -70,6 +90,9 @@ void ContentIslandComponentView::OnMounted() noexcept {
 
 void ContentIslandComponentView::OnUnmounted() noexcept {
   m_layoutMetricChangedRevokers.clear();
+#ifdef USE_EXPERIMENTAL_WINUI3
+  m_departFocusRequestedRevoker.revoke();
+#endif
 }
 
 void ContentIslandComponentView::ParentLayoutChanged() noexcept {
@@ -92,6 +115,41 @@ void ContentIslandComponentView::ParentLayoutChanged() noexcept {
 #endif
 }
 
+winrt::IInspectable ContentIslandComponentView::EnsureUiaProvider() noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+  if (m_uiaProvider == nullptr) {
+    m_uiaProvider = winrt::make<winrt::Microsoft::ReactNative::implementation::CompositionDynamicAutomationProvider>(
+        *get_strong(), m_childSiteLink);
+  }
+  return m_uiaProvider;
+#else
+  return Super::EnsureUiaProvider();
+#endif
+}
+
+bool ContentIslandComponentView::focusable() const noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+  // We don't have a way to check to see if the ContentIsland has focusable content,
+  // so we'll always return true.  We'll have to handle the case where the content doesn't have
+  // focusable content in the OnGotFocus handler.
+  return true;
+#else
+  return Super::focusable();
+#endif
+}
+
+void ContentIslandComponentView::onGotFocus(
+    const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+  (void)args;
+  // TODO: Need to make sure we handle shift-tab as well (which should use "Last" instead of "First")
+  m_navigationHost.NavigateFocus(winrt::Microsoft::UI::Input::FocusNavigationRequest::Create(
+      winrt::Microsoft::UI::Input::FocusNavigationReason::First));
+#else
+  return Super::onGotFocus(args);
+#endif
+}
+
 ContentIslandComponentView::~ContentIslandComponentView() noexcept {
   if (m_islandToConnect) {
     m_islandToConnect.Close();

vnext/Microsoft.ReactNative/Fabric/Composition/ContentIslandComponentView.h

@@ -8,6 +8,7 @@
 
 #include <Microsoft.ReactNative.Cxx/ReactContext.h>
 #include <winrt/Microsoft.UI.Content.h>
+#include <winrt/Microsoft.UI.Input.h>
 #include <winrt/Windows.UI.Composition.h>
 #include "CompositionHelpers.h"
 #include "CompositionViewComponentView.h"
@@ -37,6 +38,12 @@ struct ContentIslandComponentView : ContentIslandComponentViewT<ContentIslandCom
 
   void prepareForRecycle() noexcept override;
 
+  bool focusable() const noexcept override;
+
+  winrt::IInspectable EnsureUiaProvider() noexcept override;
+
+  void onGotFocus(const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept override;
+
   ContentIslandComponentView(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
@@ -56,6 +63,8 @@ struct ContentIslandComponentView : ContentIslandComponentViewT<ContentIslandCom
   std::vector<winrt::Microsoft::ReactNative::ComponentView::LayoutMetricsChanged_revoker> m_layoutMetricChangedRevokers;
 #ifdef USE_EXPERIMENTAL_WINUI3
   winrt::Microsoft::UI::Content::ChildSiteLink m_childSiteLink{nullptr};
+  winrt::Microsoft::UI::Input::InputFocusNavigationHost m_navigationHost{nullptr};
+  winrt::Microsoft::UI::Input::InputFocusNavigationHost::DepartFocusRequested_revoker m_departFocusRequestedRevoker;
 #endif
 };