From de8714140e77de50781e63793da1f3c985aa6ee4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=B1=AA?= <1844749591@qq.com>
Date: Mon, 18 Nov 2024 00:57:26 +0800
Subject: [PATCH 1/4] feat: improve a11y

---
 src/index.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/index.tsx b/src/index.tsx
index aac4eee..0bf0465 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,7 @@
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import omit from 'rc-util/lib/omit';
+import pickAttrs from 'rc-util/lib/pickAttrs';
 import * as React from 'react';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 
@@ -27,6 +29,8 @@ export interface CheckboxProps
   onChange?: (e: CheckboxChangeEvent) => void;
 }
 
+const DEFAULT_ARIA_LABEL = 'checkbox';
+
 export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
   const {
     prefixCls = 'rc-checkbox',
@@ -41,6 +45,16 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
     ...inputProps
   } = props;
 
+  const a11yProps = {
+    ...pickAttrs(inputProps, true),
+    'aria-label': inputProps['aria-label'] || DEFAULT_ARIA_LABEL,
+  } as React.AriaAttributes;
+
+  const restProps = omit<React.HTMLAttributes<HTMLDivElement>, keyof React.AriaAttributes>(
+    inputProps,
+    Object.keys(a11yProps) as Array<keyof React.AriaAttributes>,
+  );
+
   const inputRef = useRef<HTMLInputElement>(null);
   const holderRef = useRef<HTMLElement>(null);
 
@@ -92,7 +106,8 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
   return (
     <span className={classString} title={title} style={style} ref={holderRef}>
       <input
-        {...inputProps}
+        {...restProps}
+        {...a11yProps}
         className={`${prefixCls}-input`}
         ref={inputRef}
         onChange={handleChange}

From f412e814e929f932d41f062d282b824b92714033 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=B1=AA?= <1844749591@qq.com>
Date: Mon, 18 Nov 2024 01:22:29 +0800
Subject: [PATCH 2/4] feat: improve a11y

---
 src/index.tsx                           | 23 ++++-------------------
 tests/__snapshots__/index.test.tsx.snap | 16 ++++++++--------
 2 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 0bf0465..36557ea 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,5 @@
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import omit from 'rc-util/lib/omit';
-import pickAttrs from 'rc-util/lib/pickAttrs';
 import * as React from 'react';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 
@@ -29,8 +27,6 @@ export interface CheckboxProps
   onChange?: (e: CheckboxChangeEvent) => void;
 }
 
-const DEFAULT_ARIA_LABEL = 'checkbox';
-
 export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
   const {
     prefixCls = 'rc-checkbox',
@@ -45,18 +41,8 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
     ...inputProps
   } = props;
 
-  const a11yProps = {
-    ...pickAttrs(inputProps, true),
-    'aria-label': inputProps['aria-label'] || DEFAULT_ARIA_LABEL,
-  } as React.AriaAttributes;
-
-  const restProps = omit<React.HTMLAttributes<HTMLDivElement>, keyof React.AriaAttributes>(
-    inputProps,
-    Object.keys(a11yProps) as Array<keyof React.AriaAttributes>,
-  );
-
   const inputRef = useRef<HTMLInputElement>(null);
-  const holderRef = useRef<HTMLElement>(null);
+  const holderRef = useRef<HTMLLabelElement>(null);
 
   const [rawValue, setRawValue] = useMergedState(defaultChecked, {
     value: checked,
@@ -104,10 +90,9 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
   };
 
   return (
-    <span className={classString} title={title} style={style} ref={holderRef}>
+    <label className={classString} title={title} style={style} ref={holderRef}>
       <input
-        {...restProps}
-        {...a11yProps}
+        {...inputProps}
         className={`${prefixCls}-input`}
         ref={inputRef}
         onChange={handleChange}
@@ -116,7 +101,7 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
         type={type}
       />
       <span className={`${prefixCls}-inner`} />
-    </span>
+    </label>
   );
 });
 
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
index 07c12b0..88a68cf 100644
--- a/tests/__snapshots__/index.test.tsx.snap
+++ b/tests/__snapshots__/index.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`rc-checkbox click checkbox 1`] = `
-<span
+<label
   class="rc-checkbox"
 >
   <input
@@ -11,11 +11,11 @@ exports[`rc-checkbox click checkbox 1`] = `
   <span
     class="rc-checkbox-inner"
   />
-</span>
+</label>
 `;
 
 exports[`rc-checkbox click radio 1`] = `
-<span
+<label
   class="rc-checkbox rc-checkbox-checked"
 >
   <input
@@ -25,11 +25,11 @@ exports[`rc-checkbox click radio 1`] = `
   <span
     class="rc-checkbox-inner"
   />
-</span>
+</label>
 `;
 
 exports[`rc-checkbox control mode 1`] = `
-<span
+<label
   class="rc-checkbox rc-checkbox-checked"
 >
   <input
@@ -40,11 +40,11 @@ exports[`rc-checkbox control mode 1`] = `
   <span
     class="rc-checkbox-inner"
   />
-</span>
+</label>
 `;
 
 exports[`rc-checkbox works 1`] = `
-<span
+<label
   class="rc-checkbox"
 >
   <input
@@ -54,5 +54,5 @@ exports[`rc-checkbox works 1`] = `
   <span
     class="rc-checkbox-inner"
   />
-</span>
+</label>
 `;

From 78b5c75db38b6b64ea56436f2f07a3c068279b53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=B1=AA?= <1844749591@qq.com>
Date: Mon, 18 Nov 2024 19:00:07 +0800
Subject: [PATCH 3/4] feat: improve a11y

---
 src/index.tsx | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 36557ea..5304985 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -38,6 +38,7 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
     type = 'checkbox',
     title,
     onChange,
+    children,
     ...inputProps
   } = props;
 
@@ -90,18 +91,21 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
   };
 
   return (
-    <label className={classString} title={title} style={style} ref={holderRef}>
-      <input
-        {...inputProps}
-        className={`${prefixCls}-input`}
-        ref={inputRef}
-        onChange={handleChange}
-        disabled={disabled}
-        checked={!!rawValue}
-        type={type}
-      />
-      <span className={`${prefixCls}-inner`} />
-    </label>
+    <>
+      <label className={classString} title={title} style={style} ref={holderRef}>
+        <input
+          {...inputProps}
+          className={`${prefixCls}-input`}
+          ref={inputRef}
+          onChange={handleChange}
+          disabled={disabled}
+          checked={!!rawValue}
+          type={type}
+        />
+        <span className={`${prefixCls}-inner`} />
+      </label>
+      {children !== undefined && <span>{children}</span>}
+    </>
   );
 });
 

From a7def67c5aef2e95074b9e301ab7b687713c2e26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=B1=AA?= <1844749591@qq.com>
Date: Mon, 18 Nov 2024 19:19:05 +0800
Subject: [PATCH 4/4] fix: label fix

---
 src/index.tsx | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 5304985..11e557a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -91,21 +91,19 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
   };
 
   return (
-    <>
-      <label className={classString} title={title} style={style} ref={holderRef}>
-        <input
-          {...inputProps}
-          className={`${prefixCls}-input`}
-          ref={inputRef}
-          onChange={handleChange}
-          disabled={disabled}
-          checked={!!rawValue}
-          type={type}
-        />
-        <span className={`${prefixCls}-inner`} />
-      </label>
+    <label className={classString} title={title} style={style} ref={holderRef}>
+      <input
+        {...inputProps}
+        className={`${prefixCls}-input`}
+        ref={inputRef}
+        onChange={handleChange}
+        disabled={disabled}
+        checked={!!rawValue}
+        type={type}
+      />
+      <span className={`${prefixCls}-inner`} />
       {children !== undefined && <span>{children}</span>}
-    </>
+    </label>
   );
 });