react-native-windows 0.78.5 → 0.78.7

package/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp

@@ -15,6 +15,7 @@
 #include <Utils/KeyboardUtils.h>
 #include <Utils/ValueUtils.h>
 #include <Views/FrameworkElementTransferProperties.h>
+#include <atlcomcli.h>
 #include <winrt/Microsoft.ReactNative.Composition.Experimental.h>
 #include <winrt/Microsoft.UI.Input.h>
 #include <winrt/Windows.UI.Composition.h>
@@ -33,6 +34,7 @@
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
 constexpr float FOCUS_VISUAL_WIDTH = 2.0f;
+constexpr float FOCUS_VISUAL_RADIUS = 3.0f;
 
 // m_outerVisual
 //   |
@@ -182,7 +184,7 @@ void ComponentView::updateProps(
     updateShadowProps(oldViewProps, newViewProps);
   }
   if (oldViewProps.tooltip != newViewProps.tooltip) {
-    if (!m_tooltipTracked && newViewProps.tooltip) {
+    if (!m_tooltipTracked && newViewProps.tooltip && !newViewProps.tooltip->empty()) {
       TooltipService::GetCurrent(m_reactContext.Properties())->StartTracking(*this);
       m_tooltipTracked = true;
     } else if (m_tooltipTracked && !newViewProps.tooltip) {
@@ -228,29 +230,11 @@ void ComponentView::updateFocusLayoutMetrics() noexcept {
   facebook::react::RectangleEdges<bool> nudgeEdges;
   auto scaleFactor = m_focusPrimitive->m_focusVisualComponent->m_layoutMetrics.pointScaleFactor;
   if (m_focusPrimitive) {
+    auto nudgeEdges = m_focusPrimitive->m_focusVisualComponent->focusNudges();
     if (m_focusPrimitive->m_focusOuterPrimitive) {
       auto outerFocusMetrics = m_focusPrimitive->m_focusVisualComponent->focusLayoutMetrics(false /*inner*/);
-
-      if (outerFocusMetrics.frame.origin.x < 0) {
-        nudgeEdges.left = true;
-      }
-      if (outerFocusMetrics.frame.origin.y < 0) {
-        nudgeEdges.top = true;
-      }
-      if (outerFocusMetrics.frame.getMaxX() > m_layoutMetrics.frame.getMaxX()) {
-        nudgeEdges.right = true;
-      }
-      if (outerFocusMetrics.frame.getMaxY() > m_layoutMetrics.frame.getMaxY()) {
-        nudgeEdges.bottom = true;
-      }
-
       m_focusPrimitive->m_focusOuterPrimitive->RootVisual().Size(
-          {outerFocusMetrics.frame.size.width * scaleFactor -
-               (nudgeEdges.left ? (FOCUS_VISUAL_WIDTH * 2 * scaleFactor) : 0) -
-               (nudgeEdges.right ? (FOCUS_VISUAL_WIDTH * 2 * scaleFactor) : 0),
-           outerFocusMetrics.frame.size.height * scaleFactor -
-               (nudgeEdges.top ? (FOCUS_VISUAL_WIDTH * 2 * scaleFactor) : 0) -
-               (nudgeEdges.bottom ? (FOCUS_VISUAL_WIDTH * 2 * scaleFactor) : 0)});
+          {outerFocusMetrics.frame.size.width * scaleFactor, outerFocusMetrics.frame.size.height * scaleFactor});
       m_focusPrimitive->m_focusOuterPrimitive->RootVisual().Offset(
           {nudgeEdges.left ? 0 : -(FOCUS_VISUAL_WIDTH * 2 * scaleFactor),
            nudgeEdges.top ? 0 : -(FOCUS_VISUAL_WIDTH * 2 * scaleFactor),
@@ -261,15 +245,10 @@ void ComponentView::updateFocusLayoutMetrics() noexcept {
     if (m_focusPrimitive->m_focusInnerPrimitive) {
       auto innerFocusMetrics = m_focusPrimitive->m_focusVisualComponent->focusLayoutMetrics(true /*inner*/);
       m_focusPrimitive->m_focusInnerPrimitive->RootVisual().Size(
-          {innerFocusMetrics.frame.size.width * scaleFactor -
-               (nudgeEdges.left ? (FOCUS_VISUAL_WIDTH * scaleFactor) : 0) -
-               (nudgeEdges.right ? (FOCUS_VISUAL_WIDTH * scaleFactor) : 0),
-           innerFocusMetrics.frame.size.height * scaleFactor -
-               (nudgeEdges.top ? (FOCUS_VISUAL_WIDTH * scaleFactor) : 0) -
-               (nudgeEdges.bottom ? (FOCUS_VISUAL_WIDTH * scaleFactor) : 0)});
+          {innerFocusMetrics.frame.size.width * scaleFactor, innerFocusMetrics.frame.size.height * scaleFactor});
       m_focusPrimitive->m_focusInnerPrimitive->RootVisual().Offset(
-          {nudgeEdges.left ? 0 : -FOCUS_VISUAL_WIDTH * scaleFactor,
-           nudgeEdges.top ? 0 : -FOCUS_VISUAL_WIDTH * scaleFactor,
+          {nudgeEdges.left ? (FOCUS_VISUAL_WIDTH * scaleFactor) : (-FOCUS_VISUAL_WIDTH * scaleFactor),
+           nudgeEdges.top ? (FOCUS_VISUAL_WIDTH * scaleFactor) : (-FOCUS_VISUAL_WIDTH * scaleFactor),
            0.0f});
       m_focusPrimitive->m_focusInnerPrimitive->markNeedsUpdate();
     }
@@ -353,9 +332,9 @@ void ComponentView::onLostFocus(
 
       m_componentHostingFocusVisual->hostFocusVisual(false, get_strong());
     }
-    if (m_uiaProvider) {
+    if (UiaClientsAreListening()) {
       winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-          m_uiaProvider, UIA_HasKeyboardFocusPropertyId, true, false);
+          EnsureUiaProvider(), UIA_HasKeyboardFocusPropertyId, true, false);
     }
   }
   base_type::onLostFocus(args);
@@ -403,8 +382,8 @@ void ComponentView::onGotFocus(
       focusRect.size.height += (FOCUS_VISUAL_WIDTH * 2);
       focusVisualRoot(focusRect)->hostFocusVisual(true, get_strong());
     }
-    if (m_uiaProvider) {
-      auto spProviderSimple = m_uiaProvider.try_as<IRawElementProviderSimple>();
+    if (UiaClientsAreListening()) {
+      auto spProviderSimple = EnsureUiaProvider().try_as<IRawElementProviderSimple>();
       if (spProviderSimple != nullptr) {
         winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
             m_uiaProvider, UIA_HasKeyboardFocusPropertyId, false, true);
@@ -538,7 +517,33 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ComponentView:
   return m_outerVisual ? m_outerVisual : Visual();
 }
 
-facebook::react::LayoutMetrics ComponentView::focusLayoutMetrics(bool inner) const noexcept {
+// If the focus visual would extend past the bounds of the hosting visual,
+// then we will nudge the focus visual back inside the hosting visuals bounds.
+facebook::react::RectangleEdges<bool> ComponentView::focusNudges() const noexcept {
+  facebook::react::RectangleEdges<bool> nudgeEdges;
+
+  // Always use outer focus metrics to determine if we need to nudge the focus rect over to fit
+  facebook::react::LayoutMetrics layoutMetrics = focusLayoutMetricsNoNudge(false /*inner*/);
+
+  Assert(m_componentHostingFocusVisual);
+
+  if (layoutMetrics.frame.origin.x < 0) {
+    nudgeEdges.left = true;
+  }
+  if (layoutMetrics.frame.origin.y < 0) {
+    nudgeEdges.top = true;
+  }
+  if (layoutMetrics.frame.getMaxX() > m_componentHostingFocusVisual->m_layoutMetrics.frame.getMaxX()) {
+    nudgeEdges.right = true;
+  }
+  if (layoutMetrics.frame.getMaxY() > m_componentHostingFocusVisual->m_layoutMetrics.frame.getMaxY()) {
+    nudgeEdges.bottom = true;
+  }
+
+  return nudgeEdges;
+}
+
+facebook::react::LayoutMetrics ComponentView::focusLayoutMetricsNoNudge(bool inner) const noexcept {
   facebook::react::LayoutMetrics layoutMetrics = m_layoutMetrics;
   layoutMetrics.frame.origin.x -= FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
   layoutMetrics.frame.origin.y -= FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
@@ -547,6 +552,28 @@ facebook::react::LayoutMetrics ComponentView::focusLayoutMetrics(bool inner) con
   return layoutMetrics;
 }
 
+facebook::react::LayoutMetrics ComponentView::focusLayoutMetrics(bool inner) const noexcept {
+  auto nudgeEdges = focusNudges();
+  auto layoutMetrics = focusLayoutMetricsNoNudge(inner);
+
+  if (nudgeEdges.left) {
+    layoutMetrics.frame.origin.x += FOCUS_VISUAL_WIDTH * 2;
+    layoutMetrics.frame.size.width -= FOCUS_VISUAL_WIDTH * 2;
+  }
+  if (nudgeEdges.top) {
+    layoutMetrics.frame.origin.y += FOCUS_VISUAL_WIDTH * 2;
+    layoutMetrics.frame.size.height -= FOCUS_VISUAL_WIDTH * 2;
+  }
+  if (nudgeEdges.right) {
+    layoutMetrics.frame.size.width -= FOCUS_VISUAL_WIDTH * 2;
+  }
+  if (nudgeEdges.bottom) {
+    layoutMetrics.frame.size.height -= FOCUS_VISUAL_WIDTH * 2;
+  }
+
+  return layoutMetrics;
+}
+
 facebook::react::BorderMetrics ComponentView::focusBorderMetrics(
     bool inner,
     const facebook::react::LayoutMetrics &layoutMetrics) const noexcept {
@@ -556,22 +583,31 @@ facebook::react::BorderMetrics ComponentView::focusBorderMetrics(
   innerColor.m_platformColor.push_back(inner ? "FocusVisualSecondary" : "FocusVisualPrimary");
   metrics.borderColors.bottom = metrics.borderColors.left = metrics.borderColors.right = metrics.borderColors.top =
       innerColor;
-  if (metrics.borderRadii.bottomLeft.horizontal != 0)
-    metrics.borderRadii.bottomLeft.horizontal += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.bottomLeft.vertical != 0)
-    metrics.borderRadii.bottomLeft.vertical += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.bottomRight.horizontal != 0)
-    metrics.borderRadii.bottomRight.horizontal += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.bottomRight.vertical != 0)
-    metrics.borderRadii.bottomRight.vertical += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.topLeft.horizontal != 0)
-    metrics.borderRadii.topLeft.horizontal += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.topLeft.vertical != 0)
-    metrics.borderRadii.topLeft.vertical += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.topRight.horizontal != 0)
-    metrics.borderRadii.topRight.horizontal += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.topRight.vertical != 0)
-    metrics.borderRadii.topRight.vertical += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+
+  metrics.borderRadii.bottomLeft.horizontal =
+      (metrics.borderRadii.bottomLeft.horizontal ? metrics.borderRadii.bottomLeft.horizontal : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.bottomLeft.vertical =
+      (metrics.borderRadii.bottomLeft.vertical ? metrics.borderRadii.bottomLeft.vertical : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.bottomRight.horizontal =
+      (metrics.borderRadii.bottomRight.horizontal ? metrics.borderRadii.bottomRight.horizontal : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.bottomRight.vertical =
+      (metrics.borderRadii.bottomRight.vertical ? metrics.borderRadii.bottomRight.vertical : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.topLeft.horizontal =
+      (metrics.borderRadii.topLeft.horizontal ? metrics.borderRadii.topLeft.horizontal : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.topLeft.vertical =
+      (metrics.borderRadii.topLeft.vertical ? metrics.borderRadii.topLeft.vertical : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.topRight.horizontal =
+      (metrics.borderRadii.topRight.horizontal ? metrics.borderRadii.topRight.horizontal : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.topRight.vertical =
+      (metrics.borderRadii.topRight.vertical ? metrics.borderRadii.topRight.vertical : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
 
   metrics.borderStyles.bottom = metrics.borderStyles.left = metrics.borderStyles.right = metrics.borderStyles.top =
       facebook::react::BorderStyle::Solid;
@@ -708,67 +744,86 @@ void ComponentView::updateTransformProps(
 void ComponentView::updateAccessibilityProps(
     const facebook::react::ViewProps &oldViewProps,
     const facebook::react::ViewProps &newViewProps) noexcept {
-  if (!m_uiaProvider)
+  if (!UiaClientsAreListening())
     return;
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      m_uiaProvider, UIA_IsKeyboardFocusablePropertyId, oldViewProps.focusable, newViewProps.focusable);
+      EnsureUiaProvider(), UIA_IsKeyboardFocusablePropertyId, oldViewProps.focusable, newViewProps.focusable);
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      m_uiaProvider,
+      EnsureUiaProvider(),
       UIA_NamePropertyId,
       oldViewProps.accessibilityLabel,
       newViewProps.accessibilityLabel.empty() ? DefaultAccessibleName() : newViewProps.accessibilityLabel);
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      m_uiaProvider,
+      EnsureUiaProvider(),
       UIA_IsContentElementPropertyId,
       (oldViewProps.accessible && oldViewProps.accessibilityRole != "none"),
       (newViewProps.accessible && newViewProps.accessibilityRole != "none"));
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      m_uiaProvider,
+      EnsureUiaProvider(),
       UIA_IsControlElementPropertyId,
       (oldViewProps.accessible && oldViewProps.accessibilityRole != "none"),
       (newViewProps.accessible && newViewProps.accessibilityRole != "none"));
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      m_uiaProvider,
+      EnsureUiaProvider(),
       UIA_IsEnabledPropertyId,
       !(oldViewProps.accessibilityState && oldViewProps.accessibilityState->disabled),
       !(newViewProps.accessibilityState && newViewProps.accessibilityState->disabled));
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      m_uiaProvider,
+      EnsureUiaProvider(),
       UIA_IsEnabledPropertyId,
       !(oldViewProps.accessibilityState && oldViewProps.accessibilityState->busy),
       !(newViewProps.accessibilityState && newViewProps.accessibilityState->busy));
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      m_uiaProvider, UIA_ControlTypePropertyId, oldViewProps.accessibilityRole, newViewProps.accessibilityRole);
+      EnsureUiaProvider(), UIA_ControlTypePropertyId, oldViewProps.accessibilityRole, newViewProps.accessibilityRole);
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      m_uiaProvider, UIA_HelpTextPropertyId, oldViewProps.accessibilityHint, newViewProps.accessibilityHint);
+      EnsureUiaProvider(), UIA_HelpTextPropertyId, oldViewProps.accessibilityHint, newViewProps.accessibilityHint);
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      m_uiaProvider,
+      EnsureUiaProvider(),
       UIA_PositionInSetPropertyId,
       oldViewProps.accessibilityPosInSet,
       newViewProps.accessibilityPosInSet);
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      m_uiaProvider, UIA_SizeOfSetPropertyId, oldViewProps.accessibilitySetSize, newViewProps.accessibilitySetSize);
+      EnsureUiaProvider(),
+      UIA_SizeOfSetPropertyId,
+      oldViewProps.accessibilitySetSize,
+      newViewProps.accessibilitySetSize);
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-      m_uiaProvider,
+      EnsureUiaProvider(),
       UIA_LiveSettingPropertyId,
       oldViewProps.accessibilityLiveRegion,
       newViewProps.accessibilityLiveRegion);
 
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      EnsureUiaProvider(), UIA_LevelPropertyId, oldViewProps.accessibilityLevel, newViewProps.accessibilityLevel);
+
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      EnsureUiaProvider(),
+      UIA_AccessKeyPropertyId,
+      oldViewProps.accessibilityAccessKey,
+      newViewProps.accessibilityAccessKey);
+
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      EnsureUiaProvider(),
+      UIA_ItemTypePropertyId,
+      oldViewProps.accessibilityItemType,
+      newViewProps.accessibilityItemType);
+
   if ((oldViewProps.accessibilityState.has_value() && oldViewProps.accessibilityState->selected.has_value()) !=
       ((newViewProps.accessibilityState.has_value() && newViewProps.accessibilityState->selected.has_value()))) {
     auto compProvider =
-        m_uiaProvider.try_as<winrt::Microsoft::ReactNative::implementation::CompositionDynamicAutomationProvider>();
+        EnsureUiaProvider()
+            .try_as<winrt::Microsoft::ReactNative::implementation::CompositionDynamicAutomationProvider>();
     if (compProvider) {
       if ((newViewProps.accessibilityState.has_value() && newViewProps.accessibilityState->selected.has_value())) {
         winrt::Microsoft::ReactNative::implementation::AddSelectionItemsToContainer(compProvider.get());

package/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h

@@ -143,6 +143,8 @@ struct ComponentView : public ComponentViewT<
   void FinalizeTransform(
       facebook::react::LayoutMetrics const &layoutMetrics,
       const facebook::react::ViewProps &viewProps) noexcept;
+  facebook::react::RectangleEdges<bool> focusNudges() const noexcept;
+  facebook::react::LayoutMetrics focusLayoutMetricsNoNudge(bool inner) const noexcept;
   facebook::react::LayoutMetrics focusLayoutMetrics(bool inner) const noexcept;
   facebook::react::BorderMetrics focusBorderMetrics(bool inner, const facebook::react::LayoutMetrics &layoutMetrics)
       const noexcept;

package/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(
@@ -41,12 +44,27 @@ ContentIslandComponentView::ContentIslandComponentView(
 }
 
 void ContentIslandComponentView::OnMounted() noexcept {
-#ifdef USE_EXPERIMENTAL_WINUI3
   m_childSiteLink = winrt::Microsoft::UI::Content::ChildSiteLink::Create(
       rootComponentView()->parentContentIsland(),
       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_navigationHostDepartFocusRequestedToken =
+      m_navigationHost.DepartFocusRequested([wkThis = get_weak()](const auto &, const auto &args) {
+        if (auto strongThis = wkThis.get()) {
+          const bool next = (args.Request().Reason() != winrt::Microsoft::UI::Input::FocusNavigationReason::Last);
+          strongThis->rootComponentView()->TryMoveFocus(next);
+          args.Result(winrt::Microsoft::UI::Input::FocusNavigationResult::Moved);
+        }
+      });
+
+  // We configure automation even if there's no UIA client at this point, because it's possible the first UIA
+  // request we'll get will be for a child of this island calling upward in the UIA tree.
+  ConfigureChildSiteLinkAutomation();
+
   if (m_islandToConnect) {
     m_childSiteLink.Connect(m_islandToConnect);
     m_islandToConnect = nullptr;
@@ -65,15 +83,17 @@ void ContentIslandComponentView::OnMounted() noexcept {
         }));
     view = view.Parent();
   }
-#endif
 }
 
 void ContentIslandComponentView::OnUnmounted() noexcept {
   m_layoutMetricChangedRevokers.clear();
+  if (m_navigationHostDepartFocusRequestedToken && m_navigationHost) {
+    m_navigationHost.DepartFocusRequested(m_navigationHostDepartFocusRequestedToken);
+    m_navigationHostDepartFocusRequestedToken = {};
+  }
 }
 
 void ContentIslandComponentView::ParentLayoutChanged() noexcept {
-#ifdef USE_EXPERIMENTAL_WINUI3
   if (m_layoutChangePosted)
     return;
 
@@ -89,10 +109,67 @@ void ContentIslandComponentView::ParentLayoutChanged() noexcept {
       strongThis->m_layoutChangePosted = false;
     }
   });
-#endif
+}
+
+winrt::IInspectable ContentIslandComponentView::EnsureUiaProvider() noexcept {
+  if (m_uiaProvider == nullptr) {
+    m_uiaProvider = winrt::make<winrt::Microsoft::ReactNative::implementation::CompositionDynamicAutomationProvider>(
+        *get_strong(), m_childSiteLink);
+  }
+  return m_uiaProvider;
+}
+
+bool ContentIslandComponentView::focusable() const noexcept {
+  // 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;
+}
+
+// Helper to convert a FocusNavigationDirection to a FocusNavigationReason.
+winrt::Microsoft::UI::Input::FocusNavigationReason GetFocusNavigationReason(
+    winrt::Microsoft::ReactNative::FocusNavigationDirection direction) noexcept {
+  switch (direction) {
+    case winrt::Microsoft::ReactNative::FocusNavigationDirection::First:
+    case winrt::Microsoft::ReactNative::FocusNavigationDirection::Next:
+      return winrt::Microsoft::UI::Input::FocusNavigationReason::First;
+    case winrt::Microsoft::ReactNative::FocusNavigationDirection::Last:
+    case winrt::Microsoft::ReactNative::FocusNavigationDirection::Previous:
+      return winrt::Microsoft::UI::Input::FocusNavigationReason::Last;
+  }
+  return winrt::Microsoft::UI::Input::FocusNavigationReason::Restore;
+}
+
+void ContentIslandComponentView::onGotFocus(
+    const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
+  auto gotFocusEventArgs = args.as<winrt::Microsoft::ReactNative::implementation::GotFocusEventArgs>();
+  const auto navigationReason = GetFocusNavigationReason(gotFocusEventArgs->Direction());
+  m_navigationHost.NavigateFocus(winrt::Microsoft::UI::Input::FocusNavigationRequest::Create(navigationReason));
 }
 
 ContentIslandComponentView::~ContentIslandComponentView() noexcept {
+  if (m_navigationHostDepartFocusRequestedToken && m_navigationHost) {
+    m_navigationHost.DepartFocusRequested(m_navigationHostDepartFocusRequestedToken);
+    m_navigationHostDepartFocusRequestedToken = {};
+  }
+  if (m_childSiteLink) {
+    if (m_fragmentRootAutomationProviderRequestedToken) {
+      m_childSiteLink.FragmentRootAutomationProviderRequested(m_fragmentRootAutomationProviderRequestedToken);
+      m_fragmentRootAutomationProviderRequestedToken = {};
+    }
+    if (m_parentAutomationProviderRequestedToken) {
+      m_childSiteLink.ParentAutomationProviderRequested(m_parentAutomationProviderRequestedToken);
+      m_parentAutomationProviderRequestedToken = {};
+    }
+    if (m_nextSiblingAutomationProviderRequestedToken) {
+      m_childSiteLink.NextSiblingAutomationProviderRequested(m_nextSiblingAutomationProviderRequestedToken);
+      m_nextSiblingAutomationProviderRequestedToken = {};
+    }
+    if (m_previousSiblingAutomationProviderRequestedToken) {
+      m_childSiteLink.PreviousSiblingAutomationProviderRequested(m_previousSiblingAutomationProviderRequestedToken);
+      m_previousSiblingAutomationProviderRequestedToken = {};
+    }
+  }
   if (m_islandToConnect) {
     m_islandToConnect.Close();
   }
@@ -115,28 +192,76 @@ void ContentIslandComponentView::UnmountChildComponentView(
 void ContentIslandComponentView::updateLayoutMetrics(
     facebook::react::LayoutMetrics const &layoutMetrics,
     facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
-#ifdef USE_EXPERIMENTAL_WINUI3
   if (m_childSiteLink) {
     m_childSiteLink.ActualSize({layoutMetrics.frame.size.width, layoutMetrics.frame.size.height});
     ParentLayoutChanged();
   }
-#endif
   base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
 }
 
 void ContentIslandComponentView::Connect(const winrt::Microsoft::UI::Content::ContentIsland &contentIsland) noexcept {
-#ifdef USE_EXPERIMENTAL_WINUI3
   if (m_childSiteLink) {
     m_islandToConnect = nullptr;
     m_childSiteLink.Connect(contentIsland);
   } else {
     m_islandToConnect = contentIsland;
   }
-#endif
 }
 
 void ContentIslandComponentView::prepareForRecycle() noexcept {
   Super::prepareForRecycle();
 }
 
+void ContentIslandComponentView::ConfigureChildSiteLinkAutomation() noexcept {
+  // This automation mode must be set before connecting the child ContentIsland.
+  // 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.AutomationOption(winrt::Microsoft::UI::Content::ContentAutomationOptions::FragmentBased);
+
+  // 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.
+
+  // We capture "this" as a raw pointer because ContentIslandComponentView doesn't currently support weak ptrs.
+  // It's safe because we disconnect these events in the destructor.
+
+  m_fragmentRootAutomationProviderRequestedToken = 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 fragment root.
+        // Here's how we can provide the correct fragment root to the child's UIA logic.
+        winrt::com_ptr<IRawElementProviderFragmentRoot> fragmentRoot{nullptr};
+        auto uiaProvider = this->EnsureUiaProvider();
+        uiaProvider.as<IRawElementProviderFragment>()->get_FragmentRoot(fragmentRoot.put());
+        args.AutomationProvider(fragmentRoot.as<IInspectable>());
+        args.Handled(true);
+      });
+
+  m_parentAutomationProviderRequestedToken = m_childSiteLink.ParentAutomationProviderRequested(
+      [this](
+          const winrt::Microsoft::UI::Content::IContentSiteAutomation &,
+          const winrt::Microsoft::UI::Content::ContentSiteAutomationProviderRequestedEventArgs &args) {
+        auto uiaProvider = this->EnsureUiaProvider();
+        args.AutomationProvider(uiaProvider);
+        args.Handled(true);
+      });
+
+  m_nextSiblingAutomationProviderRequestedToken = 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_previousSiblingAutomationProviderRequestedToken = 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);
+      });
+}
+
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

package/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,
@@ -54,9 +61,16 @@ struct ContentIslandComponentView : ContentIslandComponentViewT<ContentIslandCom
   winrt::event_token m_mountedToken;
   winrt::event_token m_unmountedToken;
   std::vector<winrt::Microsoft::ReactNative::ComponentView::LayoutMetricsChanged_revoker> m_layoutMetricChangedRevokers;
-#ifdef USE_EXPERIMENTAL_WINUI3
   winrt::Microsoft::UI::Content::ChildSiteLink m_childSiteLink{nullptr};
-#endif
+  winrt::Microsoft::UI::Input::InputFocusNavigationHost m_navigationHost{nullptr};
+  winrt::event_token m_navigationHostDepartFocusRequestedToken{};
+
+  // Automation
+  void ConfigureChildSiteLinkAutomation() noexcept;
+  winrt::event_token m_fragmentRootAutomationProviderRequestedToken{};
+  winrt::event_token m_parentAutomationProviderRequestedToken{};
+  winrt::event_token m_nextSiblingAutomationProviderRequestedToken{};
+  winrt::event_token m_previousSiblingAutomationProviderRequestedToken{};
 };
 
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

package/Microsoft.ReactNative/Fabric/Composition/FocusManager.cpp

@@ -14,8 +14,10 @@ int32_t LostFocusEventArgs::OriginalSource() noexcept {
   return m_originalSource;
 }
 
-GotFocusEventArgs::GotFocusEventArgs(const winrt::Microsoft::ReactNative::ComponentView &originalSource)
-    : m_originalSource(originalSource ? originalSource.Tag() : -1) {}
+GotFocusEventArgs::GotFocusEventArgs(
+    const winrt::Microsoft::ReactNative::ComponentView &originalSource,
+    winrt::Microsoft::ReactNative::FocusNavigationDirection direction)
+    : m_originalSource(originalSource ? originalSource.Tag() : -1), m_direction(direction) {}
 int32_t GotFocusEventArgs::OriginalSource() noexcept {
   return m_originalSource;
 }

package/Microsoft.ReactNative/Fabric/Composition/FocusManager.h

@@ -21,11 +21,19 @@ struct LostFocusEventArgs
 
 struct GotFocusEventArgs
     : winrt::implements<GotFocusEventArgs, winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs> {
-  GotFocusEventArgs(const winrt::Microsoft::ReactNative::ComponentView &originalSource);
+  GotFocusEventArgs(
+      const winrt::Microsoft::ReactNative::ComponentView &originalSource,
+      winrt::Microsoft::ReactNative::FocusNavigationDirection direction);
   int32_t OriginalSource() noexcept;
 
+  winrt::Microsoft::ReactNative::FocusNavigationDirection Direction() const noexcept {
+    return m_direction;
+  }
+
  private:
   const int32_t m_originalSource;
+  winrt::Microsoft::ReactNative::FocusNavigationDirection m_direction{
+      winrt::Microsoft::ReactNative::FocusNavigationDirection::None};
 };
 
 struct LosingFocusEventArgs