react-native-windows 0.0.0-canary.489 → 0.0.0-canary.490

package/Libraries/Components/Button.windows.js

@@ -342,6 +342,7 @@ class Button extends React.Component<
     if (Platform.OS === 'windows') {
       return (
         <Touchable
+          accessible={accessible}
           accessibilityLabel={accessibilityLabel}
           accessibilityHint={accessibilityHint}
           accessibilityLanguage={accessibilityLanguage}

package/Libraries/Pressability/Pressability.windows.js

@@ -721,6 +721,11 @@ export default class Pressability {
     }
   }
 
+  // [Windows]
+  _isDefaultPressButton(button) {
+    return !button; // Treat 0 or undefined as default press
+  }
+
   /**
    * Performs a transition between touchable states and identify any activations
    * or deactivations (and callback invocations).
@@ -771,7 +776,10 @@ export default class Pressability {
       }
       const {onLongPress, onPress, android_disableSound} = this._config;
 
-      if (onPress != null && getTouchFromPressEvent(event).button === 0) {
+      if (
+        onPress != null &&
+        this._isDefaultPressButton(getTouchFromPressEvent(event).button)
+      ) {
         const isPressCanceledByLongPress =
           onLongPress != null &&
           prevState === 'RESPONDER_ACTIVE_LONG_PRESS_IN' &&
@@ -800,7 +808,10 @@ export default class Pressability {
 
   _deactivate(event: PressEvent): void {
     const {onPressOut} = this._config;
-    if (onPressOut != null && getTouchFromPressEvent(event).button === 0) {
+    if (
+      onPressOut != null &&
+      this._isDefaultPressButton(getTouchFromPressEvent(event).button)
+    ) {
       const minPressDuration = normalizeDelay(
         this._config.minPressDuration,
         0,

package/Microsoft.ReactNative/Fabric/DWriteHelpers.cpp

@@ -0,0 +1,19 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "DWriteHelpers.h"
+
+namespace Microsoft::ReactNative {
+
+winrt::com_ptr<::IDWriteFactory> DWriteFactory() noexcept {
+  static winrt::com_ptr<::IDWriteFactory> s_dwriteFactory;
+  if (!s_dwriteFactory) {
+    winrt::check_hresult(::DWriteCreateFactory(
+        DWRITE_FACTORY_TYPE_SHARED, __uuidof(s_dwriteFactory), reinterpret_cast<::IUnknown **>(s_dwriteFactory.put())));
+  }
+  return s_dwriteFactory;
+}
+
+} // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/DWriteHelpers.h

@@ -0,0 +1,13 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include <dwrite.h>
+
+namespace Microsoft::ReactNative {
+
+winrt::com_ptr<::IDWriteFactory> DWriteFactory() noexcept;
+
+} // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/ParagraphComponentView.cpp

@@ -7,6 +7,7 @@
 #include "ParagraphComponentView.h"
 
 #include <UI.Xaml.Controls.h>
+#include <UI.Xaml.Documents.h>
 #include <Utils/ValueUtils.h>
 #include <dwrite.h>
 #include <react/renderer/components/text/ParagraphShadowNode.h>
@@ -30,14 +31,12 @@ void ParagraphComponentView::mountChildComponentView(
     uint32_t index) noexcept {
   auto v = static_cast<const ParagraphComponentView &>(childComponentView);
   assert(false);
-  // m_element.Children().InsertAt(index, v.Element());
 }
 
 void ParagraphComponentView::unmountChildComponentView(
     const IComponentView &childComponentView,
     uint32_t index) noexcept {
   assert(false);
-  // m_element.Children().RemoveAt(index);
 }
 
 void ParagraphComponentView::updateProps(
@@ -99,11 +98,40 @@ void ParagraphComponentView::updateState(
     facebook::react::State::Shared const &oldState) noexcept {
   const auto &newState = *std::static_pointer_cast<facebook::react::ParagraphShadowNode::ConcreteState const>(state);
 
-  // Only handle single/empty fragments right now -- ignore the other fragments
-  m_element.Text(
-      newState.getData().attributedString.getFragments().size()
-          ? Microsoft::Common::Unicode::Utf8ToUtf16(newState.getData().attributedString.getFragments()[0].string)
-          : L"");
+  m_element.Inlines().Clear();
+
+  for (const auto &fragment : newState.getData().attributedString.getFragments()) {
+    auto inlines = m_element.Inlines();
+
+    if (auto tdlt = fragment.textAttributes.textDecorationLineType; tdlt &&
+        (*tdlt == facebook::react::TextDecorationLineType::Underline ||
+         *tdlt == facebook::react::TextDecorationLineType::UnderlineStrikethrough)) {
+      auto underline = xaml::Documents::Underline();
+      inlines.Append(underline);
+      inlines = underline.Inlines();
+    }
+
+    if (fragment.textAttributes.fontStyle == facebook::react::FontStyle::Italic ||
+        fragment.textAttributes.fontStyle == facebook::react::FontStyle::Oblique) {
+      auto italic = xaml::Documents::Italic();
+      inlines.Append(italic);
+      inlines = italic.Inlines();
+    }
+
+    auto run = xaml::Documents::Run();
+    run.Text(winrt::to_hstring(fragment.string));
+    run.FontFamily(xaml::Media::FontFamily(
+        fragment.textAttributes.fontFamily.empty() ? L"Segoe UI"
+                                                   : winrt::to_hstring(fragment.textAttributes.fontFamily)));
+
+    run.FontWeight(
+        winrt::Windows::UI::Text::FontWeight{static_cast<uint16_t>(fragment.textAttributes.fontWeight.value_or(
+            static_cast<facebook::react::FontWeight>(DWRITE_FONT_WEIGHT_REGULAR)))});
+
+    run.FontSize(fragment.textAttributes.fontSize);
+    run.Foreground(fragment.textAttributes.foregroundColor.AsWindowsBrush());
+    inlines.Append(run);
+  }
 }
 void ParagraphComponentView::updateLayoutMetrics(
     facebook::react::LayoutMetrics const &layoutMetrics,
@@ -118,9 +146,7 @@ void ParagraphComponentView::updateLayoutMetrics(
   m_element.Width(layoutMetrics.frame.size.width);
   m_element.Height(layoutMetrics.frame.size.height);
 }
-void ParagraphComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {
-  // m_element.FinalizeProperties();
-}
+void ParagraphComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {}
 void ParagraphComponentView::prepareForRecycle() noexcept {}
 facebook::react::SharedProps ParagraphComponentView::props() noexcept {
   assert(false);

package/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.cpp

@@ -5,72 +5,125 @@
 
 #include "pch.h"
 
+#include <Fabric/DWriteHelpers.h>
+#include <dwrite.h>
 #include "TextLayoutManager.h"
 
 #include <unicode.h>
 
 namespace facebook::react {
 
-TextLayoutManager::~TextLayoutManager() {}
+void TextLayoutManager::GetTextLayout(
+    AttributedStringBox attributedStringBox,
+    ParagraphAttributes paragraphAttributes,
+    LayoutConstraints layoutConstraints,
+    const std::optional<TextAlignment> &textAlignment,
+    winrt::com_ptr<IDWriteTextLayout> &spTextLayout) noexcept {
+  if (attributedStringBox.getValue().isEmpty())
+    return;
+
+  auto fragments = attributedStringBox.getValue().getFragments();
+  auto outerFragment = fragments[0];
+
+  DWRITE_FONT_STYLE style = DWRITE_FONT_STYLE_NORMAL;
+  if (outerFragment.textAttributes.fontStyle == facebook::react::FontStyle::Italic)
+    style = DWRITE_FONT_STYLE_ITALIC;
+  else if (outerFragment.textAttributes.fontStyle == facebook::react::FontStyle::Oblique)
+    style = DWRITE_FONT_STYLE_OBLIQUE;
+
+  winrt::com_ptr<IDWriteTextFormat> spTextFormat;
+  winrt::check_hresult(Microsoft::ReactNative::DWriteFactory()->CreateTextFormat(
+      outerFragment.textAttributes.fontFamily.empty()
+          ? L"Segoe UI"
+          : Microsoft::Common::Unicode::Utf8ToUtf16(outerFragment.textAttributes.fontFamily).c_str(),
+      nullptr, // Font collection (nullptr sets it to use the system font collection).
+      static_cast<DWRITE_FONT_WEIGHT>(outerFragment.textAttributes.fontWeight.value_or(
+          static_cast<facebook::react::FontWeight>(DWRITE_FONT_WEIGHT_REGULAR))),
+      style,
+      DWRITE_FONT_STRETCH_NORMAL,
+      outerFragment.textAttributes.fontSize,
+      L"",
+      spTextFormat.put()));
+
+  DWRITE_TEXT_ALIGNMENT alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
+  if (textAlignment) {
+    switch (*textAlignment) {
+      case facebook::react::TextAlignment::Center:
+        alignment = DWRITE_TEXT_ALIGNMENT_CENTER;
+        break;
+      case facebook::react::TextAlignment::Justified:
+        alignment = DWRITE_TEXT_ALIGNMENT_JUSTIFIED;
+        break;
+      case facebook::react::TextAlignment::Left:
+        alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
+        break;
+      case facebook::react::TextAlignment::Right:
+        alignment = DWRITE_TEXT_ALIGNMENT_TRAILING;
+        break;
+      // TODO use LTR values
+      case facebook::react::TextAlignment::Natural:
+        alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
+        break;
+      default:
+        assert(false);
+    }
+  }
+  winrt::check_hresult(spTextFormat->SetTextAlignment(alignment));
+
+  auto str = Microsoft::Common::Unicode::Utf8ToUtf16(attributedStringBox.getValue().getString());
+
+  winrt::check_hresult(Microsoft::ReactNative::DWriteFactory()->CreateTextLayout(
+      str.c_str(), // The string to be laid out and formatted.
+      static_cast<UINT32>(str.length()), // The length of the string.
+      spTextFormat.get(), // The text format to apply to the string (contains font information, etc).
+      layoutConstraints.maximumSize.width, // The width of the layout box.
+      layoutConstraints.maximumSize.height, // The height of the layout box.
+      spTextLayout.put() // The IDWriteTextLayout interface pointer.
+      ));
+
+  unsigned int position = 0;
+  unsigned int length = 0;
+  for (const auto &fragment : fragments) {
+    length = static_cast<UINT32>(fragment.string.length());
+    DWRITE_TEXT_RANGE range = {position, length};
+    TextAttributes attributes = fragment.textAttributes;
+    DWRITE_FONT_STYLE fragmentStyle = DWRITE_FONT_STYLE_NORMAL;
+    if (attributes.fontStyle == facebook::react::FontStyle::Italic)
+      fragmentStyle = DWRITE_FONT_STYLE_ITALIC;
+    else if (attributes.fontStyle == facebook::react::FontStyle::Oblique)
+      fragmentStyle = DWRITE_FONT_STYLE_OBLIQUE;
+
+    winrt::check_hresult(spTextLayout->SetFontFamilyName(
+        attributes.fontFamily.empty() ? L"Segoe UI"
+                                      : Microsoft::Common::Unicode::Utf8ToUtf16(attributes.fontFamily).c_str(),
+        range));
+    winrt::check_hresult(spTextLayout->SetFontWeight(
+        static_cast<DWRITE_FONT_WEIGHT>(
+            attributes.fontWeight.value_or(static_cast<facebook::react::FontWeight>(DWRITE_FONT_WEIGHT_REGULAR))),
+        range));
+    winrt::check_hresult(spTextLayout->SetFontStyle(fragmentStyle, range));
+    winrt::check_hresult(spTextLayout->SetFontSize(attributes.fontSize, range));
+
+    position += length;
+  }
+}
 
 TextMeasurement TextLayoutManager::measure(
     AttributedStringBox attributedStringBox,
     ParagraphAttributes paragraphAttributes,
     LayoutConstraints layoutConstraints) const {
-  winrt::com_ptr<IDWriteFactory> spDWriteFactory;
+  winrt::com_ptr<IDWriteTextLayout> spTextLayout;
 
-  if (!m_spDWriteFactory) {
-    DWriteCreateFactory(
-        DWRITE_FACTORY_TYPE_SHARED, __uuidof(IDWriteFactory), reinterpret_cast<IUnknown **>(m_spDWriteFactory.put()));
-  }
+  GetTextLayout(attributedStringBox, paragraphAttributes, layoutConstraints, TextAlignment::Left, spTextLayout);
 
-  for (auto &fragment : attributedStringBox.getValue().getFragments()) {
-    DWRITE_FONT_STYLE style = DWRITE_FONT_STYLE_NORMAL;
-    if (fragment.textAttributes.fontStyle == facebook::react::FontStyle::Italic)
-      style = DWRITE_FONT_STYLE_ITALIC;
-    else if (fragment.textAttributes.fontStyle == facebook::react::FontStyle::Oblique)
-      style = DWRITE_FONT_STYLE_OBLIQUE;
-
-    winrt::com_ptr<IDWriteTextFormat> spTextFormat;
-    m_spDWriteFactory->CreateTextFormat(
-        fragment.textAttributes.fontFamily.empty()
-            ? L"Segoe UI"
-            : Microsoft::Common::Unicode::Utf8ToUtf16(fragment.textAttributes.fontFamily).c_str(),
-        nullptr, // Font collection (nullptr sets it to use the system font collection).
-        static_cast<DWRITE_FONT_WEIGHT>(fragment.textAttributes.fontWeight.value_or(
-            static_cast<facebook::react::FontWeight>(DWRITE_FONT_WEIGHT_REGULAR))),
-        style,
-        DWRITE_FONT_STRETCH_NORMAL,
-        fragment.textAttributes.fontSize * fragment.textAttributes.fontSizeMultiplier,
-        L"en-us",
-        spTextFormat.put());
-
-    auto str = Microsoft::Common::Unicode::Utf8ToUtf16(fragment.string);
-
-    winrt::com_ptr<IDWriteTextLayout> spTextLayout;
-    // TODO - For now assuming fragment.textAttributes.fontSizeMultiplier is the same as the pointScaleFactor
-    m_spDWriteFactory->CreateTextLayout(
-        str.c_str(), // The string to be laid out and formatted.
-        static_cast<UINT32>(str.length()), // The length of the string.
-        spTextFormat.get(), // The text format to apply to the string (contains font information, etc).
-        layoutConstraints.maximumSize.width *
-            fragment.textAttributes.fontSizeMultiplier, // The width of the layout box.
-        layoutConstraints.maximumSize.height *
-            fragment.textAttributes.fontSizeMultiplier, // The height of the layout box.
-        spTextLayout.put() // The IDWriteTextLayout interface pointer.
-    );
-
-    TextMeasurement tm;
-    DWRITE_TEXT_METRICS dtm;
-    spTextLayout->GetMetrics(&dtm);
-    tm.size = {
-        dtm.width / fragment.textAttributes.fontSizeMultiplier,
-        dtm.height / fragment.textAttributes.fontSizeMultiplier};
-    return tm;
+  TextMeasurement tm{};
+  if (spTextLayout) {
+    DWRITE_TEXT_METRICS dtm{};
+    winrt::check_hresult(spTextLayout->GetMetrics(&dtm));
+    tm.size = {dtm.width, dtm.height};
   }
-
-  return {};
-};
+  return tm;
+}
 
 /**
  * Measures an AttributedString on the platform, as identified by some
@@ -81,8 +134,7 @@ TextMeasurement TextLayoutManager::measureCachedSpannableById(
     ParagraphAttributes const &paragraphAttributes,
     LayoutConstraints layoutConstraints) const {
   assert(false);
-  TextMeasurement tm;
-  return tm;
+  return {};
 }
 
 LinesMeasurements TextLayoutManager::measureLines(
@@ -90,9 +142,7 @@ LinesMeasurements TextLayoutManager::measureLines(
     ParagraphAttributes paragraphAttributes,
     Size size) const {
   assert(false);
-
-  std::vector<LineMeasurement> paragraphLines{};
-  return paragraphLines;
+  return {};
 }
 
 void *TextLayoutManager::getNativeTextLayoutManager() const {

package/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.h

@@ -28,7 +28,7 @@ class TextLayoutManager {
 
 #pragma region required interface from core cxx cross platform impl
   TextLayoutManager(const ContextContainer::Shared &contextContainer) : m_contextContainer(contextContainer){};
-  ~TextLayoutManager();
+  ~TextLayoutManager() = default;
 
   /*
    * Measures `attributedStringBox` using native text rendering infrastructure.
@@ -60,11 +60,17 @@ class TextLayoutManager {
    */
   void *getNativeTextLayoutManager() const;
 
+  static void GetTextLayout(
+      AttributedStringBox attributedStringBox,
+      ParagraphAttributes paragraphAttributes,
+      LayoutConstraints layoutConstraints,
+      const std::optional<TextAlignment> &textAlignment,
+      winrt::com_ptr<IDWriteTextLayout> &spTextLayout) noexcept;
+
 #pragma endregion
 
  private:
   ContextContainer::Shared m_contextContainer;
-  mutable winrt::com_ptr<IDWriteFactory> m_spDWriteFactory;
 };
 
 } // namespace react

package/Microsoft.ReactNative/Microsoft.ReactNative.vcxproj

@@ -507,6 +507,7 @@
     <ClCompile Include="$(ReactNativeWindowsDir)codegen\react\components\rnwcore\ShadowNodes.cpp" />
     <ClCompile Include="Fabric\ActivityIndicatorComponentView.cpp" />
     <ClCompile Include="Fabric\ComponentViewRegistry.cpp" />
+    <ClCompile Include="Fabric\DWriteHelpers.cpp" />
     <ClCompile Include="Fabric\FabricUIManagerModule.cpp" />
     <ClCompile Include="Fabric\ImageComponentView.cpp" />
     <ClCompile Include="Fabric\ImageManager.cpp" />

package/Microsoft.ReactNative/Views/ControlViewManager.cpp

@@ -12,6 +12,8 @@
 #include <JSValueWriter.h>
 #include <Utils/PropertyUtils.h>
 
+#include <UI.Xaml.Automation.Peers.h>
+
 #ifdef USE_WINUI3
 #define TAB_INDEX_PROPERTY xaml::UIElement::TabIndexProperty
 #define TAB_STOP_PROPERTY xaml::UIElement::IsTabStopProperty
@@ -80,11 +82,18 @@ bool ControlViewManager::UpdateProperty(
       }
     } else if (propertyName == "focusable") {
       if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Boolean) {
+        IsFocusable(propertyValue.AsBoolean());
         control.IsTabStop(propertyValue.AsBoolean());
       } else if (propertyValue.IsNull()) {
         control.ClearValue(TAB_STOP_PROPERTY());
+        IsFocusable(false);
       }
     } else {
+      if (propertyName == "accessible") {
+        if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Boolean) {
+          IsAccessible(propertyValue.AsBoolean());
+        }
+      }
       ret = Super::UpdateProperty(nodeToUpdate, propertyName, propertyValue);
     }
   }
@@ -96,6 +105,16 @@ bool ControlViewManager::UpdateProperty(
   return ret;
 }
 
+void ControlViewManager::OnPropertiesUpdated(ShadowNodeBase *node) {
+  auto control(node->GetView().as<xaml::Controls::Control>());
+
+  if (IsAccessible() != IsFocusable()) {
+    control.IsTabStop(false);
+    xaml::Automation::AutomationProperties::SetAccessibilityView(
+        control, xaml::Automation::Peers::AccessibilityView::Raw);
+  }
+}
+
 void ControlViewManager::OnViewCreated(XamlView view) {
   // Set the default cornerRadius to 0 for Control: WinUI usually default cornerRadius to 2
   // Only works on >= RS5 because Control.CornerRadius is only supported >= RS5
@@ -104,4 +123,17 @@ void ControlViewManager::OnViewCreated(XamlView view) {
   }
 }
 
+void ControlViewManager::IsAccessible(bool accessible) {
+  m_isAccessible = accessible;
+}
+bool ControlViewManager::IsAccessible() {
+  return m_isAccessible;
+}
+void ControlViewManager::IsFocusable(bool focusable) {
+  m_isFocusable = focusable;
+}
+bool ControlViewManager::IsFocusable() {
+  return m_isFocusable;
+}
+
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Views/ControlViewManager.h

@@ -24,6 +24,17 @@ class REACTWINDOWS_EXPORT ControlViewManager : public FrameworkElementViewManage
 
  protected:
   void OnViewCreated(XamlView view) override;
+
+  void OnPropertiesUpdated(ShadowNodeBase *node) override;
+
+ private:
+  void IsAccessible(bool accessible);
+  bool IsAccessible();
+  void IsFocusable(bool focusable);
+  bool IsFocusable();
+
+  bool m_isAccessible = true;
+  bool m_isFocusable = true;
 };
 
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Views/FrameworkElementViewManager.cpp

@@ -17,6 +17,7 @@
 #include <WindowsNumerics.h>
 #include <winrt/Windows.Foundation.h>
 
+#include <UI.Xaml.Automation.Peers.h>
 #include <UI.Xaml.Automation.h>
 #include <UI.Xaml.Controls.h>
 #include "Utils/PropertyHandlerUtils.h"
@@ -416,13 +417,30 @@ bool FrameworkElementViewManager::UpdateProperty(
           const std::string &innerName = pair.first;
           const auto &innerValue = pair.second;
 
-          if (innerName == "selected")
+          auto peer = xaml::Automation::Peers::FrameworkElementAutomationPeer::FromElement(element);
+
+          if (innerName == "selected") {
             states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Selected)] =
                 innerValue.AsBoolean();
-          else if (innerName == "disabled")
+            const auto prevSelectedState = DynamicAutomationProperties::GetAccessibilityStateSelected(element);
+            if (peer != nullptr && prevSelectedState != innerValue.AsBoolean()) {
+              peer.RaisePropertyChangedEvent(
+                  winrt::SelectionItemPatternIdentifiers::IsSelectedProperty(),
+                  winrt::box_value(prevSelectedState),
+                  winrt::box_value(innerValue.AsBoolean()));
+            }
+          } else if (innerName == "disabled") {
             states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Disabled)] =
                 innerValue.AsBoolean();
-          else if (innerName == "checked") {
+            const auto prevDisabledState = DynamicAutomationProperties::GetAccessibilityStateDisabled(element);
+
+            if (peer != nullptr && prevDisabledState != innerValue.AsBoolean()) {
+              peer.RaisePropertyChangedEvent(
+                  winrt::AutomationElementIdentifiers::IsEnabledProperty(),
+                  winrt::box_value(!prevDisabledState),
+                  winrt::box_value(!innerValue.AsBoolean()));
+            }
+          } else if (innerName == "checked") {
             states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Checked)] =
                 innerValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Boolean && innerValue.AsBoolean();
             states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Unchecked)] =
@@ -430,6 +448,30 @@ bool FrameworkElementViewManager::UpdateProperty(
             // If the state is "mixed" we'll just set both Checked and Unchecked to false,
             // then later in the IToggleProvider implementation it will return the Intermediate state
             // due to both being set to false (see  DynamicAutomationPeer::ToggleState()).
+            const auto prevCheckedState = DynamicAutomationProperties::GetAccessibilityStateChecked(element);
+            const auto prevUncheckedState = DynamicAutomationProperties::GetAccessibilityStateUnchecked(element);
+
+            if (peer != nullptr) {
+              if (prevCheckedState !=
+                      states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Checked)] ||
+                  prevUncheckedState !=
+                      states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Unchecked)]) {
+                // Checking if either state has changed here to catch changes involving "mixed" state.
+                const auto oldValue = prevCheckedState ? winrt::ToggleState::On : winrt::ToggleState::Off;
+                if (innerValue.Type() != winrt::Microsoft::ReactNative::JSValueType::Boolean) {
+                  peer.RaisePropertyChangedEvent(
+                      winrt::TogglePatternIdentifiers::ToggleStateProperty(),
+                      winrt::box_value(oldValue),
+                      winrt::box_value(winrt::ToggleState::Indeterminate));
+                } else {
+                  const auto newValue = innerValue.AsBoolean() ? winrt::ToggleState::On : winrt::ToggleState::Off;
+                  peer.RaisePropertyChangedEvent(
+                      winrt::TogglePatternIdentifiers::ToggleStateProperty(),
+                      winrt::box_value(oldValue),
+                      winrt::box_value(newValue));
+                }
+              }
+            }
           } else if (innerName == "busy")
             states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Busy)] =
                 !innerValue.IsNull() && innerValue.AsBoolean();
@@ -438,6 +480,19 @@ bool FrameworkElementViewManager::UpdateProperty(
                 !innerValue.IsNull() && innerValue.AsBoolean();
             states[static_cast<int32_t>(winrt::Microsoft::ReactNative::AccessibilityStates::Collapsed)] =
                 innerValue.IsNull() || !innerValue.AsBoolean();
+
+            const auto prevExpandedState = DynamicAutomationProperties::GetAccessibilityStateExpanded(element);
+
+            if (peer != nullptr && prevExpandedState != innerValue.AsBoolean()) {
+              const auto newValue =
+                  innerValue.AsBoolean() ? winrt::ExpandCollapseState::Expanded : winrt::ExpandCollapseState::Collapsed;
+              const auto oldValue =
+                  prevExpandedState ? winrt::ExpandCollapseState::Expanded : winrt::ExpandCollapseState::Collapsed;
+              peer.RaisePropertyChangedEvent(
+                  winrt::ExpandCollapsePatternIdentifiers::ExpandCollapseStateProperty(),
+                  winrt::box_value(oldValue),
+                  winrt::box_value(newValue));
+            }
           }
         }
       }

package/Microsoft.ReactNative/Views/ViewViewManager.cpp

@@ -7,6 +7,7 @@
 
 #include "ViewControl.h"
 
+#include <UI.Xaml.Automation.Peers.h>
 #include "DynamicAutomationProperties.h"
 
 #include <JSValueWriter.h>
@@ -127,6 +128,14 @@ class ViewShadowNode : public ShadowNodeBase {
       GetControl().IsTabStop(m_isFocusable);
   }
 
+  bool IsAccessible() const {
+    return m_isAccessible;
+  }
+
+  void IsAccessible(bool isAccessible) {
+    m_isAccessible = isAccessible;
+  }
+
   bool IsHitTestBrushRequired() const {
     return IsRegisteredForMouseEvents();
   }
@@ -251,6 +260,7 @@ class ViewShadowNode : public ShadowNodeBase {
   bool m_enableFocusRing = true;
   bool m_onClick = false;
   bool m_isFocusable = false;
+  bool m_isAccessible = false;
   int32_t m_tabIndex = std::numeric_limits<std::int32_t>::max();
 
   xaml::Controls::ContentControl::GotFocus_revoker m_contentControlGotFocusRevoker{};
@@ -420,6 +430,11 @@ bool ViewViewManager::UpdateProperty(
         pViewShadowNode->TabIndex(std::numeric_limits<std::int32_t>::max());
       }
     } else {
+      if (propertyName == "accessible") {
+        if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Boolean) {
+          pViewShadowNode->IsAccessible(propertyValue.AsBoolean());
+        }
+      }
       ret = Super::UpdateProperty(nodeToUpdate, propertyName, propertyValue);
     }
   }
@@ -563,6 +578,12 @@ void ViewViewManager::TryUpdateView(
 
   if (useControl)
     pViewShadowNode->GetControl().Content(visualRoot);
+
+  if (useControl && pViewShadowNode->IsAccessible() != pViewShadowNode->IsFocusable()) {
+    pViewShadowNode->GetControl().IsTabStop(false);
+    xaml::Automation::AutomationProperties::SetAccessibilityView(
+        pViewShadowNode->GetControl(), xaml::Automation::Peers::AccessibilityView::Raw);
+  }
 }
 
 void ViewViewManager::SetLayoutProps(

package/PropertySheets/Generated/PackageVersion.g.props

@@ -10,7 +10,7 @@
 -->
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <PropertyGroup>
-    <ReactNativeWindowsVersion>0.0.0-canary.489</ReactNativeWindowsVersion>
+    <ReactNativeWindowsVersion>0.0.0-canary.490</ReactNativeWindowsVersion>
     <ReactNativeWindowsMajor>0</ReactNativeWindowsMajor>
     <ReactNativeWindowsMinor>0</ReactNativeWindowsMinor>
     <ReactNativeWindowsPatch>0</ReactNativeWindowsPatch>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-windows",
-  "version": "0.0.0-canary.489",
+  "version": "0.0.0-canary.490",
   "license": "MIT",
   "repository": {
     "type": "git",