refactor: improve accessibility attributes and refactor props

Author: huijiewei

packages/react-ui/src/components/checkbox/checkbox-group-context.ts

@@ -1,8 +1,9 @@
 import type { ChangeEvent } from "react";
 import { createSafeContext } from "../../primitives";
 import type { BinarySize, ToggleColor } from "../../shared/styles";
+import type { FormFieldProps } from "../../shared/types";
 
-export type CheckboxBaseProps = {
+export type CheckboxBaseProps = FormFieldProps & {
   /**
    * 颜色
    * @default "primary"
@@ -14,37 +15,14 @@ export type CheckboxBaseProps = {
    * @default "md"
    */
   size?: BinarySize;
-
-  /**
-   * 是否禁用
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * 是否必选
-   * @default false
-   */
-  required?: boolean;
-
-  /**
-   * 是否只读
-   * @default false
-   */
-  readOnly?: boolean;
 };
 
-export type CheckboxGroupBaseProps = CheckboxBaseProps & {
-  /**
-   * 多选中输入字段的名称
-   */
-  name?: string;
-
+export type CheckboxGroupBaseProps = {
   /**
-   * 选中的值
+   * 可控值
    */
   value?: (string | number)[];
-};
+} & CheckboxBaseProps;
 
 export type CheckboxGroupContextValue = CheckboxGroupBaseProps & {
   onChange: (event: ChangeEvent<HTMLInputElement> | string | number) => void;

packages/react-ui/src/components/checkbox/checkbox-group.tsx

@@ -4,7 +4,7 @@ import type { PrimitiveProps } from "../../primitives";
 import { isInputEvent } from "../../utils";
 import { type CheckboxGroupBaseProps, CheckboxGroupContext } from "./checkbox-group-context";
 
-export type CheckboxGroupProps = CheckboxGroupBaseProps & {
+export type CheckboxGroupProps = {
   /**
    * 默认值
    */
@@ -14,7 +14,7 @@ export type CheckboxGroupProps = CheckboxGroupBaseProps & {
    * onChange 回调
    */
   onChange?: (value: (string | number)[]) => void;
-};
+} & CheckboxGroupBaseProps;
 
 export const CheckboxGroup = (props: PrimitiveProps<"div", CheckboxGroupProps, "role">) => {
   const {

packages/react-ui/src/components/checkbox/checkbox.tsx

@@ -9,55 +9,41 @@ import {
   toggleControlShareStyles,
   toggleLabelShareStyles,
 } from "../../shared/styles";
+import type { CheckedValueProps } from "../../shared/types";
 import { ariaAttr, tx } from "../../utils";
 import { type CheckboxBaseProps, useCheckboxGroup } from "./checkbox-group-context";
 
-export type CheckboxProps = CheckboxBaseProps & {
-  /**
-   * 可控值
-   */
-  checked?: boolean;
-
-  /**
-   * 默认值
-   * @default false
-   */
-  defaultChecked?: boolean;
-
-  /**
-   * onChange 回调
-   */
-  onChange?: (checked: boolean) => void;
-
-  /**
-   * 值
-   */
-  value?: string | number;
-
-  /**
-   * 部分选中
-   * @default false
-   */
-  indeterminate?: boolean;
-
-  /**
-   * 是否无效
-   * @default false
-   */
-  invalid?: boolean;
-
-  /**
-   * 间距
-   * @default "0.5em"
-   */
-  spacing?: string | number;
-};
+export type CheckboxProps = CheckedValueProps &
+  CheckboxBaseProps & {
+    /**
+     * 是否无效
+     * @default false
+     */
+    invalid?: boolean;
+
+    /**
+     * 值
+     */
+    value?: string | number;
+
+    /**
+     * 部分选中
+     * @default false
+     */
+    indeterminate?: boolean;
+
+    /**
+     * 间距
+     * @default "0.5em"
+     */
+    spacing?: string | number;
+  };
 
 export const Checkbox = (props: PrimitiveProps<"input", CheckboxProps, "role" | "type">) => {
   const group = useCheckboxGroup(true);
 
   const {
-    name = group?.name,
+    name,
     size = group?.size || "md",
     color = group?.color || "primary",
     disabled = group?.disabled || false,
@@ -116,6 +102,8 @@ export const Checkbox = (props: PrimitiveProps<"input", CheckboxProps, "role" |
   const colorStyle = binaryColorShareStyles[color];
   const labelSizeStyle = inputTextShareStyles[size];
 
+  const htmlName = group?.name ? `${group.name}[]` : name;
+
   return (
     <label
       style={
@@ -128,7 +116,7 @@ export const Checkbox = (props: PrimitiveProps<"input", CheckboxProps, "role" |
     >
       <input
         ref={refs}
-        name={name}
+        name={htmlName}
         className={"peer sr-only"}
         value={value}
         type="checkbox"

packages/react-ui/src/components/input/input.tsx

@@ -1,108 +1,74 @@
-import { type ChangeEvent, type CSSProperties, type HTMLInputTypeAttribute, type ReactNode, useRef } from "react";
+import { type ChangeEvent, type CSSProperties, type ReactNode, useRef } from "react";
 import { useControllableState, useMergeRefs } from "../../hooks";
 import type { PrimitiveProps } from "../../primitives";
 import { inputTextShareStyles } from "../../shared/styles";
+import type { FormFieldProps } from "../../shared/types";
 import { tx } from "../../utils";
 import { InputAffix } from "./input-affix";
 import { type InputGroupContextValue, useInputGroup } from "./input-group-context";
 import { inputAffixDefaultSizes, inputGroupStyles, inputSizeStyles } from "./input.styles";
 
-export type InputProps = Partial<InputGroupContextValue> & {
-  /**
-   * 可控值
-   */
-  value?: string | number;
-
-  /**
-   * 默认值
-   * @default ""
-   */
-  defaultValue?: string | number;
-
-  /**
-   * onChange 回调
-   */
-  onChange?: (value: string | number) => void;
-
-  /**
-   * 是否禁用
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * 是否必须
-   * @default false
-   */
-  required?: boolean;
-
-  /**
-   * 是否只读
-   * @default false
-   */
-  readOnly?: boolean;
-
-  /**
-   * 是否无效
-   * @default false
-   */
-  invalid?: boolean;
-
-  /**
-   * 是否全宽度
-   * @default false
-   */
-  fullWidth?: boolean;
-
-  /**
-   * 占位符文本
-   */
-  placeholder?: string;
-
-  /**
-   * 前置元素
-   */
-  prefix?: ReactNode;
-
-  /**
-   * 前置元素宽度
-   */
-  prefixWidth?: number;
-
-  /**
-   * 后置元素
-   */
-  suffix?: ReactNode;
-
-  /**
-   * 后置元素宽度
-   */
-  suffixWidth?: number;
-
-  /**
-   * 输入框类型
-   * @ignore
-   * @default "text"
-   */
-  type?: Omit<
-    HTMLInputTypeAttribute,
-    | "button"
-    | "submit"
-    | "reset"
-    | "checkbox"
-    | "radio"
-    | "range"
-    | "color"
-    | "date"
-    | "datetime-local"
-    | "month"
-    | "time"
-    | "week"
-    | "hidden"
-    | "file"
-    | "image"
-  >;
-};
+export type InputProps = Partial<InputGroupContextValue> &
+  FormFieldProps & {
+    /**
+     * 可控值
+     */
+    value?: string | number;
+
+    /**
+     * 默认值
+     * @default ""
+     */
+    defaultValue?: string | number;
+
+    /**
+     * onChange 回调
+     */
+    onChange?: (value: string | number) => void;
+
+    /**
+     * 是否无效
+     * @default false
+     */
+    invalid?: boolean;
+
+    /**
+     * 占位符文本
+     */
+    placeholder?: string;
+
+    /**
+     * 是否全宽度
+     * @default false
+     */
+    fullWidth?: boolean;
+
+    /**
+     * 前置元素
+     */
+    prefix?: ReactNode;
+
+    /**
+     * 前置元素宽度
+     */
+    prefixWidth?: number;
+
+    /**
+     * 后置元素
+     */
+    suffix?: ReactNode;
+
+    /**
+     * 后置元素宽度
+     */
+    suffixWidth?: number;
+
+    /**
+     * 输入框类型
+     * @default "text"
+     */
+    type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url";
+  };
 
 export const Input = (props: PrimitiveProps<"input", InputProps, "children">) => {
   const group = useInputGroup(true);
@@ -185,7 +151,7 @@ export const Input = (props: PrimitiveProps<"input", InputProps, "children">) =>
         required={required}
         disabled={disabled}
         readOnly={readOnly}
-        type={type as HTMLInputTypeAttribute}
+        type={type}
         inputMode={inputMode}
         value={valueState}
         onChange={handleChange}

packages/react-ui/src/components/number-input/number-input.tsx

@@ -5,7 +5,10 @@ import type { PrimitiveProps } from "../../primitives";
 import { Input, type InputProps } from "../input/input";
 import { NumberInputControl } from "./number-input-control";
 
-export type NumberInputProps = Omit<InputProps, "suffix" | "suffixWidth" | "onChange"> & {
+export type NumberInputProps = Omit<
+  InputProps,
+  "type" | "suffix" | "suffixWidth" | "value" | "defaultValue" | "onChange"
+> & {
   /**
    * 可控值
    */
@@ -20,7 +23,6 @@ export type NumberInputProps = Omit<InputProps, "suffix" | "suffixWidth" | "onCh
    * onChange 回调
    */
   onChange?: (value: number | undefined) => void;
-
   /**
    * 最小值
    * @default Number.MIN_SAFE_INTEGER

packages/react-ui/src/components/radio/radio-group-context.ts

@@ -23,7 +23,7 @@ export type RadioBaseProps = {
 
 export type RadioGroupBaseProps = RadioBaseProps & {
   /**
-   * 单选中输入字段的名称
+   * 字段的名称
    */
   name?: string;
 

packages/react-ui/src/components/radio/radio-group.tsx

@@ -66,7 +66,15 @@ export const RadioGroup = (props: PrimitiveProps<"div", RadioGroupProps, "role">
   };
 
   return (
-    <div role={"radiogroup"} aria-invalid={ariaAttr(invalid)} aria-orientation={orientation} {...rest}>
+    <div
+      role={"radiogroup"}
+      aria-disabled={ariaAttr(disabled)}
+      aria-required={ariaAttr(required)}
+      aria-readonly={ariaAttr(readOnly)}
+      aria-invalid={ariaAttr(invalid)}
+      aria-orientation={orientation}
+      {...rest}
+    >
       <RadioGroupContext value={groupContext}>{children}</RadioGroupContext>
     </div>
   );