feat: improve a11y (#292)

* feat: improve a11y

* feat: improve a11y

* feat: improve a11y

* fix: label fix

Author: aojunhao123

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

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