Announce checkbox and radio button roles on VoiceOver (facebook#37414)

Summary:
Pull Request resolved: facebook#37414

Previously, when focusing on a checkbox or radio button in React Native Fabric with VoiceOver, it wasn't announcing the role, e.g. "checkbox".  Instead it would just say [label][state], e.g. "Automatically check for updates, unchecked".  This is an extremely confusing experience for screen reader users because they don't know what kind of element they are focusing, including how to interact with it.

"checkbox" and "radio button" aren't recognized as [Apple iOS traits](https://developer.apple.com/documentation/uikit/uiaccessibilitytraits?language=objc), but we'd like to have consistency with the mobile safari experience.

Differential Revision: https://www.internalfb.com/diff/D45797554?entry_point=27

fbshipit-source-id: 6354a7687d2c70c2736aa8e426ba043f58f1f502

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -710,21 +710,40 @@ - (NSString *)accessibilityValue
     }
   }
 
+  NSMutableArray *valueComponents = [NSMutableArray new];
+  NSString *roleString = [NSString stringWithUTF8String:props.accessibilityRole.c_str()];
+
+  // In iOS, checkbox and radio buttons aren't recognized as traits. However,
+  // because our apps use checkbox and radio buttons often, we should announce
+  // these to screenreader users.  (They should already be familiar with them
+  // from using web).
+  if ([roleString isEqualToString:@"checkbox"]) {
+    [valueComponents addObject:@"checkbox"];
+  }
+
+  if ([roleString isEqualToString:@"radio"]) {
+    [valueComponents addObject:@"radio button"];
+  }
+
   // Handle states which haven't already been handled.
   if (props.accessibilityState.checked == AccessibilityState::Checked) {
-    return @"checked";
+    [valueComponents addObject:@"checked"];
   }
   if (props.accessibilityState.checked == AccessibilityState::Unchecked) {
-    return @"unchecked";
+    [valueComponents addObject:@"unchecked"];
   }
   if (props.accessibilityState.checked == AccessibilityState::Mixed) {
-    return @"mixed";
+    [valueComponents addObject:@"mixed"];
   }
   if (props.accessibilityState.expanded) {
-    return @"expanded";
+    [valueComponents addObject:@"expanded"];
   }
   if (props.accessibilityState.busy) {
-    return @"busy";
+    [valueComponents addObject:@"busy"];
+  }
+
+  if (valueComponents.count > 0) {
+    return [valueComponents componentsJoinedByString:@", "];
   }
 
   return nil;