Add Testing for accessibilityValue and Implement IValueProvider condi…

…tionally (#13544) * Adjust Support for IValueProvider * Add Testing for accessibilityValue * Edit Examples * Change files * Add Extra Func * Fix Up Test Infra * Update Snapshots * Update Snapshots * Format * Fix Typo * Fix Typo * Format * Update ImageComponentTest.test.ts.snap * Update RNTesterApp-Fabric.cpp
microsoft · Aug 20, 2024 · b9aed0e · b9aed0e
1 parent a9e5ef1
commit b9aed0e
Show file tree

Hide file tree

Showing 24 changed files with 512 additions and 23 deletions.
diff --git a/change/react-native-windows-5fe16ce6-e8a9-4b9f-a0a4-1a5a06287bcc.json b/change/react-native-windows-5fe16ce6-e8a9-4b9f-a0a4-1a5a06287bcc.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adjust Support for IValueProvider",
+  "packageName": "react-native-windows",
+  "email": "34109996+chiaramooney@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/@react-native-windows/tester/src/js/examples-win/Button/ButtonExample.windows.js b/packages/@react-native-windows/tester/src/js/examples-win/Button/ButtonExample.windows.js
@@ -217,10 +217,11 @@ exports.examples = [
                 testID="accessibility_props"
                 title="Submit Application"
                 accessibilityLabel="Press to submit your application!"
-                accessibilityRole="Button"
+                accessibilityRole="button"
                 accessibilityHint="Submit Button"
                 accessibilityPosInSet={1}
                 accessibilitySetSize={1}
+                accessibilityValue={{Text: "Submit Application"}}
               />
             );
           }}

diff --git a/packages/@react-native-windows/tester/src/js/examples/Pressable/PressableExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/Pressable/PressableExample.windows.js
@@ -122,6 +122,7 @@ function PressableFeedbackEvents() {
           testID="pressable_feedback_events_button"
           accessibilityLabel="pressable feedback events"
           accessibilityRole="button"
+          accessibilityValue={{text: "Press Me"}}
           // [Windows
           onFocus={() => appendEvent('focus')}
           onBlur={() => appendEvent('blur')}
@@ -959,7 +960,7 @@ const examples = [
             onPress={() => {}}
             importantForAccessibility="no-hide-descendants"
             accessibilityHint="Button"
-            accessibilityValue={0}>
+            accessibilityValue={{text: "Child Pressable"}}>
             <Text>Parent Pressable</Text>
             <Pressable onPress={() => {}}>
               <Text>Child Pressable</Text>

diff --git a/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js
@@ -827,6 +827,20 @@ const examples: Array<RNTesterModuleExample> = [
       );
     },
   },
+  {
+    title: 'Searchbox',
+    render: function (): React.Node {
+      return (
+        <View accessible testID="textinput-searchbox">
+          <ExampleTextInput
+            style={styles.singleLine}
+            accessibilityRole="searchbox"
+            defaultValue="Search"
+          />
+        </View>
+      );
+    },
+  },
   // Windows]
 ];
 

diff --git a/packages/@react-native-windows/tester/src/js/examples/Touchable/TouchableExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/Touchable/TouchableExample.windows.js
@@ -162,6 +162,7 @@ class TouchableFeedbackEvents extends React.Component<{...}, $FlowFixMeState> {
             testID="touchable_feedback_events_button"
             accessibilityLabel="touchable feedback events"
             accessibilityRole="button"
+            accessibilityValue={{text: "Press Me"}}
             onPress={() => this._appendEvent('press')}
             onPressIn={() => this._appendEvent('pressIn')}
             onPressOut={() => this._appendEvent('pressOut')}

diff --git a/packages/@react-native-windows/tester/src/js/examples/View/ViewExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/View/ViewExample.windows.js
@@ -471,7 +471,7 @@ class AccessibilityExample extends React.Component<
         accessibilityLabel="A View with accessibility values"
         accessibilityHint="Accessibility Hint"
         accessibilityRole="button"
-        accessibilityValue={0}
+        accessibilityValue={{now: this.state.tap}}
         accessibilityActions={[
           {name: 'cut', label: 'cut'},
           {name: 'copy', label: 'copy'},
@@ -503,6 +503,9 @@ class AccessibilityExample extends React.Component<
         <View importantForAccessibility="no-hide-descendants">
           <Text>This element should be hidden from accessibility.</Text>
         </View>
+        <View accessible accessibilityValue={{now: this.state.tap}}>
+          <Text>This sub-view should not have an accessibility value. It's control type does not support the value pattern.</Text>
+        </View>
       </View>
     );
   }

diff --git a/packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts b/packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts
@@ -803,4 +803,10 @@ describe('TextInput Tests', () => {
     const dump = await dumpVisualTree('textinput-cursorColor');
     expect(dump).toMatchSnapshot();
   });
+  test('TextInputs which have a searchbox role should also support the value pattern.', async () => {
+    const component = await app.findElementByTestID('textinput-searchbox');
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('textinput-searchbox');
+    expect(dump).toMatchSnapshot();
+  });
 });
diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap
@@ -9627,6 +9627,7 @@ exports[`Home UIA Tree Dump Search Bar 1`] = `
     "IsKeyboardFocusable": true,
     "LocalizedControlType": "edit",
     "Name": "Search...",
+    "ValuePattern.IsReadOnly": false,
   },
   "Component Tree": {
     "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView",

diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap
@@ -686,6 +686,7 @@ exports[`Pressable Tests Pressables can have event handlers 1`] = `
     "IsKeyboardFocusable": true,
     "LocalizedControlType": "button",
     "Name": "pressable feedback events",
+    "ValuePattern.Value": "Press Me",
     "__Children": [
       {
         "AutomationId": "",