feat: improve a11y

react-component · Nov 17, 2024 · f412e81 · f412e81
1 parent de87141
commit f412e81
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 27 deletions.
diff --git 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
@@ -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>
 `;