Announce checkbox and radio button roles on VoiceOver

Summary:
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.

Reviewed By: cipolleschi

Differential Revision: D45797554

fbshipit-source-id: 4a3ebc804de01606dd7cdaf6d753ea5d59789a29

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;