react-native-windows 0.0.0-canary.488 → 0.0.0-canary.491

package/Chakra/ChakraHelpers.cpp

@@ -3,7 +3,6 @@
 
 #include "pch.h"
 
-#include <RuntimeOptions.h>
 #include "ChakraHelpers.h"
 #include "ChakraUtils.h"
 #include "ChakraValue.h"

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/Libraries/StyleSheet/processTransform.windows.js

@@ -44,7 +44,7 @@ function processTransform(
 
   const result = MatrixMath.createIdentityMatrix();
 
-  transform.forEach((transformation) => {
+  transform.forEach(transformation => {
     const key = Object.keys(transformation)[0];
     const value = transformation[key];
 
@@ -141,7 +141,7 @@ function _convertToRadians(value: string): number {
 }
 
 function _validateTransforms(transform: Array<Object>): void {
-  transform.forEach((transformation) => {
+  transform.forEach(transformation => {
     const keys = Object.keys(transformation);
     invariant(
       keys.length === 1,

package/Microsoft.ReactNative/DynamicReader.cpp

@@ -140,9 +140,9 @@ bool DynamicReader::GetBoolean() noexcept {
 }
 
 int64_t DynamicReader::GetInt64() noexcept {
-  return (m_current->type() == folly::dynamic::Type::INT64)
-      ? m_current->getInt()
-      : (m_current->type() == folly::dynamic::Type::DOUBLE) ? static_cast<int64_t>(m_current->getDouble()) : 0;
+  return (m_current->type() == folly::dynamic::Type::INT64) ? m_current->getInt()
+      : (m_current->type() == folly::dynamic::Type::DOUBLE) ? static_cast<int64_t>(m_current->getDouble())
+                                                            : 0;
 }
 
 double DynamicReader::GetDouble() noexcept {

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/SliderComponentView.h

@@ -13,7 +13,7 @@
 
 #pragma warning(push)
 #pragma warning(disable : 4244 4305)
-//#include <react/renderer/components/view/ViewProps.h>
+// #include <react/renderer/components/view/ViewProps.h>
 #pragma warning(pop)
 
 namespace Microsoft::ReactNative {

package/Microsoft.ReactNative/Fabric/SwitchComponentView.h

@@ -13,7 +13,7 @@
 
 #pragma warning(push)
 #pragma warning(disable : 4244 4305)
-//#include <react/renderer/components/view/ViewProps.h>
+// #include <react/renderer/components/view/ViewProps.h>
 #pragma warning(pop)
 
 namespace Microsoft::ReactNative {

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/Modules/CreateModules.cpp

@@ -2,10 +2,10 @@
 // Licensed under the MIT License.
 
 #include <CreateModules.h>
+#include <Networking/WinRTWebSocketResource.h>
 #include <QuirkSettings.h>
 #include <React.h>
 #include <ReactPropertyBag.h>
-#include <WinRTWebSocketResource.h>
 
 // React Native
 #include <cxxreact/CxxModule.h>
@@ -17,11 +17,11 @@ using winrt::Microsoft::ReactNative::ReactPropertyBag;
 using winrt::Microsoft::ReactNative::ReactPropertyId;
 using winrt::Microsoft::ReactNative::implementation::QuirkSettings;
 
-namespace Microsoft::React {
+namespace Microsoft::React::Networking {
 
 std::shared_ptr<IWebSocketResource> IWebSocketResource::Make() {
   std::vector<winrt::Windows::Security::Cryptography::Certificates::ChainValidationResult> certExceptions;
   return std::make_shared<WinRTWebSocketResource>(std::move(certExceptions));
 }
 
-} // namespace Microsoft::React
+} // namespace Microsoft::React::Networking

package/Microsoft.ReactNative/ReactHost/ReactNativeHeaders.h

@@ -4,7 +4,7 @@
 #pragma once
 
 #if !MS_TARGET_APPLE
-//#include <msoFolly/MsoFolly.h>
+// #include <msoFolly/MsoFolly.h>
 #endif
 
 #pragma warning(push)

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/DevMenu.cpp

@@ -205,8 +205,8 @@ void DevMenuManager::CreateAndShowUI() noexcept {
   if (Mso::React::ReactOptions::JsiEngine(m_context->Properties()) == Mso::React::JSIEngine::Hermes) {
     m_samplingProfilerRevoker = devMenu.SamplingProfiler().Click(
         winrt::auto_revoke,
-        [wkThis = weak_from_this()](
-            auto & /*sender*/, xaml::RoutedEventArgs const & /*args*/) noexcept -> winrt::fire_and_forget {
+        [wkThis = weak_from_this()](auto & /*sender*/, xaml::RoutedEventArgs const & /*args*/) noexcept
+        -> winrt::fire_and_forget {
           if (auto strongThis = wkThis.lock()) {
             strongThis->Hide();
             if (!Microsoft::ReactNative::HermesSamplingProfiler::IsStarted()) {