[Fabric] Implement IRangeValueProvider and Adjust IValueProvider Impl…

…ementation (#14212) * IRangeValue Provider * Adjust ReadOnly to Use Prop Value * Complete IRangeValueProvider Implementation * Change files * Update Snapshots
microsoft · Dec 19, 2024 · 7e4bcc6 · 7e4bcc6
1 parent 5b3faa4
commit 7e4bcc6
Show file tree

Hide file tree

Showing 31 changed files with 1,001 additions and 111 deletions.
diff --git a/change/react-native-windows-b6be67a1-15ea-4cca-9226-b7c33cd7f710.json b/change/react-native-windows-b6be67a1-15ea-4cca-9226-b7c33cd7f710.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "IRangeValue Provider",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/...t-native-windows/tester/src/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx b/...t-native-windows/tester/src/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx
@@ -436,7 +436,8 @@ class AccessibilityStateExamples extends React.Component {
         </Text>
         <TouchableHighlight
           style={{width: 100, height: 50, backgroundColor: 'blue'}}
-          onPress={this.rangePress}>
+          onPress={this.rangePress}
+          testID="accessibilityValue-increment">
           <Text>Range value increment</Text>
         </TouchableHighlight>
         <View
@@ -451,7 +452,9 @@ class AccessibilityStateExamples extends React.Component {
             min: this.state.viewRangeMin,
             max: this.state.viewRangeMax,
             now: this.state.viewRangeNow,
-          }}>
+          }}
+          testID="accessibilityValue-number"
+          accessibilityState={{readOnly: true}}>
           <Text>
             The View's (accessibilityRole == adjustable, ie. Slider) properties
             should be the following according to UIA: Min-{' '}
@@ -472,7 +475,10 @@ class AccessibilityStateExamples extends React.Component {
           accessibilityValue={{
             text: this.state.viewValueText,
           }}
-          accessibilityRole="combobox">
+          accessibilityRole="combobox"
+          testID="accessibilityValue-text"
+          accessible
+          aria-readonly>
           <Text>
             The View's properties should be the following according to UIA:
             Text- {this.state.viewValueText}

diff --git a/packages/e2e-test-app-fabric/test/AccessibilityTest.test.ts b/packages/e2e-test-app-fabric/test/AccessibilityTest.test.ts
@@ -59,4 +59,22 @@ describe('Accessibility Tests', () => {
     const dump = await dumpVisualTree('selection-container');
     expect(dump).toMatchSnapshot();
   });
+  test('Components can store range data by setting the min, max, and now of accessibilityValue', async () => {
+    await searchBox('Sta');
+    const componentsTab = await app.findElementByTestID(
+      'accessibilityValue-number',
+    );
+    await componentsTab.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('accessibilityValue-number');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Components can store value data by setting the text of accessibilityValue', async () => {
+    await searchBox('Sta');
+    const componentsTab = await app.findElementByTestID(
+      'accessibilityValue-text',
+    );
+    await componentsTab.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('accessibilityValue-text');
+    expect(dump).toMatchSnapshot();
+  });
 });
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,120 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Accessibility Tests Components can store range data by setting the min, max, and now of accessibilityValue 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "accessibilityValue-number",
+    "ControlType": 50015,
+    "IsKeyboardFocusable": true,
+    "LocalizedControlType": "slider",
+    "RangeValuePattern.IsReadOnly": true,
+    "RangeValuePattern.Maximum": 125,
+    "RangeValuePattern.Minimum": 5,
+    "RangeValuePattern.Value": 10,
+    "__Children": [
+      {
+        "AutomationId": "",
+        "ControlType": 50020,
+        "LocalizedControlType": "text",
+        "Name": "The View's (accessibilityRole == adjustable, ie. Slider) properties should be the following according to UIA: Min- 5Max- 125Now- 10",
+      },
+    ],
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ViewComponentView",
+    "_Props": {
+      "TestId": "accessibilityValue-number",
+    },
+    "__Children": [
+      {
+        "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+        "_Props": {},
+      },
+    ],
+  },
+  "Visual Tree": {
+    "Brush": {
+      "Brush Type": "ColorBrush",
+      "Color": "rgba(128, 128, 128, 255)",
+    },
+    "Comment": "accessibilityValue-number",
+    "Offset": "0, 0, 0",
+    "Size": "916, 50",
+    "Visual Type": "SpriteVisual",
+    "__Children": [
+      {
+        "Offset": "0, 0, 0",
+        "Size": "916, 19",
+        "Visual Type": "SpriteVisual",
+        "__Children": [
+          {
+            "Offset": "0, 0, 0",
+            "Size": "916, 19",
+            "Visual Type": "SpriteVisual",
+          },
+        ],
+      },
+    ],
+  },
+}
+`;
+
+exports[`Accessibility Tests Components can store value data by setting the text of accessibilityValue 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "accessibilityValue-text",
+    "ControlType": 50003,
+    "LocalizedControlType": "combo box",
+    "ValuePattern.IsReadOnly": true,
+    "ValuePattern.Value": "testText",
+    "__Children": [
+      {
+        "AutomationId": "",
+        "ControlType": 50020,
+        "LocalizedControlType": "text",
+        "Name": "The View's properties should be the following according to UIA: Text- testText",
+      },
+    ],
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ViewComponentView",
+    "_Props": {
+      "TestId": "accessibilityValue-text",
+    },
+    "__Children": [
+      {
+        "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+        "_Props": {},
+      },
+    ],
+  },
+  "Visual Tree": {
+    "Brush": {
+      "Brush Type": "ColorBrush",
+      "Color": "rgba(128, 128, 128, 255)",
+    },
+    "Comment": "accessibilityValue-text",
+    "Offset": "0, 0, 0",
+    "Size": "916, 50",
+    "Visual Type": "SpriteVisual",
+    "__Children": [
+      {
+        "Offset": "0, 0, 0",
+        "Size": "916, 20",
+        "Visual Type": "SpriteVisual",
+        "__Children": [
+          {
+            "Offset": "0, 0, 0",
+            "Size": "916, 20",
+            "Visual Type": "SpriteVisual",
+          },
+        ],
+      },
+    ],
+  },
+}
+`;
+
 exports[`Accessibility Tests Elements can set accessibilityState:selected to false 1`] = `
 {
   "Automation Tree": {

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
@@ -4908,7 +4908,6 @@ exports[`Home UIA Tree Dump Search Bar 1`] = `
     "IsKeyboardFocusable": true,
     "LocalizedControlType": "edit",
     "Name": "Search...",
-    "ValuePattern.IsReadOnly": false,
   },
   "Component Tree": {
     "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView",