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

…ive (#11722) * Fix various text properties not being forwarded to native * Change files * fix overrides
microsoft · Jun 8, 2023 · 202f2e9 · 202f2e9
1 parent 6cbbf8e
commit 202f2e9
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 17 deletions.
diff --git a/change/@office-iss-react-native-win32-14bcdf28-5c19-4ff0-b78f-af9fdfa5b1eb.json b/change/@office-iss-react-native-win32-14bcdf28-5c19-4ff0-b78f-af9fdfa5b1eb.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "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
@@ -49,6 +49,10 @@
       "baseFile": "packages/rn-tester/js/utils/testerStateUtils.js",
       "baseHash": "fafcb01f5f717d16fd558668a58ed12dcdf4454c",
       "issue": 6316
+    },
+    {
+      "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
@@ -115,7 +115,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
@@ -97,10 +97,6 @@
       "baseFile": "Libraries/Components/SafeAreaView/SafeAreaView.js",
       "baseHash": "bde271c753be96e28b5f1b539d0d9a0cbeee77ab"
     },
-    {
-      "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
@@ -12,8 +12,8 @@
     "flow-check": "flow check",
     "lint:fix": "rnw-scripts lint:fix",
     "lint": "rnw-scripts lint",
-    "run-win32-devmain": "npx @office-iss/rex-win32@0.68.26-devmain.16206.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDevMain --useDirectDebugger --useFastRefresh",
-    "run-win32": "npx @office-iss/rex-win32@0.68.26-devmain.16206.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDirectDebugger --useFastRefresh",
+    "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"
@@ -93,4 +93,4 @@
   "engines": {
     "node": ">= 14"
   }
-}
+}
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: {