[fix] CheckBox supports readOnly on native control

Fix #2359

Author: necolas

packages/react-native-web-examples/pages/checkbox/index.js

@@ -24,6 +24,8 @@ export default function CheckboxPage() {
         <CheckBox disabled style={styles.item} value={false} />
         <Divider />
         <CheckBox disabled style={styles.item} value={true} />
+        <Divider />
+        <CheckBox accessibilityReadOnly style={styles.item} value={true} />
       </View>
       <View style={styles.row}>
         <CheckBox value={false} />

packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap

@@ -15,6 +15,22 @@ exports[`CheckBox prop "accessibilityLabel" value is set 1`] = `
 </div>
 `;
 
+exports[`CheckBox prop "accessibilityReadOnly" value is set 1`] = `
+<div
+  aria-readonly="true"
+  class="css-view-175oi2r r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"
+>
+  <div
+    class="css-view-175oi2r r-alignItems-1awozwy r-backgroundColor-14lw9ot r-borderColor-1awa8pu r-borderRadius-1jkafct r-borderStyle-1phboty r-borderWidth-d045u9 r-height-1pi2tsx r-justifyContent-1777fci r-width-13qz1uu"
+  />
+  <input
+    class="r-appearance-30o5oe r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-margin-crgep1 r-padding-t60dpp r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-cursor-1ei5mc7"
+    readonly=""
+    type="checkbox"
+  />
+</div>
+`;
+
 exports[`CheckBox prop "color" value is set 1`] = `
 <div
   class="css-view-175oi2r r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz"

packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js

@@ -25,6 +25,13 @@ describe('CheckBox', () => {
     });
   });
 
+  describe('prop "accessibilityReadOnly"', () => {
+    test('value is set', () => {
+      const { container } = render(<CheckBox accessibilityReadOnly={true} />);
+      expect(container.firstChild).toMatchSnapshot();
+    });
+  });
+
   describe('prop "color"', () => {
     test('value is set', () => {
       const { container } = render(<CheckBox color="lightblue" value={true} />);

packages/react-native-web/src/exports/CheckBox/index.js

@@ -29,8 +29,16 @@ const CheckBox: React.AbstractComponent<
   CheckBoxProps,
   React.ElementRef<typeof View>
 > = React.forwardRef((props, forwardedRef) => {
-  const { color, disabled, onChange, onValueChange, style, value, ...other } =
-    props;
+  const {
+    accessibilityReadOnly,
+    color,
+    disabled,
+    onChange,
+    onValueChange,
+    style,
+    value,
+    ...other
+  } = props;
 
   function handleChange(event: Object) {
     const value = event.nativeEvent.target.checked;
@@ -56,6 +64,7 @@ const CheckBox: React.AbstractComponent<
     checked: value,
     disabled: disabled,
     onChange: handleChange,
+    readOnly: accessibilityReadOnly,
     ref: forwardedRef,
     style: [styles.nativeControl, styles.cursorInherit],
     type: 'checkbox'
@@ -65,6 +74,7 @@ const CheckBox: React.AbstractComponent<
     <View
       {...other}
       accessibilityDisabled={disabled}
+      accessibilityReadOnly={accessibilityReadOnly}
       style={[styles.root, style, disabled && styles.cursorDefault]}
     >
       {fakeControl}