From 854eb5e4ce7e44d354c6f081d79f6153833ef92d Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@fb.com>
Date: Wed, 24 Aug 2022 15:03:14 -0700
Subject: [PATCH] [fix] CheckBox supports readOnly on native control

Fix #2359
---
 .../pages/checkbox/index.js                      |  2 ++
 .../__tests__/__snapshots__/index-test.js.snap   | 16 ++++++++++++++++
 .../src/exports/CheckBox/__tests__/index-test.js |  7 +++++++
 .../src/exports/CheckBox/index.js                | 14 ++++++++++++--
 4 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/packages/react-native-web-examples/pages/checkbox/index.js b/packages/react-native-web-examples/pages/checkbox/index.js
index f834c229..d7965cee 100644
--- a/packages/react-native-web-examples/pages/checkbox/index.js
+++ b/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} />
diff --git a/packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap
index b2380954..f80cca9c 100644
--- a/packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap
+++ b/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"
diff --git a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js b/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
index 1a16d77d..abe55a8b 100644
--- a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
+++ b/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} />);
diff --git a/packages/react-native-web/src/exports/CheckBox/index.js b/packages/react-native-web/src/exports/CheckBox/index.js
index c6adcda4..26b1c214 100644
--- a/packages/react-native-web/src/exports/CheckBox/index.js
+++ b/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}