Add accessibilityState (#53179)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/53179

Changelog: [Internal]
Add accessibilityState debug prop

Reviewed By: zeyap

Differential Revision: D79894111

fbshipit-source-id: b9914965b053c239c7f954130a32240b15070b17

packages/react-native/Libraries/Components/Pressable/__tests__/Pressable-itest.js

@@ -45,6 +45,7 @@ describe('<Pressable>', () => {
         expect(root.getRenderedOutput().toJSX()).toEqual(
           <rn-view
             accessible="true"
+            accessibilityState="{disabled:false,selected:false,checked:None,busy:false,expanded:null}"
             backgroundColor="rgba(0, 0, 255, 1)"
             borderWidth="3.000000"
             height="50.000000"
@@ -68,6 +69,7 @@ describe('<Pressable>', () => {
         expect(root.getRenderedOutput().toJSX()).toEqual(
           <rn-view
             accessible="true"
+            accessibilityState="{disabled:false,selected:false,checked:None,busy:false,expanded:null}"
             backgroundColor="rgba(128, 128, 128, 1)"
           />,
         );
@@ -139,7 +141,9 @@ describe('<Pressable>', () => {
         expect(element.childNodes.length).toBe(1);
 
         expect(root.getRenderedOutput().toJSX()).toEqual(
-          <rn-view accessible="true">
+          <rn-view
+            accessible="true"
+            accessibilityState="{disabled:false,selected:false,checked:None,busy:false,expanded:null}">
             <rn-paragraph
               allowFontScaling="true"
               ellipsizeMode="tail"

packages/react-native/Libraries/Image/__tests__/Image-itest.js

@@ -35,10 +35,11 @@ describe('<Image>', () => {
 
         expect(root.getRenderedOutput().toJSX()).toEqual(
           <rn-image
+            accessibilityState="{disabled:false,selected:false,checked:None,busy:false,expanded:null}"
             overflow="hidden"
+            resizeMode="cover"
             source-scale="1"
             source-type="remote"
-            resizeMode="cover"
           />,
         );
 
@@ -48,10 +49,11 @@ describe('<Image>', () => {
 
         expect(root.getRenderedOutput().toJSX()).toEqual(
           <rn-image
+            accessibilityState="{disabled:false,selected:false,checked:None,busy:false,expanded:null}"
             overflow="hidden"
+            resizeMode="cover"
             source-scale="1"
             source-type="remote"
-            resizeMode="cover"
           />,
         );
       });
@@ -94,7 +96,11 @@ describe('<Image>', () => {
             root.render(<Image alt="React Native Logo" />);
           });
 
-          expect(root.getRenderedOutput({props: ['^access']}).toJSX()).toEqual(
+          expect(
+            root
+              .getRenderedOutput({props: ['accessible', 'accessibilityLabel']})
+              .toJSX(),
+          ).toEqual(
             <rn-image
               accessible="true"
               accessibilityLabel="React Native Logo"
@@ -114,7 +120,11 @@ describe('<Image>', () => {
             );
           });
 
-          expect(root.getRenderedOutput({props: ['^access']}).toJSX()).toEqual(
+          expect(
+            root
+              .getRenderedOutput({props: ['accessible', 'accessibilityLabel']})
+              .toJSX(),
+          ).toEqual(
             <rn-image accessible="true" accessibilityLabel="React Native" />,
           );
         });
@@ -605,15 +615,15 @@ describe('<Image>', () => {
           );
         });
 
-        expect(root.getRenderedOutput().toJSX()).toEqual(
+        expect(
+          root
+            .getRenderedOutput({props: ['width', 'height', 'resizeMode']})
+            .toJSX(),
+        ).toEqual(
           <rn-image
             height="100.000000"
-            overflow="hidden"
             resizeMode="contain"
             width="100.000000"
-            source-scale="1"
-            source-type="remote"
-            source-uri="https://reactnative.dev/img/tiny_logo.png"
           />,
         );
       });

packages/react-native/ReactCommon/react/renderer/components/view/AccessibilityPrimitives.h

@@ -12,6 +12,8 @@
 #include <string>
 #include <vector>
 
+#include <react/renderer/debug/DebugStringConvertible.h>
+
 namespace facebook::react {
 
 enum class AccessibilityTraits : uint32_t {
@@ -91,7 +93,7 @@ struct AccessibilityState {
   bool selected{false};
   bool busy{false};
   std::optional<bool> expanded{std::nullopt};
-  enum { Unchecked, Checked, Mixed, None } checked{None};
+  enum CheckedState { Unchecked, Checked, Mixed, None } checked{None};
 };
 
 constexpr bool operator==(
@@ -108,6 +110,29 @@ constexpr bool operator!=(
   return !(rhs == lhs);
 }
 
+#if RN_DEBUG_STRING_CONVERTIBLE
+inline std::string toString(AccessibilityState::CheckedState state) {
+  switch (state) {
+    case AccessibilityState::Unchecked:
+      return "Unchecked";
+    case AccessibilityState::Checked:
+      return "Checked";
+    case AccessibilityState::Mixed:
+      return "Mixed";
+    case AccessibilityState::None:
+      return "None";
+  }
+}
+
+inline std::string toString(const AccessibilityState& accessibilityState) {
+  return "{disabled:" + toString(accessibilityState.disabled) +
+      ",selected:" + toString(accessibilityState.selected) +
+      ",checked:" + toString(accessibilityState.checked) +
+      ",busy:" + toString(accessibilityState.busy) +
+      ",expanded:" + toString(accessibilityState.expanded) + "}";
+}
+#endif
+
 struct AccessibilityLabelledBy {
   std::vector<std::string> value{};
 };

packages/react-native/ReactCommon/react/renderer/components/view/AccessibilityProps.cpp

@@ -320,6 +320,10 @@ SharedDebugStringConvertibleList AccessibilityProps::getDebugProps() const {
           "accessibilityActions",
           accessibilityActions,
           defaultProps.accessibilityActions),
+      debugStringConvertibleItem(
+          "accessibilityState",
+          accessibilityState,
+          defaultProps.accessibilityState),
       debugStringConvertibleItem(
           "accessibilityElementsHidden",
           accessibilityElementsHidden,