[Fabric] Implementation of accessibilityDescription (microsoft#14818)

vineethkuttan · acoates-ms · commit 51baedbaf008 · 2025-09-11T09:56:01.000-07:00
* Initial Commit for accessibilityDescription

* Change files

* Format Changes

* Updating Snapshot
diff --git a/change/react-native-windows-82bcd92e-18b7-42d0-b6f0-dc428b565d5d.json b/change/react-native-windows-82bcd92e-18b7-42d0-b6f0-dc428b565d5d.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Implementation of accessibilityDescription",
+  "packageName": "react-native-windows",
+  "email": "kvineeth@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/@react-native-windows/tester/src/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx b/packages/@react-native-windows/tester/src/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx
@@ -24,6 +24,17 @@ class AccessibilityBaseExample extends React.Component {
           style={{width: 50, height: 50, backgroundColor: 'blue'}}
           accessibilityLabel="A blue box"
           accessibilityHint="A hint for the blue box."
+          accessibilityLevel={1}
+          accessibilityItemType="comment"
+          accessibilityAccessKey="accessKey"
+          accessibilityDescription="Sample Description"
+          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>
         <View
diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap
@@ -1,5 +1,102 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Accessibility Tests Accessibility data for Label and Level 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "accessibility-base-view-2",
+    "ControlType": 50026,
+    "Level": 2,
+    "LocalizedControlType": "group",
+    "Name": "A hint for the red box.",
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ViewComponentView",
+    "_Props": {
+      "AccessibilityLabel": "A hint for the red box.",
+      "TestId": "accessibility-base-view-2",
+    },
+  },
+  "Visual Tree": {
+    "Brush": {
+      "Brush Type": "ColorBrush",
+      "Color": "rgba(255, 0, 0, 255)",
+    },
+    "Comment": "accessibility-base-view-2",
+    "Offset": "0, 0, 0",
+    "Size": "50, 50",
+    "Visual Type": "SpriteVisual",
+  },
+}
+`;
+
+exports[`Accessibility Tests Accessibility data for Label,Level and Hint 1`] = `
+{
+  "Automation Tree": {
+    "AccessKey": "accessKey",
+    "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,
+    "Description": "Sample Description",
+    "HelpText": "A hint for the blue box.",
+    "ItemType": "comment",
+    "Level": 1,
+    "LocalizedControlType": "group",
+    "Name": "A blue box",
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ViewComponentView",
+    "_Props": {
+      "AccessibilityLabel": "A blue box",
+      "TestId": "accessibility-base-view-1",
+    },
+  },
+  "Visual Tree": {
+    "Brush": {
+      "Brush Type": "ColorBrush",
+      "Color": "rgba(0, 0, 255, 255)",
+    },
+    "Comment": "accessibility-base-view-1",
+    "Offset": "0, 0, 0",
+    "Size": "50, 50",
+    "Visual Type": "SpriteVisual",
+  },
+}
+`;
+
+exports[`Accessibility Tests Accessibility data for Role, Setsize etc. 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "accessibility-base-view-3",
+    "ControlType": 50007,
+    "Level": 9,
+    "LocalizedControlType": "list item",
+    "Name": "Aria label takes precedence",
+    "PositionInSet": 2,
+    "SizeofSet": 5,
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ViewComponentView",
+    "_Props": {
+      "AccessibilityLabel": "Aria label takes precedence",
+      "TestId": "accessibility-base-view-3",
+    },
+  },
+  "Visual Tree": {
+    "Brush": {
+      "Brush Type": "ColorBrush",
+      "Color": "rgba(255, 0, 0, 255)",
+    },
+    "Comment": "accessibility-base-view-3",
+    "Offset": "0, 0, 0",
+    "Size": "50, 50",
+    "Visual Type": "SpriteVisual",
+  },
+}
+`;
+
 exports[`Accessibility Tests Components can store range data by setting the min, max, and now of accessibilityValue 1`] = `
 {
   "Automation Tree": {
diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap
@@ -8,6 +8,16 @@ exports[`snapshotAllPages Accessibility Windows 1`] = `
     The following has accessibilityLabel and accessibilityHint:
   </Text>
   <View
+    accessibilityAccessKey="accessKey"
+    accessibilityAnnotation={
+      {
+        "author": "Clint Westwood",
+        "dateTime": "3/19/2025 1:03 PM",
+        "typeID": "Comment",
+        "typeName": "Check Comment",
+      }
+    }
+    accessibilityDescription="Sample Description"
     accessibilityHint="A hint for the blue box."
     accessibilityLabel="A blue box"
     style={
diff --git a/packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.cpp b/packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.cpp
@@ -464,6 +464,9 @@ winrt::Windows::Data::Json::JsonObject DumpUIATreeRecurse(
   int sizeOfSet = 0;
   LiveSetting liveSetting = LiveSetting::Off;
   BSTR itemStatus;
+  BSTR itemType;
+  BSTR accessKey;
+  BSTR description = nullptr;
 
   pTarget->get_CurrentAutomationId(&automationId);
   pTarget->get_CurrentControlType(&controlType);
@@ -481,6 +484,11 @@ winrt::Windows::Data::Json::JsonObject DumpUIATreeRecurse(
     pTarget4->get_CurrentLiveSetting(&liveSetting);
     pTarget4->Release();
   }
+  IUIAutomationElement6 *pTarget6;
+  hr = pTarget->QueryInterface(__uuidof(IUIAutomationElement6), reinterpret_cast<void **>(&pTarget6));
+  if (SUCCEEDED(hr) && pTarget6) {
+    pTarget6->get_CurrentFullDescription(&description);
+  }
   result.Insert(L"AutomationId", winrt::Windows::Data::Json::JsonValue::CreateStringValue(automationId));
   result.Insert(L"ControlType", winrt::Windows::Data::Json::JsonValue::CreateNumberValue(controlType));
   InsertStringValueIfNotEmpty(result, L"HelpText", helpText);
@@ -493,6 +501,9 @@ winrt::Windows::Data::Json::JsonObject DumpUIATreeRecurse(
   InsertIntValueIfNotDefault(result, L"SizeofSet", sizeOfSet);
   InsertLiveSettingValueIfNotDefault(result, L"LiveSetting", liveSetting);
   InsertStringValueIfNotEmpty(result, L"ItemStatus", itemStatus);
+  InsertStringValueIfNotEmpty(result, L"ItemType", itemType);
+  InsertStringValueIfNotEmpty(result, L"AccessKey", accessKey);
+  InsertStringValueIfNotEmpty(result, L"Description", description);
   DumpUIAPatternInfo(pTarget, result);
 
   IUIAutomationElement *pChild;
@@ -513,6 +524,9 @@ winrt::Windows::Data::Json::JsonObject DumpUIATreeRecurse(
   ::SysFreeString(localizedControlType);
   ::SysFreeString(name);
   ::SysFreeString(itemStatus);
+  ::SysFreeString(itemType);
+  ::SysFreeString(accessKey);
+  ::SysFreeString(description);
   return result;
 }
 
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionDynamicAutomationProvider.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionDynamicAutomationProvider.cpp
@@ -527,6 +527,29 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetPropertyValue(PROPERT
           : SysAllocString(L"");
       break;
     }
+    case UIA_LevelPropertyId: {
+      pRetVal->vt = VT_I4;
+      pRetVal->lVal = props->accessibilityLevel;
+      break;
+    }
+    case UIA_AccessKeyPropertyId: {
+      pRetVal->vt = VT_BSTR;
+      auto accessKey = ::Microsoft::Common::Unicode::Utf8ToUtf16(props->accessibilityAccessKey.value_or(""));
+      pRetVal->bstrVal = SysAllocString(accessKey.c_str());
+      break;
+    }
+    case UIA_ItemTypePropertyId: {
+      pRetVal->vt = VT_BSTR;
+      auto itemtype = ::Microsoft::Common::Unicode::Utf8ToUtf16(props->accessibilityItemType.value_or(""));
+      pRetVal->bstrVal = SysAllocString(itemtype.c_str());
+      break;
+    }
+    case UIA_FullDescriptionPropertyId: {
+      pRetVal->vt = VT_BSTR;
+      auto desc = ::Microsoft::Common::Unicode::Utf8ToUtf16(props->accessibilityDescription.value_or(""));
+      pRetVal->bstrVal = SysAllocString(desc.c_str());
+      break;
+    }
   }
 
   return hr;
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp
@@ -780,6 +780,27 @@ void ComponentView::updateAccessibilityProps(
       oldViewProps.accessibilityLiveRegion,
       newViewProps.accessibilityLiveRegion);
 
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      EnsureUiaProvider(), UIA_LevelPropertyId, oldViewProps.accessibilityLevel, newViewProps.accessibilityLevel);
+
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      EnsureUiaProvider(),
+      UIA_AccessKeyPropertyId,
+      oldViewProps.accessibilityAccessKey,
+      newViewProps.accessibilityAccessKey);
+
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      EnsureUiaProvider(),
+      UIA_ItemTypePropertyId,
+      oldViewProps.accessibilityItemType,
+      newViewProps.accessibilityItemType);
+
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      EnsureUiaProvider(),
+      UIA_FullDescriptionPropertyId,
+      oldViewProps.accessibilityDescription,
+      newViewProps.accessibilityDescription);
+
   if ((oldViewProps.accessibilityState.has_value() && oldViewProps.accessibilityState->selected.has_value()) !=
       ((newViewProps.accessibilityState.has_value() && newViewProps.accessibilityState->selected.has_value()))) {
     auto compProvider =
diff --git a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/components/view/HostPlatformViewProps.cpp b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/components/view/HostPlatformViewProps.cpp
@@ -39,6 +39,26 @@ HostPlatformViewProps::HostPlatformViewProps(
           CoreFeatures::enablePropIteratorSetter
               ? sourceProps.accessibilitySetSize
               : convertRawProp(context, rawProps, "accessibilitySetSize", sourceProps.accessibilitySetSize, 0)),
+      accessibilityLevel(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.accessibilityLevel
+              : convertRawProp(context, rawProps, "accessibilityLevel", sourceProps.accessibilityLevel, 0)),
+      accessibilityItemType(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.accessibilityItemType
+              : convertRawProp(context, rawProps, "accessibilityItemType", sourceProps.accessibilityItemType, {})),
+      accessibilityAccessKey(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.accessibilityAccessKey
+              : convertRawProp(context, rawProps, "accessibilityAccessKey", sourceProps.accessibilityAccessKey, {})),
+      accessibilityDescription(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter() ? sourceProps.accessibilityDescription
+                                                                  : convertRawProp(
+                                                                        context,
+                                                                        rawProps,
+                                                                        "accessibilityDescription",
+                                                                        sourceProps.accessibilityDescription,
+                                                                        {})),
       accessibilityLiveRegion(
           CoreFeatures::enablePropIteratorSetter ? sourceProps.accessibilityLiveRegion
                                                  : convertRawProp(
@@ -83,6 +103,10 @@ void HostPlatformViewProps::setProp(
     RAW_SET_PROP_SWITCH_CASE_BASIC(focusable);
     RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityPosInSet);
     RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilitySetSize);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityLevel);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityItemType);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityAccessKey);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityDescription);
     RAW_SET_PROP_SWITCH_CASE_BASIC(accessibilityLiveRegion);
     RAW_SET_PROP_SWITCH_CASE_BASIC(keyDownEvents);
     RAW_SET_PROP_SWITCH_CASE_BASIC(keyUpEvents);
diff --git a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/components/view/HostPlatformViewProps.h b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/components/view/HostPlatformViewProps.h
@@ -27,6 +27,11 @@ class HostPlatformViewProps : public BaseViewProps {
   int accessibilityPosInSet{0};
   int accessibilitySetSize{0};
   std::string accessibilityLiveRegion{"none"};
+  int accessibilityLevel{0};
+  std::optional<AccessibilityAnnotation> accessibilityAnnotation{};
+  std::optional<std::string> accessibilityItemType{};
+  std::optional<std::string> accessibilityAccessKey{};
+  std::optional<std::string> accessibilityDescription{};
 
   // std::optional<std::string> overflowAnchor{};
   std::optional<std::string> tooltip{};
diff --git a/vnext/src-win/Libraries/Components/View/View.windows.js b/vnext/src-win/Libraries/Components/View/View.windows.js
@@ -38,6 +38,7 @@ const View: React.AbstractComponent<
       accessibilityLabel,
       accessibilityLabelledBy,
       accessibilityLevel, // Windows
+      accessibilityDescription, //Windows
       accessibilityLiveRegion,
       accessibilityPosInSet, // Windows
       accessibilitySetSize, // Windows
@@ -49,6 +50,7 @@ const View: React.AbstractComponent<
       'aria-expanded': ariaExpanded,
       'aria-multiselectable': ariaMultiselectable, // Windows
       'aria-required': ariaRequired, // Windows
+      'aria-description': ariaDescription, //Windows
       'aria-hidden': ariaHidden,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
@@ -248,6 +250,7 @@ const View: React.AbstractComponent<
               }
               accessibilityLabel={ariaLabel ?? accessibilityLabel}
               accessibilityLevel={ariaLevel ?? accessibilityLevel}
+              accessibilityDescription={ariaDescription ?? accessibilityDescription}
               accessibilityPosInSet={ariaPosinset ?? accessibilityPosInSet}
               accessibilitySetSize={ariaSetsize ?? accessibilitySetSize}
               focusable={_focusable}
diff --git a/vnext/src-win/Libraries/Components/View/ViewAccessibility.d.ts b/vnext/src-win/Libraries/Components/View/ViewAccessibility.d.ts
@@ -258,6 +258,72 @@ export type AccessibilityRole =
   | 'listitem' // Windows
   | 'toolbar';
 
+// [Windows]
+export type AnnotationType =
+  | 'AdvanceProofingIssue'
+  | 'Author'
+  | 'CircularReferenceError'
+  | 'Comment'
+  | 'ConflictingChange'
+  | 'DataValidationError'
+  | 'DeletionChange'
+  | 'EditingLockedChange'
+  | 'Endnote'
+  | 'ExternalChange'
+  | 'Footer'
+  | 'Footnote'
+  | 'FormatChange'
+  | 'FormulaError'
+  | 'GrammarError'
+  | 'Header'
+  | 'Highlighted'
+  | 'InsertionChange'
+  | 'Mathematics'
+  | 'MoveChange'
+  | 'SpellingError'
+  | 'TrackChanges'
+  | 'Unknown'
+  | 'UnsyncedChange';
+
+// [Windows]
+export type AccessibilityAnnotationInfo = Readonly<{
+  typeID: AnnotationType;
+  typeName?: string;
+  author?: string;
+  dateTime?: string;
+  target?: string;
+}>;
+export interface AccessibilityPropsWindows {
+  /**
+   * Tells a person using a screen reader what kind of annotation they
+   * have selected. If available, it will also tell a person the author of the annotation and
+   * the date and time the annotation was posted.
+   *
+   * Note: If typeID is 'Unknown', a typeName must be provided.
+   */
+  accessibilityAnnotation?: AccessibilityAnnotationInfo; //Windows
+
+  /**
+   * Identifies the ItemType property, which is a text string describing the type of the automation element.
+   * ItemType is used to obtain information about items in a list, tree view, or data grid. For example, an item in a file directory view might be a "Document File" or a "Folder".
+   */
+  accessibilityItemType?: string; //Windows
+
+  /**
+   * An access key to hook up to the UIA_AccessKey_Property.
+   * Access keys are used in keyboard navigation to allow quick navigation to UI in an application.
+   */
+  accessibilityAccessKey?: string; //Windows
+
+  /**
+   * accessibilityDescription provides more detailed information specific to the element (i.e. last edit date, full location for a file)
+   * while accessibilityHint provides information on what will happen when they perform an action.
+   *
+   */
+  accessibilityDescription?: string; // Windows
+  'aria-description'?: string; // Windows
+}
+
 export interface AccessibilityPropsAndroid {
   /**
    * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
diff --git a/vnext/src-win/Libraries/Components/View/ViewPropTypes.windows.js b/vnext/src-win/Libraries/Components/View/ViewPropTypes.windows.js
diff --git a/vnext/src-win/Libraries/NativeComponent/BaseViewConfig.windows.js b/vnext/src-win/Libraries/NativeComponent/BaseViewConfig.windows.js
