react-native-windows 0.76.8 → 0.76.10

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

@@ -0,0 +1,298 @@
+#include "pch.h"
+#include "CompositionTextRangeProvider.h"
+#include <Fabric/ComponentView.h>
+#include <Fabric/Composition/ParagraphComponentView.h>
+#include <Fabric/Composition/TextInput/WindowsTextInputComponentView.h>
+#include <Fabric/platform/react/renderer/graphics/HostPlatformColor.h>
+#include <Unicode.h>
+#include "RootComponentView.h"
+#include "UiaHelpers.h"
+
+namespace winrt::Microsoft::ReactNative::implementation {
+
+CompositionTextRangeProvider::CompositionTextRangeProvider(
+    const winrt::Microsoft::ReactNative::Composition::ComponentView &componentView,
+    CompositionDynamicAutomationProvider *parentProvider) noexcept
+    : m_view{componentView} {
+  m_parentProvider.copy_from(parentProvider);
+}
+
+HRESULT __stdcall CompositionTextRangeProvider::Clone(ITextRangeProvider **pRetVal) {
+  // no-op
+  *pRetVal = nullptr;
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionTextRangeProvider::Compare(ITextRangeProvider *range, BOOL *pRetVal) {
+  // no-op
+  *pRetVal = false;
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionTextRangeProvider::CompareEndpoints(
+    TextPatternRangeEndpoint endpoint,
+    ITextRangeProvider *targetRange,
+    TextPatternRangeEndpoint targetEndpoint,
+    int *pRetVal) {
+  // no-op
+  *pRetVal = 0;
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionTextRangeProvider::ExpandToEnclosingUnit(TextUnit unit) {
+  // no-op
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionTextRangeProvider::FindAttribute(
+    TEXTATTRIBUTEID attributeId,
+    VARIANT val,
+    BOOL backward,
+    ITextRangeProvider **pRetVal) {
+  // no-op
+  *pRetVal = nullptr;
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionTextRangeProvider::FindText(
+    BSTR text,
+    BOOL backward,
+    BOOL ignoreCase,
+    ITextRangeProvider **pRetVal) {
+  // no-op
+  *pRetVal = nullptr;
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionTextRangeProvider::GetAttributeValue(TEXTATTRIBUTEID attributeId, VARIANT *pRetVal) {
+  if (pRetVal == nullptr)
+    return E_POINTER;
+  auto strongView = m_view.view();
+
+  if (!strongView)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  auto props = std::static_pointer_cast<const facebook::react::ParagraphProps>(
+      winrt::get_self<ComponentView>(strongView)->props());
+
+  auto textinputProps = std::static_pointer_cast<const facebook::react::WindowsTextInputProps>(
+      winrt::get_self<ComponentView>(strongView)->props());
+
+  auto isTextInput =
+      strongView.try_as<winrt::Microsoft::ReactNative::Composition::implementation::WindowsTextInputComponentView>();
+
+  if (props == nullptr)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  if (attributeId == UIA_BackgroundColorAttributeId) {
+    pRetVal->vt = VT_I4;
+    pRetVal->lVal = (*props->backgroundColor).AsColorRefWithAlpha();
+  } else if (attributeId == UIA_CapStyleAttributeId) {
+    pRetVal->vt = VT_I4;
+    auto fontVariant = facebook::react::FontVariant::Default;
+    auto textTransform = facebook::react::TextTransform::None;
+    if (props->textAttributes.fontVariant.has_value()) {
+      fontVariant = props->textAttributes.fontVariant.value();
+    }
+    if (props->textAttributes.textTransform.has_value()) {
+      textTransform = props->textAttributes.textTransform.value();
+    }
+    if (fontVariant == facebook::react::FontVariant::SmallCaps) {
+      return CapStyle_SmallCap;
+    } else if (textTransform == facebook::react::TextTransform::Capitalize) {
+      return CapStyle_Titling;
+    } else if (textTransform == facebook::react::TextTransform::Lowercase) {
+      return CapStyle_None;
+    } else if (textTransform == facebook::react::TextTransform::Uppercase) {
+      return CapStyle_AllCap;
+    }
+  } else if (attributeId == UIA_FontNameAttributeId) {
+    pRetVal->vt = VT_BSTR;
+    auto fontName = props->textAttributes.fontFamily;
+    if (fontName.empty()) {
+      fontName = "Segoe UI";
+    }
+    std::wstring wfontName(fontName.begin(), fontName.end());
+    pRetVal->bstrVal = SysAllocString(wfontName.c_str());
+  } else if (attributeId == UIA_FontSizeAttributeId) {
+    pRetVal->vt = VT_R8;
+    pRetVal->dblVal = props->textAttributes.fontSize;
+  } else if (attributeId == UIA_FontWeightAttributeId) {
+    if (props->textAttributes.fontWeight.has_value()) {
+      pRetVal->vt = VT_I4;
+      pRetVal->lVal = static_cast<long>(props->textAttributes.fontWeight.value());
+    }
+  } else if (attributeId == UIA_ForegroundColorAttributeId) {
+    pRetVal->vt = VT_I4;
+    pRetVal->lVal = (*props->textAttributes.foregroundColor).AsColorRefWithAlpha();
+  } else if (attributeId == UIA_IsItalicAttributeId) {
+    pRetVal->vt = VT_BOOL;
+    pRetVal->boolVal = (props->textAttributes.fontStyle.has_value() &&
+                        props->textAttributes.fontStyle.value() == facebook::react::FontStyle::Italic)
+        ? VARIANT_TRUE
+        : VARIANT_FALSE;
+  } else if (attributeId == UIA_IsReadOnlyAttributeId) {
+    pRetVal->vt = VT_BOOL;
+    pRetVal->boolVal = isTextInput ? textinputProps->editable ? VARIANT_FALSE : VARIANT_TRUE : VARIANT_TRUE;
+  } else if (attributeId == UIA_HorizontalTextAlignmentAttributeId) {
+    pRetVal->vt = VT_I4;
+    auto textAlign = facebook::react::TextAlignment::Center;
+    if (props->textAttributes.alignment.has_value()) {
+      textAlign = props->textAttributes.alignment.value();
+    }
+    if (textAlign == facebook::react::TextAlignment::Left) {
+      pRetVal->lVal = HorizontalTextAlignment_Left;
+    } else if (textAlign == facebook::react::TextAlignment::Right) {
+      pRetVal->lVal = HorizontalTextAlignment_Right;
+    } else if (textAlign == facebook::react::TextAlignment::Center) {
+      pRetVal->lVal = HorizontalTextAlignment_Centered;
+    } else if (textAlign == facebook::react::TextAlignment::Justified) {
+      pRetVal->lVal = HorizontalTextAlignment_Justified;
+    } else if (textAlign == facebook::react::TextAlignment::Natural) {
+      pRetVal->lVal = HorizontalTextAlignment_Left;
+    }
+  } else if (attributeId == UIA_StrikethroughColorAttributeId) {
+    if (props->textAttributes.textDecorationLineType.has_value() &&
+        (props->textAttributes.textDecorationLineType.value() ==
+             facebook::react::TextDecorationLineType::Strikethrough ||
+         props->textAttributes.textDecorationLineType.value() ==
+             facebook::react::TextDecorationLineType::UnderlineStrikethrough)) {
+      pRetVal->vt = VT_I4;
+      pRetVal->lVal = (*props->textAttributes.textDecorationColor).AsColorRefWithAlpha();
+    }
+  } else if (attributeId == UIA_StrikethroughStyleAttributeId) {
+    if (props->textAttributes.textDecorationLineType.has_value() &&
+        (props->textAttributes.textDecorationLineType.value() ==
+             facebook::react::TextDecorationLineType::Strikethrough ||
+         props->textAttributes.textDecorationLineType.value() ==
+             facebook::react::TextDecorationLineType::UnderlineStrikethrough)) {
+      pRetVal->vt = VT_I4;
+      auto style = props->textAttributes.textDecorationStyle.value();
+      pRetVal->lVal = GetTextDecorationLineStyle(style);
+    }
+  } else if (attributeId == UIA_UnderlineColorAttributeId) {
+    if (props->textAttributes.textDecorationLineType.has_value() &&
+        (props->textAttributes.textDecorationLineType.value() == facebook::react::TextDecorationLineType::Underline ||
+         props->textAttributes.textDecorationLineType.value() ==
+             facebook::react::TextDecorationLineType::UnderlineStrikethrough)) {
+      pRetVal->vt = VT_I4;
+      pRetVal->lVal = (*props->textAttributes.textDecorationColor).AsColorRefWithAlpha();
+    }
+  } else if (attributeId == UIA_UnderlineStyleAttributeId) {
+    if (props->textAttributes.textDecorationLineType.has_value() &&
+        (props->textAttributes.textDecorationLineType.value() == facebook::react::TextDecorationLineType::Underline ||
+         props->textAttributes.textDecorationLineType.value() ==
+             facebook::react::TextDecorationLineType::UnderlineStrikethrough)) {
+      pRetVal->vt = VT_I4;
+      auto style = props->textAttributes.textDecorationStyle.value();
+      pRetVal->lVal = GetTextDecorationLineStyle(style);
+    }
+  }
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionTextRangeProvider::GetBoundingRectangles(SAFEARRAY **pRetVal) {
+  if (pRetVal == nullptr)
+    return E_POINTER;
+  UiaRect rect;
+  auto hr = m_parentProvider->get_BoundingRectangle(&rect);
+  if (FAILED(hr))
+    return hr;
+  *pRetVal = SafeArrayCreateVector(VT_R8, 0, 4);
+  double *pData = nullptr;
+  hr = SafeArrayAccessData(*pRetVal, reinterpret_cast<void **>(&pData));
+  if (FAILED(hr))
+    return hr;
+  pData[0] = rect.left;
+  pData[1] = rect.top;
+  pData[2] = rect.width;
+  pData[3] = rect.height;
+  hr = SafeArrayUnaccessData(*pRetVal);
+  if (FAILED(hr))
+    return hr;
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionTextRangeProvider::GetChildren(SAFEARRAY **pRetVal) {
+  // no-op
+  *pRetVal = SafeArrayCreateVector(VT_UNKNOWN, 0, 0);
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionTextRangeProvider::GetEnclosingElement(IRawElementProviderSimple **pRetVal) {
+  // no-op
+  *pRetVal = nullptr;
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionTextRangeProvider::GetText(int maxLength, BSTR *pRetVal) {
+  if (pRetVal == nullptr)
+    return E_POINTER;
+  auto strongView = m_view.view();
+
+  if (!strongView)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+  auto paragraphView =
+      strongView.try_as<winrt::Microsoft::ReactNative::Composition::implementation::ParagraphComponentView>();
+  std::string text = "";
+  if (paragraphView) {
+    text = paragraphView->DefaultAccessibleName();
+  } else {
+    auto textInputView =
+        strongView.try_as<winrt::Microsoft::ReactNative::Composition::implementation::WindowsTextInputComponentView>();
+    if (textInputView) {
+      text = textInputView->getAccessiblityValue().value().empty() ? textInputView->DefaultAccessibleName()
+                                                                   : textInputView->getAccessiblityValue().value();
+    } else {
+      return UIA_E_NOTSUPPORTED;
+    }
+  }
+
+  std::wstring wtext(text.begin(), text.end());
+  *pRetVal = SysAllocString(wtext.c_str());
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionTextRangeProvider::Move(TextUnit unit, int count, int *pRetVal) {
+  // no-op
+  *pRetVal = 0;
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionTextRangeProvider::MoveEndpointByRange(
+    TextPatternRangeEndpoint endpoint,
+    ITextRangeProvider *targetRange,
+    TextPatternRangeEndpoint targetEndpoint) {
+  // no-op
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionTextRangeProvider::MoveEndpointByUnit(
+    TextPatternRangeEndpoint endpoint,
+    TextUnit unit,
+    int count,
+    int *pRetVal) {
+  // no-op
+  *pRetVal = 0;
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionTextRangeProvider::ScrollIntoView(BOOL alignToTop) {
+  // no-op
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionTextRangeProvider::AddToSelection() {
+  // no-op
+  return S_OK;
+}
+HRESULT __stdcall CompositionTextRangeProvider::RemoveFromSelection() {
+  // no-op
+  return S_OK;
+}
+HRESULT __stdcall CompositionTextRangeProvider::Select() {
+  // no-op
+  return S_OK;
+}
+
+} // namespace winrt::Microsoft::ReactNative::implementation

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

@@ -0,0 +1,59 @@
+#pragma once
+
+#include <Fabric/Composition/CompositionDynamicAutomationProvider.h>
+#include <Fabric/Composition/CompositionTextProvider.h>
+#include <Fabric/Composition/CompositionViewComponentView.h>
+#include <Fabric/ReactTaggedView.h>
+#include <UIAutomation.h>
+#include <inspectable.h>
+#include <uiautomationcore.h>
+
+namespace winrt::Microsoft::ReactNative::implementation {
+
+class CompositionTextRangeProvider : public winrt::implements<CompositionTextRangeProvider, ITextRangeProvider> {
+ public:
+  CompositionTextRangeProvider(
+      const winrt::Microsoft::ReactNative::Composition::ComponentView &componentView,
+      CompositionDynamicAutomationProvider *parentProvider) noexcept;
+
+  // inherited via ITextRangeProvider
+  virtual HRESULT __stdcall Clone(ITextRangeProvider **pRetVal) override;
+  virtual HRESULT __stdcall Compare(ITextRangeProvider *range, BOOL *pRetVal) override;
+  virtual HRESULT __stdcall CompareEndpoints(
+      TextPatternRangeEndpoint endpoint,
+      ITextRangeProvider *targetRange,
+      TextPatternRangeEndpoint targetEndpoint,
+      int *pRetVal) override;
+  virtual HRESULT __stdcall ExpandToEnclosingUnit(TextUnit unit) override;
+  virtual HRESULT __stdcall FindAttribute(
+      TEXTATTRIBUTEID attributeId,
+      VARIANT val,
+      BOOL backward,
+      ITextRangeProvider **pRetVal) override;
+  virtual HRESULT __stdcall FindText(BSTR text, BOOL backward, BOOL ignoreCase, ITextRangeProvider **pRetVal) override;
+  virtual HRESULT __stdcall GetAttributeValue(TEXTATTRIBUTEID attributeId, VARIANT *pRetVal) override;
+  virtual HRESULT __stdcall GetBoundingRectangles(SAFEARRAY **pRetVal) override;
+  virtual HRESULT __stdcall GetChildren(SAFEARRAY **pRetVal) override;
+  virtual HRESULT __stdcall GetEnclosingElement(IRawElementProviderSimple **pRetVal) override;
+  virtual HRESULT __stdcall GetText(int maxLength, BSTR *pRetVal) override;
+  virtual HRESULT __stdcall Move(TextUnit unit, int count, int *pRetVal) override;
+  virtual HRESULT __stdcall MoveEndpointByRange(
+      TextPatternRangeEndpoint endpoint,
+      ITextRangeProvider *targetRange,
+      TextPatternRangeEndpoint targetEndpoint) override;
+  virtual HRESULT __stdcall MoveEndpointByUnit(
+      TextPatternRangeEndpoint endpoint,
+      TextUnit unit,
+      int count,
+      int *pRetVal) override;
+  virtual HRESULT __stdcall ScrollIntoView(BOOL alignToTop) override;
+  virtual HRESULT __stdcall AddToSelection() override;
+  virtual HRESULT __stdcall RemoveFromSelection() override;
+  virtual HRESULT __stdcall Select() override;
+
+ private:
+  ::Microsoft::ReactNative::ReactTaggedView m_view;
+  winrt::com_ptr<CompositionDynamicAutomationProvider> m_parentProvider;
+};
+
+} // namespace winrt::Microsoft::ReactNative::implementation

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

@@ -33,6 +33,7 @@
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
 constexpr float FOCUS_VISUAL_WIDTH = 2.0f;
+constexpr float FOCUS_VISUAL_RADIUS = 3.0f;
 
 // m_outerVisual
 //   |
@@ -168,18 +169,21 @@ void ComponentView::updateProps(
       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);
+    // We have to check m_componentHostingFocusVisual again, as it can be set to null by above hostFocusVisual call
+    if (m_componentHostingFocusVisual) {
+      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);
   }
   if (oldViewProps.tooltip != newViewProps.tooltip) {
-    if (!m_tooltipTracked && newViewProps.tooltip) {
+    if (!m_tooltipTracked && newViewProps.tooltip && !newViewProps.tooltip->empty()) {
       TooltipService::GetCurrent(m_reactContext.Properties())->StartTracking(*this);
       m_tooltipTracked = true;
     } else if (m_tooltipTracked && !newViewProps.tooltip) {
@@ -225,29 +229,11 @@ void ComponentView::updateFocusLayoutMetrics() noexcept {
   facebook::react::RectangleEdges<bool> nudgeEdges;
   auto scaleFactor = m_focusPrimitive->m_focusVisualComponent->m_layoutMetrics.pointScaleFactor;
   if (m_focusPrimitive) {
+    auto nudgeEdges = m_focusPrimitive->m_focusVisualComponent->focusNudges();
     if (m_focusPrimitive->m_focusOuterPrimitive) {
       auto outerFocusMetrics = m_focusPrimitive->m_focusVisualComponent->focusLayoutMetrics(false /*inner*/);
-
-      if (outerFocusMetrics.frame.origin.x < 0) {
-        nudgeEdges.left = true;
-      }
-      if (outerFocusMetrics.frame.origin.y < 0) {
-        nudgeEdges.top = true;
-      }
-      if (outerFocusMetrics.frame.getMaxX() > m_layoutMetrics.frame.getMaxX()) {
-        nudgeEdges.right = true;
-      }
-      if (outerFocusMetrics.frame.getMaxY() > m_layoutMetrics.frame.getMaxY()) {
-        nudgeEdges.bottom = true;
-      }
-
       m_focusPrimitive->m_focusOuterPrimitive->RootVisual().Size(
-          {outerFocusMetrics.frame.size.width * scaleFactor -
-               (nudgeEdges.left ? (FOCUS_VISUAL_WIDTH * 2 * scaleFactor) : 0) -
-               (nudgeEdges.right ? (FOCUS_VISUAL_WIDTH * 2 * scaleFactor) : 0),
-           outerFocusMetrics.frame.size.height * scaleFactor -
-               (nudgeEdges.top ? (FOCUS_VISUAL_WIDTH * 2 * scaleFactor) : 0) -
-               (nudgeEdges.bottom ? (FOCUS_VISUAL_WIDTH * 2 * scaleFactor) : 0)});
+          {outerFocusMetrics.frame.size.width * scaleFactor, outerFocusMetrics.frame.size.height * scaleFactor});
       m_focusPrimitive->m_focusOuterPrimitive->RootVisual().Offset(
           {nudgeEdges.left ? 0 : -(FOCUS_VISUAL_WIDTH * 2 * scaleFactor),
            nudgeEdges.top ? 0 : -(FOCUS_VISUAL_WIDTH * 2 * scaleFactor),
@@ -258,15 +244,10 @@ void ComponentView::updateFocusLayoutMetrics() noexcept {
     if (m_focusPrimitive->m_focusInnerPrimitive) {
       auto innerFocusMetrics = m_focusPrimitive->m_focusVisualComponent->focusLayoutMetrics(true /*inner*/);
       m_focusPrimitive->m_focusInnerPrimitive->RootVisual().Size(
-          {innerFocusMetrics.frame.size.width * scaleFactor -
-               (nudgeEdges.left ? (FOCUS_VISUAL_WIDTH * scaleFactor) : 0) -
-               (nudgeEdges.right ? (FOCUS_VISUAL_WIDTH * scaleFactor) : 0),
-           innerFocusMetrics.frame.size.height * scaleFactor -
-               (nudgeEdges.top ? (FOCUS_VISUAL_WIDTH * scaleFactor) : 0) -
-               (nudgeEdges.bottom ? (FOCUS_VISUAL_WIDTH * scaleFactor) : 0)});
+          {innerFocusMetrics.frame.size.width * scaleFactor, innerFocusMetrics.frame.size.height * scaleFactor});
       m_focusPrimitive->m_focusInnerPrimitive->RootVisual().Offset(
-          {nudgeEdges.left ? 0 : -FOCUS_VISUAL_WIDTH * scaleFactor,
-           nudgeEdges.top ? 0 : -FOCUS_VISUAL_WIDTH * scaleFactor,
+          {nudgeEdges.left ? (FOCUS_VISUAL_WIDTH * scaleFactor) : (-FOCUS_VISUAL_WIDTH * scaleFactor),
+           nudgeEdges.top ? (FOCUS_VISUAL_WIDTH * scaleFactor) : (-FOCUS_VISUAL_WIDTH * scaleFactor),
            0.0f});
       m_focusPrimitive->m_focusInnerPrimitive->markNeedsUpdate();
     }
@@ -468,7 +449,7 @@ bool ComponentView::CapturePointer(const winrt::Microsoft::ReactNative::Composit
   if (!root)
     return false;
 
-  auto rootView{uiManager->GetReactNativeIsland(root->Tag())};
+  auto rootView{root->ReactNativeIsland()};
   if (!rootView) {
     return false;
   }
@@ -487,7 +468,7 @@ void ComponentView::ReleasePointerCapture(
   if (!root)
     return;
 
-  auto rootView{uiManager->GetReactNativeIsland(root->Tag())};
+  auto rootView{root->ReactNativeIsland()};
   if (!rootView) {
     return;
   }
@@ -535,7 +516,33 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ComponentView:
   return m_outerVisual ? m_outerVisual : Visual();
 }
 
-facebook::react::LayoutMetrics ComponentView::focusLayoutMetrics(bool inner) const noexcept {
+// If the focus visual would extend past the bounds of the hosting visual,
+// then we will nudge the focus visual back inside the hosting visuals bounds.
+facebook::react::RectangleEdges<bool> ComponentView::focusNudges() const noexcept {
+  facebook::react::RectangleEdges<bool> nudgeEdges;
+
+  // Always use outer focus metrics to determine if we need to nudge the focus rect over to fit
+  facebook::react::LayoutMetrics layoutMetrics = focusLayoutMetricsNoNudge(false /*inner*/);
+
+  Assert(m_componentHostingFocusVisual);
+
+  if (layoutMetrics.frame.origin.x < 0) {
+    nudgeEdges.left = true;
+  }
+  if (layoutMetrics.frame.origin.y < 0) {
+    nudgeEdges.top = true;
+  }
+  if (layoutMetrics.frame.getMaxX() > m_componentHostingFocusVisual->m_layoutMetrics.frame.getMaxX()) {
+    nudgeEdges.right = true;
+  }
+  if (layoutMetrics.frame.getMaxY() > m_componentHostingFocusVisual->m_layoutMetrics.frame.getMaxY()) {
+    nudgeEdges.bottom = true;
+  }
+
+  return nudgeEdges;
+}
+
+facebook::react::LayoutMetrics ComponentView::focusLayoutMetricsNoNudge(bool inner) const noexcept {
   facebook::react::LayoutMetrics layoutMetrics = m_layoutMetrics;
   layoutMetrics.frame.origin.x -= FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
   layoutMetrics.frame.origin.y -= FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
@@ -544,6 +551,28 @@ facebook::react::LayoutMetrics ComponentView::focusLayoutMetrics(bool inner) con
   return layoutMetrics;
 }
 
+facebook::react::LayoutMetrics ComponentView::focusLayoutMetrics(bool inner) const noexcept {
+  auto nudgeEdges = focusNudges();
+  auto layoutMetrics = focusLayoutMetricsNoNudge(inner);
+
+  if (nudgeEdges.left) {
+    layoutMetrics.frame.origin.x += FOCUS_VISUAL_WIDTH * 2;
+    layoutMetrics.frame.size.width -= FOCUS_VISUAL_WIDTH * 2;
+  }
+  if (nudgeEdges.top) {
+    layoutMetrics.frame.origin.y += FOCUS_VISUAL_WIDTH * 2;
+    layoutMetrics.frame.size.height -= FOCUS_VISUAL_WIDTH * 2;
+  }
+  if (nudgeEdges.right) {
+    layoutMetrics.frame.size.width -= FOCUS_VISUAL_WIDTH * 2;
+  }
+  if (nudgeEdges.bottom) {
+    layoutMetrics.frame.size.height -= FOCUS_VISUAL_WIDTH * 2;
+  }
+
+  return layoutMetrics;
+}
+
 facebook::react::BorderMetrics ComponentView::focusBorderMetrics(
     bool inner,
     const facebook::react::LayoutMetrics &layoutMetrics) const noexcept {
@@ -553,22 +582,31 @@ facebook::react::BorderMetrics ComponentView::focusBorderMetrics(
   innerColor.m_platformColor.push_back(inner ? "FocusVisualSecondary" : "FocusVisualPrimary");
   metrics.borderColors.bottom = metrics.borderColors.left = metrics.borderColors.right = metrics.borderColors.top =
       innerColor;
-  if (metrics.borderRadii.bottomLeft.horizontal != 0)
-    metrics.borderRadii.bottomLeft.horizontal += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.bottomLeft.vertical != 0)
-    metrics.borderRadii.bottomLeft.vertical += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.bottomRight.horizontal != 0)
-    metrics.borderRadii.bottomRight.horizontal += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.bottomRight.vertical != 0)
-    metrics.borderRadii.bottomRight.vertical += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.topLeft.horizontal != 0)
-    metrics.borderRadii.topLeft.horizontal += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.topLeft.vertical != 0)
-    metrics.borderRadii.topLeft.vertical += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.topRight.horizontal != 0)
-    metrics.borderRadii.topRight.horizontal += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.topRight.vertical != 0)
-    metrics.borderRadii.topRight.vertical += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+
+  metrics.borderRadii.bottomLeft.horizontal =
+      (metrics.borderRadii.bottomLeft.horizontal ? metrics.borderRadii.bottomLeft.horizontal : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.bottomLeft.vertical =
+      (metrics.borderRadii.bottomLeft.vertical ? metrics.borderRadii.bottomLeft.vertical : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.bottomRight.horizontal =
+      (metrics.borderRadii.bottomRight.horizontal ? metrics.borderRadii.bottomRight.horizontal : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.bottomRight.vertical =
+      (metrics.borderRadii.bottomRight.vertical ? metrics.borderRadii.bottomRight.vertical : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.topLeft.horizontal =
+      (metrics.borderRadii.topLeft.horizontal ? metrics.borderRadii.topLeft.horizontal : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.topLeft.vertical =
+      (metrics.borderRadii.topLeft.vertical ? metrics.borderRadii.topLeft.vertical : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.topRight.horizontal =
+      (metrics.borderRadii.topRight.horizontal ? metrics.borderRadii.topRight.horizontal : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.topRight.vertical =
+      (metrics.borderRadii.topRight.vertical ? metrics.borderRadii.topRight.vertical : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
 
   metrics.borderStyles.bottom = metrics.borderStyles.left = metrics.borderStyles.right = metrics.borderStyles.top =
       facebook::react::BorderStyle::Solid;
@@ -761,11 +799,23 @@ void ComponentView::updateAccessibilityProps(
       UIA_LiveSettingPropertyId,
       oldViewProps.accessibilityLiveRegion,
       newViewProps.accessibilityLiveRegion);
+
+  if ((oldViewProps.accessibilityState.has_value() && oldViewProps.accessibilityState->selected.has_value()) !=
+      ((newViewProps.accessibilityState.has_value() && newViewProps.accessibilityState->selected.has_value()))) {
+    auto compProvider =
+        m_uiaProvider.try_as<winrt::Microsoft::ReactNative::implementation::CompositionDynamicAutomationProvider>();
+    if (compProvider) {
+      if ((newViewProps.accessibilityState.has_value() && newViewProps.accessibilityState->selected.has_value())) {
+        winrt::Microsoft::ReactNative::implementation::AddSelectionItemsToContainer(compProvider.get());
+      } else {
+        winrt::Microsoft::ReactNative::implementation::RemoveSelectionItemsFromContainer(compProvider.get());
+      }
+    }
+  }
 }
 
 std::optional<std::string> ComponentView::getAccessiblityValue() noexcept {
-  return winrt::Microsoft::ReactNative::implementation::extractAccessibilityValue(
-      std::static_pointer_cast<const facebook::react::ViewProps>(props())->accessibilityValue);
+  return std::static_pointer_cast<const facebook::react::ViewProps>(props())->accessibilityValue.text.value();
 }
 
 void ComponentView::setAcccessiblityValue(std::string &&value) noexcept {
@@ -1318,7 +1368,7 @@ winrt::Microsoft::ReactNative::ComponentView lastDeepChild(
 }
 
 // Walks the tree calling the function fn on each node.
-// If fn returns true, then walkTree stops itterating over the tree, and returns true.
+// If fn returns true, then walkTree stops iterating over the tree, and returns true.
 // If the tree walk completes without fn returning true, then walkTree returns false.
 bool walkTree(
     const winrt::Microsoft::ReactNative::ComponentView &view,

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

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