Support UIA ::SetFocus and basic property change notifications

change/react-native-windows-67407575-cd5b-4bf1-b812-6e0d80d943c3.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add UIA focus management and AdvisedEvents for prop changes",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/playground/windows/playground-composition/Playground-Composition.cpp

@@ -486,7 +486,7 @@ LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wparam, LPARAM lparam)
     case WM_GETOBJECT: {
       if (lparam == UiaRootObjectId) {
         auto windowData = WindowData::GetFromWindow(hwnd);
-        if (!windowData->m_windowInited)
+        if (windowData == nullptr || !windowData->m_windowInited)
           break;
 
         auto hwndHost = windowData->m_CompositionHwndHost;

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

@@ -96,7 +96,7 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetEmbeddedFragmentRoots
 }
 
 HRESULT __stdcall CompositionDynamicAutomationProvider::SetFocus(void) {
-  return S_OK;
+  return UiaSetFocusHelper(m_view);
 }
 
 HRESULT __stdcall CompositionDynamicAutomationProvider::get_FragmentRoot(IRawElementProviderFragmentRoot **pRetVal) {
@@ -211,6 +211,8 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetPropertyValue(PROPERT
   if (props == nullptr)
     return UIA_E_ELEMENTNOTAVAILABLE;
 
+  auto hr = S_OK;
+
   switch (propertyId) {
     case UIA_ControlTypePropertyId: {
       pRetVal->vt = VT_I4;
@@ -232,9 +234,28 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetPropertyValue(PROPERT
       pRetVal->bstrVal = temp.Detach();
       break;
     }
+    case UIA_IsKeyboardFocusablePropertyId: {
+      pRetVal->vt = VT_BOOL;
+      pRetVal->boolVal = props->focusable ? VARIANT_TRUE : VARIANT_FALSE;
+      break;
+    }
+    case UIA_HasKeyboardFocusPropertyId: {
+      auto rootCV = strongView->rootComponentView();
+      if (rootCV == nullptr)
+        return UIA_E_ELEMENTNOTAVAILABLE;
+
+      pRetVal->vt = VT_BOOL;
+      pRetVal->boolVal = rootCV->GetFocusedComponent() == strongView.get() ? VARIANT_TRUE : VARIANT_FALSE;
+      break;
+    }
+    case UIA_IsEnabledPropertyId: {
+      pRetVal->vt = VT_BOOL;
+      pRetVal->boolVal = !props->accessibilityState.disabled ? VARIANT_TRUE : VARIANT_FALSE;
+      break;
+    }
   }
 
-  return S_OK;
+  return hr;
 }
 
 HRESULT __stdcall CompositionDynamicAutomationProvider::get_HostRawElementProvider(

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionRootAutomationProvider.cpp

@@ -1,6 +1,13 @@
 #include "pch.h"
 #include "CompositionRootAutomationProvider.h"
+#include <algorithm>
 #include "UiaHelpers.h"
+#pragma warning(push)
+#pragma warning(disable : 4229)
+#define IN
+#define OUT
+#include <atlsafe.h>
+#pragma warning(pop)
 
 namespace winrt::Microsoft::ReactNative::implementation {
 
@@ -32,7 +39,7 @@ HRESULT __stdcall CompositionRootAutomationProvider::GetEmbeddedFragmentRoots(SA
 }
 
 HRESULT __stdcall CompositionRootAutomationProvider::SetFocus(void) {
-  return S_OK;
+  return UiaSetFocusHelper(m_view);
 }
 
 HRESULT __stdcall CompositionRootAutomationProvider::GetPatternProvider(PATTERNID patternId, IUnknown **pRetVal) {
@@ -122,10 +129,7 @@ HRESULT __stdcall CompositionRootAutomationProvider::ElementProviderFromPoint(
     return UIA_E_ELEMENTNOTAVAILABLE;
   }
 
-  auto spRootView = strongView->rootComponentView();
-  if (spRootView == nullptr) {
-    return UIA_E_ELEMENTNOTAVAILABLE;
-  }
+  auto spRootView = std::static_pointer_cast<::Microsoft::ReactNative::RootComponentView>(strongView);
 
   if (m_hwnd == nullptr || !IsWindow(m_hwnd)) {
     // TODO: Add support for non-HWND based hosting
@@ -189,4 +193,126 @@ HRESULT __stdcall CompositionRootAutomationProvider::Navigate(
   return S_OK;
 }
 
+// The old C-style interface for SAFEARRAY is tedious to use. ATL provides CComSafeArray which allows us to interact
+// with the data structure using much more modern methods. However, AdviseEventAdded/Removed don't expect us to
+// deallocate their In param, so this is a simple RAII wrapper to Attach/Detach in the scope of those functions and
+// perform a little validation that the incoming SAFEARRAY is well formed.
+class UIAPropertyArray {
+  CComSafeArray<PROPERTYID> m_propArray{};
+
+ public:
+  UIAPropertyArray(SAFEARRAY *psaProperties) noexcept {
+    VARTYPE vt;
+    if (psaProperties && SUCCEEDED(SafeArrayGetVartype(psaProperties, &vt)) && vt == m_propArray.GetType()) {
+      m_propArray.Attach(psaProperties);
+    }
+  }
+  ~UIAPropertyArray() noexcept {
+    if (m_propArray.GetSafeArrayPtr() != nullptr)
+      m_propArray.Detach();
+  }
+  bool IsValid() noexcept {
+    return m_propArray.GetSafeArrayPtr() != nullptr && m_propArray.GetDimensions() == 1 && m_propArray.GetCount() > 0;
+  }
+  CComSafeArray<PROPERTYID> *operator->() noexcept {
+    return &m_propArray;
+  }
+};
+
+void AdviseEventAddedImpl(
+    std::vector<CompositionRootAutomationProvider::AdvisedEvent> &advisedEvents,
+    EVENTID idEvent) noexcept {
+  auto it = std::find_if(
+      advisedEvents.begin(),
+      advisedEvents.end(),
+      [idEvent](const CompositionRootAutomationProvider::AdvisedEvent &ae) noexcept { return ae.Event == idEvent; });
+
+  if (it == advisedEvents.end()) {
+    advisedEvents.emplace_back(CompositionRootAutomationProvider::AdvisedEvent{idEvent, 1 /*Count*/});
+  } else {
+    it->Count++;
+  }
+}
+
+HRESULT CompositionRootAutomationProvider::AdvisePropertiesAdded(SAFEARRAY *psaProperties) noexcept {
+  UIAPropertyArray props(psaProperties);
+
+  if (!props.IsValid()) {
+    return E_INVALIDARG;
+  }
+
+  // Note SAFEARRAY's upperbound is inclusive
+  for (auto i = props->GetLowerBound(); i <= props->GetUpperBound(); i++) {
+    auto prop = props->GetAt(i);
+    AdviseEventAddedImpl(m_advisedProperties, prop);
+  }
+  return S_OK;
+}
+
+HRESULT CompositionRootAutomationProvider::AdviseEventAdded(EVENTID idEvent, SAFEARRAY *psaProperties) {
+  if (idEvent == UIA_AutomationPropertyChangedEventId) {
+    return AdvisePropertiesAdded(psaProperties);
+  }
+  AdviseEventAddedImpl(m_advisedEvents, idEvent);
+  return S_OK;
+}
+
+HRESULT AdviseEventRemovedImpl(
+    std::vector<CompositionRootAutomationProvider::AdvisedEvent> &advisedEvents,
+    EVENTID idEvent) noexcept {
+  auto it = std::find_if(
+      advisedEvents.begin(),
+      advisedEvents.end(),
+      [idEvent](const CompositionRootAutomationProvider::AdvisedEvent &ae) noexcept { return ae.Event == idEvent; });
+
+  if (it == advisedEvents.end()) {
+    assert(false);
+    return UIA_E_INVALIDOPERATION;
+  } else if (it->Count == 1) {
+    advisedEvents.erase(it);
+  } else {
+    it->Count--;
+  }
+  return S_OK;
+}
+
+HRESULT CompositionRootAutomationProvider::AdvisePropertiesRemoved(SAFEARRAY *psaProperties) noexcept {
+  UIAPropertyArray props(psaProperties);
+
+  if (!props.IsValid()) {
+    return E_INVALIDARG;
+  }
+
+  auto returnHr = S_OK;
+  for (auto i = props->GetLowerBound(); i <= props->GetUpperBound(); i++) {
+    auto prop = props->GetAt(i);
+    auto hr = AdviseEventRemovedImpl(m_advisedProperties, prop);
+    if (FAILED(hr)) {
+      returnHr = hr;
+    }
+  }
+  return returnHr;
+}
+
+HRESULT
+CompositionRootAutomationProvider::AdviseEventRemoved(EVENTID idEvent, SAFEARRAY *psaProperties) {
+  if (idEvent == UIA_AutomationPropertyChangedEventId) {
+    return AdvisePropertiesRemoved(psaProperties);
+  }
+
+  return AdviseEventRemovedImpl(m_advisedEvents, idEvent);
+}
+
+bool CompositionRootAutomationProvider::WasEventAdvised(EVENTID event) noexcept {
+  return std::any_of(m_advisedEvents.begin(), m_advisedEvents.end(), [event](const AdvisedEvent &ae) {
+    return ae.Event == event && ae.Count > 0;
+  });
+}
+
+bool CompositionRootAutomationProvider::WasPropertyAdvised(PROPERTYID prop) noexcept {
+  return std::any_of(m_advisedProperties.begin(), m_advisedProperties.end(), [prop](const AdvisedEvent &ae) {
+    return ae.Property == prop && ae.Count > 0;
+  });
+}
+
 } // namespace winrt::Microsoft::ReactNative::implementation

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionRootAutomationProvider.h

@@ -13,7 +13,8 @@ class CompositionRootAutomationProvider : public winrt::implements<
                                               IInspectable,
                                               IRawElementProviderFragmentRoot,
                                               IRawElementProviderFragment,
-                                              IRawElementProviderSimple> {
+                                              IRawElementProviderSimple,
+                                              IRawElementProviderAdviseEvents> {
  public:
   // inherited via IRawElementProviderFragmentRoot
   virtual HRESULT __stdcall ElementProviderFromPoint(double x, double y, IRawElementProviderFragment **pRetVal)
@@ -34,11 +35,39 @@ class CompositionRootAutomationProvider : public winrt::implements<
   virtual HRESULT __stdcall GetPropertyValue(PROPERTYID propertyId, VARIANT *pRetVal) override;
   virtual HRESULT __stdcall get_HostRawElementProvider(IRawElementProviderSimple **pRetVal) override;
 
+  // IRawElementProviderAdviseEvents
+  virtual HRESULT __stdcall AdviseEventAdded(EVENTID idEvent, SAFEARRAY *psaProperties) override;
+  virtual HRESULT __stdcall AdviseEventRemoved(EVENTID idEvent, SAFEARRAY *psaProperties) override;
+
   CompositionRootAutomationProvider(
       const std::shared_ptr<::Microsoft::ReactNative::RootComponentView> &componentView) noexcept;
+
   void SetHwnd(HWND hwnd) noexcept;
+  bool WasPropertyAdvised(PROPERTYID prop) noexcept;
+  bool WasEventAdvised(EVENTID event) noexcept;
+
+  // It's unlikely for the underlying primitive types for EVENTID and PROPERTYID to ever change, but let's make sure
+  static_assert(std::is_same<EVENTID, PROPERTYID>::value);
+  // Helper class for AdviseEventAdded/Removed. I could've simply used a std::pair, but I find using structs with named
+  // members easier to read and more self-documenting than pair.first and pair.last. Since this is simply syntactic
+  // sugar, I'm leveraging the fact that both EVENTID and PROPERTYID are ints under the hood to share
+  // AdviseEventAddedImpl
+  struct AdvisedEvent {
+    union {
+      EVENTID Event;
+      PROPERTYID Property;
+    };
+    uint32_t Count;
+  };
 
  private:
+  HRESULT AdvisePropertiesAdded(SAFEARRAY *psaProperties) noexcept;
+  HRESULT AdvisePropertiesRemoved(SAFEARRAY *psaProperties) noexcept;
+
+  // Linear search on unsorted vectors is typically faster than more sophisticated data structures when N is small. In
+  // practice ATs tend to only listen to a dozen or so props and events, so std::vector is likely better than maps.
+  std::vector<AdvisedEvent> m_advisedEvents{};
+  std::vector<AdvisedEvent> m_advisedProperties{};
   ::Microsoft::ReactNative::ReactTaggedView m_view;
   HWND m_hwnd{nullptr};
 };

vnext/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;
 }
 
@@ -78,13 +78,25 @@ 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 {
   m_eventEmitter->onFocus();
   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);
+    }
+  }
 }
 
 void CompositionBaseComponentView::updateEventEmitter(
@@ -1030,6 +1042,27 @@ void CompositionBaseComponentView::updateBorderProps(
   }
 }
 
+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);
+
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      provider,
+      UIA_IsEnabledPropertyId,
+      !oldViewProps.accessibilityState.disabled,
+      !newViewProps.accessibilityState.disabled);
+}
+
 void CompositionBaseComponentView::updateBorderLayoutMetrics(
     facebook::react::LayoutMetrics const &layoutMetrics,
     const facebook::react::ViewProps &viewProps) noexcept {
@@ -1206,6 +1239,7 @@ void CompositionViewComponentView::updateProps(
     m_visual.Opacity(newViewProps.opacity);
   }
 
+  updateAccessibilityProps(oldViewProps, newViewProps);
   updateBorderProps(oldViewProps, newViewProps);
 
   // Shadow

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

@@ -50,6 +50,9 @@ struct CompositionBaseComponentView : public IComponentView,
   void updateBorderProps(
       const facebook::react::ViewProps &oldViewProps,
       const facebook::react::ViewProps &newViewProps) noexcept;
+  void updateAccessibilityProps(
+      const facebook::react::ViewProps &oldView,
+      const facebook::react::ViewProps &newViewProps) noexcept;
   void updateBorderLayoutMetrics(
       facebook::react::LayoutMetrics const &layoutMetrics,
       const facebook::react::ViewProps &viewProps) noexcept;

vnext/Microsoft.ReactNative/Fabric/Composition/RootComponentView.cpp

@@ -84,6 +84,14 @@ bool RootComponentView::NavigateFocus(const winrt::Microsoft::ReactNative::Focus
   return view != nullptr;
 }
 
+bool RootComponentView::TrySetFocusedComponent(IComponentView &view) noexcept {
+  if (view.focusable()) {
+    view.rootComponentView()->SetFocusedComponent(&view);
+    return true;
+  }
+  return false;
+}
+
 bool RootComponentView::TryMoveFocus(bool next) noexcept {
   if (!m_focusedComponent) {
     return NavigateFocus(winrt::Microsoft::ReactNative::FocusNavigationRequest(
@@ -94,11 +102,8 @@ bool RootComponentView::TryMoveFocus(bool next) noexcept {
   Mso::Functor<bool(IComponentView &)> fn = [currentlyFocused = m_focusedComponent](IComponentView &view) noexcept {
     if (&view == currentlyFocused)
       return false;
-    if (view.focusable()) {
-      view.rootComponentView()->SetFocusedComponent(&view);
-      return true;
-    }
-    return false;
+
+    return view.rootComponentView()->TrySetFocusedComponent(view);
   };
 
   return walkTree(*m_focusedComponent, next, fn);