[0.74] Rework modal to be implemented entirely using public APIs (#14271)

* Implement ISelectionProvider and ISelectionItemProvider (#14019)

Adds support for ISelectionProvider interface
Adds support for ISelectionItemProvider interface
Adds support for accessibilityState:selected
Adjusts AccessibilityState native type on Windows to be std::optional instead of bool
Adjusts AccessibilityState native type on Windows to include multiselectable and required fields of type std::optional
Adds multiselectable and required fields to AccessibilityState type in JS with type boolean | undefined
Adds support for aria-multiselectable and aria-required.
Adds support for the following accessibilityActions: addToSelection, removeFromSelection, select
Fixes crash in AccessibilityInsights.

* [Fabric] Implement IRangeValueProvider and Adjust IValueProvider Implementation (#14212)

* IRangeValue Provider

* Adjust ReadOnly to Use Prop Value

* Complete IRangeValueProvider Implementation

* Change files

* Update Snapshots

* Rework modal to be implemented entirely using public APIs (#14256)

* Rework modal implementation to use public APIs

* shutdown fix

* Change files

* format

* remove dead code

* format

* fixes

* fix

* UIA tree for root component should be kept distinct from main UIA tree

* input offset fix for sub rootviews

* Split modal into two componentview's so that we dont have multiple roots in our componentview tree

* format

* Ensure rootview removes itself from the island, before a new one adds itself on instance reload

* defork some modal test pages

* remove override

* fix

* fix

* snapshots

---------

Co-authored-by: Chiara Mooney <[email protected]>

Author: acoates-ms

change/react-native-windows-a7e4e9a7-38af-4609-a0a4-152046e6e53b.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement ISelectionProvider and ISelectionItemProvider",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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"
+}

change/react-native-windows-f295c471-5165-440a-a5d5-4d9b2d9c84d9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Rework modal implementation to use public APIs",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -27,12 +27,6 @@
       "type": "platform",
       "file": "src/js/examples/HTTP/HTTPExampleMultiPartFormData.js"
     },
-    {
-      "type": "patch",
-      "file": "src/js/examples/Modal/ModalOnShow.windows.js",
-      "baseFile": "packages/rn-tester/js/examples/Modal/ModalOnShow.js",
-      "baseHash": "5098723f16d232ef3c5971a6f153522f42f87f61"
-    },
     {
       "type": "patch",
       "file": "src/js/examples/Modal/ModalPresentation.windows.js",

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

@@ -312,33 +312,40 @@ class AccessibilityStateExamples extends React.Component {
           The following list of TouchableHighlights toggles
           accessibilityState.selected when touched:
         </Text>
-        <FlatList
-          accessibilityLabel="List of selectable items"
-          data={selectableItems}
-          renderItem={item => (
-            <TouchableHighlight
-              style={{
-                width: 100,
-                height: 50,
-                backgroundColor: this.state.itemsSelected[item.index]
-                  ? 'gray'
-                  : 'lightskyblue',
-              }}
-              accessibilityRole="button"
-              accessibilityLabel={'Selectable item ' + (item.index + 1)}
-              accessibilityState={{
-                selected: this.state.itemsSelected[item.index],
-              }}
-              onPress={() => this.selectPress(item.index)}>
-              <Text>
-                {this.state.itemsSelected[item.index]
-                  ? 'Selected'
-                  : 'Unselected'}
-              </Text>
-            </TouchableHighlight>
-          )}
-          keyExtractor={(item, index) => index.toString()}
-        />
+        <View
+          accessible
+          accessibilityLabel="Selection Container"
+          accessibilityState={{multiselectable: true, required: true}}
+          testID="selection-container">
+          <FlatList
+            accessibilityLabel="List of selectable items"
+            data={selectableItems}
+            renderItem={item => (
+              <TouchableHighlight
+                style={{
+                  width: 100,
+                  height: 50,
+                  backgroundColor: this.state.itemsSelected[item.index]
+                    ? 'gray'
+                    : 'lightskyblue',
+                }}
+                accessibilityRole="button"
+                accessibilityLabel={'Selectable item ' + (item.index + 1)}
+                testID={'Selectable item ' + (item.index + 1)}
+                accessibilityState={{
+                  selected: this.state.itemsSelected[item.index],
+                }}
+                onPress={() => this.selectPress(item.index)}>
+                <Text>
+                  {this.state.itemsSelected[item.index]
+                    ? 'Selected'
+                    : 'Unselected'}
+                </Text>
+              </TouchableHighlight>
+            )}
+            keyExtractor={(item, index) => index.toString()}
+          />
+        </View>
         <Text>
           The following TouchableHighlight cycles accessibilityState.checked
           through unchecked/checked/mixed for the View under it:
@@ -429,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
@@ -444,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-{' '}
@@ -465,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}

packages/@react-native-windows/tester/src/js/examples/Modal/ModalOnShow.windows.js

@@ -293,13 +293,9 @@ const styles = StyleSheet.create({
     marginTop: 6,
   },
   modalContainer: {
-    // [Windows
-    width: 500,
-    height: 500,
-    // flex: 1,
-    // justifyContent: 'center',
-    // padding: 20,
-    // Windows ]
+    flex: 1,
+    justifyContent: 'center',
+    padding: 20,
   },
   modalInnerContainer: {
     borderRadius: 10,

packages/@react-native-windows/tester/src/js/examples/Modal/ModalPresentation.windows.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ */
+
+import {dumpVisualTree} from '@react-native-windows/automation-commands';
+import {goToApiExample} from './RNTesterNavigation';
+import {app} from '@react-native-windows/automation';
+import {verifyNoErrorLogs} from './Helpers';
+
+beforeAll(async () => {
+  // If window is partially offscreen, tests will fail to click on certain elements
+  await app.setWindowPosition(0, 0);
+  await app.setWindowSize(1000, 1250);
+  await goToApiExample('Accessibility Windows');
+});
+
+afterEach(async () => {
+  await verifyNoErrorLogs();
+});
+
+const searchBox = async (input: string) => {
+  const searchBox = await app.findElementByTestID('example_search');
+  await app.waitUntil(
+    async () => {
+      await searchBox.setValue(input);
+      return (await searchBox.getText()) === input;
+    },
+    {
+      interval: 1500,
+      timeout: 5000,
+      timeoutMsg: `Unable to enter correct search text into test searchbox.`,
+    },
+  );
+};
+
+describe('Accessibility Tests', () => {
+  test('Elements can set accessibilityState:selected to false', async () => {
+    await searchBox('Sta');
+    const component = await app.findElementByTestID('Selectable item 1');
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('Selectable item 1');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Elements can set accessibilityState:selected to true', async () => {
+    await searchBox('Sta');
+    const component = await app.findElementByTestID('Selectable item 1');
+    await component.waitForDisplayed({timeout: 5000});
+    await component.click();
+    const dump = await dumpVisualTree('Selectable item 1');
+    expect(dump).toMatchSnapshot();
+  });
+  test('Selectable items must have a Selection Container. Elements can set accessibilityState:multiselectable and accessibilityState:required to true', async () => {
+    await searchBox('Sta');
+    const componentsTab = await app.findElementByTestID('selection-container');
+    await componentsTab.waitForDisplayed({timeout: 5000});
+    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();
+  });
+});