react-native-windows 0.72.14 → 0.73.0-preview.1

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

@@ -15,6 +15,7 @@
 #include "CompositionDynamicAutomationProvider.h"
 #include "CompositionHelpers.h"
 #include "RootComponentView.h"
+#include "UiaHelpers.h"
 #include "d2d1helper.h"
 
 namespace Microsoft::ReactNative {
@@ -37,7 +38,6 @@ RootComponentView *CompositionBaseComponentView::rootComponentView() noexcept {
   if (m_parent)
     return m_parent->rootComponentView();
 
-  assert(false);
   return nullptr;
 }
 
@@ -48,7 +48,7 @@ const std::vector<IComponentView *> &CompositionBaseComponentView::children() co
 void CompositionBaseComponentView::parent(IComponentView *parent) noexcept {
   if (!parent) {
     auto root = rootComponentView();
-    if (root->GetFocusedComponent() == this) {
+    if (root && root->GetFocusedComponent() == this) {
       root->SetFocusedComponent(nullptr); // TODO need move focus logic - where should focus go?
     }
   }
@@ -78,6 +78,10 @@ bool CompositionBaseComponentView::runOnChildren(bool forward, Mso::Functor<bool
 void CompositionBaseComponentView::onFocusLost() noexcept {
   m_eventEmitter->onBlur();
   showFocusVisual(false);
+  if (UiaClientsAreListening()) {
+    winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+        EnsureUiaProvider(), UIA_HasKeyboardFocusPropertyId, true, false);
+  }
 }
 
 void CompositionBaseComponentView::onFocusGained() noexcept {
@@ -85,6 +89,32 @@ void CompositionBaseComponentView::onFocusGained() noexcept {
   if (m_enableFocusVisual) {
     showFocusVisual(true);
   }
+  if (UiaClientsAreListening()) {
+    auto spProviderSimple = EnsureUiaProvider().try_as<IRawElementProviderSimple>();
+    if (spProviderSimple != nullptr) {
+      winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+          m_uiaProvider, UIA_HasKeyboardFocusPropertyId, false, true);
+      UiaRaiseAutomationEvent(spProviderSimple.get(), UIA_AutomationFocusChangedEventId);
+    }
+  }
+
+  StartBringIntoView({});
+}
+
+void CompositionBaseComponentView::StartBringIntoView(BringIntoViewOptions &&options) noexcept {
+  if (!options.TargetRect) {
+    // Default to bring the entire of this component into view
+    options.TargetRect = {
+        {0, 0},
+        {m_layoutMetrics.frame.size.width * m_layoutMetrics.pointScaleFactor,
+         m_layoutMetrics.frame.size.height * m_layoutMetrics.pointScaleFactor}};
+  }
+
+  if (m_parent) {
+    options.TargetRect->origin.y += m_layoutMetrics.frame.origin.y * m_layoutMetrics.pointScaleFactor;
+    options.TargetRect->origin.x += m_layoutMetrics.frame.origin.x * m_layoutMetrics.pointScaleFactor;
+    m_parent->StartBringIntoView(std::move(options));
+  }
 }
 
 void CompositionBaseComponentView::updateEventEmitter(
@@ -109,34 +139,65 @@ void CompositionBaseComponentView::handleCommand(std::string const &commandName,
 }
 
 int64_t CompositionBaseComponentView::sendMessage(uint32_t msg, uint64_t wParam, int64_t lParam) noexcept {
-  if (msg == WM_KEYUP || msg == WM_KEYDOWN) {
-    facebook::react::KeyboardEvent event;
-    BYTE bKeys[256];
-    if (GetKeyboardState(bKeys)) {
-      if (bKeys[VK_LSHIFT] & 0x80 || bKeys[VK_RSHIFT] & 0x80) {
-        event.shiftKey = true;
-      }
-      if (bKeys[VK_LCONTROL] & 0x80 || bKeys[VK_RCONTROL] & 0x80) {
-        event.ctrlKey = true;
-      }
-      if (bKeys[VK_LMENU] & 0x80 || bKeys[VK_RMENU] & 0x80) {
-        event.altKey = true;
-      }
+  return 0;
+}
 
-      event.metaKey = (GetKeyState(VK_LWIN) < 0) || (GetKeyState(VK_RWIN) < 0);
-    }
+void CompositionBaseComponentView::onKeyDown(
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
+  if (m_parent && !args.Handled()) {
+    m_parent->onKeyDown(source, args);
+  }
+}
 
-    event.key = FromVirtualKey(
-        static_cast<winrt::Windows::System::VirtualKey>(wParam), event.shiftKey, !!(GetKeyState(VK_CAPITAL) & 1));
-    event.code = CodeFromVirtualKey(static_cast<winrt::Windows::System::VirtualKey>(wParam));
-    if (msg == WM_KEYUP) {
-      m_eventEmitter->onKeyUp(event);
-    } else {
-      m_eventEmitter->onKeyDown(event);
-    }
+void CompositionBaseComponentView::onKeyUp(
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
+  if (m_parent && !args.Handled()) {
+    m_parent->onKeyUp(source, args);
   }
+}
 
-  return 0;
+void CompositionBaseComponentView::onPointerEntered(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (m_parent && !args.Handled()) {
+    m_parent->onPointerEntered(args);
+  }
+}
+
+void CompositionBaseComponentView::onPointerExited(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (m_parent && !args.Handled()) {
+    m_parent->onPointerExited(args);
+  }
+}
+
+void CompositionBaseComponentView::onPointerPressed(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (m_parent && !args.Handled()) {
+    m_parent->onPointerPressed(args);
+  }
+}
+
+void CompositionBaseComponentView::onPointerReleased(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (m_parent && !args.Handled()) {
+    m_parent->onPointerReleased(args);
+  }
+}
+
+void CompositionBaseComponentView::onPointerMoved(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (m_parent && !args.Handled()) {
+    m_parent->onPointerMoved(args);
+  }
+}
+
+void CompositionBaseComponentView::onPointerWheelChanged(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (m_parent && !args.Handled()) {
+    m_parent->onPointerWheelChanged(args);
+  }
 }
 
 RECT CompositionBaseComponentView::getClientRect() const noexcept {
@@ -156,21 +217,17 @@ const facebook::react::SharedViewEventEmitter &CompositionBaseComponentView::Get
   return m_eventEmitter;
 }
 
-bool CompositionBaseComponentView::ScrollWheel(facebook::react::Point pt, int32_t delta) noexcept {
-  return false;
-}
-
 std::array<
-    winrt::Microsoft::ReactNative::Composition::SpriteVisual,
+    winrt::Microsoft::ReactNative::Composition::ISpriteVisual,
     CompositionBaseComponentView::SpecialBorderLayerCount>
 CompositionBaseComponentView::FindSpecialBorderLayers() const noexcept {
-  std::array<winrt::Microsoft::ReactNative::Composition::SpriteVisual, SpecialBorderLayerCount> layers{
+  std::array<winrt::Microsoft::ReactNative::Composition::ISpriteVisual, SpecialBorderLayerCount> layers{
       nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr};
 
   if (m_numBorderVisuals) {
     for (uint8_t i = 0; i < m_numBorderVisuals; i++) {
       auto visual = Visual().GetAt(i);
-      layers[i] = visual.as<winrt::Microsoft::ReactNative::Composition::SpriteVisual>();
+      layers[i] = visual.as<winrt::Microsoft::ReactNative::Composition::ISpriteVisual>();
     }
   }
 
@@ -441,7 +498,7 @@ struct AutoDrawHelper {
 template <typename TShape>
 void SetBorderLayerPropertiesCommon(
     winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
-    winrt::Microsoft::ReactNative::Composition::SpriteVisual &layer,
+    winrt::Microsoft::ReactNative::Composition::ISpriteVisual &layer,
     TShape &shape,
     winrt::com_ptr<Composition::ICompositionDrawingSurfaceInterop> &borderTexture,
     const D2D1_RECT_F &textureRect,
@@ -455,13 +512,13 @@ void SetBorderLayerPropertiesCommon(
   if ((textureRect.right - textureRect.left) <= 0 && (textureRect.bottom - textureRect.top) <= 0)
     return;
 
-  auto surface = compContext.CreateDrawingSurface(
+  auto surface = compContext.CreateDrawingSurfaceBrush(
       {(textureRect.right - textureRect.left), (textureRect.bottom - textureRect.top)},
       winrt::Windows::Graphics::DirectX::DirectXPixelFormat::B8G8R8A8UIntNormalized,
       winrt::Windows::Graphics::DirectX::DirectXAlphaMode::Premultiplied);
   surface.as(borderTexture);
 
-  layer.Brush(compContext.CreateSurfaceBrush(surface));
+  layer.Brush(surface);
   layer.Offset({anchorOffset.x, anchorOffset.y, 0}, {anchorPoint.x, anchorPoint.y, 0});
   layer.RelativeSizeWithOffset(size, relativeSizeAdjustment);
 
@@ -530,7 +587,7 @@ void SetBorderLayerPropertiesCommon(
 template <typename TShape>
 void SetBorderLayerProperties(
     winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
-    winrt::Microsoft::ReactNative::Composition::SpriteVisual &layer,
+    winrt::Microsoft::ReactNative::Composition::ISpriteVisual &layer,
     TShape &shape,
     winrt::com_ptr<Composition::ICompositionDrawingSurfaceInterop> &borderTexture,
     const D2D1_RECT_F &textureRect,
@@ -595,7 +652,7 @@ template <typename TShape>
 void DrawAllBorderLayers(
     winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
     std::array<
-        winrt::Microsoft::ReactNative::Composition::SpriteVisual,
+        winrt::Microsoft::ReactNative::Composition::ISpriteVisual,
         CompositionBaseComponentView::SpecialBorderLayerCount> &spBorderLayers,
     TShape &shape,
     const facebook::react::BorderWidths &borderWidths,
@@ -824,7 +881,7 @@ winrt::com_ptr<ID2D1GeometryGroup> GetGeometryForRoundedBorder(
   return nullptr;
 }
 
-// We dont want half pixel borders, or border radii - they lead to blurry borders
+// We don't want half pixel borders, or border radii - they lead to blurry borders
 // 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
@@ -890,18 +947,18 @@ facebook::react::BorderMetrics resolveAndAlignBorderMetrics(
 }
 
 bool CompositionBaseComponentView::TryUpdateSpecialBorderLayers(
-    std::array<winrt::Microsoft::ReactNative::Composition::SpriteVisual, SpecialBorderLayerCount> &spBorderVisuals,
+    std::array<winrt::Microsoft::ReactNative::Composition::ISpriteVisual, SpecialBorderLayerCount> &spBorderVisuals,
     facebook::react::LayoutMetrics const &layoutMetrics,
     const facebook::react::ViewProps &viewProps) noexcept {
   auto borderMetrics = resolveAndAlignBorderMetrics(layoutMetrics, viewProps);
   // We only handle a single borderStyle for now
   auto borderStyle = borderMetrics.borderStyles.left;
 
-  if (borderMetrics.borderColors.isUniform()) {
-    if (!borderMetrics.borderWidths.left)
-      return false;
-    if (!facebook::react::isColorMeaningful(borderMetrics.borderColors.left))
-      return false;
+  bool hasMeaningfulColor =
+      !borderMetrics.borderColors.isUniform() || !facebook::react::isColorMeaningful(borderMetrics.borderColors.left);
+  bool hasMeaningfulWidth = !borderMetrics.borderWidths.isUniform() || (borderMetrics.borderWidths.left != 0);
+  if (!hasMeaningfulColor && !hasMeaningfulWidth) {
+    return false;
   }
 
   // Create the special border layers if they don't exist yet
@@ -996,7 +1053,7 @@ void CompositionBaseComponentView::UpdateSpecialBorderLayers(
   if (!TryUpdateSpecialBorderLayers(spBorderLayers, layoutMetrics, viewProps)) {
     for (auto &spBorderLayer : spBorderLayers) {
       if (spBorderLayer) {
-        spBorderLayer.as<winrt::Microsoft::ReactNative::Composition::SpriteVisual>().Brush(nullptr);
+        spBorderLayer.as<winrt::Microsoft::ReactNative::Composition::ISpriteVisual>().Brush(nullptr);
       }
     }
   }
@@ -1030,6 +1087,115 @@ void CompositionBaseComponentView::updateBorderProps(
   }
 }
 
+void CompositionBaseComponentView::updateShadowProps(
+    const facebook::react::ViewProps &oldViewProps,
+    const facebook::react::ViewProps &newViewProps,
+    winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual) noexcept {
+  // Shadow Properties
+  if (oldViewProps.shadowOffset != newViewProps.shadowOffset || oldViewProps.shadowColor != newViewProps.shadowColor ||
+      oldViewProps.shadowOpacity != newViewProps.shadowOpacity ||
+      oldViewProps.shadowRadius != newViewProps.shadowRadius) {
+    auto shadow = m_compContext.CreateDropShadow();
+    shadow.Offset({newViewProps.shadowOffset.width, newViewProps.shadowOffset.height, 0});
+    shadow.Opacity(newViewProps.shadowOpacity);
+    shadow.BlurRadius(newViewProps.shadowRadius);
+    if (newViewProps.shadowColor)
+      shadow.Color(newViewProps.shadowColor.AsWindowsColor());
+    m_visual.Shadow(shadow);
+  }
+}
+
+void CompositionBaseComponentView::updateTransformProps(
+    const facebook::react::ViewProps &oldViewProps,
+    const facebook::react::ViewProps &newViewProps,
+    winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual) noexcept {
+  // check for backfaceVisibility prop
+  if (oldViewProps.backfaceVisibility != newViewProps.backfaceVisibility) {
+    static_assert(
+        static_cast<facebook::react::BackfaceVisibility>(
+            winrt::Microsoft::ReactNative::Composition::BackfaceVisibility::Inherit) ==
+        facebook::react::BackfaceVisibility::Auto);
+    static_assert(
+        static_cast<facebook::react::BackfaceVisibility>(
+            winrt::Microsoft::ReactNative::Composition::BackfaceVisibility::Visible) ==
+        facebook::react::BackfaceVisibility::Visible);
+    static_assert(
+        static_cast<facebook::react::BackfaceVisibility>(
+            winrt::Microsoft::ReactNative::Composition::BackfaceVisibility::Hidden) ==
+        facebook::react::BackfaceVisibility::Hidden);
+    m_visual.BackfaceVisibility(
+        static_cast<winrt::Microsoft::ReactNative::Composition::BackfaceVisibility>(newViewProps.backfaceVisibility));
+  }
+
+  // Transform - TODO doesn't handle multiple of the same kind of transform -- Doesn't handle hittesting updates
+  if (oldViewProps.transform != newViewProps.transform) {
+    winrt::Windows::Foundation::Numerics::float4x4 transformMatrix;
+    transformMatrix.m11 = newViewProps.transform.matrix[0];
+    transformMatrix.m12 = newViewProps.transform.matrix[1];
+    transformMatrix.m13 = newViewProps.transform.matrix[2];
+    transformMatrix.m14 = newViewProps.transform.matrix[3];
+    transformMatrix.m21 = newViewProps.transform.matrix[4];
+    transformMatrix.m22 = newViewProps.transform.matrix[5];
+    transformMatrix.m23 = newViewProps.transform.matrix[6];
+    transformMatrix.m24 = newViewProps.transform.matrix[7];
+    transformMatrix.m31 = newViewProps.transform.matrix[8];
+    transformMatrix.m32 = newViewProps.transform.matrix[9];
+    transformMatrix.m33 = newViewProps.transform.matrix[10];
+    transformMatrix.m34 = newViewProps.transform.matrix[11];
+    transformMatrix.m41 = newViewProps.transform.matrix[12];
+    transformMatrix.m42 = newViewProps.transform.matrix[13];
+    transformMatrix.m43 = newViewProps.transform.matrix[14];
+    transformMatrix.m44 = newViewProps.transform.matrix[15];
+
+    auto centerPointPropSet = EnsureCenterPointPropertySet();
+    centerPointPropSet.InsertMatrix4x4(L"transform", transformMatrix);
+
+    EnsureTransformMatrixFacade();
+  }
+}
+
+void CompositionBaseComponentView::updateAccessibilityProps(
+    const facebook::react::ViewProps &oldViewProps,
+    const facebook::react::ViewProps &newViewProps) noexcept {
+  if (!UiaClientsAreListening())
+    return;
+
+  auto provider = EnsureUiaProvider();
+
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      provider, UIA_IsKeyboardFocusablePropertyId, oldViewProps.focusable, newViewProps.focusable);
+
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      provider,
+      UIA_NamePropertyId,
+      oldViewProps.accessibilityLabel,
+      newViewProps.accessibilityLabel.empty() ? DefaultAccessibleName() : newViewProps.accessibilityLabel);
+
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      provider,
+      UIA_IsContentElementPropertyId,
+      (oldViewProps.accessible && oldViewProps.accessibilityRole != "none"),
+      (newViewProps.accessible && newViewProps.accessibilityRole != "none"));
+
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      provider,
+      UIA_IsControlElementPropertyId,
+      (oldViewProps.accessible && oldViewProps.accessibilityRole != "none"),
+      (newViewProps.accessible && newViewProps.accessibilityRole != "none"));
+
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      provider,
+      UIA_IsEnabledPropertyId,
+      !oldViewProps.accessibilityState.disabled,
+      !newViewProps.accessibilityState.disabled);
+
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      provider, UIA_ControlTypePropertyId, oldViewProps.accessibilityRole, newViewProps.accessibilityRole);
+
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      provider, UIA_HelpTextPropertyId, oldViewProps.accessibilityHint, newViewProps.accessibilityHint);
+}
+
 void CompositionBaseComponentView::updateBorderLayoutMetrics(
     facebook::react::LayoutMetrics const &layoutMetrics,
     const facebook::react::ViewProps &viewProps) noexcept {
@@ -1079,14 +1245,13 @@ CompositionBaseComponentView::supplementalComponentDescriptorProviders() noexcep
 
 comp::CompositionPropertySet CompositionBaseComponentView::EnsureCenterPointPropertySet() noexcept {
   if (m_centerPropSet == nullptr) {
-    auto compositor =
-        winrt::Microsoft::ReactNative::Composition::implementation::CompositionContextHelper::InnerCompositor(
-            m_compContext);
-
-    m_centerPropSet = compositor.CreatePropertySet();
-    UpdateCenterPropertySet();
-    m_centerPropSet.InsertMatrix4x4(L"transform", winrt::Windows::Foundation::Numerics::float4x4::identity());
-    m_centerPropSet.InsertVector3(L"translation", {0, 0, 0});
+    if (auto compositor =
+            winrt::Microsoft::ReactNative::Composition::CompositionContextHelper::InnerCompositor(m_compContext)) {
+      m_centerPropSet = compositor.CreatePropertySet();
+      UpdateCenterPropertySet();
+      m_centerPropSet.InsertMatrix4x4(L"transform", winrt::Windows::Foundation::Numerics::float4x4::identity());
+      m_centerPropSet.InsertVector3(L"translation", {0, 0, 0});
+    }
   }
 
   return m_centerPropSet;
@@ -1125,22 +1290,22 @@ void CompositionBaseComponentView::EnsureTransformMatrixFacade() noexcept {
   m_hasTransformMatrixFacade = true;
 
   auto centerPointPropSet = EnsureCenterPointPropertySet();
-  // TODO cache expression instead of creating new ones all the time
-  auto expression =
-      winrt::Microsoft::ReactNative::Composition::implementation::CompositionContextHelper::InnerCompositor(
-          m_compContext)
-          .CreateExpressionAnimation(
-              L"Matrix4x4.CreateFromScale(PS.dpiScale3Inv) * Matrix4x4.CreateFromTranslation(PS.translation) * PS.transform * Matrix4x4.CreateFromScale(PS.dpiScale3)");
-  expression.SetReferenceParameter(L"PS", centerPointPropSet);
-  winrt::Microsoft::ReactNative::Composition::implementation::CompositionContextHelper::InnerVisual(OuterVisual())
-      .StartAnimation(L"TransformMatrix", expression);
-}
-
-facebook::react::SharedTouchEventEmitter CompositionBaseComponentView::touchEventEmitter() noexcept {
+  if (auto compositor =
+          winrt::Microsoft::ReactNative::Composition::CompositionContextHelper::InnerCompositor(m_compContext)) {
+    // TODO cache expression instead of creating new ones all the time
+    auto expression = compositor.CreateExpressionAnimation(
+        L"Matrix4x4.CreateFromScale(PS.dpiScale3Inv) * Matrix4x4.CreateFromTranslation(PS.translation) * PS.transform * Matrix4x4.CreateFromScale(PS.dpiScale3)");
+    expression.SetReferenceParameter(L"PS", centerPointPropSet);
+    winrt::Microsoft::ReactNative::Composition::CompositionContextHelper::InnerVisual(OuterVisual())
+        .StartAnimation(L"TransformMatrix", expression);
+  }
+}
+
+facebook::react::SharedViewEventEmitter CompositionBaseComponentView::eventEmitter() noexcept {
   return m_eventEmitter;
 }
 
-facebook::react::SharedTouchEventEmitter CompositionBaseComponentView::touchEventEmitterAtPoint(
+facebook::react::SharedViewEventEmitter CompositionBaseComponentView::eventEmitterAtPoint(
     facebook::react::Point /*pt*/) noexcept {
   return m_eventEmitter;
 }
@@ -1149,6 +1314,18 @@ bool CompositionBaseComponentView::focusable() const noexcept {
   return false;
 }
 
+std::string CompositionBaseComponentView::DefaultControlType() const noexcept {
+  return "group";
+}
+
+std::string CompositionBaseComponentView::DefaultAccessibleName() const noexcept {
+  return "";
+}
+
+std::string CompositionBaseComponentView::DefaultHelpText() const noexcept {
+  return "";
+}
+
 CompositionViewComponentView::CompositionViewComponentView(
     const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
     facebook::react::Tag tag)
@@ -1196,7 +1373,7 @@ void CompositionViewComponentView::updateProps(
 
   if (oldViewProps.backgroundColor != newViewProps.backgroundColor) {
     if (newViewProps.backgroundColor) {
-      m_visual.Brush(m_compContext.CreateColorBrush((*newViewProps.backgroundColor).m_color));
+      m_visual.Brush(m_compContext.CreateColorBrush(newViewProps.backgroundColor.AsWindowsColor()));
     } else {
       m_visual.Brush(nullptr);
     }
@@ -1206,74 +1383,24 @@ void CompositionViewComponentView::updateProps(
     m_visual.Opacity(newViewProps.opacity);
   }
 
+  // update BaseComponentView props
+  updateAccessibilityProps(oldViewProps, newViewProps);
+  updateShadowProps(oldViewProps, newViewProps, m_visual);
+  updateTransformProps(oldViewProps, newViewProps, m_visual);
   updateBorderProps(oldViewProps, newViewProps);
 
-  // Shadow
-  if (oldViewProps.shadowOffset != newViewProps.shadowOffset || oldViewProps.shadowColor != newViewProps.shadowColor ||
-      oldViewProps.shadowOpacity != newViewProps.shadowOpacity ||
-      oldViewProps.shadowRadius != newViewProps.shadowRadius) {
-    auto shadow = m_compContext.CreateDropShadow();
-    shadow.Offset({newViewProps.shadowOffset.width, newViewProps.shadowOffset.height, 0});
-    shadow.Opacity(newViewProps.shadowOpacity);
-    shadow.BlurRadius(newViewProps.shadowRadius);
-    if (newViewProps.shadowColor)
-      shadow.Color(newViewProps.shadowColor.AsWindowsColor());
-    m_visual.Shadow(shadow);
-  }
-
-  if (oldViewProps.backfaceVisibility != newViewProps.backfaceVisibility) {
-    static_assert(
-        static_cast<facebook::react::BackfaceVisibility>(
-            winrt::Microsoft::ReactNative::Composition::BackfaceVisibility::Inherit) ==
-        facebook::react::BackfaceVisibility::Auto);
-    static_assert(
-        static_cast<facebook::react::BackfaceVisibility>(
-            winrt::Microsoft::ReactNative::Composition::BackfaceVisibility::Visible) ==
-        facebook::react::BackfaceVisibility::Visible);
-    static_assert(
-        static_cast<facebook::react::BackfaceVisibility>(
-            winrt::Microsoft::ReactNative::Composition::BackfaceVisibility::Hidden) ==
-        facebook::react::BackfaceVisibility::Hidden);
-    m_visual.BackfaceVisibility(
-        static_cast<winrt::Microsoft::ReactNative::Composition::BackfaceVisibility>(newViewProps.backfaceVisibility));
-  }
-
-  // Transform - TODO doesn't handle multiple of the same kind of transform -- Doesn't handle hittesting updates
-  if (oldViewProps.transform != newViewProps.transform) {
-    winrt::Windows::Foundation::Numerics::float4x4 transformMatrix;
-    transformMatrix.m11 = newViewProps.transform.matrix[0];
-    transformMatrix.m12 = newViewProps.transform.matrix[1];
-    transformMatrix.m13 = newViewProps.transform.matrix[2];
-    transformMatrix.m14 = newViewProps.transform.matrix[3];
-    transformMatrix.m21 = newViewProps.transform.matrix[4];
-    transformMatrix.m22 = newViewProps.transform.matrix[5];
-    transformMatrix.m23 = newViewProps.transform.matrix[6];
-    transformMatrix.m24 = newViewProps.transform.matrix[7];
-    transformMatrix.m31 = newViewProps.transform.matrix[8];
-    transformMatrix.m32 = newViewProps.transform.matrix[9];
-    transformMatrix.m33 = newViewProps.transform.matrix[10];
-    transformMatrix.m34 = newViewProps.transform.matrix[11];
-    transformMatrix.m41 = newViewProps.transform.matrix[12];
-    transformMatrix.m42 = newViewProps.transform.matrix[13];
-    transformMatrix.m43 = newViewProps.transform.matrix[14];
-    transformMatrix.m44 = newViewProps.transform.matrix[15];
-
-    auto centerPointPropSet = EnsureCenterPointPropertySet();
-    centerPointPropSet.InsertMatrix4x4(L"transform", transformMatrix);
-
-    EnsureTransformMatrixFacade();
-  }
-
   m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
 }
 
-facebook::react::Tag CompositionViewComponentView::hitTest(facebook::react::Point pt, facebook::react::Point &localPt)
-    const noexcept {
+facebook::react::Tag CompositionViewComponentView::hitTest(
+    facebook::react::Point pt,
+    facebook::react::Point &localPt,
+    bool ignorePointerEvents) const noexcept {
   facebook::react::Point ptLocal{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y};
 
   facebook::react::Tag targetTag;
 
-  if ((m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
+  if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
        m_props->pointerEvents == facebook::react::PointerEventsMode::BoxNone) &&
       std::any_of(m_children.rbegin(), m_children.rend(), [&targetTag, &ptLocal, &localPt](auto child) {
         targetTag = static_cast<const CompositionBaseComponentView *>(child)->hitTest(ptLocal, localPt);
@@ -1281,7 +1408,7 @@ facebook::react::Tag CompositionViewComponentView::hitTest(facebook::react::Poin
       }))
     return targetTag;
 
-  if ((m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
+  if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
        m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) &&
       ptLocal.x >= 0 && ptLocal.x <= m_layoutMetrics.frame.size.width && ptLocal.y >= 0 &&
       ptLocal.y <= m_layoutMetrics.frame.size.height) {
@@ -1292,17 +1419,82 @@ facebook::react::Tag CompositionViewComponentView::hitTest(facebook::react::Poin
   return -1;
 }
 
-bool CompositionViewComponentView::ScrollWheel(facebook::react::Point pt, int32_t delta) noexcept {
-  facebook::react::Point ptLocal{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y};
+void CompositionViewComponentView::onKeyDown(
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
+  auto eventCode = CodeFromVirtualKey(args.Key());
+  bool fShift = source.GetKeyState(winrt::Windows::System::VirtualKey::Shift) !=
+      winrt::Windows::UI::Core::CoreVirtualKeyStates::None;
+  bool fAlt = source.GetKeyState(winrt::Windows::System::VirtualKey::Menu) !=
+      winrt::Windows::UI::Core::CoreVirtualKeyStates::None;
+  bool fCtrl = source.GetKeyState(winrt::Windows::System::VirtualKey::Control) !=
+      winrt::Windows::UI::Core::CoreVirtualKeyStates::None;
+  bool fMeta = (source.GetKeyState(winrt::Windows::System::VirtualKey::LeftWindows) !=
+                winrt::Windows::UI::Core::CoreVirtualKeyStates::None) ||
+      (source.GetKeyState(winrt::Windows::System::VirtualKey::RightWindows) !=
+       winrt::Windows::UI::Core::CoreVirtualKeyStates::None);
+
+  if (args.OriginalSource() == tag()) {
+    facebook::react::KeyEvent event;
+    event.shiftKey = fShift;
+    event.ctrlKey = fCtrl;
+    event.altKey = fAlt;
+    event.metaKey = fMeta;
+
+    event.key = FromVirtualKey(args.Key(), event.shiftKey, !!(GetKeyState(VK_CAPITAL) & 1));
+    event.code = eventCode;
+    m_eventEmitter->onKeyDown(event);
+  }
 
-  facebook::react::Tag tag;
-  if (std::any_of(m_children.rbegin(), m_children.rend(), [ptLocal, delta](auto child) {
-        return const_cast<CompositionBaseComponentView *>(static_cast<const CompositionBaseComponentView *>(child))
-            ->ScrollWheel(ptLocal, delta);
-      }))
-    return true;
+  for (const auto &handledKey : m_props->keyDownEvents) {
+    if (handledKey.code == eventCode && handledKey.altKey == fAlt && handledKey.ctrlKey == fCtrl &&
+        handledKey.metaKey == fMeta && handledKey.shiftKey == fShift &&
+        handledKey.handledEventPhase == facebook::react::HandledEventPhase::Bubbling) {
+      // Stop bubbling event if marked as handled from JS
+      args.Handled(true);
+    }
+  }
 
-  return false;
+  Super::onKeyDown(source, args);
+}
+
+void CompositionViewComponentView::onKeyUp(
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
+  auto eventCode = CodeFromVirtualKey(args.Key());
+  bool fShift = source.GetKeyState(winrt::Windows::System::VirtualKey::Shift) !=
+      winrt::Windows::UI::Core::CoreVirtualKeyStates::None;
+  bool fAlt = source.GetKeyState(winrt::Windows::System::VirtualKey::Menu) !=
+      winrt::Windows::UI::Core::CoreVirtualKeyStates::None;
+  bool fCtrl = source.GetKeyState(winrt::Windows::System::VirtualKey::Control) !=
+      winrt::Windows::UI::Core::CoreVirtualKeyStates::None;
+  bool fMeta = (source.GetKeyState(winrt::Windows::System::VirtualKey::LeftWindows) !=
+                winrt::Windows::UI::Core::CoreVirtualKeyStates::None) ||
+      (source.GetKeyState(winrt::Windows::System::VirtualKey::RightWindows) !=
+       winrt::Windows::UI::Core::CoreVirtualKeyStates::None);
+
+  if (args.OriginalSource() == tag()) {
+    facebook::react::KeyEvent event;
+    event.shiftKey = fShift;
+    event.ctrlKey = fCtrl;
+    event.altKey = fAlt;
+    event.metaKey = fMeta;
+
+    event.key = FromVirtualKey(args.Key(), event.shiftKey, !!(GetKeyState(VK_CAPITAL) & 1));
+    event.code = eventCode;
+    m_eventEmitter->onKeyUp(event);
+  }
+
+  for (const auto &handledKey : m_props->keyUpEvents) {
+    if (handledKey.code == eventCode && handledKey.altKey == fAlt && handledKey.ctrlKey == fCtrl &&
+        handledKey.metaKey == fMeta && handledKey.shiftKey == fShift &&
+        handledKey.handledEventPhase == facebook::react::HandledEventPhase::Bubbling) {
+      // Stop bubbling event if marked as handled from JS
+      args.Handled(true);
+    }
+  }
+
+  Super::onKeyUp(source, args);
 }
 
 void CompositionViewComponentView::updateState(
@@ -1347,6 +1539,10 @@ bool CompositionViewComponentView::focusable() const noexcept {
   return m_props->focusable;
 }
 
+std::string CompositionViewComponentView::DefaultControlType() const noexcept {
+  return "group";
+}
+
 IComponentView *lastDeepChild(IComponentView &view) noexcept {
   auto current = &view;
   while (current) {