react-native-windows 0.84.0 → 0.85.0-preview.2

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

@@ -32,21 +32,7 @@ bool IsHiddenByParent(const winrt::Microsoft::ReactNative::ComponentView &view)
 
 CompositionDynamicAutomationProvider::CompositionDynamicAutomationProvider(
     const winrt::Microsoft::ReactNative::Composition::ComponentView &componentView) noexcept
-    : m_view{componentView} {
-  auto strongView = m_view.view();
-
-  if (!strongView)
-    return;
-
-  auto props = std::static_pointer_cast<const facebook::react::ViewProps>(
-      winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->props());
-  if (!props)
-    return;
-
-  if (props->accessibilityState.has_value() && props->accessibilityState->selected.has_value()) {
-    AddSelectionItemsToContainer(this);
-  }
-}
+    : m_view{componentView} {}
 
 CompositionDynamicAutomationProvider::CompositionDynamicAutomationProvider(
     const winrt::Microsoft::ReactNative::Composition::ComponentView &componentView,
@@ -951,53 +937,49 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::get_IsSelectionRequired(
 }
 
 HRESULT __stdcall CompositionDynamicAutomationProvider::GetSelection(SAFEARRAY **pRetVal) {
+  if (pRetVal == nullptr)
+    return E_POINTER;
+
+  *pRetVal = nullptr;
+
   auto strongView = m_view.view();
 
   if (!strongView)
     return UIA_E_ELEMENTNOTAVAILABLE;
 
-  std::vector<int> selectedItems;
-  for (size_t i = 0; i < m_selectionItems.size(); i++) {
-    auto selectionItem = m_selectionItems.at(i);
-
-    winrt::com_ptr<IUnknown> unkSelectionItemProvider;
-    auto hr = selectionItem->GetPatternProvider(UIA_SelectionItemPatternId, unkSelectionItemProvider.put());
-    if (FAILED(hr))
-      return hr;
-
-    auto selectionItemProvider = unkSelectionItemProvider.try_as<ISelectionItemProvider>();
-    if (!selectionItemProvider)
-      return E_FAIL;
-
-    BOOL selected;
-    hr = selectionItemProvider->get_IsSelected(&selected);
-    if (hr == S_OK && selected) {
-      selectedItems.push_back(int(i));
-    }
-  }
+  auto selectedItems = GetSelectedItemsInSelectionContainer(strongView);
 
   *pRetVal = SafeArrayCreateVector(VT_UNKNOWN, 0, ULONG(selectedItems.size()));
   if (*pRetVal == nullptr)
     return E_OUTOFMEMORY;
 
   for (size_t i = 0; i < selectedItems.size(); i++) {
+    auto selectionItem =
+        selectedItems[i].try_as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>();
+    if (!selectionItem) {
+      SafeArrayDestroy(*pRetVal);
+      *pRetVal = nullptr;
+      return E_FAIL;
+    }
+
+    auto selectionItemProvider = selectionItem->EnsureUiaProvider().try_as<IRawElementProviderSimple>();
+    if (!selectionItemProvider) {
+      SafeArrayDestroy(*pRetVal);
+      *pRetVal = nullptr;
+      return E_FAIL;
+    }
+
     auto pos = static_cast<long>(i);
-    SafeArrayPutElement(*pRetVal, &pos, m_selectionItems.at(selectedItems.at(i)).get());
+    auto hr = SafeArrayPutElement(*pRetVal, &pos, selectionItemProvider.get());
+    if (FAILED(hr)) {
+      SafeArrayDestroy(*pRetVal);
+      *pRetVal = nullptr;
+      return hr;
+    }
   }
   return S_OK;
 }
 
-void CompositionDynamicAutomationProvider::AddToSelectionItems(winrt::com_ptr<IRawElementProviderSimple> &item) {
-  if (std::find(m_selectionItems.begin(), m_selectionItems.end(), item) != m_selectionItems.end()) {
-    return;
-  }
-  m_selectionItems.push_back(item);
-}
-
-void CompositionDynamicAutomationProvider::RemoveFromSelectionItems(winrt::com_ptr<IRawElementProviderSimple> &item) {
-  std::erase(m_selectionItems, item);
-}
-
 HRESULT __stdcall CompositionDynamicAutomationProvider::AddToSelection() {
   auto strongView = m_view.view();
 

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

@@ -95,8 +95,6 @@ class CompositionDynamicAutomationProvider : public winrt::implements<
   virtual HRESULT __stdcall RemoveFromSelection() override;
   virtual HRESULT __stdcall Select() override;
 
-  void AddToSelectionItems(winrt::com_ptr<IRawElementProviderSimple> &item);
-  void RemoveFromSelectionItems(winrt::com_ptr<IRawElementProviderSimple> &item);
   winrt::Microsoft::ReactNative::ComponentView GetSelectionContainer() noexcept;
 
   void SetChildSiteLink(winrt::Microsoft::UI::Content::ChildSiteLink childSiteLink) {
@@ -111,7 +109,6 @@ class CompositionDynamicAutomationProvider : public winrt::implements<
   ::Microsoft::ReactNative::ReactTaggedView m_view;
   winrt::com_ptr<ITextProvider2> m_textProvider;
   winrt::com_ptr<IAnnotationProvider> m_annotationProvider;
-  std::vector<winrt::com_ptr<IRawElementProviderSimple>> m_selectionItems;
   // Non-null when this UIA node is the peer of a ContentIslandComponentView.
   winrt::Microsoft::UI::Content::ChildSiteLink m_childSiteLink{nullptr};
 };

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

@@ -88,13 +88,13 @@ facebook::react::SharedEventEmitter EventEmitterForComponent(
   auto viewComponent = descriptor.view.as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>();
   auto emitter = viewComponent->GetEventEmitter();
   if (emitter)
-    return emitter;
+    return std::const_pointer_cast<facebook::react::ViewEventEmitter>(emitter);
 
   for (auto it = view.Parent(); it; it = it.Parent()) {
     auto emitter =
         it.as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>()->GetEventEmitter();
     if (emitter)
-      return emitter;
+      return std::const_pointer_cast<facebook::react::ViewEventEmitter>(emitter);
   }
 
   return nullptr;
@@ -1800,9 +1800,9 @@ void CompositionEventHandler::DispatchTouchEvent(
             if (IsPointerWithinInitialTree(*changedTouch)) {
               changedTouch->eventEmitter->onClick(pointerEvent);
             }
-          } /* else if (IsPointerWithinInitialTree(*changedTouch)) {
+          } else if (IsPointerWithinInitialTree(*changedTouch)) {
             changedTouch->eventEmitter->onAuxClick(pointerEvent);
-          } */
+          }
           break;
         case TouchEventType::Cancel:
         case TouchEventType::CaptureLost:

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

@@ -23,6 +23,7 @@
 #include "CompositionDynamicAutomationProvider.h"
 #include "CompositionHelpers.h"
 #include "RootComponentView.h"
+#include "SelectionItemAutomationEvent.h"
 #include "Theme.h"
 #include "TooltipService.h"
 #include "UiaHelpers.h"
@@ -38,9 +39,11 @@ constexpr float FOCUS_VISUAL_RADIUS = 3.0f;
 
 // m_outerVisual
 //   |
-//   ----- m_visual <-- Background / clip - Can be a custom visual depending on Component type
+//   ----- m_visual - Can be a custom visual depending on Component type
 //            |
-//            ----- Border Visuals x N (BorderPrimitive attached to m_visual)
+//            ----- m_backgroundVisual <-- Background / clip  (ComponentViewFeatures::Background)
+//            ----- Border Visuals x N (BorderPrimitive attached to m_visual) (ComponentViewFeatures::NativeBorder)
+//            ----- Outline Visuals x N(BorderPrimitive) (ComponentViewFeatures::NativeBorder)
 //            ----- <children> (default: directly in m_visual after border visuals)
 //            ----- m_childrenContainer (created on demand when overflow:hidden, children moved here)
 //   ------Focus Visual Container (created when hosting focus visuals)
@@ -79,18 +82,16 @@ facebook::react::Props::Shared ComponentView::props() noexcept {
 }
 
 void ComponentView::onThemeChanged() noexcept {
-  if ((m_flags & ComponentViewFeatures::Background) == ComponentViewFeatures::Background) {
-    if (viewProps()->backgroundColor) {
-      Visual().as<Experimental::ISpriteVisual>().Brush(theme()->Brush(*viewProps()->backgroundColor));
-    } else {
-      Visual().as<Experimental::ISpriteVisual>().Brush(nullptr);
-    }
-  }
+  if (m_backgroundVisual)
+    m_backgroundVisual.Brush(theme()->Brush(*viewProps()->backgroundColor));
 
   if (m_borderPrimitive) {
     m_borderPrimitive->onThemeChanged(
         m_layoutMetrics, BorderPrimitive::resolveAndAlignBorderMetrics(m_layoutMetrics, *viewProps()));
   }
+  if (m_outlinePrimitive) {
+    m_outlinePrimitive->onThemeChanged(outlineLayoutMetrics(), outlineBorderMetrics());
+  }
   if (m_componentHostingFocusVisual) {
     if (m_componentHostingFocusVisual->m_focusPrimitive->m_focusInnerPrimitive) {
       auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/);
@@ -154,10 +155,18 @@ void ComponentView::updateProps(
 
   if ((m_flags & ComponentViewFeatures::Background) == ComponentViewFeatures::Background) {
     if (oldViewProps.backgroundColor != newViewProps.backgroundColor) {
-      if (newViewProps.backgroundColor) {
-        Visual().as<Experimental::ISpriteVisual>().Brush(theme()->Brush(*newViewProps.backgroundColor));
+      if (facebook::react::isColorMeaningful(newViewProps.backgroundColor)) {
+        if (!m_backgroundVisual) {
+          m_backgroundVisual = m_compContext.CreateSpriteVisual();
+          m_backgroundVisual.RelativeSizeWithOffset({0, 0}, {1.0f, 1.0f});
+          Visual().InsertAt(m_backgroundVisual, 0);
+        }
+        m_backgroundVisual.Brush(theme()->Brush(*newViewProps.backgroundColor));
+        updateClippingPath(m_layoutMetrics, *viewProps());
       } else {
-        Visual().as<Experimental::ISpriteVisual>().Brush(nullptr);
+        if (m_backgroundVisual) {
+          m_backgroundVisual.Brush(nullptr);
+        }
       }
     }
   }
@@ -166,6 +175,16 @@ void ComponentView::updateProps(
     m_borderPrimitive->updateProps(oldViewProps, newViewProps);
   }
 
+  if (m_outlinePrimitive) {
+    if (oldViewProps.outlineOffset != newViewProps.outlineOffset ||
+        oldViewProps.outlineWidth != newViewProps.outlineWidth ||
+        oldViewProps.borderRadii != newViewProps.borderRadii ||
+        oldViewProps.outlineColor != newViewProps.outlineColor ||
+        oldViewProps.outlineStyle != newViewProps.outlineStyle) {
+      m_outlinePrimitive->markNeedsUpdate();
+    }
+  }
+
   if (m_componentHostingFocusVisual) {
     if (!newViewProps.enableFocusRing) {
       m_componentHostingFocusVisual->hostFocusVisual(false, get_strong());
@@ -200,8 +219,9 @@ void ComponentView::updateProps(
 void ComponentView::updateLayoutMetrics(
     facebook::react::LayoutMetrics const &layoutMetrics,
     facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
+  updateClippingPath(layoutMetrics, *viewProps());
+
   if ((m_flags & ComponentViewFeatures::NativeBorder) == ComponentViewFeatures::NativeBorder) {
-    updateClippingPath(layoutMetrics, *viewProps());
     OuterVisual().Size(
         {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
          layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
@@ -218,6 +238,9 @@ void ComponentView::updateLayoutMetrics(
     if (m_borderPrimitive) {
       m_borderPrimitive->markNeedsUpdate();
     }
+    if (m_outlinePrimitive) {
+      m_outlinePrimitive->markNeedsUpdate();
+    }
 
     if (m_componentHostingFocusVisual) {
       m_componentHostingFocusVisual->updateFocusLayoutMetrics();
@@ -301,6 +324,23 @@ void ComponentView::FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentView
     if (m_borderPrimitive) {
       m_borderPrimitive->finalize(m_layoutMetrics, borderMetrics);
     }
+
+    auto outlineMetrics = outlineBorderMetrics();
+    if (!m_outlinePrimitive && BorderPrimitive::requiresBorder(outlineMetrics, theme())) {
+      m_outlinePrimitive = std::make_shared<BorderPrimitive>(*this);
+      Visual().InsertAt(
+          m_outlinePrimitive->RootVisual(),
+          (m_backgroundVisual ? 1 : 0) + (m_borderPrimitive ? m_borderPrimitive->numberOfVisuals() : 0));
+    }
+
+    if (m_outlinePrimitive) {
+      auto offset = pixelRoundAndScaleBorderWidth(viewProps()->outlineWidth, m_layoutMetrics.pointScaleFactor) +
+          std::round(viewProps()->outlineOffset * m_layoutMetrics.pointScaleFactor);
+      m_outlinePrimitive->RootVisual().Offset({-offset, -offset, 0.0f});
+      m_outlinePrimitive->RootVisual().RelativeSizeWithOffset({offset * 2, offset * 2}, {1.0f, 1.0f});
+
+      m_outlinePrimitive->finalize(outlineLayoutMetrics(), outlineMetrics);
+    }
   }
 
   if (m_componentHostingFocusVisual) {
@@ -581,6 +621,67 @@ facebook::react::LayoutMetrics ComponentView::focusLayoutMetrics(bool inner) con
   return layoutMetrics;
 }
 
+facebook::react::LayoutMetrics ComponentView::outlineLayoutMetrics() const noexcept {
+  auto &props = *viewProps();
+  auto offset = (pixelRoundAndScaleBorderWidth(viewProps()->outlineWidth, m_layoutMetrics.pointScaleFactor) +
+                 std::round(viewProps()->outlineOffset * m_layoutMetrics.pointScaleFactor)) /
+      m_layoutMetrics.pointScaleFactor;
+  facebook::react::LayoutMetrics layoutMetrics = m_layoutMetrics;
+  layoutMetrics.frame.origin.x -= offset;
+  layoutMetrics.frame.origin.y -= offset;
+  layoutMetrics.frame.size.height += offset * 2;
+  layoutMetrics.frame.size.width += offset * 2;
+  return layoutMetrics;
+}
+
+facebook::react::BorderMetrics ComponentView::outlineBorderMetrics() const noexcept {
+  auto &props = *viewProps();
+
+  facebook::react::BorderMetrics metrics = BorderPrimitive::resolveAndAlignBorderMetrics(m_layoutMetrics, props);
+  metrics.borderColors.bottom = metrics.borderColors.left = metrics.borderColors.right = metrics.borderColors.top =
+      props.outlineColor;
+
+  auto offset = pixelRoundAndScaleBorderWidth(viewProps()->outlineWidth, m_layoutMetrics.pointScaleFactor) +
+      std::round(viewProps()->outlineOffset * m_layoutMetrics.pointScaleFactor);
+
+  if (metrics.borderRadii.bottomLeft.horizontal)
+    metrics.borderRadii.bottomLeft.horizontal = std::max(0.0f, metrics.borderRadii.bottomLeft.horizontal + offset);
+  if (metrics.borderRadii.bottomLeft.vertical)
+    metrics.borderRadii.bottomLeft.vertical = std::max(0.0f, metrics.borderRadii.bottomLeft.vertical + offset);
+  if (metrics.borderRadii.bottomRight.horizontal)
+    metrics.borderRadii.bottomRight.horizontal = std::max(0.0f, metrics.borderRadii.bottomRight.horizontal + offset);
+  if (metrics.borderRadii.bottomRight.vertical)
+    metrics.borderRadii.bottomRight.vertical = std::max(0.0f, metrics.borderRadii.bottomRight.vertical + offset);
+  if (metrics.borderRadii.topLeft.horizontal)
+    metrics.borderRadii.topLeft.horizontal = std::max(0.0f, metrics.borderRadii.topLeft.horizontal + offset);
+  if (metrics.borderRadii.topLeft.vertical)
+    metrics.borderRadii.topLeft.vertical = std::max(0.0f, metrics.borderRadii.topLeft.vertical + offset);
+  if (metrics.borderRadii.topRight.horizontal)
+    metrics.borderRadii.topRight.horizontal = std::max(0.0f, metrics.borderRadii.topRight.horizontal + offset);
+  if (metrics.borderRadii.topRight.vertical)
+    metrics.borderRadii.topRight.vertical = std::max(0.0f, metrics.borderRadii.topRight.vertical + offset);
+
+  static_assert(
+      facebook::react::BorderStyle::Solid ==
+      static_cast<facebook::react::BorderStyle>(facebook::react::OutlineStyle::Solid));
+  static_assert(
+      facebook::react::BorderStyle::Dotted ==
+      static_cast<facebook::react::BorderStyle>(facebook::react::OutlineStyle::Dotted));
+  static_assert(
+      facebook::react::BorderStyle::Dashed ==
+      static_cast<facebook::react::BorderStyle>(facebook::react::OutlineStyle::Dashed));
+  assert(
+      props.outlineStyle == facebook::react::OutlineStyle::Solid ||
+      props.outlineStyle == facebook::react::OutlineStyle::Dotted ||
+      props.outlineStyle == facebook::react::OutlineStyle::Dashed);
+  metrics.borderStyles.bottom = metrics.borderStyles.left = metrics.borderStyles.right = metrics.borderStyles.top =
+      static_cast<facebook::react::BorderStyle>(props.outlineStyle);
+
+  metrics.borderWidths.bottom = metrics.borderWidths.left = metrics.borderWidths.right = metrics.borderWidths.top =
+      pixelRoundAndScaleBorderWidth(viewProps()->outlineWidth, m_layoutMetrics.pointScaleFactor);
+  return metrics;
+}
+
 facebook::react::BorderMetrics ComponentView::focusBorderMetrics(
     bool inner,
     const facebook::react::LayoutMetrics &layoutMetrics) const noexcept {
@@ -654,7 +755,7 @@ void ComponentView::hostFocusVisual(bool show, winrt::com_ptr<ComponentView> vie
           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);
+          OuterVisual().InsertAt(m_focusPrimitive->m_focusVisual, (m_backgroundVisual ? 2 : 1));
         }
       }
 
@@ -863,19 +964,6 @@ void ComponentView::updateAccessibilityProps(
         static_cast<int>(winrt::Microsoft::ReactNative::implementation::GetExpandCollapseState(oldExpanded)),
         static_cast<int>(winrt::Microsoft::ReactNative::implementation::GetExpandCollapseState(newExpanded)));
   }
-
-  if ((oldViewProps.accessibilityState.has_value() && oldViewProps.accessibilityState->selected.has_value()) !=
-      ((newViewProps.accessibilityState.has_value() && newViewProps.accessibilityState->selected.has_value()))) {
-    EnsureUiaProvider();
-    if (m_innerAutomationProvider) {
-      if ((newViewProps.accessibilityState.has_value() && newViewProps.accessibilityState->selected.has_value())) {
-        winrt::Microsoft::ReactNative::implementation::AddSelectionItemsToContainer(m_innerAutomationProvider.get());
-      } else {
-        winrt::Microsoft::ReactNative::implementation::RemoveSelectionItemsFromContainer(
-            m_innerAutomationProvider.get());
-      }
-    }
-  }
 }
 
 std::optional<std::string> ComponentView::getAccessiblityValue() noexcept {
@@ -898,9 +986,23 @@ void ComponentView::Toggle() noexcept {
   // no-op
 }
 
+// This offset ensures that the m_borderPrimitive inserts its layers above the background
+int32_t ComponentView::borderInsertAtIndex() const noexcept {
+  return m_backgroundVisual ? 1 : 0;
+}
+
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ComponentView::VisualToApplyBackgroundClipTo()
+    const noexcept {
+  return m_backgroundVisual;
+}
+
 void ComponentView::updateClippingPath(
     facebook::react::LayoutMetrics const &layoutMetrics,
     const facebook::react::ViewProps &viewProps) noexcept {
+  auto clipTarget = VisualToApplyBackgroundClipTo();
+  if (!clipTarget)
+    return;
+
   auto borderMetrics = BorderPrimitive::resolveAndAlignBorderMetrics(layoutMetrics, viewProps);
 
   bool hasRoundedCorners = borderMetrics.borderRadii.topLeft.horizontal != 0 ||
@@ -919,10 +1021,10 @@ void ComponentView::updateClippingPath(
     winrt::com_ptr<ID2D1PathGeometry> pathGeometry = BorderPrimitive::GenerateRoundedRectPathGeometry(
         m_compContext, borderMetrics.borderRadii, {0, 0, 0, 0}, {0, 0, viewWidth, viewHeight});
 
-    Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(
+    clipTarget.as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(
         pathGeometry.get());
   } else {
-    Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(nullptr);
+    clipTarget.as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(nullptr);
   }
 }
 
@@ -934,6 +1036,9 @@ void ComponentView::indexOffsetForBorder(uint32_t &index) const noexcept {
   if (m_borderPrimitive) {
     index += m_borderPrimitive->numberOfVisuals();
   }
+  if (m_outlinePrimitive) {
+    index += 1;
+  }
 }
 
 void ComponentView::OnRenderingDeviceLost() noexcept {}
@@ -1084,7 +1189,7 @@ void ViewComponentView::ensureVisual() noexcept {
     } else {
       m_visual = createVisual();
     }
-    OuterVisual().InsertAt(m_visual, 0);
+    OuterVisual().InsertAt(m_visual, m_backgroundVisual ? 1 : 0);
   }
 }
 
@@ -1154,6 +1259,10 @@ void ViewComponentView::updateProps(
     facebook::react::Props::Shared const &oldProps) noexcept {
   const auto &oldViewProps = *std::static_pointer_cast<const facebook::react::ViewProps>(oldProps ? oldProps : m_props);
   const auto &newViewProps = *std::static_pointer_cast<const facebook::react::ViewProps>(props);
+  const auto oldSelected =
+      oldViewProps.accessibilityState.has_value() ? oldViewProps.accessibilityState->selected : std::nullopt;
+  const auto newSelected =
+      newViewProps.accessibilityState.has_value() ? newViewProps.accessibilityState->selected : std::nullopt;
 
   ensureVisual();
   if (oldViewProps.opacity != newViewProps.opacity) {
@@ -1169,6 +1278,20 @@ void ViewComponentView::updateProps(
   base_type::updateProps(props, oldProps);
 
   m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
+
+  if (UiaClientsAreListening() &&
+      winrt::Microsoft::ReactNative::implementation::ShouldRaiseSelectionItemStateChanged(
+          isMounted(), oldSelected, newSelected)) {
+    auto provider = EnsureUiaProvider();
+    winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+        provider, UIA_SelectionItemIsSelectedPropertyId, oldSelected.value_or(false), newSelected.value_or(false));
+
+    if (m_innerAutomationProvider) {
+      auto root = rootComponentView();
+      winrt::Microsoft::ReactNative::implementation::RaiseSelectionItemAutomationEvent(
+          m_innerAutomationProvider.get(), newSelected.value_or(false), root && root->GetFocusedComponent() == *this);
+    }
+  }
 }
 
 const winrt::Microsoft::ReactNative::IComponentProps ViewComponentView::userProps(
@@ -1382,7 +1505,7 @@ void ViewComponentView::updateChildrenClippingPath(
       }
 
       // Insert m_childrenContainer after border visuals in m_visual
-      Visual().InsertAt(m_childrenContainer, borderCount);
+      Visual().InsertAt(m_childrenContainer, (m_backgroundVisual ? 1 : 0) + borderCount);
 
       // Use relative sizing so container automatically tracks parent's size
       m_childrenContainer.RelativeSizeWithOffset({0, 0}, {1, 1});

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

@@ -111,6 +111,9 @@ struct ComponentView : public ComponentViewT<
   bool getAcccessiblityIsReadOnly() noexcept override;
   ToggleState getToggleState() noexcept override;
   void Toggle() noexcept override;
+
+  int32_t borderInsertAtIndex() const noexcept;
+
   virtual winrt::Microsoft::ReactNative::implementation::ClipState getClipState() noexcept;
 
   virtual std::pair<facebook::react::Cursor, HCURSOR> cursor() const noexcept;
@@ -130,6 +133,8 @@ struct ComponentView : public ComponentViewT<
   void ThemeChanged(winrt::event_token const &token) noexcept;
 
  protected:
+  virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual VisualToApplyBackgroundClipTo()
+      const noexcept;
   bool anyHitTestHelper(
       facebook::react::Tag &targetTag,
       facebook::react::Point &ptContent,
@@ -141,6 +146,7 @@ struct ComponentView : public ComponentViewT<
   winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext m_compContext;
   comp::CompositionPropertySet m_centerPropSet{nullptr};
   facebook::react::SharedViewEventEmitter m_eventEmitter;
+  winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_backgroundVisual{nullptr};
 
  private:
   void updateFocusLayoutMetrics() noexcept;
@@ -157,6 +163,9 @@ struct ComponentView : public ComponentViewT<
   facebook::react::BorderMetrics focusBorderMetrics(bool inner, const facebook::react::LayoutMetrics &layoutMetrics)
       const noexcept;
 
+  facebook::react::LayoutMetrics outlineLayoutMetrics() const noexcept;
+  facebook::react::BorderMetrics outlineBorderMetrics() const noexcept;
+
   virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual visualToHostFocus() noexcept;
   virtual winrt::com_ptr<ComponentView> focusVisualRoot(const facebook::react::Rect &focusRect) noexcept;
 
@@ -168,6 +177,7 @@ struct ComponentView : public ComponentViewT<
   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_outlinePrimitive;
   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;

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

@@ -189,14 +189,14 @@ void ImageComponentView::setStateAndResubscribeImageResponseObserver(
     facebook::react::ImageShadowNode::ConcreteState::Shared const &state) noexcept {
   if (m_state) {
     auto &observerCoordinator = m_state->getData().getImageRequest().getObserverCoordinator();
-    observerCoordinator.removeObserver(*m_imageResponseObserver);
+    observerCoordinator.removeObserver(m_imageResponseObserver);
   }
 
   m_state = state;
 
   if (m_state) {
     auto &observerCoordinator = m_state->getData().getImageRequest().getObserverCoordinator();
-    observerCoordinator.addObserver(*m_imageResponseObserver);
+    observerCoordinator.addObserver(m_imageResponseObserver);
   }
 }
 
@@ -237,6 +237,11 @@ void ImageComponentView::onThemeChanged() noexcept {
   Super::onThemeChanged();
 }
 
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ImageComponentView::VisualToApplyBackgroundClipTo()
+    const noexcept {
+  return Visual();
+}
+
 void ImageComponentView::ensureDrawingSurface() noexcept {
   assert(m_reactContext.UIDispatcher().HasThreadAccess());
 

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

@@ -52,6 +52,8 @@ struct ImageComponentView : ImageComponentViewT<ImageComponentView, ViewComponen
 
   virtual std::string DefaultControlType() const noexcept;
   static facebook::react::SharedViewProps defaultProps() noexcept;
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual VisualToApplyBackgroundClipTo()
+      const noexcept override;
 
   ImageComponentView(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,