[0.81] Cherry-pick fixes up to Add ability to customize native accessibility of custom native components

change/@react-native-windows-automation-commands-78e59fbb-fe4f-4921-b941-78c82219d869.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add name to accessibility type",
+  "packageName": "@react-native-windows/automation-commands",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@react-native-windows-codegen-2e4144c5-b4d8-4b06-94d1-c239fbfcba18.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add ability to customize native accessibility of custom native components",
+  "packageName": "@react-native-windows/codegen",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-055a5eb5-8f2c-409e-a4b4-4ba382eeeae0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add TSF support to TextInput",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-0b14d2b4-ff2a-4e94-95f7-bc04edf1a1e4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "adding accessibility and UIA support for XAML fabric",
+  "packageName": "react-native-windows",
+  "email": "protikbiswas100@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-4a3033f2-c79a-4a04-859f-0c4647cf1b4d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix DPI scaling for debugging overlay highlights",
+  "packageName": "react-native-windows",
+  "email": "74712637+iamAbhi-916@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-4acbe4b2-89e0-4adb-b6b1-9e9bbf4a6220.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Defer UIA accessibility provider initialization until requested",
+  "packageName": "react-native-windows",
+  "email": "198982749+Copilot@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-5bfa5aa2-4028-4dd5-bb13-031b42470bd2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "[Fabric] Fix UIA_LiveSettingPropertyId to use VT_I4 datatype instead of VT_BSTR",
+  "packageName": "react-native-windows",
+  "email": "ankudutt101@gmail.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-8d23ba00-efa5-4506-b2cd-aff4b69cfa3f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix stackoverflow in StructInfo",
+  "packageName": "react-native-windows",
+  "email": "vmorozov@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-9c3b8d8a-fba5-44b2-928e-a8f920fc9b05.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add ability to customize native accessibility of custom native components",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-cc8b5ca3-c345-4091-87d2-b21198d72f2c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Tooltip positioned incorrectly on non 100% scale factor",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-e3c55f20-cfa0-4c06-876b-b0d90e525adf.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Pressables should take focus on press",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-fdfd881c-5b04-4c05-ace6-fcca42dbd230.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Implements selectable for <Text>",
+  "packageName": "react-native-windows",
+  "email": "74712637+iamAbhi-916@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/@react-native-windows/automation-commands/src/dumpVisualTree.ts

@@ -37,6 +37,7 @@ export type AutomationNode = {
   AutomationId?: string;
   ControlType?: number;
   LocalizedControlType?: string;
+  Name?: string;
   __Children?: [AutomationNode];
 };
 

packages/@react-native-windows/codegen/src/generators/GenerateComponentWindows.ts

@@ -141,6 +141,12 @@ struct Base::_COMPONENT_NAME_:: {
                                         winrt::Microsoft::ReactNative::ComponentViewUpdateMask /*mask*/) noexcept {
   }
 
+  // CreateAutomationPeer will only be called if this method is overridden
+  virtual winrt::Windows::Foundation::IInspectable CreateAutomationPeer(const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+                                        const winrt::Microsoft::ReactNative::CreateAutomationPeerArgs& /*args*/) noexcept {
+    return nullptr;
+  }
+
 ::_COMPONENT_VIEW_COMMAND_HANDLERS_::
 
   ::_COMPONENT_VIEW_COMMAND_HANDLER_::
@@ -222,6 +228,14 @@ void Register::_COMPONENT_NAME_::NativeComponent(
           });
         }
 
+        if CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS (&TUserData::CreateAutomationPeer != &Base::_COMPONENT_NAME_::<TUserData>::CreateAutomationPeer) {
+            builder.SetCreateAutomationPeerHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                     const winrt::Microsoft::ReactNative::CreateAutomationPeerArgs& args) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            return userData->CreateAutomationPeer(view, args);
+          });
+        } 
+
         compBuilder.SetViewComponentViewInitializer([](const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
           auto userData = winrt::make_self<TUserData>();
           if CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS (&TUserData::Initialize != &Base::_COMPONENT_NAME_::<TUserData>::Initialize) {

packages/@react-native-windows/tester/src/js/examples-win/NativeComponents/CustomAccessibility.windows.js

@@ -0,0 +1,33 @@
+'use strict';
+
+import React from 'react';
+import {View} from 'react-native';
+import {CustomAccessibility} from 'sample-custom-component';
+import RNTesterText from '../../components/RNTesterText';
+
+const CustomAccessibilityExample = () => {
+  return (
+    <View testID="custom-accessibility-root-1" accessible accessibilityLabel='example root'>
+      <RNTesterText>The below view should have custom accessibility</RNTesterText>
+      <CustomAccessibility style={{width: 500, height: 500, backgroundColor:'green'}} accessible accessibilityLabel='accessibility should not show this, as native overrides it' testID="custom-accessibility-1"/>
+    </View>
+  );
+}
+
+exports.displayName = 'CustomAccessibilityExample';
+exports.framework = 'React';
+exports.category = 'UI';
+exports.title = 'Custom Native Accessibility Example';
+exports.description =
+  'Sample of a Custom Native Component overriding default accessibility';
+
+exports.examples = [
+  {
+    title: 'Custom Native Accessibility',
+    render: function (): React.Node {
+      return (
+        <CustomAccessibilityExample />
+      );
+    },
+  }
+];

packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js

@@ -80,6 +80,10 @@ const Components: Array<RNTesterModuleInfo> = [
     key: 'Moving Light',
     module: require('../examples-win/NativeComponents/MovingLight'),
   },
+  {
+    key: 'Custom Native Accessibility',
+    module: require('../examples-win/NativeComponents/CustomAccessibility'),
+  },
   {
     key: 'Native Component',
     module: require('../examples-win/NativeComponents/NativeComponent'),

packages/e2e-test-app-fabric/test/CustomAccessibilityTest.test.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ */
+
+import {dumpVisualTree} from '@react-native-windows/automation-commands';
+import {goToComponentExample} from './RNTesterNavigation';
+import {app} from '@react-native-windows/automation';
+import {verifyNoErrorLogs} from './Helpers';
+
+beforeAll(async () => {
+  // If window is partially offscreen, tests will fail to click on certain elements
+  await app.setWindowPosition(0, 0);
+  await app.setWindowSize(1000, 1250);
+  await goToComponentExample('Custom Native Accessibility Example');
+});
+
+afterEach(async () => {
+  await verifyNoErrorLogs();
+});
+
+describe('Custom Accessibility Tests', () => {
+  test('Verify custom native component has UIA label from native', async () => {
+    const nativeComponent = await dumpVisualTree('custom-accessibility-1');
+
+    // Verify that the native component reports its accessiblity label from the native code
+    expect(nativeComponent['Automation Tree'].Name).toBe(
+      'accessiblity label from native',
+    );
+
+    const dump = await dumpVisualTree('custom-accessibility-root-1');
+    expect(dump).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Custom Accessibility Tests Verify custom native component has UIA label from native 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "custom-accessibility-root-1",
+    "ControlType": 50026,
+    "LocalizedControlType": "group",
+    "Name": "example root",
+    "__Children": [
+      {
+        "AutomationId": "",
+        "ControlType": 50020,
+        "LocalizedControlType": "text",
+        "Name": "The below view should have custom accessibility",
+        "TextRangePattern.GetText": "The below view should have custom accessibility",
+      },
+      {
+        "AutomationId": "custom-accessibility-1",
+        "ControlType": 50026,
+        "LocalizedControlType": "group",
+        "Name": "accessiblity label from native",
+      },
+    ],
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ViewComponentView",
+    "_Props": {
+      "AccessibilityLabel": "example root",
+      "TestId": "custom-accessibility-root-1",
+    },
+    "__Children": [
+      {
+        "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+        "_Props": {},
+      },
+      {
+        "Type": "Microsoft.ReactNative.Composition.ViewComponentView",
+        "_Props": {
+          "AccessibilityLabel": "accessibility should not show this, as native overrides it",
+          "TestId": "custom-accessibility-1",
+        },
+      },
+    ],
+  },
+  "Visual Tree": {
+    "Comment": "custom-accessibility-root-1",
+    "Offset": "0, 0, 0",
+    "Size": "998, 519",
+    "Visual Type": "SpriteVisual",
+    "__Children": [
+      {
+        "Offset": "0, 0, 0",
+        "Size": "998, 19",
+        "Visual Type": "SpriteVisual",
+        "__Children": [
+          {
+            "Offset": "0, 0, 0",
+            "Size": "998, 19",
+            "Visual Type": "SpriteVisual",
+          },
+        ],
+      },
+      {
+        "Offset": "0, 19, 0",
+        "Size": "500, 500",
+        "Visual Type": "SpriteVisual",
+        "__Children": [
+          {
+            "Brush": {
+              "Brush Type": "ColorBrush",
+              "Color": "rgba(0, 128, 0, 255)",
+            },
+            "Comment": "custom-accessibility-1",
+            "Offset": "0, 0, 0",
+            "Size": "500, 500",
+            "Visual Type": "SpriteVisual",
+          },
+        ],
+      },
+    ],
+  },
+}
+`;