react-native-windows 0.74.24 → 0.74.26

package/Microsoft.ReactNative/Fabric/ComponentView.cpp

@@ -363,6 +363,14 @@ RECT ComponentView::getClientRect() const noexcept {
   return {};
 }
 
+winrt::Windows::Foundation::Point ComponentView::ScreenToLocal(winrt::Windows::Foundation::Point pt) noexcept {
+  return rootComponentView()->ConvertScreenToLocal(pt);
+}
+
+winrt::Windows::Foundation::Point ComponentView::LocalToScreen(winrt::Windows::Foundation::Point pt) noexcept {
+  return rootComponentView()->ConvertLocalToScreen(pt);
+}
+
 // The offset from this elements parent to its children (accounts for things like scroll position)
 facebook::react::Point ComponentView::getClientOffset() const noexcept {
   assert(false);

package/Microsoft.ReactNative/Fabric/ComponentView.h

@@ -11,6 +11,7 @@
 #include <react/renderer/components/view/ViewProps.h>
 #include <react/renderer/core/LayoutMetrics.h>
 
+#include <ComponentView.Experimental.interop.h>
 #include <Fabric/Composition/Theme.h>
 #include <uiautomationcore.h>
 #include <winrt/Microsoft.ReactNative.Composition.Input.h>
@@ -77,7 +78,8 @@ struct UnmountChildComponentViewArgs : public UnmountChildComponentViewArgsT<Unm
   uint32_t m_index;
 };
 
-struct ComponentView : public ComponentViewT<ComponentView> {
+struct ComponentView
+    : public ComponentViewT<ComponentView, ::Microsoft::ReactNative::Composition::Experimental::IComponentViewInterop> {
   ComponentView(facebook::react::Tag tag, winrt::Microsoft::ReactNative::ReactContext const &reactContext);
 
   virtual std::vector<facebook::react::ComponentDescriptorProvider> supplementalComponentDescriptorProviders() noexcept;
@@ -105,6 +107,8 @@ struct ComponentView : public ComponentViewT<ComponentView> {
   // returns true if the fn ever returned true
   bool runOnChildren(bool forward, Mso::Functor<bool(ComponentView &)> &fn) noexcept;
   virtual RECT getClientRect() const noexcept;
+  winrt::Windows::Foundation::Point ScreenToLocal(winrt::Windows::Foundation::Point pt) noexcept;
+  winrt::Windows::Foundation::Point LocalToScreen(winrt::Windows::Foundation::Point pt) noexcept;
   // The offset from this elements parent to its children (accounts for things like scroll position)
   virtual facebook::react::Point getClientOffset() const noexcept;
   virtual void onLosingFocus(const winrt::Microsoft::ReactNative::LosingFocusEventArgs &args) noexcept;

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

@@ -818,6 +818,11 @@ uint8_t BorderPrimitive::numberOfVisuals() const noexcept {
   return m_numBorderVisuals;
 }
 
+void BorderPrimitive::setOuter(
+    winrt::Microsoft::ReactNative::Composition::implementation::ComponentView *outer) noexcept {
+  m_outer = outer;
+}
+
 bool BorderPrimitive::TryUpdateSpecialBorderLayers(
     winrt::Microsoft::ReactNative::Composition::implementation::Theme *theme,
     std::array<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual, SpecialBorderLayerCount>

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

@@ -29,6 +29,10 @@ struct BorderPrimitive {
 
   void markNeedsUpdate() noexcept;
 
+  // We hoist focus visuals up the tree to allow them to be higher in the z-order.
+  // This means a single BorderPrimitive may change the owning ComponentView as focus moves around
+  void setOuter(winrt::Microsoft::ReactNative::Composition::implementation::ComponentView *outer) noexcept;
+
   void updateProps(
       const facebook::react::ViewProps &oldViewProps,
       const facebook::react::ViewProps &newViewProps) noexcept;

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

@@ -189,40 +189,16 @@ HRESULT __stdcall CompositionRootAutomationProvider::ElementProviderFromPoint(
   *pRetVal = nullptr;
 
   if (auto rootView = rootComponentView()) {
-#ifdef USE_WINUI3
-    if (m_island) {
-      auto cc = m_island.CoordinateConverter();
-      auto local = cc.ConvertScreenToLocal(
-          winrt::Windows::Graphics::PointInt32{static_cast<int32_t>(x), static_cast<int32_t>(y)});
-      auto provider = rootView->UiaProviderFromPoint(
-          {static_cast<LONG>(local.X * m_island.RasterizationScale()),
-           static_cast<LONG>(local.Y * m_island.RasterizationScale())});
-      auto spFragment = provider.try_as<IRawElementProviderFragment>();
-      if (spFragment) {
-        *pRetVal = spFragment.detach();
-      }
-
-      return S_OK;
+    auto local = rootView->ConvertScreenToLocal({static_cast<float>(x), static_cast<float>(y)});
+    auto provider = rootView->UiaProviderFromPoint(
+        {static_cast<LONG>(local.X * rootView->LayoutMetrics().PointScaleFactor),
+         static_cast<LONG>(local.Y * rootView->LayoutMetrics().PointScaleFactor)});
+    auto spFragment = provider.try_as<IRawElementProviderFragment>();
+    if (spFragment) {
+      *pRetVal = spFragment.detach();
     }
-#endif
 
-    if (m_hwnd) {
-      if (!IsWindow(m_hwnd)) {
-        // TODO: Add support for non-HWND based hosting
-        assert(false);
-        return E_FAIL;
-      }
-
-      POINT clientPoint{static_cast<LONG>(x), static_cast<LONG>(y)};
-      ScreenToClient(m_hwnd, &clientPoint);
-
-      auto provider = rootView->UiaProviderFromPoint(clientPoint);
-      auto spFragment = provider.try_as<IRawElementProviderFragment>();
-      if (spFragment) {
-        *pRetVal = spFragment.detach();
-        return S_OK;
-      }
-    }
+    return S_OK;
   }
 
   AddRef();

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

@@ -40,7 +40,7 @@ constexpr float FOCUS_VISUAL_WIDTH = 2.0f;
 //   ----- m_visual <-- Background / clip - Can be a custom visual depending on Component type
 //            |
 //            ----- Border Visuals x N (BorderPrimitive attached to m_visual)
-//   ------Focus Visual Container
+//   ------Focus Visual Container (created when hosting focus visuals)
 //           |
 //           |------Inner Focus Visual
 //                     |
@@ -57,9 +57,6 @@ ComponentView::ComponentView(
     : base_type(tag, reactContext), m_compContext(compContext), m_flags(flags) {
   m_outerVisual = compContext.CreateSpriteVisual(); // TODO could be a raw ContainerVisual if we had a
                                                     // CreateContainerVisual in ICompositionContext
-  m_focusVisual = compContext.CreateSpriteVisual(); // TODO could be a raw ContainerVisual if we had a
-                                                    // CreateContainerVisual in ICompositionContext
-  m_outerVisual.InsertAt(m_focusVisual, 0);
 }
 
 ComponentView::~ComponentView() {
@@ -90,13 +87,17 @@ void ComponentView::onThemeChanged() noexcept {
     m_borderPrimitive->onThemeChanged(
         m_layoutMetrics, BorderPrimitive::resolveAndAlignBorderMetrics(m_layoutMetrics, *viewProps()));
   }
-  if (m_focusInnerPrimitive) {
-    auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/);
-    m_focusInnerPrimitive->onThemeChanged(innerFocusMetrics, focusBorderMetrics(true /*inner*/, innerFocusMetrics));
-  }
-  if (m_focusOuterPrimitive) {
-    auto outerFocusMetrics = focusLayoutMetrics(true /*inner*/);
-    m_focusOuterPrimitive->onThemeChanged(outerFocusMetrics, focusBorderMetrics(false /*inner*/, outerFocusMetrics));
+  if (m_componentHostingFocusVisual) {
+    if (m_componentHostingFocusVisual->m_focusPrimitive->m_focusInnerPrimitive) {
+      auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/);
+      m_componentHostingFocusVisual->m_focusPrimitive->m_focusInnerPrimitive->onThemeChanged(
+          innerFocusMetrics, focusBorderMetrics(true /*inner*/, innerFocusMetrics));
+    }
+    if (m_componentHostingFocusVisual->m_focusPrimitive->m_focusOuterPrimitive) {
+      auto outerFocusMetrics = focusLayoutMetrics(true /*inner*/);
+      m_componentHostingFocusVisual->m_focusPrimitive->m_focusOuterPrimitive->onThemeChanged(
+          outerFocusMetrics, focusBorderMetrics(false /*inner*/, outerFocusMetrics));
+    }
   }
 
   if ((m_flags & ComponentViewFeatures::ShadowProps) == ComponentViewFeatures::ShadowProps) {
@@ -160,14 +161,18 @@ void ComponentView::updateProps(
   if (m_borderPrimitive) {
     m_borderPrimitive->updateProps(oldViewProps, newViewProps);
   }
-  if (!newViewProps.enableFocusRing) {
-    showFocusVisual(false);
-  }
-  if (m_focusInnerPrimitive) {
-    m_focusInnerPrimitive->updateProps(oldViewProps, newViewProps);
-  }
-  if (m_focusOuterPrimitive) {
-    m_focusOuterPrimitive->updateProps(oldViewProps, newViewProps);
+
+  if (m_componentHostingFocusVisual) {
+    if (!newViewProps.enableFocusRing) {
+      m_componentHostingFocusVisual->hostFocusVisual(false, get_strong());
+    }
+
+    if (m_componentHostingFocusVisual->m_focusPrimitive->m_focusInnerPrimitive) {
+      m_componentHostingFocusVisual->m_focusPrimitive->m_focusInnerPrimitive->updateProps(oldViewProps, newViewProps);
+    }
+    if (m_componentHostingFocusVisual->m_focusPrimitive->m_focusOuterPrimitive) {
+      m_componentHostingFocusVisual->m_focusPrimitive->m_focusOuterPrimitive->updateProps(oldViewProps, newViewProps);
+    }
   }
   if ((m_flags & ComponentViewFeatures::ShadowProps) == ComponentViewFeatures::ShadowProps) {
     updateShadowProps(oldViewProps, newViewProps);
@@ -200,44 +205,70 @@ void ComponentView::updateLayoutMetrics(
     });
   }
 
-  updateFocusLayoutMetrics(layoutMetrics);
+  base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
 
   if (layoutMetrics != oldLayoutMetrics) {
     if (m_borderPrimitive) {
       m_borderPrimitive->markNeedsUpdate();
     }
-    if (m_focusInnerPrimitive) {
-      m_focusInnerPrimitive->markNeedsUpdate();
-    }
-    if (m_focusOuterPrimitive) {
-      m_focusOuterPrimitive->markNeedsUpdate();
+
+    if (m_componentHostingFocusVisual) {
+      m_componentHostingFocusVisual->updateFocusLayoutMetrics();
     }
   }
 
-  base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
   UpdateCenterPropertySet();
 }
 
-void ComponentView::updateFocusLayoutMetrics(facebook::react::LayoutMetrics const &layoutMetrics) noexcept {
-  if (m_focusInnerPrimitive) {
-    auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/);
-    m_focusInnerPrimitive->RootVisual().Size(
-        {innerFocusMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
-         innerFocusMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
-    m_focusInnerPrimitive->RootVisual().Offset(
-        {-FOCUS_VISUAL_WIDTH * layoutMetrics.pointScaleFactor,
-         -FOCUS_VISUAL_WIDTH * layoutMetrics.pointScaleFactor,
-         0.0f});
-  }
-  if (m_focusOuterPrimitive) {
-    auto outerFocusMetrics = focusLayoutMetrics(false /*inner*/);
-    m_focusOuterPrimitive->RootVisual().Size(
-        {outerFocusMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
-         outerFocusMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
-    m_focusOuterPrimitive->RootVisual().Offset(
-        {-(FOCUS_VISUAL_WIDTH * 2 * m_layoutMetrics.pointScaleFactor),
-         -(FOCUS_VISUAL_WIDTH * 2 * m_layoutMetrics.pointScaleFactor),
-         0.0f});
+void ComponentView::updateFocusLayoutMetrics() noexcept {
+  facebook::react::RectangleEdges<bool> nudgeEdges;
+  auto scaleFactor = m_focusPrimitive->m_focusVisualComponent->m_layoutMetrics.pointScaleFactor;
+  if (m_focusPrimitive) {
+    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)});
+      m_focusPrimitive->m_focusOuterPrimitive->RootVisual().Offset(
+          {nudgeEdges.left ? 0 : -(FOCUS_VISUAL_WIDTH * 2 * scaleFactor),
+           nudgeEdges.top ? 0 : -(FOCUS_VISUAL_WIDTH * 2 * scaleFactor),
+           0.0f});
+      m_focusPrimitive->m_focusOuterPrimitive->markNeedsUpdate();
+    }
+
+    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)});
+      m_focusPrimitive->m_focusInnerPrimitive->RootVisual().Offset(
+          {nudgeEdges.left ? 0 : -FOCUS_VISUAL_WIDTH * scaleFactor,
+           nudgeEdges.top ? 0 : -FOCUS_VISUAL_WIDTH * scaleFactor,
+           0.0f});
+      m_focusPrimitive->m_focusInnerPrimitive->markNeedsUpdate();
+    }
   }
 }
 
@@ -288,13 +319,17 @@ void ComponentView::FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentView
     }
   }
 
-  if (m_focusInnerPrimitive) {
-    auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/);
-    m_focusInnerPrimitive->finalize(innerFocusMetrics, focusBorderMetrics(true /*inner*/, innerFocusMetrics));
-  }
-  if (m_focusOuterPrimitive) {
-    auto outerFocusMetrics = focusLayoutMetrics(false /*inner*/);
-    m_focusOuterPrimitive->finalize(outerFocusMetrics, focusBorderMetrics(false /*inner*/, outerFocusMetrics));
+  if (m_componentHostingFocusVisual) {
+    if (m_componentHostingFocusVisual->m_focusPrimitive->m_focusInnerPrimitive) {
+      auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/);
+      m_componentHostingFocusVisual->m_focusPrimitive->m_focusInnerPrimitive->finalize(
+          innerFocusMetrics, focusBorderMetrics(true /*inner*/, innerFocusMetrics));
+    }
+    if (m_componentHostingFocusVisual->m_focusPrimitive->m_focusOuterPrimitive) {
+      auto outerFocusMetrics = focusLayoutMetrics(false /*inner*/);
+      m_componentHostingFocusVisual->m_focusPrimitive->m_focusOuterPrimitive->finalize(
+          outerFocusMetrics, focusBorderMetrics(false /*inner*/, outerFocusMetrics));
+    }
   }
 
   if (m_FinalizeTransform) {
@@ -308,7 +343,12 @@ void ComponentView::onLostFocus(
     const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
   if (args.OriginalSource() == Tag()) {
     m_eventEmitter->onBlur();
-    showFocusVisual(false);
+
+    if (m_componentHostingFocusVisual) {
+      auto s = get_strong();
+
+      m_componentHostingFocusVisual->hostFocusVisual(false, get_strong());
+    }
     if (m_uiaProvider) {
       winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
           m_uiaProvider, UIA_HasKeyboardFocusPropertyId, true, false);
@@ -317,12 +357,47 @@ void ComponentView::onLostFocus(
   base_type::onLostFocus(args);
 }
 
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ComponentView::visualToHostFocus() noexcept {
+  return OuterVisual();
+}
+
+// We want to host focus visuals as close to the focused component as possible.  However since the focus visuals extend
+// past the bounds of the component, in cases where additional components are positioned directly next to this one, we'd
+// get zorder issues causing most of the focus rect to be obscured. So we go up the tree until we find a component who's
+// bounds will fix the entire focus rect.
+winrt::com_ptr<ComponentView> ComponentView::focusVisualRoot(const facebook::react::Rect &focusRect) noexcept {
+  auto compVisual =
+      winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(OuterVisual());
+  if (!compVisual) {
+    return get_strong();
+    // When not using lifted composition, force the focus visual to host within its own component, as we do not support
+    // ParentForTransform
+  }
+
+  if (facebook::react::Rect::intersect(focusRect, m_layoutMetrics.frame) == focusRect) {
+    return get_strong();
+  }
+
+  if (!m_parent) {
+    return get_strong();
+  }
+
+  return m_parent.as<ComponentView>()->focusVisualRoot(
+      {{focusRect.origin.x + m_layoutMetrics.frame.origin.x, focusRect.origin.y + m_layoutMetrics.frame.origin.y},
+       focusRect.size});
+}
+
 void ComponentView::onGotFocus(
     const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
   if (args.OriginalSource() == Tag()) {
     m_eventEmitter->onFocus();
     if (viewProps()->enableFocusRing) {
-      showFocusVisual(true);
+      facebook::react::Rect focusRect = m_layoutMetrics.frame;
+      focusRect.origin.x -= (FOCUS_VISUAL_WIDTH * 2);
+      focusRect.origin.y -= (FOCUS_VISUAL_WIDTH * 2);
+      focusRect.size.width += (FOCUS_VISUAL_WIDTH * 2);
+      focusRect.size.height += (FOCUS_VISUAL_WIDTH * 2);
+      focusVisualRoot(focusRect)->hostFocusVisual(true, get_strong());
     }
     if (m_uiaProvider) {
       auto spProviderSimple = m_uiaProvider.try_as<IRawElementProviderSimple>();
@@ -493,39 +568,70 @@ facebook::react::BorderMetrics ComponentView::focusBorderMetrics(
   return metrics;
 }
 
-void ComponentView::showFocusVisual(bool show) noexcept {
-  if ((m_flags & ComponentViewFeatures::FocusVisual) == ComponentViewFeatures::FocusVisual) {
-    if (show && !m_showingFocusVisual) {
-      m_showingFocusVisual = true;
-
-      m_focusVisual.IsVisible(true);
-      assert(viewProps()->enableFocusRing);
-      if (!m_focusInnerPrimitive) {
-        m_focusInnerPrimitive = std::make_shared<BorderPrimitive>(*this);
-        m_focusVisual.InsertAt(m_focusInnerPrimitive->RootVisual(), 0);
+void ComponentView::hostFocusVisual(bool show, winrt::com_ptr<ComponentView> view) noexcept {
+  if ((view->m_flags & ComponentViewFeatures::FocusVisual) == ComponentViewFeatures::FocusVisual) {
+    // Any previous view showing focus visuals should have removed them before another shows it
+    assert(
+        !m_focusPrimitive || !m_focusPrimitive->m_focusVisualComponent ||
+        m_focusPrimitive->m_focusVisualComponent == view);
+    assert(
+        !m_focusPrimitive || !m_focusPrimitive->m_focusVisualComponent ||
+        view->m_componentHostingFocusVisual.get() == this);
+    if (show && !view->m_componentHostingFocusVisual) {
+      view->m_componentHostingFocusVisual = get_strong();
+
+      if (!m_focusPrimitive) {
+        m_focusPrimitive = std::make_unique<FocusPrimitive>();
       }
-      if (!m_focusOuterPrimitive) {
-        m_focusOuterPrimitive = std::make_shared<BorderPrimitive>(*this);
-        m_focusVisual.InsertAt(m_focusOuterPrimitive->RootVisual(), 0);
+      m_focusPrimitive->m_focusVisualComponent = view;
+
+      if (!m_focusPrimitive->m_focusVisual) {
+        m_focusPrimitive->m_focusVisual = m_compContext.CreateSpriteVisual();
+        auto hostingVisual =
+            winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(
+                visualToHostFocus())
+                .as<winrt::Microsoft::UI::Composition::ContainerVisual>();
+        if (hostingVisual) {
+          hostingVisual.Children().InsertAtTop(
+              winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(
+                  m_focusPrimitive->m_focusVisual));
+        } else {
+          assert(
+              view.get() ==
+              this); // When not using lifted comp, focus visuals should always host within their own component
+          OuterVisual().InsertAt(m_focusPrimitive->m_focusVisual, 1);
+        }
       }
-      updateFocusLayoutMetrics(m_layoutMetrics);
-      auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/);
-      m_focusInnerPrimitive->finalize(innerFocusMetrics, focusBorderMetrics(true /*inner*/, innerFocusMetrics));
-      auto outerFocusMetrics = focusLayoutMetrics(false /*inner*/);
-      m_focusOuterPrimitive->finalize(outerFocusMetrics, focusBorderMetrics(false /*inner*/, outerFocusMetrics));
-    } else if (!show && m_showingFocusVisual) {
-      m_showingFocusVisual = false;
-      m_focusVisual.IsVisible(false);
-      if (m_focusInnerPrimitive) {
-        m_focusInnerPrimitive->markNeedsUpdate();
-        auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/);
-        m_focusInnerPrimitive->finalize(innerFocusMetrics, focusBorderMetrics(true /*inner*/, innerFocusMetrics));
+
+      m_focusPrimitive->m_focusVisual.IsVisible(true);
+      assert(view->viewProps()->enableFocusRing);
+      if (!m_focusPrimitive->m_focusInnerPrimitive) {
+        m_focusPrimitive->m_focusInnerPrimitive = std::make_shared<BorderPrimitive>(*this);
+        m_focusPrimitive->m_focusVisual.InsertAt(m_focusPrimitive->m_focusInnerPrimitive->RootVisual(), 0);
+      }
+      if (!m_focusPrimitive->m_focusOuterPrimitive) {
+        m_focusPrimitive->m_focusOuterPrimitive = std::make_shared<BorderPrimitive>(*this);
+        m_focusPrimitive->m_focusVisual.InsertAt(m_focusPrimitive->m_focusOuterPrimitive->RootVisual(), 0);
       }
-      if (m_focusOuterPrimitive) {
-        m_focusOuterPrimitive->markNeedsUpdate();
-        auto outerFocusMetrics = focusLayoutMetrics(false /*inner*/);
-        m_focusOuterPrimitive->finalize(outerFocusMetrics, focusBorderMetrics(false /*inner*/, outerFocusMetrics));
+      if (auto focusVisual =
+              winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(
+                  m_focusPrimitive->m_focusVisual)) {
+        auto outerVisual =
+            winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(
+                view->OuterVisual());
+        focusVisual.ParentForTransform(outerVisual);
       }
+      updateFocusLayoutMetrics();
+      auto innerFocusMetrics = view->focusLayoutMetrics(true /*inner*/);
+      m_focusPrimitive->m_focusInnerPrimitive->finalize(
+          innerFocusMetrics, view->focusBorderMetrics(true /*inner*/, innerFocusMetrics));
+      auto outerFocusMetrics = view->focusLayoutMetrics(false /*inner*/);
+      m_focusPrimitive->m_focusOuterPrimitive->finalize(
+          outerFocusMetrics, view->focusBorderMetrics(false /*inner*/, outerFocusMetrics));
+    } else if (!show && view->m_componentHostingFocusVisual && m_focusPrimitive) {
+      m_focusPrimitive->m_focusVisualComponent = nullptr;
+      m_focusPrimitive->m_focusVisual.IsVisible(false);
+      view->m_componentHostingFocusVisual = nullptr;
     }
   }
 }

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

@@ -20,6 +20,13 @@ struct CompContext;
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
+struct FocusPrimitive {
+  std::shared_ptr<BorderPrimitive> m_focusInnerPrimitive;
+  std::shared_ptr<BorderPrimitive> m_focusOuterPrimitive;
+  winrt::com_ptr<ComponentView> m_focusVisualComponent{nullptr}; // The owning component of focus visuals being hosted
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_focusVisual{nullptr};
+};
+
 struct ComponentView : public ComponentViewT<
                            ComponentView,
                            winrt::Microsoft::ReactNative::implementation::ComponentView,
@@ -125,13 +132,10 @@ struct ComponentView : public ComponentViewT<
   facebook::react::SharedViewEventEmitter m_eventEmitter;
 
  private:
-  void updateFocusLayoutMetrics(facebook::react::LayoutMetrics const &layoutMetrics) noexcept;
+  void updateFocusLayoutMetrics() noexcept;
   void updateClippingPath(
       facebook::react::LayoutMetrics const &layoutMetrics,
       const facebook::react::ViewProps &viewProps) noexcept;
-  void finalizeFocusVisual(
-      facebook::react::LayoutMetrics const &layoutMetrics,
-      const facebook::react::ViewProps &viewProps) noexcept;
   void UpdateCenterPropertySet() noexcept;
   void FinalizeTransform(
       facebook::react::LayoutMetrics const &layoutMetrics,
@@ -140,16 +144,18 @@ struct ComponentView : public ComponentViewT<
   facebook::react::BorderMetrics focusBorderMetrics(bool inner, const facebook::react::LayoutMetrics &layoutMetrics)
       const noexcept;
 
+  virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual visualToHostFocus() noexcept;
+  virtual winrt::com_ptr<ComponentView> focusVisualRoot(const facebook::react::Rect &focusRect) noexcept;
+
   bool m_hasTransformMatrixFacade : 1 {false};
-  bool m_showingFocusVisual : 1 {false};
   bool m_FinalizeTransform : 1 {false};
   bool m_tooltipTracked : 1 {false};
   ComponentViewFeatures m_flags;
-  void showFocusVisual(bool show) noexcept;
+  void hostFocusVisual(bool show, winrt::com_ptr<ComponentView> view) noexcept;
+  winrt::com_ptr<ComponentView>
+      m_componentHostingFocusVisual; // The component that we are showing our focus visuals within
   std::shared_ptr<BorderPrimitive> m_borderPrimitive;
-  std::shared_ptr<BorderPrimitive> m_focusInnerPrimitive;
-  std::shared_ptr<BorderPrimitive> m_focusOuterPrimitive;
-  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_focusVisual{nullptr};
+  std::unique_ptr<FocusPrimitive> m_focusPrimitive{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_outerVisual{nullptr};
   winrt::event<winrt::Windows::Foundation::EventHandler<winrt::IInspectable>> m_themeChangedEvent;
 };
@@ -176,7 +182,6 @@ struct ViewComponentView : public ViewComponentViewT<
       facebook::react::LayoutMetrics const &layoutMetrics,
       facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;
   void prepareForRecycle() noexcept override;
-  bool TryFocus() noexcept;
   bool focusable() const noexcept override;
   void OnKeyDown(const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept override;
   void OnKeyUp(const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept override;

package/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp

@@ -76,7 +76,8 @@ void WindowsModalHostComponentView::EnsureModalCreated() {
   // get the root hwnd
   m_prevWindowID =
       winrt::Microsoft::ReactNative::ReactCoreInjection::GetTopLevelWindowId(m_reactContext.Properties().Handle());
-  auto roothwnd = reinterpret_cast<HWND>(m_prevWindowID);
+
+  auto roothwnd = GetHwndForParenting();
 
   m_hwnd = CreateWindow(
       c_modalWindowClassName,

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

@@ -360,6 +360,29 @@ winrt::IInspectable ReactNativeIsland::GetUiaProvider() noexcept {
   return m_uiaProvider;
 }
 
+winrt::Windows::Foundation::Point ReactNativeIsland::ConvertScreenToLocal(
+    winrt::Windows::Foundation::Point pt) noexcept {
+  if (m_island) {
+    auto pp = m_island.CoordinateConverter().ConvertScreenToLocal(
+        winrt::Windows::Graphics::PointInt32{static_cast<int32_t>(pt.X), static_cast<int32_t>(pt.Y)});
+    return {static_cast<float>(pp.X), static_cast<float>(pp.Y)};
+  }
+  POINT p{static_cast<LONG>(pt.X), static_cast<LONG>(pt.Y)};
+  ScreenToClient(m_hwnd, &p);
+  return {static_cast<float>(p.x) / m_scaleFactor, static_cast<float>(p.y) / m_scaleFactor};
+}
+
+winrt::Windows::Foundation::Point ReactNativeIsland::ConvertLocalToScreen(
+    winrt::Windows::Foundation::Point pt) noexcept {
+  if (m_island) {
+    auto pp = m_island.CoordinateConverter().ConvertLocalToScreen(pt);
+    return {static_cast<float>(pp.X), static_cast<float>(pp.Y)};
+  }
+  POINT p{static_cast<LONG>(pt.X * m_scaleFactor), static_cast<LONG>(pt.Y * m_scaleFactor)};
+  ClientToScreen(m_hwnd, &p);
+  return {static_cast<float>(p.x), static_cast<float>(p.y)};
+}
+
 void ReactNativeIsland::SetWindow(uint64_t hwnd) noexcept {
   m_hwnd = reinterpret_cast<HWND>(hwnd);
 }

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

@@ -114,6 +114,9 @@ struct ReactNativeIsland
   void SetWindow(uint64_t hwnd) noexcept;
   int64_t SendMessage(uint32_t msg, uint64_t wParam, int64_t lParam) noexcept;
 
+  winrt::Windows::Foundation::Point ConvertScreenToLocal(winrt::Windows::Foundation::Point pt) noexcept;
+  winrt::Windows::Foundation::Point ConvertLocalToScreen(winrt::Windows::Foundation::Point pt) noexcept;
+
   bool CapturePointer(
       const winrt::Microsoft::ReactNative::Composition::Input::Pointer &pointer,
       facebook::react::Tag tag) noexcept;

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

@@ -248,6 +248,26 @@ float RootComponentView::FontSizeMultiplier() const noexcept {
   return 1.0f;
 }
 
+winrt::Windows::Foundation::Point RootComponentView::ConvertScreenToLocal(
+    winrt::Windows::Foundation::Point pt) noexcept {
+  if (auto rootView = m_wkRootView.get()) {
+    return winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(rootView)
+        ->ConvertScreenToLocal(pt);
+  }
+  assert(false);
+  return {};
+}
+
+winrt::Windows::Foundation::Point RootComponentView::ConvertLocalToScreen(
+    winrt::Windows::Foundation::Point pt) noexcept {
+  if (auto rootView = m_wkRootView.get()) {
+    return winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(rootView)
+        ->ConvertLocalToScreen(pt);
+  }
+  assert(false);
+  return {};
+}
+
 winrt::Microsoft::UI::Content::ContentIsland RootComponentView::parentContentIsland() noexcept {
   if (auto rootView = m_wkRootView.get()) {
     return winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(rootView)->Island();

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

@@ -38,6 +38,9 @@ struct RootComponentView : RootComponentViewT<RootComponentView, ViewComponentVi
 
   RootComponentView *rootComponentView() const noexcept override;
 
+  winrt::Windows::Foundation::Point ConvertScreenToLocal(winrt::Windows::Foundation::Point pt) noexcept;
+  winrt::Windows::Foundation::Point ConvertLocalToScreen(winrt::Windows::Foundation::Point pt) noexcept;
+
   winrt::Microsoft::UI::Content::ContentIsland parentContentIsland() noexcept;
 
   // Index that visuals can be inserted into OuterVisual for debugging UI

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

@@ -1258,4 +1258,14 @@ std::string ScrollViewComponentView::DefaultControlType() const noexcept {
   return "scrollbar";
 }
 
+winrt::com_ptr<ComponentView> ScrollViewComponentView::focusVisualRoot(
+    const facebook::react::Rect &focusRect) noexcept {
+  return get_strong();
+}
+
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual
+ScrollViewComponentView::visualToHostFocus() noexcept {
+  return m_scrollVisual;
+}
+
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation