@douyinfe/semi-ui 2.2.0-beta.1 → 2.3.0-beta.0

package/lib/es/dropdown/dropdownItem.js

@@ -73,7 +73,9 @@ class DropdownItem extends BaseComponent {
       }, icon);
     }
 
-    return /*#__PURE__*/React.createElement("li", _Object$assign({}, events, {
+    return /*#__PURE__*/React.createElement("li", _Object$assign({
+      role: "menuitem"
+    }, events, {
       ref: ref => forwardRef(ref),
       className: itemclass,
       style: style

package/lib/es/dropdown/dropdownMenu.js

@@ -30,7 +30,10 @@ class DropdownMenu extends BaseComponent {
     } = _a,
           rest = __rest(_a, ["children", "className", "style"]);
 
-    return /*#__PURE__*/React.createElement("ul", _Object$assign({}, rest, {
+    return /*#__PURE__*/React.createElement("ul", _Object$assign({
+      role: "menu",
+      "aria-orientation": "vertical"
+    }, rest, {
       className: classnames("".concat(prefixCls, "-menu"), className),
       style: style
     }), children);

package/lib/es/empty/index.js

@@ -98,7 +98,8 @@ export default class Empty extends BaseComponent {
     };
     return /*#__PURE__*/React.createElement("div", {
       className: wrapperCls,
-      style: style
+      style: style,
+      "aria-label": "empty placeholder image"
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-image"),
       style: imageStyle

package/lib/es/form/baseForm.d.ts

@@ -13,6 +13,7 @@ interface BaseFormState {
 }
 declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
     static propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
         onSubmit: PropTypes.Requireable<(...args: any[]) => any>;
         onSubmitFail: PropTypes.Requireable<(...args: any[]) => any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
@@ -36,6 +37,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
         disabled: PropTypes.Requireable<boolean>;
         showValidateIcon: PropTypes.Requireable<boolean>;
         extraTextPosition: PropTypes.Requireable<string>;
+        id: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         onChange: (...args: any[]) => void;
@@ -53,8 +55,14 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
     static TextArea: React.ComponentType<import("utility-types").Subtract<Omit<import("../input").TextAreaProps, "forwardRef"> & React.RefAttributes<HTMLTextAreaElement>, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
     static InputNumber: React.ComponentType<import("utility-types").Subtract<import("../inputNumber").InputNumberProps & React.RefAttributes<HTMLInputElement>, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
     static Select: React.ComponentType<import("utility-types").Subtract<{
+        'aria-describedby'?: string;
+        'aria-errormessage'?: string;
+        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
+        'aria-labelledby'?: string;
+        'aria-required'?: boolean | "true" | "false";
         id?: string;
         autoFocus?: boolean;
+        autoClearSearchValue?: boolean;
         arrowIcon?: React.ReactNode;
         defaultValue?: string | number | any[] | Record<string, any>;
         value?: string | number | any[] | Record<string, any>;
@@ -90,6 +98,7 @@ declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
         suffix?: React.ReactNode;
         prefix?: React.ReactNode;
         insetLabel?: React.ReactNode;
+        insetLabelId?: string;
         inputProps?: import("utility-types").Subtract<import("../input").InputProps, {
             value?: React.ReactText;
             onFocus?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;

package/lib/es/form/baseForm.js

@@ -220,6 +220,7 @@ class Form extends BaseComponent {
 }
 
 Form.propTypes = {
+  'aria-label': PropTypes.string,
   onSubmit: PropTypes.func,
   onSubmitFail: PropTypes.func,
 
@@ -245,7 +246,8 @@ Form.propTypes = {
   autoScrollToError: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   disabled: PropTypes.bool,
   showValidateIcon: PropTypes.bool,
-  extraTextPosition: PropTypes.oneOf(strings.EXTRA_POS)
+  extraTextPosition: PropTypes.oneOf(strings.EXTRA_POS),
+  id: PropTypes.string
 };
 Form.defaultProps = {
   onChange: _noop,

package/lib/es/form/errorMessage.d.ts

@@ -9,6 +9,8 @@ export interface ErrorMessageProps {
     validateStatus?: string;
     helpText?: React.ReactNode;
     isInInputGroup?: boolean;
+    errorMessageId?: string;
+    helpTextId?: string;
 }
 export default class ErrorMessage extends PureComponent<ErrorMessageProps> {
     static propTypes: {
@@ -19,6 +21,8 @@ export default class ErrorMessage extends PureComponent<ErrorMessageProps> {
         showValidateIcon: PropTypes.Requireable<boolean>;
         helpText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         isInInputGroup: PropTypes.Requireable<boolean>;
+        errorMessageId: PropTypes.Requireable<string>;
+        helpTextId: PropTypes.Requireable<string>;
     };
     generatorText(error: ReactFieldError): JSX.Element;
     render(): JSX.Element;

package/lib/es/form/errorMessage.js

@@ -10,12 +10,27 @@ import { IconAlertTriangle, IconAlertCircle } from '@douyinfe/semi-icons';
 const prefix = cssClasses.PREFIX;
 export default class ErrorMessage extends PureComponent {
   generatorText(error) {
+    const {
+      helpTextId,
+      errorMessageId
+    } = this.props;
+    const propsError = this.props.error;
+    let id = errorMessageId;
+
+    if (!propsError) {
+      id = helpTextId;
+    }
+
     if (typeof error === 'string') {
-      return /*#__PURE__*/React.createElement("span", null, error);
+      return /*#__PURE__*/React.createElement("span", {
+        id: id
+      }, error);
     } else if (_Array$isArray(error)) {
       const err = _filterInstanceProperty(error).call(error, e => e);
 
-      return err.length ? /*#__PURE__*/React.createElement("span", null, err.join(', ')) : null;
+      return err.length ? /*#__PURE__*/React.createElement("span", {
+        id: id
+      }, err.join(', ')) : null;
     } else if ( /*#__PURE__*/React.isValidElement(error)) {
       return error;
     }
@@ -76,5 +91,8 @@ ErrorMessage.propTypes = {
   validateStatus: PropTypes.string,
   showValidateIcon: PropTypes.bool,
   helpText: PropTypes.node,
-  isInInputGroup: PropTypes.bool
+  isInInputGroup: PropTypes.bool,
+  // internal props
+  errorMessageId: PropTypes.string,
+  helpTextId: PropTypes.string
 };

package/lib/es/form/field.d.ts

@@ -3,8 +3,14 @@ declare const FormInput: import("react").ComponentType<import("utility-types").S
 declare const FormInputNumber: import("react").ComponentType<import("utility-types").Subtract<import("../inputNumber/index").InputNumberProps & import("react").RefAttributes<HTMLInputElement>, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
 declare const FormTextArea: import("react").ComponentType<import("utility-types").Subtract<Omit<import("../input/textarea").TextAreaProps, "forwardRef"> & import("react").RefAttributes<HTMLTextAreaElement>, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
 declare const FormSelect: import("react").ComponentType<import("utility-types").Subtract<{
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
+    'aria-labelledby'?: string;
+    'aria-required'?: boolean | "true" | "false";
     id?: string;
     autoFocus?: boolean;
+    autoClearSearchValue?: boolean;
     arrowIcon?: import("react").ReactNode;
     defaultValue?: string | number | any[] | Record<string, any>;
     value?: string | number | any[] | Record<string, any>;
@@ -40,6 +46,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     suffix?: import("react").ReactNode;
     prefix?: import("react").ReactNode;
     insetLabel?: import("react").ReactNode;
+    insetLabelId?: string;
     inputProps?: import("utility-types").Subtract<import("../input/index").InputProps, {
         value?: import("react").ReactText;
         onFocus?: (e: import("react").FocusEvent<HTMLInputElement, Element>) => void;

package/lib/es/form/hoc/withField.js

@@ -60,6 +60,7 @@ function withField(Component, opts) {
       extraText,
       extraTextPosition,
       pure,
+      id,
       rest
     } = mergeProps(props);
     let {
@@ -396,27 +397,62 @@ function withField(Component, opts) {
     let mergeLabelAlign = labelAlign || formProps.labelAlign;
     let mergeLabelCol = labelCol || formProps.labelCol;
     let mergeWrapperCol = wrapperCol || formProps.wrapperCol;
-    let mergeExtraPos = extraTextPosition || formProps.extraTextPosition || 'bottom';
+    let mergeExtraPos = extraTextPosition || formProps.extraTextPosition || 'bottom'; // id attribute to improve a11y
+
+    const a11yId = id ? id : field;
+    const labelId = "".concat(a11yId, "-label");
+    const helpTextId = "".concat(a11yId, "-helpText");
+    const extraTextId = "".concat(a11yId, "-extraText");
+    const errorMessageId = "".concat(a11yId, "-errormessage");
 
     let FieldComponent = (() => {
-      var _context, _context3;
+      var _context3, _context5;
 
       // prefer to use validateStatus which pass by user throught props
       let blockStatus = validateStatus ? validateStatus : status;
+      const extraCls = classNames("".concat(prefix, "-field-extra"), {
+        ["".concat(prefix, "-field-extra-string")]: typeof extraText === 'string',
+        ["".concat(prefix, "-field-extra-middle")]: mergeExtraPos === 'middle',
+        ["".concat(prefix, "-field-extra-botttom")]: mergeExtraPos === 'bottom'
+      });
+      const extraContent = extraText ? /*#__PURE__*/React.createElement("div", {
+        className: extraCls,
+        id: extraTextId
+      }, extraText) : null;
 
       let newProps = _Object$assign(_Object$assign({
+        id: a11yId,
         disabled: formProps.disabled
       }, rest), {
         ref,
         onBlur: handleBlur,
         [options.onKeyChangeFnName]: handleChange,
         [options.valueKey]: value,
-        validateStatus: blockStatus
+        validateStatus: blockStatus,
+        'aria-required': required,
+        'aria-labelledby': labelId
       });
 
+      if (helpText) {
+        var _context;
+
+        newProps['aria-describedby'] = extraText ? _concatInstanceProperty(_context = "".concat(helpTextId, " ")).call(_context, extraTextId) : helpTextId;
+      }
+
+      if (extraText) {
+        var _context2;
+
+        newProps['aria-describedby'] = helpText ? _concatInstanceProperty(_context2 = "".concat(helpTextId, " ")).call(_context2, extraTextId) : extraTextId;
+      }
+
+      if (status === 'error') {
+        newProps['aria-errormessage'] = errorMessageId;
+        newProps['aria-invalid'] = true;
+      }
+
       const fieldCls = classNames({
         ["".concat(prefix, "-field")]: true,
-        [_concatInstanceProperty(_context = "".concat(prefix, "-field-")).call(_context, name)]: Boolean(name),
+        [_concatInstanceProperty(_context3 = "".concat(prefix, "-field-")).call(_context3, name)]: Boolean(name),
         [fieldClassName]: Boolean(fieldClassName)
       });
       const fieldMaincls = classNames({
@@ -425,9 +461,11 @@ function withField(Component, opts) {
 
       if (mergeLabelPos === 'inset' && !noLabel) {
         newProps.insetLabel = label || field;
+        newProps.insetLabelId = labelId;
 
         if (typeof label === 'object' && !isElement(label)) {
           newProps.insetLabel = label.text;
+          newProps.insetLabelId = labelId;
         }
       }
 
@@ -438,11 +476,11 @@ function withField(Component, opts) {
       }
 
       if (pure) {
-        var _context2;
+        var _context4;
 
         let pureCls = classNames(rest.className, {
           ["".concat(prefix, "-field-pure")]: true,
-          [_concatInstanceProperty(_context2 = "".concat(prefix, "-field-")).call(_context2, name)]: Boolean(name),
+          [_concatInstanceProperty(_context4 = "".concat(prefix, "-field-")).call(_context4, name)]: Boolean(name),
           [fieldClassName]: Boolean(fieldClassName)
         });
         newProps.className = pureCls;
@@ -450,7 +488,7 @@ function withField(Component, opts) {
       }
 
       let withCol = mergeLabelCol && mergeWrapperCol;
-      const labelColCls = mergeLabelAlign ? _concatInstanceProperty(_context3 = "".concat(prefix, "-col-")).call(_context3, mergeLabelAlign) : ''; // get label
+      const labelColCls = mergeLabelAlign ? _concatInstanceProperty(_context5 = "".concat(prefix, "-col-")).call(_context5, mergeLabelAlign) : ''; // get label
 
       let labelContent = null;
 
@@ -458,6 +496,7 @@ function withField(Component, opts) {
         let needSpread = typeof label === 'object' && !isElement(label) ? label : {};
         labelContent = /*#__PURE__*/React.createElement(Label, _Object$assign({
           text: label || field,
+          id: labelId,
           required: required,
           name: name || field,
           width: mergeLabelWidth,
@@ -465,20 +504,14 @@ function withField(Component, opts) {
         }, needSpread));
       }
 
-      const extraCls = classNames("".concat(prefix, "-field-extra"), {
-        ["".concat(prefix, "-field-extra-string")]: typeof extraText === 'string',
-        ["".concat(prefix, "-field-extra-middle")]: mergeExtraPos === 'middle',
-        ["".concat(prefix, "-field-extra-botttom")]: mergeExtraPos === 'bottom'
-      });
-      const extraContent = extraText ? /*#__PURE__*/React.createElement("div", {
-        className: extraCls
-      }, extraText) : null;
       const fieldMainContent = /*#__PURE__*/React.createElement("div", {
         className: fieldMaincls
       }, mergeExtraPos === 'middle' ? extraContent : null, com, !noErrorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
         error: error,
         validateStatus: blockStatus,
         helpText: helpText,
+        helpTextId: helpTextId,
+        errorMessageId: errorMessageId,
         showValidateIcon: formProps.showValidateIcon
       }) : null, mergeExtraPos === 'bottom' ? extraContent : null);
       const withColContent = /*#__PURE__*/React.createElement(React.Fragment, null, mergeLabelPos === 'top' ? /*#__PURE__*/React.createElement("div", {

package/lib/es/form/index.d.ts

@@ -11,7 +11,6 @@ import { useFormApi, useFormState, useFieldState, useFieldApi } from './hooks/in
 import withField from './hoc/withField';
 import withFormState from './hoc/withFormState';
 import withFormApi from './hoc/withFormApi';
-export * from './interface';
 export { Form, ArrayField, withField, useFormApi, useFormState, useFieldApi, useFieldState, withFormState, withFormApi };
 export * from './interface';
 export { ArrayFieldProps } from './arrayField';

package/lib/es/form/index.js

@@ -14,6 +14,5 @@ import { useFormApi, useFormState, useFieldState, useFieldApi } from './hooks/in
 import withField from './hoc/withField';
 import withFormState from './hoc/withFormState';
 import withFormApi from './hoc/withFormApi';
-export * from './interface';
 export { Form, ArrayField, withField, useFormApi, useFormState, useFieldApi, useFieldState, withFormState, withFormApi };
 export * from './interface';

package/lib/es/form/interface.d.ts

@@ -82,6 +82,7 @@ export interface FormFCChild<K extends Record<string, any> = any> {
     formApi: FormApi<K>;
 }
 export interface BaseFormProps {
+    'aria-label'?: React.AriaAttributes['aria-label'];
     onSubmit?: (values: Record<string, any>) => void;
     onSubmitFail?: (errors: Record<string, FieldError>, values: any) => void;
     onReset?: () => void;
@@ -90,6 +91,7 @@ export interface BaseFormProps {
     validateFields?: (values: Record<string, any>) => string | Record<string, any>;
     /** Use this if you want to populate the form with initial values. */
     initValues?: Record<string, any>;
+    id?: string;
     /** getFormApi will be call once when Form mounted, u can save formApi reference in your component  */
     getFormApi?: (formApi: FormApi) => void;
     style?: React.CSSProperties;

package/lib/es/form/label.d.ts

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 export interface LabelProps {
+    id?: string;
     /** Whether to display the required * symbol */
     required?: boolean;
     /** Content of label */
@@ -24,6 +25,7 @@ export default class Label extends PureComponent<LabelProps> {
         className: string;
     };
     static propTypes: {
+        id: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         required: PropTypes.Requireable<boolean>;
         text: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/lib/es/form/label.js

@@ -15,7 +15,8 @@ export default class Label extends PureComponent {
       align,
       style,
       className,
-      extra
+      extra,
+      id
     } = this.props;
     const labelCls = classNames(className, {
       ["".concat(prefixCls, "-field-label")]: true,
@@ -36,7 +37,8 @@ export default class Label extends PureComponent {
     return /*#__PURE__*/React.createElement("label", {
       className: labelCls,
       htmlFor: name,
-      style: labelStyle
+      style: labelStyle,
+      id: id
     }, extra ? contentWithExtra : textContent);
   }
 
@@ -48,6 +50,7 @@ Label.defaultProps = {
   className: ''
 };
 Label.propTypes = {
+  id: PropTypes.string,
   children: PropTypes.node,
   required: PropTypes.bool,
   text: PropTypes.node,

package/lib/es/input/index.d.ts

@@ -9,6 +9,12 @@ export declare type InputSize = 'small' | 'large' | 'default';
 export declare type InputMode = 'password';
 export declare type ValidateStatus = "default" | "error" | "warning" | "success";
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'prefix' | 'size' | 'autoFocus' | 'placeholder' | 'onFocus' | 'onBlur'> {
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     addonBefore?: React.ReactNode;
     addonAfter?: React.ReactNode;
     prefix?: React.ReactNode;
@@ -24,6 +30,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     hideSuffix?: boolean;
     placeholder?: React.ReactText;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     size?: InputSize;
     className?: string;
     style?: React.CSSProperties;
@@ -54,6 +61,12 @@ export interface InputState {
 }
 declare class Input extends BaseComponent<InputProps, InputState> {
     static propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         addonBefore: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         addonAfter: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -82,6 +95,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
         onKeyPress: PropTypes.Requireable<(...args: any[]) => any>;
         onEnterPress: PropTypes.Requireable<(...args: any[]) => any>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        insetLabelId: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;
         getValueLength: PropTypes.Requireable<(...args: any[]) => any>;
     };
@@ -147,6 +161,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
     static getDerivedStateFromProps(props: InputProps, state: InputState): Partial<InputState>;
     componentDidUpdate(prevProps: InputProps): void;
     handleClear: (e: React.MouseEvent<HTMLInputElement>) => void;
+    handleClearEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     handleClick: (e: React.MouseEvent<HTMLDivElement>) => void;
     handleMouseOver: (e: React.MouseEvent<HTMLDivElement>) => void;
     handleMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => void;
@@ -154,6 +169,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
     handleClickEye: (e: React.MouseEvent<HTMLInputElement>) => void;
     handleMouseDown: (e: React.MouseEvent<HTMLInputElement>) => void;
     handleMouseUp: (e: React.MouseEvent<HTMLInputElement>) => void;
+    handleModeEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     handleClickPrefixOrSuffix: (e: React.MouseEvent<HTMLInputElement>) => void;
     handlePreventMouseDown: (e: React.MouseEvent<HTMLInputElement>) => void;
     renderPrepend(): JSX.Element;

package/lib/es/input/index.js

@@ -41,6 +41,10 @@ class Input extends BaseComponent {
       this.foundation.handleClear(e);
     };
 
+    this.handleClearEnterPress = e => {
+      this.foundation.handleClearEnterPress(e);
+    };
+
     this.handleClick = e => {
       this.foundation.handleClick(e);
     };
@@ -73,6 +77,10 @@ class Input extends BaseComponent {
       this.foundation.handleMouseUp(e);
     };
 
+    this.handleModeEnterPress = e => {
+      this.foundation.handleModeEnterPress(e);
+    };
+
     this.handleClickPrefixOrSuffix = e => {
       this.foundation.handleClickPrefixOrSuffix(e);
     };
@@ -207,8 +215,12 @@ class Input extends BaseComponent {
 
     if (allowClear) {
       return /*#__PURE__*/React.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "Clear input value",
         className: clearCls,
-        onMouseDown: this.handleClear
+        onMouseDown: this.handleClear,
+        onKeyPress: this.handleClearEnterPress
       }, /*#__PURE__*/React.createElement(IconClear, null));
     }
 
@@ -229,13 +241,18 @@ class Input extends BaseComponent {
     const modeCls = cls("".concat(prefixCls, "-modebtn"));
     const modeIcon = eyeClosed ? /*#__PURE__*/React.createElement(IconEyeClosedSolid, null) : /*#__PURE__*/React.createElement(IconEyeOpened, null);
     const showModeBtn = mode === 'password' && value && !disabled && (isFocus || isHovering);
+    const ariaLabel = eyeClosed ? 'Show password' : 'Hidden password';
 
     if (showModeBtn) {
       return /*#__PURE__*/React.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": ariaLabel,
         className: modeCls,
         onClick: this.handleClickEye,
         onMouseDown: this.handleMouseDown,
-        onMouseUp: this.handleMouseUp
+        onMouseUp: this.handleMouseUp,
+        onKeyPress: this.handleModeEnterPress
       }, modeIcon);
     }
 
@@ -245,7 +262,8 @@ class Input extends BaseComponent {
   renderPrefix() {
     const {
       prefix,
-      insetLabel
+      insetLabel,
+      insetLabelId
     } = this.props;
     const labelNode = prefix || insetLabel;
 
@@ -258,11 +276,13 @@ class Input extends BaseComponent {
       ["".concat(prefixCls, "-inset-label")]: insetLabel,
       ["".concat(prefixCls, "-prefix-text")]: labelNode && _isString(labelNode),
       ["".concat(prefixCls, "-prefix-icon")]: isSemiIcon(labelNode)
-    });
+    }); // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+
     return /*#__PURE__*/React.createElement("div", {
       className: prefixWrapperCls,
       onMouseDown: this.handlePreventMouseDown,
-      onClick: this.handleClickPrefixOrSuffix
+      onClick: this.handleClickPrefixOrSuffix,
+      id: insetLabelId
     }, labelNode);
   }
 
@@ -294,7 +314,8 @@ class Input extends BaseComponent {
       ["".concat(prefixCls, "-suffix-text")]: suffix && _isString(suffix),
       ["".concat(prefixCls, "-suffix-icon")]: isSemiIcon(suffix),
       ["".concat(prefixCls, "-suffix-hidden")]: suffixAllowClear && Boolean(hideSuffix)
-    });
+    }); // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+
     return /*#__PURE__*/React.createElement("div", {
       className: suffixWrapperCls,
       onMouseDown: this.handlePreventMouseDown,
@@ -398,20 +419,34 @@ class Input extends BaseComponent {
       inputProps.minLength = stateMinLength;
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: wrapperCls,
-      style: style,
-      onMouseEnter: e => this.handleMouseOver(e),
-      onMouseLeave: e => this.handleMouseLeave(e),
-      onClick: e => this.handleClick(e)
-    }, this.renderPrepend(), this.renderPrefix(), /*#__PURE__*/React.createElement("input", _Object$assign({}, inputProps, {
-      ref: ref
-    })), this.renderClearBtn(), this.renderSuffix(suffixAllowClear), this.renderModeBtn(), this.renderAppend());
+    if (validateStatus === 'error') {
+      inputProps['aria-invalid'] = "true";
+    }
+
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+      React.createElement("div", {
+        className: wrapperCls,
+        style: style,
+        onMouseEnter: e => this.handleMouseOver(e),
+        onMouseLeave: e => this.handleMouseLeave(e),
+        onClick: e => this.handleClick(e)
+      }, this.renderPrepend(), this.renderPrefix(), /*#__PURE__*/React.createElement("input", _Object$assign({}, inputProps, {
+        ref: ref
+      })), this.renderClearBtn(), this.renderSuffix(suffixAllowClear), this.renderModeBtn(), this.renderAppend())
+    );
   }
 
 }
 
 Input.propTypes = {
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string,
+  'aria-invalid': PropTypes.bool,
+  'aria-errormessage': PropTypes.string,
+  'aria-describedby': PropTypes.string,
+  'aria-required': PropTypes.bool,
   addonBefore: PropTypes.node,
   addonAfter: PropTypes.node,
   prefix: PropTypes.node,
@@ -440,6 +475,7 @@ Input.propTypes = {
   onKeyPress: PropTypes.func,
   onEnterPress: PropTypes.func,
   insetLabel: PropTypes.node,
+  insetLabelId: PropTypes.string,
   inputStyle: PropTypes.object,
   getValueLength: PropTypes.func
 };

package/lib/es/input/inputGroup.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import BaseComponent from '../_base/baseComponent';
+import { LabelProps } from '../form/label';
 import { noop } from '@douyinfe/semi-foundation/lib/es/utils/function';
 export declare type InputSize = 'small' | 'large' | 'default';
 export interface InputGroupProps {
@@ -10,7 +11,7 @@ export interface InputGroupProps {
     style?: Record<string, any>;
     onBlur?: (e: React.FocusEvent<HTMLSpanElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLSpanElement>) => void;
-    label?: Record<string, any>;
+    label?: LabelProps;
     labelPosition?: string;
     disabled?: boolean;
 }

package/lib/es/input/inputGroup.js

@@ -51,9 +51,16 @@ export default class inputGroup extends BaseComponent {
       [_concatInstanceProperty(_context = "".concat(prefixCls, "-")).call(_context, size)]: size !== 'default'
     }); // const labelCls = cls(label.className, '');
 
+    const defaultName = 'input-group';
     return /*#__PURE__*/React.createElement("div", {
+      role: "group",
+      "aria-label": "Input group",
+      "aria-disabled": this.props.disabled,
       className: groupWrapperCls
-    }, label && label.text ? /*#__PURE__*/React.createElement(Label, _Object$assign({}, label)) : null, /*#__PURE__*/React.createElement("span", {
+    }, label && label.text ? /*#__PURE__*/React.createElement(Label, _Object$assign({
+      name: defaultName
+    }, label)) : null, /*#__PURE__*/React.createElement("span", {
+      id: label && label.name || defaultName,
       className: groupCls,
       style: this.props.style,
       onFocus: this.props.onFocus,
@@ -109,6 +116,9 @@ export default class inputGroup extends BaseComponent {
     }
 
     return /*#__PURE__*/React.createElement("span", {
+      role: "group",
+      "aria-label": "Input group",
+      "aria-disabled": this.props.disabled,
       className: groupCls,
       style: style,
       onFocus: this.props.onFocus,