[Fabric] Implement IExpandCollapseProvider (microsoft#13892)

* Implement IExpandCollapseProvider * Change files * Adjust Example * Format + Update Snapshots
acoates-ms · Oct 15, 2024 · 01fe04b · 01fe04b
1 parent cc7dea7
commit 01fe04b
Show file tree

Hide file tree

Showing 10 changed files with 150 additions and 22 deletions.
diff --git a/change/react-native-windows-9696c96d-9a44-4ffc-84ea-dd5451818206.json b/change/react-native-windows-9696c96d-9a44-4ffc-84ea-dd5451818206.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement IExpandCollapseProvider",
+  "packageName": "react-native-windows",
+  "email": "34109996+chiaramooney@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
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
@@ -463,6 +463,7 @@ class AccessibilityExample extends React.Component<
 > {
   state: {tap: number} = {
     tap: 0,
+    expanded: true,
   };
 
   render(): React.Node {
@@ -473,28 +474,31 @@ class AccessibilityExample extends React.Component<
         accessibilityRole="button"
         accessibilityValue={0}
         accessibilityActions={[
-          {name: 'cut', label: 'cut'},
-          {name: 'copy', label: 'copy'},
-          {name: 'paste', label: 'paste'},
+          {name: 'expand', label: 'expand'},
+          {name: 'collapse', label: 'collapse'},
         ]}
+        accessibilityState={{expanded: this.state.expanded}}
+        accessibilityPosInSet={1}
+        accessibilitySetSize={1}
+        accessibilityLiveRegion='polite'
         testID="accessibility"
         accessible
         focusable
         onAccessibilityAction={event => {
           switch (event.nativeEvent.actionName) {
-            case 'cut':
-              Alert.alert('Alert', 'cut action success');
-              break;
-            case 'copy':
-              Alert.alert('Alert', 'copy action success');
-              break;
-            case 'paste':
-              Alert.alert('Alert', 'paste action success');
+            case 'expand':
+              this.setState({expanded: true})
               break;
+            case 'collapse':
+              this.setState({expanded: false})
           }
         }}
         onAccessibilityTap={() => {
           this.setState({tap: this.state.tap + 1});
+        }}
+        onPress={()=>{
+          this.setState({expanded: !this.state.expanded});
+          console.log('Pressed');
         }}>
         <Text>A View with accessibility values.</Text>
         <Text>Current Number of Accessibility Taps: {this.state.tap}</Text>

diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/ViewComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/ViewComponentTest.test.ts.snap
@@ -1094,6 +1094,7 @@ exports[`View Tests Views can have customized accessibility 1`] = `
   "Automation Tree": {
     "AutomationId": "accessibility",
     "ControlType": 50000,
+    "ExpandCollapsePattern.ExpandCollapseState": "Expanded",
     "HelpText": "Accessibility Hint",
     "IsKeyboardFocusable": true,
     "LocalizedControlType": "button",

diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap
@@ -83759,27 +83759,34 @@ exports[`snapshotAllPages View 20`] = `
   accessibilityActions={
     [
       {
-        "label": "cut",
-        "name": "cut",
+        "label": "expand",
+        "name": "expand",
       },
       {
-        "label": "copy",
-        "name": "copy",
-      },
-      {
-        "label": "paste",
-        "name": "paste",
+        "label": "collapse",
+        "name": "collapse",
       },
     ]
   }
   accessibilityHint="Accessibility Hint"
   accessibilityLabel="A View with accessibility values"
   accessibilityRole="button"
-  accessibilityValue={0}
+  accessibilitySetSize={1}
+  accessibilityState={
+    {
+      "expanded": true,
+    }
+  }
+  accessibilityValue={
+    {
+      "now": 0,
+    }
+  }
   accessible={true}
   focusable={true}
   onAccessibilityAction={[Function]}
   onAccessibilityTap={[Function]}
+  onPress={[Function]}
   testID="accessibility"
 >
   <Text>

diff --git a/packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.cpp b/packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.cpp
@@ -308,6 +308,23 @@ void InsertToggleStateValueIfNotDefault(
   }
 }
 
+void InsertExpandCollapseStateValueIfNotDefault(
+    const winrt::Windows::Data::Json::JsonObject &obj,
+    winrt::hstring name,
+    ExpandCollapseState value,
+    ExpandCollapseState defaultValue = ExpandCollapseState::ExpandCollapseState_Collapsed) {
+  if (value != defaultValue) {
+    switch (value) {
+      case 0:
+        obj.Insert(name, winrt::Windows::Data::Json::JsonValue::CreateStringValue(L"Collapsed"));
+        break;
+      case 1:
+        obj.Insert(name, winrt::Windows::Data::Json::JsonValue::CreateStringValue(L"Expanded"));
+        break;
+    }
+  }
+}
+
 winrt::Windows::Data::Json::JsonObject ListErrors(winrt::Windows::Data::Json::JsonValue payload) {
   winrt::Windows::Data::Json::JsonObject result;
   winrt::Windows::Data::Json::JsonArray jsonErrors;
@@ -333,6 +350,7 @@ void DumpUIAPatternInfo(IUIAutomationElement *pTarget, const winrt::Windows::Dat
   BOOL isReadOnly;
   ToggleState toggleState;
   IValueProvider *valuePattern;
+  ExpandCollapseState expandCollapseState;
   HRESULT hr;
 
   // Dump IValueProvider Information
@@ -359,6 +377,18 @@ void DumpUIAPatternInfo(IUIAutomationElement *pTarget, const winrt::Windows::Dat
     }
     togglePattern->Release();
   }
+
+  // Dump IExpandCollapseProvider Information
+  IExpandCollapseProvider *expandCollapsePattern;
+  hr = pTarget->GetCurrentPattern(UIA_ExpandCollapsePatternId, reinterpret_cast<IUnknown **>(&expandCollapsePattern));
+  if (SUCCEEDED(hr) && expandCollapsePattern) {
+    hr = expandCollapsePattern->get_ExpandCollapseState(&expandCollapseState);
+    if (SUCCEEDED(hr)) {
+      InsertExpandCollapseStateValueIfNotDefault(
+          result, L"ExpandCollapsePattern.ExpandCollapseState", expandCollapseState);
+    }
+    expandCollapsePattern->Release();
+  }
 }
 
 winrt::Windows::Data::Json::JsonObject DumpUIATreeRecurse(

diff --git a/packages/e2e-test-app/test/__snapshots__/ViewComponentTest.test.ts.snap b/packages/e2e-test-app/test/__snapshots__/ViewComponentTest.test.ts.snap
@@ -363,6 +363,7 @@ exports[`ViewTests Views can have a custom nativeID 1`] = `
 exports[`ViewTests Views can have accessibility customization 1`] = `
 {
   "AccessibilityRole": "Button",
+  "AccessibilityStateExpanded": true,
   "AutomationId": "accessibility",
   "Background": null,
   "BorderBrush": null,

diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionDynamicAutomationProvider.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionDynamicAutomationProvider.cpp
@@ -125,6 +125,22 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::get_ProviderOptions(Prov
   return S_OK;
 }
 
+bool accessibilityValueHasValue(const facebook::react::AccessibilityValue &value) {
+  return (value.min.has_value() && value.max.has_value()) || value.now.has_value() || value.text.has_value();
+}
+
+bool expandableControl(const facebook::react::SharedViewProps props) {
+  if (props->accessibilityState.has_value() && props->accessibilityState->expanded.has_value())
+    return true;
+  auto accessibilityActions = props->accessibilityActions;
+  for (size_t i = 0; i < accessibilityActions.size(); i++) {
+    if (accessibilityActions[i].name == "expand" || accessibilityActions[i].name == "collapse") {
+      return true;
+    }
+  }
+  return false;
+}
+
 HRESULT __stdcall CompositionDynamicAutomationProvider::GetPatternProvider(PATTERNID patternId, IUnknown **pRetVal) {
   if (pRetVal == nullptr)
     return E_POINTER;
@@ -165,6 +181,15 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetPatternProvider(PATTE
     AddRef();
   }
 
+  if (patternId == UIA_ExpandCollapsePatternId &&
+      (accessibilityRole == "combobox" || accessibilityRole == "splitbutton" || accessibilityRole == "treeitem" ||
+       (expandableControl(props) &&
+        (accessibilityRole == "toolbar" || accessibilityRole == "menuitem" || accessibilityRole == "menubar" ||
+         accessibilityRole == "listitem" || accessibilityRole == "group" || accessibilityRole == "button")))) {
+    *pRetVal = static_cast<IExpandCollapseProvider *>(this);
+    AddRef();
+  }
+
   return S_OK;
 }
 
@@ -464,4 +489,42 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::Toggle() {
   return S_OK;
 }
 
+HRESULT __stdcall CompositionDynamicAutomationProvider::get_ExpandCollapseState(ExpandCollapseState *pRetVal) {
+  if (pRetVal == nullptr)
+    return E_POINTER;
+  auto strongView = m_view.view();
+
+  if (!strongView)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  auto props = std::static_pointer_cast<const facebook::react::ViewProps>(
+      winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->props());
+
+  if (props == nullptr)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  *pRetVal = props->accessibilityState->expanded.has_value()
+      ? GetExpandCollapseState(props->accessibilityState->expanded.value())
+      : ExpandCollapseState_Collapsed;
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionDynamicAutomationProvider::Expand() {
+  auto strongView = m_view.view();
+
+  if (!strongView)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+  DispatchAccessibilityAction(m_view, "expand");
+  return S_OK;
+}
+
+HRESULT __stdcall CompositionDynamicAutomationProvider::Collapse() {
+  auto strongView = m_view.view();
+
+  if (!strongView)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+  DispatchAccessibilityAction(m_view, "collapse");
+  return S_OK;
+}
+
 } // namespace winrt::Microsoft::ReactNative::implementation
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionDynamicAutomationProvider.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionDynamicAutomationProvider.h
@@ -16,7 +16,8 @@ class CompositionDynamicAutomationProvider : public winrt::implements<
                                                  IInvokeProvider,
                                                  IScrollItemProvider,
                                                  IValueProvider,
-                                                 IToggleProvider> {
+                                                 IToggleProvider,
+                                                 IExpandCollapseProvider> {
  public:
   CompositionDynamicAutomationProvider(
       const winrt::Microsoft::ReactNative::Composition::ComponentView &componentView) noexcept;
@@ -47,10 +48,15 @@ class CompositionDynamicAutomationProvider : public winrt::implements<
   virtual HRESULT __stdcall get_Value(BSTR *pRetVal) override;
   virtual HRESULT __stdcall get_IsReadOnly(BOOL *pRetVal) override;
 
-  // inherited via IToggleProivder
+  // inherited via IToggleProvider
   virtual HRESULT __stdcall get_ToggleState(ToggleState *pRetVal) override;
   virtual HRESULT __stdcall Toggle() override;
 
+  // inherited via IExpandCollapseProvider
+  virtual HRESULT __stdcall get_ExpandCollapseState(ExpandCollapseState *pRetVal) override;
+  virtual HRESULT __stdcall Expand() override;
+  virtual HRESULT __stdcall Collapse() override;
+
  private:
   ::Microsoft::ReactNative::ReactTaggedView m_view;
 };

diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/UiaHelpers.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/UiaHelpers.cpp
@@ -206,4 +206,12 @@ void DispatchAccessibilityAction(::Microsoft::ReactNative::ReactTaggedView &view
   }
 }
 
+ExpandCollapseState GetExpandCollapseState(const bool &expanded) noexcept {
+  if (expanded) {
+    return ExpandCollapseState_Expanded;
+  } else {
+    return ExpandCollapseState_Collapsed;
+  }
+}
+
 } // namespace winrt::Microsoft::ReactNative::implementation
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/UiaHelpers.h b/vnext/Microsoft.ReactNative/Fabric/Composition/UiaHelpers.h
@@ -35,4 +35,5 @@ std::string extractAccessibilityValue(const facebook::react::AccessibilityValue
 
 void DispatchAccessibilityAction(::Microsoft::ReactNative::ReactTaggedView &view, const std::string &action) noexcept;
 
+ExpandCollapseState GetExpandCollapseState(const bool &expanded) noexcept;
 } // namespace winrt::Microsoft::ReactNative::implementation