[Checkbox][Joy UI] spread value, required, and readOnly to input (

mui#34477)

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');
+    });
   });
 });

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'

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;
 }