Add support for accessibilityPosInSet and accessibilitySetSize to Fabric (#13518)

* Add Support for AccessibilityPosInSet

* Change files

* Format

* Add testing

* Fix Missing TestID

* Add Props to Accessibility Tree Dumps

* Update Fabric Snapshots

* Update Touchable Example

* Update Snapshotes

Author: chiaramooney

change/react-native-windows-0aaea0d3-da44-4492-a0e8-fe75cfbeb247.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add Support for AccessibilityPosInSet",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/@react-native-windows/tester/overrides.json

@@ -61,6 +61,13 @@
       "baseHash": "c4d61d6e76488c48b8256e6abc9bb38ef8e54c44",
       "issue": 5688
     },
+    {
+      "type": "derived",
+      "file": "src/js/examples/Touchable/TouchableExample.windows.js",
+      "baseFile": "packages/rn-tester/js/examples/Touchable/TouchableExample.js",
+      "baseHash": "b91360dda9abf5e2b6f5d6d6a258c7e6f9b0b4d8",
+      "issue": 0
+    },
     {
       "type": "patch",
       "file": "src/js/examples/TurboModule/SampleTurboModuleExample.windows.js",

packages/@react-native-windows/tester/src/js/examples-win/Button/ButtonExample.windows.js

@@ -219,6 +219,8 @@ exports.examples = [
                 accessibilityLabel="Press to submit your application!"
                 accessibilityRole="Button"
                 accessibilityHint="Submit Button"
+                accessibilityPosInSet={1}
+                accessibilitySetSize={1}
               />
             );
           }}

packages/@react-native-windows/tester/src/js/examples-win/Switch/SwitchExample.windows.js

@@ -292,13 +292,17 @@ class AccessibilitySwitchExample extends React.Component<
           <Switch
             accessibilityLabel="This is a Switch"
             accessibilityHint="Switch"
+            accessibilityPosInSet={1}
+            accessibilitySetSize={4}
             nativeID="accessibility-switch"
             onValueChange={value => this.setState({switchValue: value})}
             value={this.state.switchValue}
           />
           <Switch
             accessibilityLabel="This is a Switch with focusable set to false"
             accessibilityHint="Switch"
+            accessibilityPosInSet={2}
+            accessibilitySetSize={4}
             // focusable={false}
             onValueChange={value => this.setState({noFocusableValue: value})}
             value={this.state.noFocusableValue}
@@ -308,13 +312,17 @@ class AccessibilitySwitchExample extends React.Component<
           <Switch
             accessibilityLabel="This is a Switch with accessible set to false"
             accessibilityHint="Switch"
+            accessibilityPosInSet={3}
+            accessibilitySetSize={4}
             // accessible={false}
             onValueChange={value => this.setState({noAccessibleValue: value})}
             value={this.state.noAccessibleValue}
           />
           <Switch
             accessibilityLabel="This is a Switch with focusable and accessible set to false"
             accessibilityHint="Switch"
+            accessibilityPosInSet={4}
+            accessibilitySetSize={4}
             // focusable={false}
             // accessible={false}
             onValueChange={value => this.setState({noFocusValue: value})}

packages/@react-native-windows/tester/src/js/examples/ActivityIndicator/ActivityIndicatorExample.windows.js

@@ -77,6 +77,8 @@ exports.examples = [
           color="white"
           testID="default_activity_indicator"
           accessibilityLabel="Wait for content to load!"
+          accessibilityPosInSet={1}
+          accessibilitySetSize={1}
           accessible
         />
       );

packages/@react-native-windows/tester/src/js/examples/Image/ImageExample.windows.js

@@ -1571,6 +1571,31 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Accessibility Position in Set and Accessibility Set Size',
+    description:
+      'When their are a set of elements the acessibilityPosInSet and accessibilitySetSize props should be used to alert UIA of the set structure',
+    render: function (): React.Node {
+      return (
+        <View accessible testID='image-set'>
+          <Image
+          source={fullImage}
+          style={styles.base}
+          accessible
+          accessibilityPosInSet={1}
+          accessibilitySetSize={2}
+        />
+        <Image
+          source={fullImage}
+          style={styles.base}
+          accessible
+          accessibilityPosInSet={2}
+          accessibilitySetSize={2}
+        />
+        </View>
+      );
+    },
+  },
   {
     title: 'Fade Duration',
     description:

packages/@react-native-windows/tester/src/js/examples/Pressable/PressableExample.windows.js

@@ -1038,6 +1038,30 @@ const examples = [
       );
     },
   },
+  // [Windows
+  {
+    title: 'Set of Pressables',
+    description: 'Pressables can be defined as a set using accessibilityPosInSet and accessibilitySetSize',
+    render: function (): React.Node {
+      return (
+        <View accessible testID='pressable_set'>
+          <Pressable
+            onPress={() => {}} accessibilityPosInSet={1} accessibilitySetSize={3}>
+            <Text>Pressable 1 of 3</Text>
+          </Pressable>
+          <Pressable
+            onPress={() => {}} accessibilityPosInSet={2} accessibilitySetSize={3}>
+            <Text>Pressable 2 of 3</Text>
+          </Pressable>
+          <Pressable
+            onPress={() => {}} accessibilityPosInSet={3} accessibilitySetSize={3}>
+            <Text>Pressable 3 of 3</Text>
+          </Pressable>
+        </View>
+      );
+    },
+  },
+  // Windows]
 ];
 
 if (ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover()) {

packages/@react-native-windows/tester/src/js/examples/Text/TextExample.windows.js

@@ -1550,7 +1550,9 @@ const examples = [
           <Text
             nativeID="text-accessibility"
             accessibilityLabel="This text has customized accessibility"
-            accessibilityHint="Text">
+            accessibilityHint="Text"
+            accessibilityPosInSet={1}
+            accessibilitySetSize={1}>
             This text has customized accessibility.
           </Text>
         </View>

packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js

@@ -800,6 +800,33 @@ const examples: Array<RNTesterModuleExample> = [
       );
     },
   },
+  {
+    title: 'Set of TextInputs',
+    render: function (): React.Node {
+      return (
+        <View accessible testID="textinput-set">
+          <ExampleTextInput
+            style={styles.singleLine}
+            placeholder='TextInput 1 in Set of 3'
+            accessibilityPosInSet={1}
+            accessibilitySetSize={3}
+          />
+          <ExampleTextInput
+            style={styles.singleLine}
+            placeholder='TextInput 2 in Set of 3'
+            accessibilityPosInSet={2}
+            accessibilitySetSize={3}
+          />
+          <ExampleTextInput
+            style={styles.singleLine}
+            placeholder='TextInput 3 in Set of 3'
+            accessibilityPosInSet={3}
+            accessibilitySetSize={3}
+          />
+        </View>
+      );
+    },
+  },
   // Windows]
 ];