react-native-windows 0.75.4 → 0.76.0-preview.1

package/Microsoft.ReactNative/Fabric/ComponentView.cpp

@@ -256,16 +256,14 @@ void ComponentView::CustomCommandHandler(const HandleCommandDelegate &handler) n
   m_customCommandHandler = handler;
 }
 
-void ComponentView::HandleCommand(
-    winrt::hstring commandName,
-    const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
+void ComponentView::HandleCommand(const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept {
   if (m_customCommandHandler) {
-    m_customCommandHandler(*this, commandName, args);
+    m_customCommandHandler(*this, args);
   }
 }
 
-winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView *
-ComponentView::rootComponentView() noexcept {
+winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView *ComponentView::rootComponentView()
+    const noexcept {
   if (m_rootView)
     return m_rootView;
 
@@ -285,7 +283,7 @@ void ComponentView::parent(const winrt::Microsoft::ReactNative::ComponentView &p
     m_parent = parent;
     if (!parent) {
       if (oldRootView && oldRootView->GetFocusedComponent() == *this) {
-        oldRootView->TrySetFocusedComponent(oldParent);
+        oldRootView->TrySetFocusedComponent(oldParent, winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
       }
     }
     if (parent) {
@@ -424,7 +422,7 @@ void ComponentView::GotFocus(winrt::event_token const &token) noexcept {
 
 bool ComponentView::TryFocus() noexcept {
   if (auto root = rootComponentView()) {
-    return root->TrySetFocusedComponent(*get_strong());
+    return root->TrySetFocusedComponent(*get_strong(), winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
   }
 
   return false;
@@ -638,7 +636,7 @@ winrt::IInspectable ComponentView::EnsureUiaProvider() noexcept {
   return nullptr;
 }
 
-std::optional<std::string> ComponentView::getAcccessiblityValue() noexcept {
+std::optional<std::string> ComponentView::getAccessiblityValue() noexcept {
   return std::nullopt;
 }
 

package/Microsoft.ReactNative/Fabric/ComponentView.h

@@ -93,7 +93,8 @@ struct ComponentView : public ComponentViewT<ComponentView> {
       facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept;
   virtual void prepareForRecycle() noexcept;
   virtual facebook::react::Props::Shared props() noexcept;
-  virtual winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView *rootComponentView() noexcept;
+  virtual winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView *rootComponentView()
+      const noexcept;
   virtual void parent(const winrt::Microsoft::ReactNative::ComponentView &parent) noexcept;
   virtual winrt::Microsoft::ReactNative::ComponentView Parent() const noexcept;
   virtual winrt::IVectorView<winrt::Microsoft::ReactNative::ComponentView> Children() const noexcept;
@@ -198,7 +199,7 @@ struct ComponentView : public ComponentViewT<ComponentView> {
   virtual facebook::react::Tag
   hitTest(facebook::react::Point pt, facebook::react::Point &localPt, bool ignorePointerEvents = false) const noexcept;
   virtual winrt::IInspectable EnsureUiaProvider() noexcept;
-  virtual std::optional<std::string> getAcccessiblityValue() noexcept;
+  virtual std::optional<std::string> getAccessiblityValue() noexcept;
   virtual void setAcccessiblityValue(std::string &&value) noexcept;
   virtual bool getAcccessiblityIsReadOnly() noexcept;
   virtual ToggleState getToggleState() noexcept;
@@ -228,9 +229,7 @@ struct ComponentView : public ComponentViewT<ComponentView> {
   virtual void UnmountChildComponentView(
       const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
       uint32_t index) noexcept;
-  virtual void HandleCommand(
-      winrt::hstring commandName,
-      const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept;
+  virtual void HandleCommand(const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept;
   virtual void FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept;
   virtual void OnPointerEntered(
       const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept;
@@ -255,7 +254,7 @@ struct ComponentView : public ComponentViewT<ComponentView> {
   bool m_mounted : 1 {false};
   const facebook::react::Tag m_tag;
   winrt::IInspectable m_userData;
-  winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView *m_rootView{nullptr};
+  mutable winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView *m_rootView{nullptr};
   mutable winrt::Microsoft::ReactNative::Composition::implementation::Theme *m_theme{nullptr};
   const winrt::Microsoft::ReactNative::ReactContext m_reactContext;
   winrt::Microsoft::ReactNative::ComponentView m_parent{nullptr};

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

@@ -637,6 +637,10 @@ bool PointerPoint::IsPointerMessage(uint32_t message) const noexcept {
   return (message >= WM_POINTERFIRST && message <= WM_POINTERLAST);
 }
 
+winrt::Microsoft::UI::Input::PointerPoint PointerPoint::Inner() const noexcept {
+  return m_sysPointerPoint;
+}
+
 PointerRoutedEventArgs::PointerRoutedEventArgs(
     const winrt::Microsoft::ReactNative::ReactContext &context,
     facebook::react::Tag tag,

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

@@ -198,6 +198,7 @@ struct PointerPoint : PointerPointT<PointerPoint> {
   uint64_t Timestamp() const noexcept;
   winrt::Microsoft::ReactNative::Composition::Input::PointerPoint GetOffsetPoint(
       const winrt::Windows::Foundation::Point &offset) const noexcept;
+  winrt::Microsoft::UI::Input::PointerPoint Inner() const noexcept;
 
  private:
   bool IsPointerMessage(uint32_t message) const noexcept;

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

@@ -12,6 +12,7 @@
 
 #include <Windows.Graphics.Interop.h>
 #include <windows.ui.composition.interop.h>
+#include <winrt/Microsoft.ReactNative.Composition.Input.h>
 #include <winrt/Windows.Graphics.DirectX.Direct3D11.h>
 #include <winrt/Windows.UI.Composition.h>
 #include <winrt/Windows.UI.Composition.interactions.h>
@@ -744,14 +745,9 @@ struct CompScrollerVisual : winrt::implements<
     m_interactionTracker.MaxScale(1.0);
 
     m_visualInteractionSource = TTypeRedirects::VisualInteractionSource::Create(m_visual);
-
-    m_visualInteractionSource.PositionXSourceMode(TTypeRedirects::InteractionSourceMode::EnabledWithInertia);
-    m_visualInteractionSource.PositionYSourceMode(TTypeRedirects::InteractionSourceMode::EnabledWithInertia);
     m_visualInteractionSource.ScaleSourceMode(TTypeRedirects::InteractionSourceMode::Disabled);
-
-    m_visualInteractionSource.ManipulationRedirectionMode(
-        TTypeRedirects::VisualInteractionSourceRedirectionMode::CapableTouchpadAndPointerWheel);
     m_interactionTracker.InteractionSources().Add(m_visualInteractionSource);
+    UpdateInteractionModes();
 
     auto positionExpression = compositor.CreateExpressionAnimation(L"-tracker.Position");
     positionExpression.SetReferenceParameter(L"tracker", m_interactionTracker);
@@ -762,6 +758,44 @@ struct CompScrollerVisual : winrt::implements<
     return m_visual;
   }
 
+  void OnPointerPressed(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+    if constexpr (std::is_same_v<TTypeRedirects, MicrosoftTypeRedirects>) {
+      auto pointerDeviceType = args.Pointer().PointerDeviceType();
+      if (pointerDeviceType == winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType::Touch) {
+        m_visualInteractionSource.TryRedirectForManipulation(args.GetCurrentPoint(args.OriginalSource()).Inner());
+      }
+    }
+  }
+
+  bool Horizontal() const noexcept {
+    return m_horizontal;
+  }
+
+  void Horizontal(bool value) noexcept {
+    m_horizontal = value;
+
+    UpdateInteractionModes();
+  }
+
+  void UpdateInteractionModes() noexcept {
+    if (m_isScrollEnabled) {
+      m_visualInteractionSource.PositionXSourceMode(
+          m_horizontal ? TTypeRedirects::InteractionSourceMode::EnabledWithInertia
+                       : TTypeRedirects::InteractionSourceMode::Disabled);
+      m_visualInteractionSource.PositionYSourceMode(
+          m_horizontal ? TTypeRedirects::InteractionSourceMode::Disabled
+                       : TTypeRedirects::InteractionSourceMode::EnabledWithInertia);
+      m_visualInteractionSource.ManipulationRedirectionMode(
+          TTypeRedirects::VisualInteractionSourceRedirectionMode::CapableTouchpadAndPointerWheel);
+    } else {
+      m_visualInteractionSource.PositionXSourceMode(TTypeRedirects::InteractionSourceMode::Disabled);
+      m_visualInteractionSource.PositionYSourceMode(TTypeRedirects::InteractionSourceMode::Disabled);
+      m_visualInteractionSource.ManipulationRedirectionMode(
+          TTypeRedirects::VisualInteractionSourceRedirectionMode::Off);
+    }
+  }
+
   void InsertAt(
       const winrt::Microsoft::ReactNative::Composition::Experimental::IVisual &visual,
       uint32_t index) noexcept {
@@ -796,13 +830,8 @@ struct CompScrollerVisual : winrt::implements<
   }
 
   void ScrollEnabled(bool isScrollEnabled) noexcept {
-    if (isScrollEnabled) {
-      m_visualInteractionSource.ManipulationRedirectionMode(
-          TTypeRedirects::VisualInteractionSourceRedirectionMode::CapableTouchpadAndPointerWheel);
-    } else {
-      m_visualInteractionSource.ManipulationRedirectionMode(
-          TTypeRedirects::VisualInteractionSourceRedirectionMode::Off);
-    }
+    m_isScrollEnabled = isScrollEnabled;
+    UpdateInteractionModes();
   }
 
   void Opacity(float opacity) noexcept {
@@ -970,6 +999,8 @@ struct CompScrollerVisual : winrt::implements<
          0});
   }
 
+  bool m_isScrollEnabled{true};
+  bool m_horizontal{false};
   bool m_inertia{false};
   bool m_custom{false};
   winrt::Windows::Foundation::Numerics::float3 m_targetPosition;

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

@@ -125,6 +125,10 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::get_ProviderOptions(Prov
   return S_OK;
 }
 
+bool accessibilityValueHasValue(const facebook::react::AccessibilityValue &value) {
+  return (value.min.has_value() && value.max.has_value()) || value.now.has_value() || value.text.has_value();
+}
+
 HRESULT __stdcall CompositionDynamicAutomationProvider::GetPatternProvider(PATTERNID patternId, IUnknown **pRetVal) {
   if (pRetVal == nullptr)
     return E_POINTER;
@@ -135,11 +139,15 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetPatternProvider(PATTE
   if (strongView == nullptr)
     return UIA_E_ELEMENTNOTAVAILABLE;
 
+  auto compositionView = strongView.try_as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>();
+  if (compositionView == nullptr)
+    return UIA_E_ELEMENTNOTAVAILABLE;
   auto props = std::static_pointer_cast<const facebook::react::ViewProps>(
       winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->props());
   if (props == nullptr)
     return UIA_E_ELEMENTNOTAVAILABLE;
-  auto accessibilityRole = props->accessibilityRole;
+  auto accessibilityRole =
+      props->accessibilityRole.empty() ? compositionView->DefaultControlType() : props->accessibilityRole;
   // Invoke control pattern is used to support controls that do not maintain state
   // when activated but rather initiate or perform a single, unambiguous action.
   if (patternId == UIA_InvokePatternId &&
@@ -155,7 +163,15 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetPatternProvider(PATTE
     AddRef();
   }
 
-  if (patternId == UIA_ValuePatternId) {
+  if (patternId == UIA_ValuePatternId &&
+      (accessibilityRole == "textinput" || accessibilityRole == "searchbox" ||
+       (accessibilityRole == "button" && accessibilityValueHasValue(props->accessibilityValue)) ||
+       (accessibilityRole == "combobox" && accessibilityValueHasValue(props->accessibilityValue)) ||
+       (accessibilityRole == "link" && accessibilityValueHasValue(props->accessibilityValue)) ||
+       (accessibilityRole == "listitem" && accessibilityValueHasValue(props->accessibilityValue)) ||
+       (accessibilityRole == "progressbar" && accessibilityValueHasValue(props->accessibilityValue)) ||
+       (accessibilityRole == "adjustable" && accessibilityValueHasValue(props->accessibilityValue)) ||
+       (accessibilityRole == "spinbutton" && accessibilityValueHasValue(props->accessibilityValue)))) {
     *pRetVal = static_cast<IValueProvider *>(this);
     AddRef();
   }
@@ -365,6 +381,8 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::Invoke() {
   if (spProviderSimple != nullptr) {
     UiaRaiseAutomationEvent(spProviderSimple.get(), UIA_Invoke_InvokedEventId);
   }
+  DispatchAccessibilityAction(m_view, "invoke");
+  DispatchAccessibilityAction(m_view, "activate");
 
   return S_OK;
 }
@@ -378,6 +396,7 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::ScrollIntoView() {
   winrt::Microsoft::ReactNative::implementation::BringIntoViewOptions scrollOptions;
   winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)
       ->StartBringIntoView(std::move(scrollOptions));
+  DispatchAccessibilityAction(m_view, "scrollIntoView");
 
   return S_OK;
 }
@@ -406,6 +425,7 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::SetValue(LPCWSTR val) {
 
   winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)
       ->setAcccessiblityValue(winrt::to_string(val));
+  DispatchAccessibilityAction(m_view, "setValue");
   return S_OK;
 }
 
@@ -418,7 +438,7 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::get_Value(BSTR *pRetVal)
     return UIA_E_ELEMENTNOTAVAILABLE;
 
   *pRetVal = StringToBSTR(winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)
-                              ->getAcccessiblityValue()
+                              ->getAccessiblityValue()
                               .value_or(""));
   return S_OK;
 }
@@ -431,8 +451,24 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::get_IsReadOnly(BOOL *pRe
   if (!strongView)
     return UIA_E_ELEMENTNOTAVAILABLE;
 
-  *pRetVal = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)
-                 ->getAcccessiblityIsReadOnly();
+  auto props = std::static_pointer_cast<const facebook::react::ViewProps>(
+      winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->props());
+  if (props == nullptr)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+  auto accessibilityRole = props->accessibilityRole;
+  if (accessibilityRole.empty()) {
+    // Control is using default control type. Use default IsReadOnly value.
+    *pRetVal = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)
+                   ->getAcccessiblityIsReadOnly();
+  } else if (
+      accessibilityRole == "textinput" || accessibilityRole == "searchbox" || accessibilityRole == "adjustable" ||
+      accessibilityRole == "spinbutton" || accessibilityRole == "combobox") {
+    // Control is using customized control type which should not be IsReadOnly for value pattern.
+    *pRetVal = false;
+  } else {
+    // Control is using customized control type which should be IsReadOnly for value pattern.
+    *pRetVal = true;
+  }
   return S_OK;
 }
 
@@ -456,6 +492,7 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::Toggle() {
     return UIA_E_ELEMENTNOTAVAILABLE;
 
   winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->Toggle();
+  DispatchAccessibilityAction(m_view, "toggle");
   return S_OK;
 }
 

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

@@ -102,6 +102,7 @@ void CompositionHwndHost::UpdateSize() noexcept {
       // Do not relayout when minimized
       if (!IsIconic(m_hwnd)) {
         winrt::Microsoft::ReactNative::LayoutConstraints constraints;
+        constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::Undefined;
         constraints.MinimumSize = constraints.MaximumSize = size;
         m_compRootView.Arrange(constraints, {0, 0});
       }

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

@@ -248,23 +248,26 @@ void ComponentView::updateEventEmitter(facebook::react::EventEmitter::Shared con
   base_type::updateEventEmitter(eventEmitter);
 }
 
-void ComponentView::HandleCommand(
-    winrt::hstring commandName,
-    const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
+void ComponentView::HandleCommand(const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept {
+  base_type::HandleCommand(args);
+  if (args.Handled())
+    return;
+
+  auto commandName = args.CommandName();
   if (commandName == L"focus") {
     if (auto root = rootComponentView()) {
-      root->TrySetFocusedComponent(*get_strong());
+      root->TrySetFocusedComponent(*get_strong(), winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
     }
     return;
   }
   if (commandName == L"blur") {
     if (auto root = rootComponentView()) {
-      root->TrySetFocusedComponent(nullptr); // Todo store this component as previously focused element
+      root->TrySetFocusedComponent(
+          nullptr, winrt::Microsoft::ReactNative::FocusNavigationDirection::None); // Todo store this component as
+                                                                                   // previously focused element
     }
     return;
   }
-
-  base_type::HandleCommand(commandName, args);
 }
 
 bool ComponentView::CapturePointer(const winrt::Microsoft::ReactNative::Composition::Input::Pointer &pointer) noexcept {
@@ -518,7 +521,7 @@ static winrt::com_ptr<ID2D1PathGeometry> GenerateRoundedRectPathGeometry(
 }
 
 RoundedPathParameters GenerateRoundedPathParameters(
-    const facebook::react::RectangleCorners<float> &baseRadius,
+    const facebook::react::RectangleCorners<facebook::react::CornerRadii> &baseRadius,
     const facebook::react::RectangleEdges<float> &inset,
     const facebook::react::Size &pathSize) noexcept {
   RoundedPathParameters result;
@@ -527,10 +530,10 @@ RoundedPathParameters GenerateRoundedPathParameters(
     return result;
   }
 
-  float totalTopRadius = baseRadius.topLeft + baseRadius.topRight;
-  float totalRightRadius = baseRadius.topRight + baseRadius.bottomRight;
-  float totalBottomRadius = baseRadius.bottomRight + baseRadius.bottomLeft;
-  float totalLeftRadius = baseRadius.bottomLeft + baseRadius.topLeft;
+  float totalTopRadius = baseRadius.topLeft.horizontal + baseRadius.topRight.horizontal;
+  float totalRightRadius = baseRadius.topRight.vertical + baseRadius.bottomRight.vertical;
+  float totalBottomRadius = baseRadius.bottomRight.horizontal + baseRadius.bottomLeft.horizontal;
+  float totalLeftRadius = baseRadius.bottomLeft.vertical + baseRadius.topLeft.vertical;
 
   float maxHorizontalRadius = std::max(totalTopRadius, totalBottomRadius);
   float maxVerticalRadius = std::max(totalLeftRadius, totalRightRadius);
@@ -543,21 +546,21 @@ RoundedPathParameters GenerateRoundedPathParameters(
 
   float maxScale = std::max(1.0f, std::max(scaleHoriz, scaleVert));
 
-  result.topLeftRadiusX = std::max(0.0f, baseRadius.topLeft / maxScale - inset.left);
-  result.topLeftRadiusY = std::max(0.0f, baseRadius.topLeft / maxScale - inset.top);
-  result.topRightRadiusX = std::max(0.0f, baseRadius.topRight / maxScale - inset.right);
-  result.topRightRadiusY = std::max(0.0f, baseRadius.topRight / maxScale - inset.top);
-  result.bottomRightRadiusX = std::max(0.0f, baseRadius.bottomRight / maxScale - inset.right);
-  result.bottomRightRadiusY = std::max(0.0f, baseRadius.bottomRight / maxScale - inset.bottom);
-  result.bottomLeftRadiusX = std::max(0.0f, baseRadius.bottomLeft / maxScale - inset.left);
-  result.bottomLeftRadiusY = std::max(0.0f, baseRadius.bottomLeft / maxScale - inset.bottom);
+  result.topLeftRadiusX = std::max(0.0f, baseRadius.topLeft.horizontal / maxScale - inset.left);
+  result.topLeftRadiusY = std::max(0.0f, baseRadius.topLeft.vertical / maxScale - inset.top);
+  result.topRightRadiusX = std::max(0.0f, baseRadius.topRight.horizontal / maxScale - inset.right);
+  result.topRightRadiusY = std::max(0.0f, baseRadius.topRight.vertical / maxScale - inset.top);
+  result.bottomRightRadiusX = std::max(0.0f, baseRadius.bottomRight.horizontal / maxScale - inset.right);
+  result.bottomRightRadiusY = std::max(0.0f, baseRadius.bottomRight.vertical / maxScale - inset.bottom);
+  result.bottomLeftRadiusX = std::max(0.0f, baseRadius.bottomLeft.horizontal / maxScale - inset.left);
+  result.bottomLeftRadiusY = std::max(0.0f, baseRadius.bottomLeft.vertical / maxScale - inset.bottom);
 
   return result;
 }
 
 static winrt::com_ptr<ID2D1PathGeometry> GenerateRoundedRectPathGeometry(
     winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
-    const facebook::react::RectangleCorners<float> &baseRadius,
+    const facebook::react::RectangleCorners<facebook::react::CornerRadii> &baseRadius,
     const facebook::react::RectangleEdges<float> &inset,
     const facebook::react::RectangleEdges<float> &rectPathGeometry) noexcept {
   RoundedPathParameters params = GenerateRoundedPathParameters(
@@ -774,11 +777,11 @@ void DrawAllBorderLayers(
       spTextures[0], // Target Layer, Source Texture, Target Texture
       {0,
        0,
-       borderRadii.topLeft + borderWidths.left,
-       borderRadii.topLeft + borderWidths.top}, // Texture Left, Top, Width, Height
+       borderRadii.topLeft.vertical + borderWidths.left,
+       borderRadii.topLeft.horizontal + borderWidths.top}, // Texture Left, Top, Width, Height
       {AnchorPosition::Left, AnchorPosition::Top}, // Layer Anchor Point
       {0, 0}, // Layer Anchor Offset
-      {borderRadii.topLeft + borderWidths.left, borderRadii.topLeft + borderWidths.top}, // size
+      {borderRadii.topLeft.vertical + borderWidths.left, borderRadii.topLeft.horizontal + borderWidths.top}, // size
       {0.0f, 0.0f}, // relativeSize
       std::max(borderWidths.left, borderWidths.top),
       borderColors.left ? borderColors.left : borderColors.top,
@@ -791,13 +794,13 @@ void DrawAllBorderLayers(
       spBorderLayers[1],
       shape,
       spTextures[1],
-      {borderRadii.topLeft + borderWidths.left,
+      {borderRadii.topLeft.vertical + borderWidths.left,
        0,
-       textureWidth - (borderRadii.topRight + borderWidths.right),
+       textureWidth - (borderRadii.topRight.vertical + borderWidths.right),
        borderWidths.top},
       {AnchorPosition::Left, AnchorPosition::Top},
-      {borderRadii.topLeft + borderWidths.left, 0},
-      {-(borderRadii.topLeft + borderWidths.left + borderRadii.topRight + borderWidths.right),
+      {borderRadii.topLeft.vertical + borderWidths.left, 0},
+      {-(borderRadii.topLeft.vertical + borderWidths.left + borderRadii.topRight.vertical + borderWidths.right),
        borderWidths.top}, // size
       {1.0f, 0.0f}, // relativeSize
       borderWidths.top,
@@ -811,13 +814,13 @@ void DrawAllBorderLayers(
       spBorderLayers[2],
       shape,
       spTextures[2],
-      {textureWidth - (borderRadii.topRight + borderWidths.right),
+      {textureWidth - (borderRadii.topRight.vertical + borderWidths.right),
        0,
        textureWidth,
-       borderRadii.topRight + borderWidths.top},
+       borderRadii.topRight.horizontal + borderWidths.top},
       {AnchorPosition::Right, AnchorPosition::Top},
-      {-(borderRadii.topRight + borderWidths.right), 0},
-      {borderRadii.topRight + borderWidths.right, borderRadii.topRight + borderWidths.top},
+      {-(borderRadii.topRight.vertical + borderWidths.right), 0},
+      {borderRadii.topRight.vertical + borderWidths.right, borderRadii.topRight.horizontal + borderWidths.top},
       {0.0f, 0.0f},
       std::max(borderWidths.right, borderWidths.top),
       borderColors.right ? borderColors.right : borderColors.top,
@@ -831,13 +834,14 @@ void DrawAllBorderLayers(
       shape,
       spTextures[3],
       {textureWidth - borderWidths.right,
-       borderWidths.top + borderRadii.topRight,
+       borderWidths.top + borderRadii.topRight.horizontal,
        textureWidth,
-       textureHeight - (borderWidths.bottom + borderRadii.bottomRight)},
+       textureHeight - (borderWidths.bottom + borderRadii.bottomRight.horizontal)},
       {AnchorPosition::Right, AnchorPosition::Top},
-      {-borderWidths.right, borderWidths.top + borderRadii.topRight},
+      {-borderWidths.right, borderWidths.top + borderRadii.topRight.horizontal},
       {borderWidths.right,
-       -(borderWidths.top + borderRadii.topRight + borderWidths.bottom + borderRadii.bottomRight)}, // size
+       -(borderWidths.top + borderRadii.topRight.horizontal + borderWidths.bottom +
+         borderRadii.bottomRight.horizontal)}, // size
       {0.0f, 1.0f},
       borderWidths.right,
       borderColors.right,
@@ -850,13 +854,14 @@ void DrawAllBorderLayers(
       spBorderLayers[4],
       shape,
       spTextures[4],
-      {textureWidth - (borderWidths.right + borderRadii.bottomRight),
-       textureHeight - (borderWidths.bottom + borderRadii.bottomRight),
+      {textureWidth - (borderWidths.right + borderRadii.bottomRight.vertical),
+       textureHeight - (borderWidths.bottom + borderRadii.bottomRight.horizontal),
        textureWidth,
        textureHeight},
       {AnchorPosition::Right, AnchorPosition::Bottom},
-      {-(borderWidths.right + borderRadii.bottomRight), -(borderWidths.bottom + borderRadii.bottomRight)},
-      {borderWidths.right + borderRadii.bottomRight, borderWidths.bottom + borderRadii.bottomRight},
+      {-(borderWidths.right + borderRadii.bottomRight.vertical),
+       -(borderWidths.bottom + borderRadii.bottomRight.horizontal)},
+      {borderWidths.right + borderRadii.bottomRight.vertical, borderWidths.bottom + borderRadii.bottomRight.horizontal},
       {0, 0},
       std::max(borderWidths.right, borderWidths.bottom),
       borderColors.right ? borderColors.right : borderColors.bottom,
@@ -869,13 +874,13 @@ void DrawAllBorderLayers(
       spBorderLayers[5],
       shape,
       spTextures[5],
-      {borderWidths.left + borderRadii.bottomLeft,
+      {borderWidths.left + borderRadii.bottomLeft.vertical,
        textureHeight - borderWidths.bottom,
-       textureWidth - (borderWidths.right + borderRadii.bottomRight),
+       textureWidth - (borderWidths.right + borderRadii.bottomRight.vertical),
        textureHeight},
       {AnchorPosition::Left, AnchorPosition::Bottom},
-      {borderWidths.left + borderRadii.bottomLeft, -borderWidths.bottom},
-      {-(borderWidths.right + borderRadii.bottomLeft + borderWidths.left + borderRadii.bottomRight),
+      {borderWidths.left + borderRadii.bottomLeft.vertical, -borderWidths.bottom},
+      {-(borderWidths.right + borderRadii.bottomLeft.vertical + borderWidths.left + borderRadii.bottomRight.vertical),
        borderWidths.bottom},
       {1.0f, 0.0f},
       borderWidths.bottom,
@@ -890,12 +895,12 @@ void DrawAllBorderLayers(
       shape,
       spTextures[6],
       {0,
-       textureHeight - (borderWidths.bottom + borderRadii.bottomLeft),
-       borderWidths.left + borderRadii.bottomLeft,
+       textureHeight - (borderWidths.bottom + borderRadii.bottomLeft.horizontal),
+       borderWidths.left + borderRadii.bottomLeft.vertical,
        textureHeight},
       {AnchorPosition::Left, AnchorPosition::Bottom},
-      {0, -(borderWidths.bottom + borderRadii.bottomLeft)},
-      {borderWidths.left + borderRadii.bottomLeft, borderWidths.bottom + borderRadii.bottomLeft},
+      {0, -(borderWidths.bottom + borderRadii.bottomLeft.horizontal)},
+      {borderWidths.left + borderRadii.bottomLeft.vertical, borderWidths.bottom + borderRadii.bottomLeft.horizontal},
       {0, 0},
       std::max(borderWidths.left, borderWidths.bottom),
       borderColors.left ? borderColors.left : borderColors.bottom,
@@ -909,12 +914,13 @@ void DrawAllBorderLayers(
       shape,
       spTextures[7],
       {0,
-       borderWidths.top + borderRadii.topLeft,
+       borderWidths.top + borderRadii.topLeft.horizontal,
        borderWidths.left,
-       textureHeight - (borderWidths.bottom + borderRadii.bottomLeft)},
+       textureHeight - (borderWidths.bottom + borderRadii.bottomLeft.horizontal)},
       {AnchorPosition::Left, AnchorPosition::Top},
-      {0, borderWidths.top + borderRadii.topLeft},
-      {borderWidths.left, -(borderWidths.top + borderRadii.topLeft + borderWidths.bottom + borderRadii.bottomLeft)},
+      {0, borderWidths.top + borderRadii.topLeft.horizontal},
+      {borderWidths.left,
+       -(borderWidths.top + borderRadii.topLeft.horizontal + borderWidths.bottom + borderRadii.bottomLeft.horizontal)},
       {0, 1},
       borderWidths.left,
       borderColors.left,
@@ -923,7 +929,7 @@ void DrawAllBorderLayers(
 
 winrt::com_ptr<ID2D1GeometryGroup> GetGeometryForRoundedBorder(
     winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
-    const facebook::react::RectangleCorners<float> &radius,
+    const facebook::react::RectangleCorners<facebook::react::CornerRadii> &radius,
     const facebook::react::RectangleEdges<float> &inset,
     const facebook::react::RectangleEdges<float> &thickness,
     const facebook::react::RectangleEdges<float> &rectPathGeometry) noexcept {
@@ -993,10 +999,17 @@ winrt::com_ptr<ID2D1GeometryGroup> GetGeometryForRoundedBorder(
 // Also apply scale factor to the radii at this point
 void pixelRoundBorderRadii(facebook::react::BorderRadii &borderRadii, float scaleFactor) noexcept {
   // Always round radii down to avoid spikey circles
-  borderRadii.topLeft = std::floor(borderRadii.topLeft * scaleFactor);
-  borderRadii.topRight = std::floor(borderRadii.topRight * scaleFactor);
-  borderRadii.bottomLeft = std::floor(borderRadii.bottomLeft * scaleFactor);
-  borderRadii.bottomRight = std::floor(borderRadii.bottomRight * scaleFactor);
+  borderRadii.topLeft = {
+      std::floor(borderRadii.topLeft.horizontal * scaleFactor), std::floor(borderRadii.topLeft.vertical * scaleFactor)};
+  borderRadii.topRight = {
+      std::floor(borderRadii.topRight.horizontal * scaleFactor),
+      std::floor(borderRadii.topRight.vertical * scaleFactor)};
+  borderRadii.bottomLeft = {
+      std::floor(borderRadii.bottomLeft.horizontal * scaleFactor),
+      std::floor(borderRadii.bottomLeft.vertical * scaleFactor)};
+  borderRadii.bottomRight = {
+      std::floor(borderRadii.bottomRight.horizontal * scaleFactor),
+      std::floor(borderRadii.bottomRight.vertical * scaleFactor)};
 }
 
 void scaleAndPixelRoundBorderWidths(
@@ -1084,8 +1097,10 @@ bool ComponentView::TryUpdateSpecialBorderLayers(
   float extentWidth = layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor;
   float extentHeight = layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor;
 
-  if (borderMetrics.borderRadii.topLeft != 0 || borderMetrics.borderRadii.topRight != 0 ||
-      borderMetrics.borderRadii.bottomLeft != 0 || borderMetrics.borderRadii.bottomRight != 0) {
+  if (borderMetrics.borderRadii.topLeft.horizontal != 0 || borderMetrics.borderRadii.topRight.horizontal != 0 ||
+      borderMetrics.borderRadii.bottomLeft.horizontal != 0 || borderMetrics.borderRadii.bottomRight.horizontal != 0 ||
+      borderMetrics.borderRadii.topLeft.vertical != 0 || borderMetrics.borderRadii.topRight.vertical != 0 ||
+      borderMetrics.borderRadii.bottomLeft.vertical != 0 || borderMetrics.borderRadii.bottomRight.vertical != 0) {
     if (borderStyle == facebook::react::BorderStyle::Dotted || borderStyle == facebook::react::BorderStyle::Dashed) {
       // Because in DirectX geometry starts at the center of the stroke, we need to deflate
       // rectangle by half the stroke width to render correctly.
@@ -1310,8 +1325,9 @@ void ComponentView::updateAccessibilityProps(
       newViewProps.accessibilityLiveRegion);
 }
 
-std::optional<std::string> ComponentView::getAcccessiblityValue() noexcept {
-  return std::static_pointer_cast<const facebook::react::ViewProps>(props())->accessibilityValue.text;
+std::optional<std::string> ComponentView::getAccessiblityValue() noexcept {
+  return winrt::Microsoft::ReactNative::implementation::extractAccessibilityValue(
+      std::static_pointer_cast<const facebook::react::ViewProps>(props())->accessibilityValue);
 }
 
 void ComponentView::setAcccessiblityValue(std::string &&value) noexcept {
@@ -1335,8 +1351,10 @@ void ComponentView::updateBorderLayoutMetrics(
     const facebook::react::ViewProps &viewProps) noexcept {
   auto borderMetrics = resolveAndAlignBorderMetrics(layoutMetrics, viewProps);
 
-  if (borderMetrics.borderRadii.topLeft == 0 && borderMetrics.borderRadii.topRight == 0 &&
-      borderMetrics.borderRadii.bottomLeft == 0 && borderMetrics.borderRadii.bottomRight == 0) {
+  if (borderMetrics.borderRadii.topLeft.horizontal == 0 && borderMetrics.borderRadii.topRight.horizontal == 0 &&
+      borderMetrics.borderRadii.bottomLeft.horizontal == 0 && borderMetrics.borderRadii.bottomRight.horizontal == 0 &&
+      borderMetrics.borderRadii.topLeft.vertical == 0 && borderMetrics.borderRadii.topRight.vertical == 0 &&
+      borderMetrics.borderRadii.bottomLeft.vertical == 0 && borderMetrics.borderRadii.bottomRight.vertical == 0) {
     Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(nullptr);
   } else {
     winrt::com_ptr<ID2D1PathGeometry> pathGeometry = GenerateRoundedRectPathGeometry(

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

@@ -38,8 +38,7 @@ struct ComponentView : public ComponentViewT<
   virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual OuterVisual() const noexcept;
   void updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept override;
   const facebook::react::SharedViewEventEmitter &GetEventEmitter() const noexcept;
-  void HandleCommand(winrt::hstring commandName, const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept
-      override;
+  void HandleCommand(const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept override;
   facebook::react::Props::Shared props() noexcept override;
   virtual const facebook::react::SharedViewProps &viewProps() const noexcept {
     static facebook::react::SharedViewProps emptyProps;
@@ -92,7 +91,7 @@ struct ComponentView : public ComponentViewT<
   void EnsureTransformMatrixFacade() noexcept;
 
   winrt::IInspectable EnsureUiaProvider() noexcept override;
-  std::optional<std::string> getAcccessiblityValue() noexcept override;
+  std::optional<std::string> getAccessiblityValue() noexcept override;
   void setAcccessiblityValue(std::string &&value) noexcept override;
   bool getAcccessiblityIsReadOnly() noexcept override;
   ToggleState getToggleState() noexcept override;