[0.72] [Win32] Fix various text properties not being forwarded to nat…

…ive (#11723) * Fix various text properties not being forwarded to native * Change files * fix overrides
microsoft · Jun 8, 2023 · 88732b0 · 88732b0
1 parent d3b6a89
commit 88732b0
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 18 deletions.
diff --git a/change/@office-iss-react-native-win32-abd12dab-70d6-4d8b-b7a4-2a7a2941161e.json b/change/@office-iss-react-native-win32-abd12dab-70d6-4d8b-b7a4-2a7a2941161e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix various text properties not being forwarded to native",
+  "packageName": "@office-iss/react-native-win32",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/@office-iss/react-native-win32-tester/overrides.json b/packages/@office-iss/react-native-win32-tester/overrides.json
@@ -42,6 +42,10 @@
       "file": "src/js/utils/RNTesterList.win32.js",
       "baseFile": "packages/rn-tester/js/utils/RNTesterList.android.js",
       "baseHash": "8954573b49f8321edea6bd2bdddf814ba2a7226c"
+    },
+    {
+      "type": "platform",
+      "file": "src/js/components/TextWin32Test.tsx"
     }
   ]
 }
diff --git a/...s/Components/Text/Tests/TextWin32Test.tsx → ...ester/src/js/components/TextWin32Test.tsx b/...s/Components/Text/Tests/TextWin32Test.tsx → ...ester/src/js/components/TextWin32Test.tsx
@@ -1,8 +1,6 @@
 'use strict';
 import React from 'react'
-import { Button, View } from 'react-native';
-import { TextWin32 } from '../../Text/TextWin32';
-import { ViewWin32 } from '../../View/ViewWin32';
+import { Button, TextWin32, View, ViewWin32 } from 'react-native';
 
 // Disabling no-jsx-lambda so functional components are more convenient to use
 
@@ -37,7 +35,15 @@ const SelectableTextTest: React.FC<{}> = () => {
 const TextStyleTest: React.FC<{}> = () => {
   return (
     <ViewWin32>
-      <TextWin32 textStyle={'MediumBold'}>Normal Text Display</TextWin32>
+      <TextWin32 textStyle={'MediumBold'}>MediumBold TextStyle</TextWin32>
+    </ViewWin32>
+  );
+};
+
+const TextAcessibilityTest: React.FC<{}> = () => {
+  return (
+    <ViewWin32>
+      <TextWin32 accessibilityDescription="A11y description" >This TextWin32 text with accessibilityDescription</TextWin32>
     </ViewWin32>
   );
 };
@@ -140,6 +146,13 @@ export const examples = [
         return (<TextStyleTest />);
       },
     },
+    {
+      title: 'Acessibility Example',
+      description: 'Acessibility on Text in action',
+      render(): JSX.Element {
+        return (<TextAcessibilityTest />);
+      },
+    },
     {
       title: 'Tooltip Example',
       description: 'tooltips in action',

diff --git a/packages/@office-iss/react-native-win32-tester/src/js/utils/RNTesterList.win32.js b/packages/@office-iss/react-native-win32-tester/src/js/utils/RNTesterList.win32.js
@@ -121,7 +121,7 @@ const Components: Array<RNTesterModuleInfo> = [
   },
   {
     key: 'TextWin32Test',
-    module: require('@office-iss/react-native-win32/Libraries/Components/Text/Tests/TextWin32Test'),
+    module: require('../components/TextWin32Test'),
   },
   {
     key: 'TouchableExample',

diff --git a/packages/@office-iss/react-native-win32/overrides.json b/packages/@office-iss/react-native-win32/overrides.json
@@ -103,10 +103,6 @@
       "baseFile": "packages/react-native/Libraries/Components/ScrollView/ScrollView.js",
       "baseHash": "7d162bb43bce3f9da78b7c304530b3f804d21658"
     },
-    {
-      "type": "platform",
-      "file": "src/Libraries/Components/Text/Tests/TextWin32Test.tsx"
-    },
     {
       "type": "platform",
       "file": "src/Libraries/Components/Text/TextWin32.Props.ts"

diff --git a/packages/@office-iss/react-native-win32/package.json b/packages/@office-iss/react-native-win32/package.json
@@ -17,9 +17,8 @@
     "flow-check": "flow check",
     "lint:fix": "rnw-scripts lint:fix",
     "lint": "rnw-scripts lint",
-    "run-win32-dev-web": "npx @office-iss/rex-win32@0.68.33-devmain.16427.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDevMain --useWebDebugger",
-    "run-win32-devmain": "npx @office-iss/rex-win32@0.68.33-devmain.16427.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDevMain",
-    "run-win32": "npx @office-iss/rex-win32@0.68.33-devmain.16427.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useWebDebugger",
+    "run-win32-devmain": "npx @office-iss/rex-win32@0.71.15-devmain.16607.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDevMain --useDirectDebugger --useFastRefresh",
+    "run-win32": "npx @office-iss/rex-win32@0.71.15-devmain.16607.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDirectDebugger --useFastRefresh",
     "start": "react-native start --projectRoot ../react-native-win32-tester",
     "test": "jest",
     "validate-overrides": "react-native-platform-override validate"
@@ -103,4 +102,4 @@
   "engines": {
     "node": ">= 16"
   }
-}
+}
diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Text/TextNativeComponent.win32.js b/packages/@office-iss/react-native-win32/src/Libraries/Text/TextNativeComponent.win32.js
@@ -48,12 +48,38 @@ const textViewConfig = {
     android_hyphenationFrequency: true,
     lineBreakStrategyIOS: true,
     // [Windows
-    // Listed for the property to be honored even though
-    // the property tooltip and the events from ViewWin32
-    //work without being listed.  Any Text-specific events
-    // would need to be listed here.
-    focusable: true,
+    accessibilityAccessKey: true,
+    accessibilityAnnotation: true,
+    accessibilityControls: true,
+    accessibilityDescribedBy: true,
+    accessibilityDescription: true,
+    accessibilityItemType: true,
     accessibilityLevel: true,
+    accessibilityPositionInSet: true,
+    accessibilitySetSize: true,
+    animationClass: true,
+    cursor: true,
+    draggedTypes: true,
+    enableFocusRing: true,
+    focusable: true,
+    keyDownEvents: true,
+    keyUpEvents: true,
+    onBlur: true,
+    onBlurCapture: true,
+    onDragEnter: true,
+    onDragLeave: true,
+    onDrop: true,
+    onFocus: true,
+    onFocusCapture: true,
+    onKeyDown: true,
+    onKeyDownCapture: true,
+    onKeyUp: true,
+    onKeyUpCapture: true,
+    onMouseEnter: true,
+    onMouseLeave: true,
+    tabIndex: true,
+    textStyle: true,
+    tooltip: true,
     // Windows]
   },
   directEventTypes: {