[Fabric] Implementation of accessibiltyAnnotation and adding support for IAnnotationProvider (#14626)

* Implement accessibilityAnnotation for RNW Fabric

* AccessibilityAnnotation Prop implementation final changes

* Playground Changes

* IAnnotationProvider Implementation

* Adding CompositionAnnotationProvider to the project

* Adding Test Cases

* Change files

* Lint issue Fixes

* Lint fix

* Updating SnapShots

* Review Changes

* Updating snapshot

Author: vineethkuttan

change/react-native-windows-a703b417-fd1e-4499-ae0b-a4ce670db2bb.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Implementation of accessibiltyAnnotation and adding support for IAnnotationProvider",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/@react-native-windows/tester/src/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx

@@ -26,6 +26,12 @@ class AccessibilityBaseExample extends React.Component {
           accessibilityLabel="A blue box"
           accessibilityHint="A hint for the blue box."
           accessibilityLevel={1}
+          accessibilityAnnotation={{
+            typeID: 'Comment',
+            typeName: 'Check Comment',
+            author: 'Clint Westwood',
+            dateTime: '3/19/2025 1:03 PM',
+          }}
           testID="accessibility-base-view-1"
         />
         <Text>The following has accessible and accessibilityLabel:</Text>

packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap

@@ -32,6 +32,10 @@ exports[`Accessibility Tests Accessibility data for Label and Level 1`] = `
 exports[`Accessibility Tests Accessibility data for Label,Level and Hint 1`] = `
 {
   "Automation Tree": {
+    "AnnotationPattern.Author": "Clint Westwood",
+    "AnnotationPattern.DateTime": "3/19/2025 1:03 PM",
+    "AnnotationPattern.TypeId": 60003,
+    "AnnotationPattern.TypeName": "Check Comment",
     "AutomationId": "accessibility-base-view-1",
     "ControlType": 50026,
     "HelpText": "A hint for the blue box.",

packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap

@@ -8,6 +8,14 @@ exports[`snapshotAllPages Accessibility Windows 1`] = `
     The following has accessibilityLabel and accessibilityHint:
   </Text>
   <View
+    accessibilityAnnotation={
+      {
+        "author": "Clint Westwood",
+        "dateTime": "3/19/2025 1:03 PM",
+        "typeID": "Comment",
+        "typeName": "Check Comment",
+      }
+    }
     accessibilityHint="A hint for the blue box."
     accessibilityLabel="A blue box"
     accessibilityLevel={1}

packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.cpp

@@ -365,6 +365,10 @@ void DumpUIAPatternInfo(IUIAutomationElement *pTarget, const winrt::Windows::Dat
   BOOL selectionRequired;
   BSTR text = nullptr;
   BOOL horizontallyScrollable;
+  BSTR annotationAuthor = nullptr;
+  BSTR annotationTypeName = nullptr;
+  BSTR annotationDateTime = nullptr;
+  int annotationTypeID = 0;
 
   // Dump IValueProvider Information
   IValueProvider *valuePattern;
@@ -467,6 +471,28 @@ void DumpUIAPatternInfo(IUIAutomationElement *pTarget, const winrt::Windows::Dat
     }
   }
 
+  // Dump IAnnotationProvider Information
+  winrt::com_ptr<IAnnotationProvider> annotationProvider;
+  hr = pTarget->GetCurrentPattern(UIA_AnnotationPatternId, reinterpret_cast<IUnknown **>(annotationProvider.put()));
+  if (SUCCEEDED(hr) && annotationProvider) {
+    hr = annotationProvider->get_AnnotationTypeId(&annotationTypeID);
+    if (SUCCEEDED(hr)) {
+      InsertIntValueIfNotDefault(result, L"AnnotationPattern.TypeId", annotationTypeID, 0);
+    }
+    hr = annotationProvider->get_AnnotationTypeName(&annotationTypeName);
+    if (SUCCEEDED(hr)) {
+      InsertStringValueIfNotEmpty(result, L"AnnotationPattern.TypeName", annotationTypeName);
+    }
+    hr = annotationProvider->get_Author(&annotationAuthor);
+    if (SUCCEEDED(hr)) {
+      InsertStringValueIfNotEmpty(result, L"AnnotationPattern.Author", annotationAuthor);
+    }
+    hr = annotationProvider->get_DateTime(&annotationDateTime);
+    if (SUCCEEDED(hr)) {
+      InsertStringValueIfNotEmpty(result, L"AnnotationPattern.DateTime", annotationDateTime);
+    }
+  }
+
   // Dump IScrollProvider Information
   winrt::com_ptr<IScrollProvider> scrollPattern;
   hr = pTarget->GetCurrentPattern(UIA_ScrollPatternId, reinterpret_cast<IUnknown **>(scrollPattern.put()));

packages/playground/Samples/text.tsx

@@ -5,8 +5,8 @@
  */
 
 import React from 'react';
-import {AppRegistry, StyleSheet, View} from 'react-native';
-import {Text} from 'react-native-windows';
+import {AppRegistry, StyleSheet} from 'react-native';
+import {Text, View} from 'react-native-windows';
 
 export default class Bootstrap extends React.Component {
   render() {
@@ -20,7 +20,16 @@ export default class Bootstrap extends React.Component {
           selectable={true}>
           Click here : This is a text with a tooltip.
         </Text>
-        <View style={styles.container2}>
+        <View
+          style={styles.container2}
+          accessible={true}
+          accessibilityLabel="Annotation Checkc"
+          accessibilityAnnotation={{
+            typeID: 'Comment',
+            typeName: 'Check Comment',
+            author: 'Christopher tarantino',
+            dateTime: '3/19/2025 1:03 PM',
+          }}>
           <Text
             adjustsFontSizeToFit
             style={{maxHeight: 80, fontSize: 72}}

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

@@ -0,0 +1,100 @@
+#include "pch.h"
+#include "CompositionAnnotationProvider.h"
+#include <Fabric/ComponentView.h>
+#include <Unicode.h>
+#include "RootComponentView.h"
+#include "UiaHelpers.h"
+
+namespace winrt::Microsoft::ReactNative::implementation {
+
+CompositionAnnotationProvider::CompositionAnnotationProvider(
+    const winrt::Microsoft::ReactNative::Composition::ComponentView &componentView,
+    CompositionDynamicAutomationProvider *parentProvider) noexcept
+    : m_view{componentView} {
+  m_parentProvider.copy_from(parentProvider);
+}
+HRESULT __stdcall CompositionAnnotationProvider::get_AnnotationTypeId(int *retVal) {
+  if (retVal == nullptr)
+    return E_POINTER;
+  auto strongView = m_view.view();
+
+  if (!strongView)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  auto props = std::static_pointer_cast<const facebook::react::ViewProps>(
+      winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->props());
+  if (props == nullptr)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  if (props->accessibilityAnnotation.value().typeID.empty()) {
+    return E_FAIL;
+  }
+  *retVal = static_cast<int>(GetAnnotationTypeId(props->accessibilityAnnotation.value().typeID));
+  return S_OK;
+}
+HRESULT __stdcall CompositionAnnotationProvider::get_AnnotationTypeName(BSTR *retVal) {
+  if (retVal == nullptr)
+    return E_POINTER;
+  auto strongView = m_view.view();
+
+  if (!strongView)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  auto props = std::static_pointer_cast<const facebook::react::ViewProps>(
+      winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->props());
+  if (props == nullptr)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  if (props->accessibilityAnnotation.value().typeName.empty()) {
+    return E_FAIL;
+  }
+  auto typeName = ::Microsoft::Common::Unicode::Utf8ToUtf16(props->accessibilityAnnotation.value().typeName);
+  *retVal = SysAllocString(typeName.c_str());
+  return S_OK;
+}
+HRESULT __stdcall CompositionAnnotationProvider::get_Author(BSTR *retVal) {
+  if (retVal == nullptr)
+    return E_POINTER;
+  auto strongView = m_view.view();
+
+  if (!strongView)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  auto props = std::static_pointer_cast<const facebook::react::ViewProps>(
+      winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->props());
+  if (props == nullptr)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  if (props->accessibilityAnnotation.value().author.empty()) {
+    return E_FAIL;
+  }
+  auto author = ::Microsoft::Common::Unicode::Utf8ToUtf16(props->accessibilityAnnotation.value().author);
+  *retVal = SysAllocString(author.c_str());
+  return S_OK;
+}
+HRESULT __stdcall CompositionAnnotationProvider::get_DateTime(BSTR *retVal) {
+  if (retVal == nullptr)
+    return E_POINTER;
+  auto strongView = m_view.view();
+
+  if (!strongView)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  auto props = std::static_pointer_cast<const facebook::react::ViewProps>(
+      winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->props());
+  if (props == nullptr)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  if (props->accessibilityAnnotation.value().dateTime.empty()) {
+    return E_FAIL;
+  }
+  auto dateTime = ::Microsoft::Common::Unicode::Utf8ToUtf16(props->accessibilityAnnotation.value().dateTime);
+  *retVal = SysAllocString(dateTime.c_str());
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionAnnotationProvider::get_Target(IRawElementProviderSimple **retVal) {
+  // no-opt
+  return E_NOTIMPL;
+}
+} // namespace winrt::Microsoft::ReactNative::implementation

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

@@ -0,0 +1,31 @@
+#pragma once
+
+#include <Fabric/Composition/CompositionDynamicAutomationProvider.h>
+#include <Fabric/Composition/CompositionViewComponentView.h>
+#include <Fabric/ReactTaggedView.h>
+#include <UIAutomation.h>
+#include <inspectable.h>
+#include <uiautomationcore.h>
+
+namespace winrt::Microsoft::ReactNative::implementation {
+
+class CompositionAnnotationProvider : public winrt::implements<CompositionAnnotationProvider, IAnnotationProvider> {
+ public:
+  CompositionAnnotationProvider(
+      const winrt::Microsoft::ReactNative::Composition::ComponentView &componentView,
+      CompositionDynamicAutomationProvider *parentProvider) noexcept;
+
+  // inherited via IAnnotationProvider
+  virtual HRESULT __stdcall get_AnnotationTypeId(int *retVal) override;
+  virtual HRESULT __stdcall get_AnnotationTypeName(BSTR *retVal) override;
+  virtual HRESULT __stdcall get_Author(BSTR *retVal) override;
+  virtual HRESULT __stdcall get_DateTime(BSTR *retVal) override;
+  virtual HRESULT __stdcall get_Target(IRawElementProviderSimple **retVal) override;
+
+ private:
+  ::Microsoft::ReactNative::ReactTaggedView m_view;
+  winrt::com_ptr<IAnnotationProvider> m_annotationProvider;
+  winrt::com_ptr<CompositionDynamicAutomationProvider> m_parentProvider;
+};
+
+} // namespace winrt::Microsoft::ReactNative::implementation

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

@@ -1,6 +1,7 @@
 #include "pch.h"
 #include "CompositionDynamicAutomationProvider.h"
 #include <Fabric/ComponentView.h>
+#include <Fabric/Composition/CompositionAnnotationProvider.h>
 #include <Fabric/Composition/CompositionTextRangeProvider.h>
 #include <Fabric/Composition/ParagraphComponentView.h>
 #include <Fabric/Composition/ScrollViewComponentView.h>
@@ -36,6 +37,12 @@ CompositionDynamicAutomationProvider::CompositionDynamicAutomationProvider(
                          strongView.as<winrt::Microsoft::ReactNative::Composition::ComponentView>(), this)
                          .try_as<ITextProvider2>();
   }
+
+  if (strongView.try_as<winrt::Microsoft::ReactNative::Composition::implementation::ViewComponentView>()) {
+    m_annotationProvider = winrt::make<CompositionAnnotationProvider>(
+                               strongView.as<winrt::Microsoft::ReactNative::Composition::ComponentView>(), this)
+                               .try_as<IAnnotationProvider>();
+  }
 }
 
 CompositionDynamicAutomationProvider::CompositionDynamicAutomationProvider(
@@ -282,6 +289,11 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetPatternProvider(PATTE
       strongView.try_as<winrt::Microsoft::ReactNative::Composition::implementation::WindowsTextInputComponentView>()) {
     m_textProvider.as<IUnknown>().copy_to(pRetVal);
   }
+  if (patternId == UIA_AnnotationPatternId &&
+      strongView.try_as<winrt::Microsoft::ReactNative::Composition::implementation::ViewComponentView>() &&
+      accessibilityAnnotationHasValue(props->accessibilityAnnotation)) {
+    m_annotationProvider.as<IUnknown>().copy_to(pRetVal);
+  }
 
   return S_OK;
 }

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

@@ -101,6 +101,7 @@ class CompositionDynamicAutomationProvider : public winrt::implements<
  private:
   ::Microsoft::ReactNative::ReactTaggedView m_view;
   winrt::com_ptr<ITextProvider2> m_textProvider;
+  winrt::com_ptr<IAnnotationProvider> m_annotationProvider;
   std::vector<winrt::com_ptr<IRawElementProviderSimple>> m_selectionItems;
   // Non-null when this UIA node is the peer of a ContentIslandComponentView.
   winrt::Microsoft::UI::Content::ChildSiteLink m_childSiteLink{nullptr};