From d3de52f96bd39c459a19fd1244e6da6570d75fb8 Mon Sep 17 00:00:00 2001
From: Jony J <1844749591@qq.com>
Date: Tue, 19 Nov 2024 19:41:19 +0800
Subject: [PATCH] feat: improve a11y (#292)

* feat: improve a11y

* feat: improve a11y

* feat: improve a11y

* fix: label fix
---
 src/index.tsx                           |  8 +++++---
 tests/__snapshots__/index.test.tsx.snap | 16 ++++++++--------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index aac4eee..11e557a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -38,11 +38,12 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
     type = 'checkbox',
     title,
     onChange,
+    children,
     ...inputProps
   } = props;
 
   const inputRef = useRef<HTMLInputElement>(null);
-  const holderRef = useRef<HTMLElement>(null);
+  const holderRef = useRef<HTMLLabelElement>(null);
 
   const [rawValue, setRawValue] = useMergedState(defaultChecked, {
     value: checked,
@@ -90,7 +91,7 @@ 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
         {...inputProps}
         className={`${prefixCls}-input`}
@@ -101,7 +102,8 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
         type={type}
       />
       <span className={`${prefixCls}-inner`} />
-    </span>
+      {children !== undefined && <span>{children}</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>
 `;