From 6831a0478a648776f0f6e79bfb65667bde9381f9 Mon Sep 17 00:00:00 2001
From: Siriwat K <siriwatkunaporn@gmail.com>
Date: Mon, 26 Sep 2022 17:36:32 +0700
Subject: [PATCH] [Checkbox][Joy UI] spread `value`, `required`, and `readOnly`
 to input (#34477)

---
 .../mui-joy/src/Checkbox/Checkbox.test.js     | 17 ++++++++++++++
 packages/mui-joy/src/Checkbox/Checkbox.tsx    | 22 +++++++++++++++++++
 .../mui-joy/src/Checkbox/CheckboxProps.ts     |  5 +++++
 3 files changed, 44 insertions(+)

diff --git a/packages/mui-joy/src/Checkbox/Checkbox.test.js b/packages/mui-joy/src/Checkbox/Checkbox.test.js
index 41b1eafc64d531..7390cc0c654a64 100644
--- a/packages/mui-joy/src/Checkbox/Checkbox.test.js
+++ b/packages/mui-joy/src/Checkbox/Checkbox.test.js
@@ -34,6 +34,18 @@ describe('<Checkbox />', () => {
     expect(getByRole('checkbox')).to.have.property('name', 'bar');
   });
 
+  it('renders a `role="checkbox"` with required attribute', () => {
+    const { getByRole } = render(<Checkbox name="bar" required />);
+
+    expect(getByRole('checkbox')).to.have.attribute('required');
+  });
+
+  it('renders a `role="checkbox"` with readOnly attribute', () => {
+    const { getByRole } = render(<Checkbox name="bar" readOnly />);
+
+    expect(getByRole('checkbox')).to.have.attribute('readonly');
+  });
+
   it('renders a `role="checkbox"` with the Unchecked state by default', () => {
     const { getByRole } = render(<Checkbox />);
 
@@ -108,5 +120,10 @@ describe('<Checkbox />', () => {
       const { getByTestId } = render(<Checkbox indeterminate />);
       expect(getByTestId('HorizontalRuleIcon')).not.to.equal(null);
     });
+
+    it('should have aria-checked="mixed"', () => {
+      const { getByRole } = render(<Checkbox indeterminate />);
+      expect(getByRole('checkbox')).to.have.attribute('aria-checked', 'mixed');
+    });
   });
 });
diff --git a/packages/mui-joy/src/Checkbox/Checkbox.tsx b/packages/mui-joy/src/Checkbox/Checkbox.tsx
index dd256320f28083..adcb195fc33299 100644
--- a/packages/mui-joy/src/Checkbox/Checkbox.tsx
+++ b/packages/mui-joy/src/Checkbox/Checkbox.tsx
@@ -202,7 +202,9 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
     onChange,
     onFocus,
     onFocusVisible,
+    readOnly,
     required,
+    value,
     color: colorProp,
     variant,
     size: sizeProp = 'md',
@@ -294,7 +296,14 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
     additionalProps: {
       id,
       name,
+      value,
+      readOnly,
+      required,
       'aria-describedby': formControl?.['aria-describedby'],
+      ...(indeterminate && {
+        // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked#values
+        'aria-checked': 'mixed' as const,
+      }),
     },
     className: classes.input,
   });
@@ -438,6 +447,10 @@ Checkbox.propTypes /* remove-proptypes */ = {
    * @default false
    */
   overlay: PropTypes.bool,
+  /**
+   * If `true`, the component is read only.
+   */
+  readOnly: PropTypes.bool,
   /**
    * If `true`, the `input` element is required.
    */
@@ -462,6 +475,15 @@ Checkbox.propTypes /* remove-proptypes */ = {
    * The icon when `checked` is false.
    */
   uncheckedIcon: PropTypes.node,
+  /**
+   * The value of the component. The DOM API casts this to a string.
+   * The browser uses "on" as the default value.
+   */
+  value: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.number,
+    PropTypes.string,
+  ]),
   /**
    * The variant to use.
    * @default 'solid'
diff --git a/packages/mui-joy/src/Checkbox/CheckboxProps.ts b/packages/mui-joy/src/Checkbox/CheckboxProps.ts
index 25801a93720487..cc59a12fd89ab9 100644
--- a/packages/mui-joy/src/Checkbox/CheckboxProps.ts
+++ b/packages/mui-joy/src/Checkbox/CheckboxProps.ts
@@ -92,6 +92,11 @@ export interface CheckboxTypeMap<P = {}, D extends React.ElementType = 'span'> {
        * The icon when `checked` is false.
        */
       uncheckedIcon?: React.ReactNode;
+      /**
+       * The value of the component. The DOM API casts this to a string.
+       * The browser uses "on" as the default value.
+       */
+      value?: React.AllHTMLAttributes<HTMLInputElement>['value'];
     };
   defaultComponent: D;
 }