Support accessibilityState 'checked'

change/react-native-windows-18d4918c-6f73-4fe4-a6e4-42f5ac6ac39e.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement accessibilityState checked",
+  "packageName": "react-native-windows",
+  "email": "34109996+chiaramooney@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/@react-native-windows/tester/src/js/examples/View/ViewExample.windows.js

@@ -565,7 +565,7 @@ class AccessibilityExample extends React.Component<
           {name: 'expand', label: 'expand'},
           {name: 'collapse', label: 'collapse'},
         ]}
-        accessibilityState={{expanded: this.state.expanded, busy: true}}
+        accessibilityState={{expanded: this.state.expanded, busy: true, checked: true}}
         accessibilityPosInSet={1}
         accessibilitySetSize={1}
         accessibilityLiveRegion="polite"

packages/e2e-test-app-fabric/test/__snapshots__/ViewComponentTest.test.ts.snap

@@ -1103,6 +1103,7 @@ exports[`View Tests Views can have customized accessibility 1`] = `
     "Name": "A View with accessibility values",
     "PositionInSet": 1,
     "SizeofSet": 1,
+    "TogglePattern.ToggleState": "On",
     "ValuePattern.Value": "0",
     "__Children": [
       {

packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap

@@ -77781,6 +77781,7 @@ exports[`snapshotAllPages View 22`] = `
   accessibilityState={
     {
       "busy": true,
+      "checked": true,
       "expanded": true,
     }
   }

packages/e2e-test-app/test/__snapshots__/ViewComponentTest.test.ts.snap

@@ -364,6 +364,7 @@ exports[`ViewTests Views can have accessibility customization 1`] = `
 {
   "AccessibilityRole": "Button",
   "AccessibilityStateBusy": true,
+  "AccessibilityStateChecked": "Checked",
   "AccessibilityStateExpanded": true,
   "AutomationId": "accessibility",
   "AutomationPositionInSet": 1,

packages/playground/windows/playground-composition.Package/packages.lock.json

@@ -56,18 +56,14 @@
         }
       },
       "common": {
-        "type": "Project",
-        "dependencies": {
-          "boost": "[1.83.0, )"
-        }
+        "type": "Project"
       },
       "fmt": {
         "type": "Project"
       },
       "folly": {
         "type": "Project",
         "dependencies": {
-          "boost": "[1.83.0, )",
           "fmt": "[1.0.0, )"
         }
       },
@@ -86,7 +82,6 @@
       "playground-composition": {
         "type": "Project",
         "dependencies": {
-          "Microsoft.JavaScript.Hermes": "[0.1.23, )",
           "Microsoft.ReactNative": "[1.0.0, )",
           "Microsoft.VCRTForwarders.140": "[1.0.2-rc, )",
           "Microsoft.WindowsAppSDK": "[1.6.240923002, )",
@@ -97,8 +92,7 @@
       "reactcommon": {
         "type": "Project",
         "dependencies": {
-          "Folly": "[1.0.0, )",
-          "boost": "[1.83.0, )"
+          "Folly": "[1.0.0, )"
         }
       },
       "samplecustomcomponent": {

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionDynamicAutomationProvider.cpp

@@ -143,6 +143,20 @@ bool expandableControl(const facebook::react::SharedViewProps props) {
   return false;
 }
 
+bool togglableControl(const facebook::react::SharedViewProps props) {
+  if (props->accessibilityState.has_value() &&
+      props->accessibilityState->checked != facebook::react::AccessibilityState::None) {
+    return true;
+  }
+  auto accessibilityActions = props->accessibilityActions;
+  for (size_t i = 0; i < accessibilityActions.size(); i++) {
+    if (accessibilityActions[i].name == "toggle") {
+      return true;
+    }
+  }
+  return false;
+}
+
 HRESULT __stdcall CompositionDynamicAutomationProvider::GetPatternProvider(PATTERNID patternId, IUnknown **pRetVal) {
   if (pRetVal == nullptr)
     return E_POINTER;
@@ -182,7 +196,7 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetPatternProvider(PATTE
   }
 
   if (patternId == UIA_TogglePatternId &&
-      strongView.try_as<winrt::Microsoft::ReactNative::Composition::implementation::SwitchComponentView>()) {
+      (strongView.try_as<winrt::Microsoft::ReactNative::Composition::implementation::SwitchComponentView>() || togglableControl(props))) {
     *pRetVal = static_cast<IToggleProvider *>(this);
     AddRef();
   }
@@ -498,8 +512,13 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::get_ToggleState(ToggleSt
   if (!strongView)
     return UIA_E_ELEMENTNOTAVAILABLE;
 
-  *pRetVal =
-      winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->getToggleState();
+  auto props = std::static_pointer_cast<const facebook::react::ViewProps>(
+      winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->props());
+
+  *pRetVal = (props->accessibilityState.has_value() &&
+              props->accessibilityState->checked != facebook::react::AccessibilityState::None)
+      ? GetToggleState(props->accessibilityState)
+      : winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->getToggleState();
   return S_OK;
 }
 

vnext/Microsoft.ReactNative/Fabric/Composition/UiaHelpers.cpp

@@ -214,4 +214,15 @@ ExpandCollapseState GetExpandCollapseState(const bool &expanded) noexcept {
   }
 }
 
+ToggleState GetToggleState(const std::optional<facebook::react::AccessibilityState> &state) noexcept {
+  if (state.has_value()) {
+    if (state->checked == facebook::react::AccessibilityState::Checked) {
+      return ToggleState::ToggleState_On;
+    } else if (state->checked == facebook::react::AccessibilityState::Mixed) {
+      return ToggleState::ToggleState_Indeterminate;
+    }
+  }
+  return ToggleState::ToggleState_Off;
+}
+
 } // namespace winrt::Microsoft::ReactNative::implementation

vnext/Microsoft.ReactNative/Fabric/Composition/UiaHelpers.h

@@ -36,4 +36,6 @@ std::string extractAccessibilityValue(const facebook::react::AccessibilityValue
 void DispatchAccessibilityAction(::Microsoft::ReactNative::ReactTaggedView &view, const std::string &action) noexcept;
 
 ExpandCollapseState GetExpandCollapseState(const bool &expanded) noexcept;
+
+ToggleState GetToggleState(const std::optional<facebook::react::AccessibilityState> &state) noexcept;
 } // namespace winrt::Microsoft::ReactNative::implementation