fix(Checkbox): indeterminate state (#51350)

components/checkbox/Checkbox.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import type { CheckboxRef } from 'rc-checkbox';
 import RcCheckbox from 'rc-checkbox';
+import { composeRef } from 'rc-util/lib/ref';
 
 import { devUseWarning } from '../_util/warning';
 import Wave from '../_util/wave';
@@ -80,6 +81,8 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
   const mergedDisabled = (checkboxGroup?.disabled || disabled) ?? contextDisabled;
 
   const prevValue = React.useRef(restProps.value);
+  const checkboxRef = React.useRef<CheckboxRef>(null);
+  const mergedRef = composeRef(ref, checkboxRef);
 
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Checkbox');
@@ -107,6 +110,12 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
     return () => checkboxGroup?.cancelValue(restProps.value);
   }, [restProps.value]);
 
+  React.useEffect(() => {
+    if (checkboxRef.current?.input) {
+      checkboxRef.current.input.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+
   const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
   const rootCls = useCSSVarCls(prefixCls);
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
@@ -144,7 +153,6 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
     TARGET_CLS,
     hashId,
   );
-  const ariaChecked = indeterminate ? 'mixed' : undefined;
   return wrapCSSVar(
     <Wave component="Checkbox" disabled={mergedDisabled}>
       {}
@@ -156,12 +164,11 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
       >
         {/* @ts-ignore */}
         <RcCheckbox
-          aria-checked={ariaChecked}
           {...checkboxProps}
           prefixCls={prefixCls}
           className={checkboxClass}
           disabled={mergedDisabled}
-          ref={ref}
+          ref={mergedRef}
         />
         {children !== undefined && <span>{children}</span>}
       </label>

components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -32,7 +32,6 @@ Array [
       class="ant-checkbox ant-checkbox-indeterminate ant-wave-target"
     >
       <input
-        aria-checked="mixed"
         class="ant-checkbox-input"
         type="checkbox"
       />
@@ -558,7 +557,6 @@ Array [
       class="ant-checkbox ant-checkbox-indeterminate ant-wave-target ant-checkbox-disabled"
     >
       <input
-        aria-checked="mixed"
         class="ant-checkbox-input"
         disabled=""
         type="checkbox"

components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap

@@ -30,7 +30,6 @@ Array [
       class="ant-checkbox ant-checkbox-indeterminate ant-wave-target"
     >
       <input
-        aria-checked="mixed"
         class="ant-checkbox-input"
         type="checkbox"
       />
@@ -519,7 +518,6 @@ Array [
       class="ant-checkbox ant-checkbox-indeterminate ant-wave-target ant-checkbox-disabled"
     >
       <input
-        aria-checked="mixed"
         class="ant-checkbox-input"
         disabled=""
         type="checkbox"

components/checkbox/__tests__/checkbox.test.tsx

@@ -52,4 +52,15 @@ describe('Checkbox', () => {
     expect(onFocus).toHaveBeenCalledTimes(1);
     expect(onBlur).toHaveBeenCalledTimes(1);
   });
+
+  it('should reflect indeterminate state correctly', () => {
+    const { rerender, container } = render(<Checkbox indeterminate />);
+
+    const checkboxInput = container.querySelector('input')!;
+    expect(checkboxInput.indeterminate).toBe(true);
+
+    rerender(<Checkbox indeterminate={false} />);
+
+    expect(checkboxInput.indeterminate).toBe(false);
+  });
 });

components/transfer/__tests__/__snapshots__/list.test.tsx.snap

@@ -14,7 +14,6 @@ exports[`Transfer.List should render correctly 1`] = `
         class="ant-checkbox ant-checkbox-indeterminate ant-wave-target"
       >
         <input
-          aria-checked="mixed"
           class="ant-checkbox-input"
           type="checkbox"
         />