Skip to content

Commit 7e4bcc6

Browse files
chiaramooneychiaramooney
authored
[Fabric] Implement IRangeValueProvider and Adjust IValueProvider Implementation (#14212)
* IRangeValue Provider * Adjust ReadOnly to Use Prop Value * Complete IRangeValueProvider Implementation * Change files * Update Snapshots
1 parent 5b3faa4 commit 7e4bcc6

31 files changed

+1001
-111
lines changed

‎change/react-native-windows-b6be67a1-15ea-4cca-9226-b7c33cd7f710.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "IRangeValue Provider",
4+
"packageName": "react-native-windows",
5+
"email": "34109996+chiaramooney@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

‎packages/@react-native-windows/tester/src/js/examples-win/Accessibility/AccessibilityExampleWindows.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -436,7 +436,8 @@ class AccessibilityStateExamples extends React.Component {
436436
</Text>
437437
<TouchableHighlight
438438
style={{width: 100, height: 50, backgroundColor: 'blue'}}
439-
onPress={this.rangePress}>
439+
onPress={this.rangePress}
440+
testID="accessibilityValue-increment">
440441
<Text>Range value increment</Text>
441442
</TouchableHighlight>
442443
<View
@@ -451,7 +452,9 @@ class AccessibilityStateExamples extends React.Component {
451452
min: this.state.viewRangeMin,
452453
max: this.state.viewRangeMax,
453454
now: this.state.viewRangeNow,
454-
}}>
455+
}}
456+
testID="accessibilityValue-number"
457+
accessibilityState={{readOnly: true}}>
455458
<Text>
456459
The View's (accessibilityRole == adjustable, ie. Slider) properties
457460
should be the following according to UIA: Min-{' '}
@@ -472,7 +475,10 @@ class AccessibilityStateExamples extends React.Component {
472475
accessibilityValue={{
473476
text: this.state.viewValueText,
474477
}}
475-
accessibilityRole="combobox">
478+
accessibilityRole="combobox"
479+
testID="accessibilityValue-text"
480+
accessible
481+
aria-readonly>
476482
<Text>
477483
The View's properties should be the following according to UIA:
478484
Text- {this.state.viewValueText}

‎packages/e2e-test-app-fabric/test/AccessibilityTest.test.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,22 @@ describe('Accessibility Tests', () => {
5959
const dump = await dumpVisualTree('selection-container');
6060
expect(dump).toMatchSnapshot();
6161
});
62+
test('Components can store range data by setting the min, max, and now of accessibilityValue', async () => {
63+
await searchBox('Sta');
64+
const componentsTab = await app.findElementByTestID(
65+
'accessibilityValue-number',
66+
);
67+
await componentsTab.waitForDisplayed({timeout: 5000});
68+
const dump = await dumpVisualTree('accessibilityValue-number');
69+
expect(dump).toMatchSnapshot();
70+
});
71+
test('Components can store value data by setting the text of accessibilityValue', async () => {
72+
await searchBox('Sta');
73+
const componentsTab = await app.findElementByTestID(
74+
'accessibilityValue-text',
75+
);
76+
await componentsTab.waitForDisplayed({timeout: 5000});
77+
const dump = await dumpVisualTree('accessibilityValue-text');
78+
expect(dump).toMatchSnapshot();
79+
});
6280
});

‎packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,120 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Accessibility Tests Components can store range data by setting the min, max, and now of accessibilityValue 1`] = `
4+
{
5+
"Automation Tree": {
6+
"AutomationId": "accessibilityValue-number",
7+
"ControlType": 50015,
8+
"IsKeyboardFocusable": true,
9+
"LocalizedControlType": "slider",
10+
"RangeValuePattern.IsReadOnly": true,
11+
"RangeValuePattern.Maximum": 125,
12+
"RangeValuePattern.Minimum": 5,
13+
"RangeValuePattern.Value": 10,
14+
"__Children": [
15+
{
16+
"AutomationId": "",
17+
"ControlType": 50020,
18+
"LocalizedControlType": "text",
19+
"Name": "The View's (accessibilityRole == adjustable, ie. Slider) properties should be the following according to UIA: Min- 5Max- 125Now- 10",
20+
},
21+
],
22+
},
23+
"Component Tree": {
24+
"Type": "Microsoft.ReactNative.Composition.ViewComponentView",
25+
"_Props": {
26+
"TestId": "accessibilityValue-number",
27+
},
28+
"__Children": [
29+
{
30+
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
31+
"_Props": {},
32+
},
33+
],
34+
},
35+
"Visual Tree": {
36+
"Brush": {
37+
"Brush Type": "ColorBrush",
38+
"Color": "rgba(128, 128, 128, 255)",
39+
},
40+
"Comment": "accessibilityValue-number",
41+
"Offset": "0, 0, 0",
42+
"Size": "916, 50",
43+
"Visual Type": "SpriteVisual",
44+
"__Children": [
45+
{
46+
"Offset": "0, 0, 0",
47+
"Size": "916, 19",
48+
"Visual Type": "SpriteVisual",
49+
"__Children": [
50+
{
51+
"Offset": "0, 0, 0",
52+
"Size": "916, 19",
53+
"Visual Type": "SpriteVisual",
54+
},
55+
],
56+
},
57+
],
58+
},
59+
}
60+
`;
61+
62+
exports[`Accessibility Tests Components can store value data by setting the text of accessibilityValue 1`] = `
63+
{
64+
"Automation Tree": {
65+
"AutomationId": "accessibilityValue-text",
66+
"ControlType": 50003,
67+
"LocalizedControlType": "combo box",
68+
"ValuePattern.IsReadOnly": true,
69+
"ValuePattern.Value": "testText",
70+
"__Children": [
71+
{
72+
"AutomationId": "",
73+
"ControlType": 50020,
74+
"LocalizedControlType": "text",
75+
"Name": "The View's properties should be the following according to UIA: Text- testText",
76+
},
77+
],
78+
},
79+
"Component Tree": {
80+
"Type": "Microsoft.ReactNative.Composition.ViewComponentView",
81+
"_Props": {
82+
"TestId": "accessibilityValue-text",
83+
},
84+
"__Children": [
85+
{
86+
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
87+
"_Props": {},
88+
},
89+
],
90+
},
91+
"Visual Tree": {
92+
"Brush": {
93+
"Brush Type": "ColorBrush",
94+
"Color": "rgba(128, 128, 128, 255)",
95+
},
96+
"Comment": "accessibilityValue-text",
97+
"Offset": "0, 0, 0",
98+
"Size": "916, 50",
99+
"Visual Type": "SpriteVisual",
100+
"__Children": [
101+
{
102+
"Offset": "0, 0, 0",
103+
"Size": "916, 20",
104+
"Visual Type": "SpriteVisual",
105+
"__Children": [
106+
{
107+
"Offset": "0, 0, 0",
108+
"Size": "916, 20",
109+
"Visual Type": "SpriteVisual",
110+
},
111+
],
112+
},
113+
],
114+
},
115+
}
116+
`;
117+
3118
exports[`Accessibility Tests Elements can set accessibilityState:selected to false 1`] = `
4119
{
5120
"Automation Tree": {

‎packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4908,7 +4908,6 @@ exports[`Home UIA Tree Dump Search Bar 1`] = `
49084908
"IsKeyboardFocusable": true,
49094909
"LocalizedControlType": "edit",
49104910
"Name": "Search...",
4911-
"ValuePattern.IsReadOnly": false,
49124911
},
49134912
"Component Tree": {
49144913
"Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView",

0 commit comments

Comments
 (0)