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

package/lib/cjs/checkbox/checkboxGroup.js

@@ -93,7 +93,8 @@ class CheckboxGroup extends _baseComponent.default {
       className,
       id,
       style,
-      type
+      type,
+      disabled
     } = this.props;
     const isPureCardType = type === _constants.strings.TYPE_PURECARD;
     const isCardType = type === _constants.strings.TYPE_CARD || isPureCardType;
@@ -113,6 +114,7 @@ class CheckboxGroup extends _baseComponent.default {
       inner = (0, _map.default)(_context5 = options || []).call(_context5, (option, index) => {
         if (typeof option === 'string') {
           return /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+            role: "listitem",
             key: index,
             disabled: this.props.disabled,
             value: option,
@@ -120,6 +122,7 @@ class CheckboxGroup extends _baseComponent.default {
           }, option);
         } else {
           return /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+            role: "listitem",
             key: index,
             disabled: option.disabled || this.props.disabled,
             value: option.value,
@@ -135,14 +138,19 @@ class CheckboxGroup extends _baseComponent.default {
       var _context6;
 
       inner = (0, _map.default)(_context6 = _react.default.Children.toArray(children)).call(_context6, (itm, index) => /*#__PURE__*/_react.default.cloneElement(itm, {
-        key: index
+        key: index,
+        role: 'listitem'
       }));
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
+      id: id,
+      role: "list",
+      "aria-label": this.props['aria-label'],
       className: prefixClsDisplay,
       style: style,
-      id: id
+      "aria-labelledby": this.props['aria-labelledby'],
+      "aria-describedby": this.props['aria-describedby']
     }, /*#__PURE__*/_react.default.createElement(_context7.Context.Provider, {
       value: {
         checkboxGroup: {
@@ -160,6 +168,11 @@ class CheckboxGroup extends _baseComponent.default {
 }
 
 CheckboxGroup.propTypes = {
+  'aria-describedby': _propTypes.default.string,
+  'aria-errormessage': _propTypes.default.string,
+  'aria-invalid': _propTypes.default.bool,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-required': _propTypes.default.bool,
   defaultValue: _propTypes.default.array,
   disabled: _propTypes.default.bool,
   name: _propTypes.default.string,

package/lib/cjs/checkbox/checkboxInner.d.ts

@@ -1,6 +1,11 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 export interface CheckboxInnerProps {
+    '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'];
     indeterminate?: boolean;
     checked?: boolean;
     disabled?: boolean;
@@ -8,6 +13,9 @@ export interface CheckboxInnerProps {
     name?: string;
     isPureCardType?: boolean;
     ref?: React.MutableRefObject<CheckboxInner> | ((ref: CheckboxInner) => void);
+    addonId?: string;
+    extraId?: string;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
     static contextType: React.Context<{
@@ -21,6 +29,11 @@ declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
         };
     }>;
     static propTypes: {
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         checked: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
@@ -28,6 +41,8 @@ declare class CheckboxInner extends PureComponent<CheckboxInnerProps> {
         grouped: PropTypes.Requireable<boolean>;
         value: PropTypes.Requireable<any>;
         isPureCardType: PropTypes.Requireable<boolean>;
+        addonId: PropTypes.Requireable<string>;
+        extraId: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         onChange: (...args: any[]) => void;

package/lib/cjs/checkbox/checkboxInner.js

@@ -49,7 +49,9 @@ class CheckboxInner extends _react.PureComponent {
       disabled,
       prefixCls,
       name,
-      isPureCardType
+      isPureCardType,
+      addonId,
+      extraId
     } = this.props;
     const prefix = prefixCls || _constants.checkboxClasses.PREFIX;
     const wrapper = (0, _classnames.default)({
@@ -64,10 +66,18 @@ class CheckboxInner extends _react.PureComponent {
     return /*#__PURE__*/_react.default.createElement("span", {
       className: wrapper
     }, /*#__PURE__*/_react.default.createElement("input", {
+      type: "checkbox",
+      "aria-label": this.props['aria-label'],
+      "aria-disabled": disabled,
+      "aria-checked": checked,
+      "aria-labelledby": addonId,
+      "aria-describedby": extraId || this.props['aria-describedby'],
+      "aria-invalid": this.props['aria-invalid'],
+      "aria-errormessage": this.props['aria-errormessage'],
+      "aria-required": this.props['aria-required'],
       ref: ref => {
         this.inputEntity = ref;
       },
-      type: "checkbox",
       className: _constants.checkboxClasses.INPUT,
       onChange: _noop2.default,
       checked: checked,
@@ -82,13 +92,20 @@ class CheckboxInner extends _react.PureComponent {
 
 CheckboxInner.contextType = _context.Context;
 CheckboxInner.propTypes = {
+  'aria-describedby': _propTypes.default.string,
+  'aria-errormessage': _propTypes.default.string,
+  'aria-invalid': _propTypes.default.bool,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-required': _propTypes.default.bool,
   checked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
   onChange: _propTypes.default.func,
   children: _propTypes.default.node,
   grouped: _propTypes.default.bool,
   value: _propTypes.default.any,
-  isPureCardType: _propTypes.default.bool
+  isPureCardType: _propTypes.default.bool,
+  addonId: _propTypes.default.string,
+  extraId: _propTypes.default.string
 };
 CheckboxInner.defaultProps = {
   onChange: _noop2.default

package/lib/cjs/collapse/index.js

@@ -126,7 +126,8 @@ class Collapse extends _baseComponent.default {
     } = this.state;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: clsPrefix,
-      style: style
+      style: style,
+      "aria-label": "Collapse"
     }, /*#__PURE__*/_react.default.createElement(_collapseContext.default.Provider, {
       value: {
         activeSet,

package/lib/cjs/collapse/item.d.ts

@@ -1,4 +1,4 @@
-import React, { PureComponent, ReactNode, CSSProperties } from 'react';
+import React, { CSSProperties, PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { CollapseContextType } from './collapse-context';
 export interface CollapsePanelProps {
@@ -18,6 +18,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         className: PropTypes.Requireable<string>;
         reCalcKey: PropTypes.Requireable<string | number>;
     };
+    private ariaID;
     renderHeader(active: boolean, expandIconEnable?: boolean): JSX.Element;
     render(): JSX.Element;
 }

package/lib/cjs/collapse/item.js

@@ -34,6 +34,8 @@ var _collapseContext = _interopRequireDefault(require("./collapse-context"));
 
 var _semiIcons = require("@douyinfe/semi-icons");
 
+var _uuid = require("@douyinfe/semi-foundation/lib/cjs/utils/uuid");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -50,6 +52,11 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 
 class CollapsePanel extends _react.PureComponent {
+  constructor() {
+    super(...arguments);
+    this.ariaID = (0, _uuid.getUuidShort)({});
+  }
+
   renderHeader(active) {
     let expandIconEnable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     const {
@@ -73,6 +80,7 @@ class CollapsePanel extends _react.PureComponent {
     }
 
     const icon = /*#__PURE__*/_react.default.createElement("span", {
+      "aria-hidden": 'true',
       className: (0, _classnames.default)(["".concat(_constants.cssClasses.PREFIX, "-header-icon"), {
         ["".concat(_constants.cssClasses.PREFIX, "-header-iconDisabled")]: !expandIconEnable
       }])
@@ -83,7 +91,9 @@ class CollapsePanel extends _react.PureComponent {
     if (typeof header === 'string') {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconPosLeft ? icon : null, /*#__PURE__*/_react.default.createElement("span", null, header), /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(_constants.cssClasses.PREFIX, "-header-right")
-      }, /*#__PURE__*/_react.default.createElement("span", null, extra), iconPosLeft ? null : icon));
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        "aria-label": 'Extra of collapse header'
+      }, extra), iconPosLeft ? null : icon));
     }
 
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconPosLeft ? icon : null, header, iconPosLeft ? null : icon);
@@ -118,13 +128,14 @@ class CollapsePanel extends _react.PureComponent {
       ["".concat(_constants.cssClasses.PREFIX, "-content")]: true
     });
     return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
-      role: "Collapse-panel",
+      "aria-label": 'Collapse panel',
       className: itemCls
     }, restProps), /*#__PURE__*/_react.default.createElement("div", {
       role: "button",
       tabIndex: 0,
       className: headerCls,
       "aria-expanded": active ? 'true' : 'false',
+      "aria-owns": this.ariaID,
       onClick: e => onClick(itemKey, e)
     }, this.renderHeader(active, children !== undefined)), children && /*#__PURE__*/_react.default.createElement(_collapsible.default, {
       isOpen: active,
@@ -132,7 +143,10 @@ class CollapsePanel extends _react.PureComponent {
       motion: motion,
       reCalcKey: reCalcKey
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: contentCls
+      className: contentCls,
+      "aria-label": 'Collapse content',
+      "aria-hidden": !active,
+      id: this.ariaID
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(_constants.cssClasses.PREFIX, "-content-wrapper")
     }, children))));

package/lib/cjs/collapsible/index.d.ts

@@ -11,6 +11,7 @@ export interface CollapsibleProps {
     style?: React.CSSProperties;
     collapseHeight?: number;
     reCalcKey?: number | string;
+    id?: string;
 }
 declare const Collapsible: {
     (props: CollapsibleProps): JSX.Element;

package/lib/cjs/collapsible/index.js

@@ -45,7 +45,8 @@ const Collapsible = props => {
     collapseHeight,
     style,
     className,
-    reCalcKey
+    reCalcKey,
+    id
   } = props;
   const ref = (0, _react.useRef)(null);
   const [maxHeight, setMaxHeight] = (0, _react.useState)(0);
@@ -113,7 +114,8 @@ const Collapsible = props => {
       ref: setHeight,
       style: {
         overflow: 'hidden'
-      }
+      },
+      id: id
     }, children));
   };
 

package/lib/cjs/datePicker/datePicker.d.ts

@@ -10,9 +10,15 @@ import { Locale } from '../locale/interface';
 import { RangeType } from '@douyinfe/semi-foundation/lib/cjs/datePicker/inputFoundation';
 import { TimePickerProps } from '../timePicker/TimePicker';
 export interface DatePickerProps extends DatePickerFoundationProps {
+    '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'];
     timePickerOpts?: TimePickerProps;
     bottomSlot?: React.ReactNode;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     prefix?: React.ReactNode;
     topSlot?: React.ReactNode;
     renderDate?: (dayNumber?: number, fullDate?: string) => React.ReactNode;
@@ -29,6 +35,11 @@ export declare type DatePickerState = DatePickerFoundationState;
 export default class DatePicker extends BaseComponent<DatePickerProps, DatePickerState> {
     static contextType: React.Context<import("../configProvider/context").ContextValue>;
     static propTypes: {
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         density: PropTypes.Requireable<"default" | "compact">;
@@ -58,6 +69,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         prefixCls: PropTypes.Requireable<string>;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        insetLabelId: PropTypes.Requireable<string>;
         zIndex: PropTypes.Requireable<number>;
         position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/datePicker/datePicker.js

@@ -278,6 +278,10 @@ class DatePicker extends _baseComponent.default {
         }
 
         this.clickOutSideHandler = e => {
+          if (this.adapter.needConfirm()) {
+            return;
+          }
+
           const triggerEl = this.triggerElRef && this.triggerElRef.current;
           const panelEl = this.panelRef && this.panelRef.current;
           const isInTrigger = triggerEl && triggerEl.contains(e.target);
@@ -462,7 +466,8 @@ class DatePicker extends _baseComponent.default {
       density,
       syncSwitchMonth,
       onPanelChange,
-      timeZone
+      timeZone,
+      triggerRender
     } = this.props;
     const {
       value,
@@ -509,7 +514,8 @@ class DatePicker extends _baseComponent.default {
       syncSwitchMonth: syncSwitchMonth,
       onPanelChange: onPanelChange,
       timeZone: timeZone,
-      focusRecordsRef: this.focusRecordsRef
+      focusRecordsRef: this.focusRecordsRef,
+      triggerRender: triggerRender
     });
   }
 
@@ -535,6 +541,7 @@ class DatePicker extends _baseComponent.default {
       disabled,
       showClear,
       insetLabel,
+      insetLabelId,
       placeholder,
       validateStatus,
       inputStyle,
@@ -575,6 +582,7 @@ class DatePicker extends _baseComponent.default {
       inputStyle,
       showClear,
       insetLabel,
+      insetLabelId,
       type,
       format,
       multiple,
@@ -617,7 +625,12 @@ class DatePicker extends _baseComponent.default {
       className: (0, _classnames.default)(className, {
         [prefixCls]: true
       }),
-      ref: this.setTriggerRef
+      ref: this.setTriggerRef,
+      'aria-invalid': this.props['aria-invalid'],
+      'aria-errormessage': this.props['aria-errormessage'],
+      'aria-labelledby': this.props['aria-labelledby'],
+      'aria-describedby': this.props['aria-describedby'],
+      'aria-required': this.props['aria-required']
     };
     const inner = this.renderInner();
     const wrappedInner = this.wrapPopover(inner);
@@ -629,6 +642,11 @@ class DatePicker extends _baseComponent.default {
 exports.default = DatePicker;
 DatePicker.contextType = _context5.default;
 DatePicker.propTypes = {
+  'aria-describedby': _propTypes.default.string,
+  'aria-errormessage': _propTypes.default.string,
+  'aria-invalid': _propTypes.default.bool,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-required': _propTypes.default.bool,
   type: _propTypes.default.oneOf(_constants.strings.TYPE_SET),
   size: _propTypes.default.oneOf(_constants.strings.SIZE_SET),
   density: _propTypes.default.oneOf(_constants.strings.DENSITY_SET),
@@ -658,6 +676,7 @@ DatePicker.propTypes = {
   prefixCls: _propTypes.default.string,
   prefix: _propTypes.default.node,
   insetLabel: _propTypes.default.node,
+  insetLabelId: _propTypes.default.string,
   zIndex: _propTypes.default.number,
   position: _propTypes.default.oneOf(_constants2.strings.POSITION_SET),
   getPopupContainer: _propTypes.default.func,

package/lib/cjs/datePicker/monthsGrid.d.ts

@@ -49,6 +49,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         syncSwitchMonth: PropTypes.Requireable<boolean>;
         onPanelChange: PropTypes.Requireable<(...args: any[]) => any>;
         focusRecordsRef: PropTypes.Requireable<object>;
+        triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         type: string;

package/lib/cjs/datePicker/monthsGrid.js

@@ -695,7 +695,8 @@ MonthsGrid.propTypes = {
   syncSwitchMonth: _propTypes.default.bool,
   // Callback function for panel date switching
   onPanelChange: _propTypes.default.func,
-  focusRecordsRef: _propTypes.default.object
+  focusRecordsRef: _propTypes.default.object,
+  triggerRender: _propTypes.default.func
 };
 MonthsGrid.defaultProps = {
   type: 'date',

package/lib/cjs/dropdown/dropdownItem.js

@@ -96,7 +96,9 @@ class DropdownItem extends _baseComponent.default {
       }, icon);
     }
 
-    return /*#__PURE__*/_react.default.createElement("li", (0, _assign.default)({}, events, {
+    return /*#__PURE__*/_react.default.createElement("li", (0, _assign.default)({
+      role: "menuitem"
+    }, events, {
       ref: ref => forwardRef(ref),
       className: itemclass,
       style: style

package/lib/cjs/dropdown/dropdownMenu.js

@@ -49,7 +49,10 @@ class DropdownMenu extends _baseComponent.default {
     } = _a,
           rest = __rest(_a, ["children", "className", "style"]);
 
-    return /*#__PURE__*/_react.default.createElement("ul", (0, _assign.default)({}, rest, {
+    return /*#__PURE__*/_react.default.createElement("ul", (0, _assign.default)({
+      role: "menu",
+      "aria-orientation": "vertical"
+    }, rest, {
       className: (0, _classnames.default)("".concat(prefixCls, "-menu"), className),
       style: style
     }), children);

package/lib/cjs/empty/index.js

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

package/lib/cjs/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/cjs/form/baseForm.js

@@ -259,6 +259,7 @@ class Form extends _baseComponent.default {
 }
 
 Form.propTypes = {
+  'aria-label': _propTypes.default.string,
   onSubmit: _propTypes.default.func,
   onSubmitFail: _propTypes.default.func,
 
@@ -284,7 +285,8 @@ Form.propTypes = {
   autoScrollToError: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
   disabled: _propTypes.default.bool,
   showValidateIcon: _propTypes.default.bool,
-  extraTextPosition: _propTypes.default.oneOf(_constants.strings.EXTRA_POS)
+  extraTextPosition: _propTypes.default.oneOf(_constants.strings.EXTRA_POS),
+  id: _propTypes.default.string
 };
 Form.defaultProps = {
   onChange: _noop2.default,

package/lib/cjs/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/cjs/form/errorMessage.js

@@ -37,11 +37,26 @@ const prefix = _constants.cssClasses.PREFIX;
 
 class ErrorMessage extends _react.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.default.createElement("span", null, error);
+      return /*#__PURE__*/_react.default.createElement("span", {
+        id: id
+      }, error);
     } else if ((0, _isArray.default)(error)) {
       const err = (0, _filter.default)(error).call(error, e => e);
-      return err.length ? /*#__PURE__*/_react.default.createElement("span", null, err.join(', ')) : null;
+      return err.length ? /*#__PURE__*/_react.default.createElement("span", {
+        id: id
+      }, err.join(', ')) : null;
     } else if ( /*#__PURE__*/_react.default.isValidElement(error)) {
       return error;
     }
@@ -104,5 +119,8 @@ ErrorMessage.propTypes = {
   validateStatus: _propTypes.default.string,
   showValidateIcon: _propTypes.default.bool,
   helpText: _propTypes.default.node,
-  isInInputGroup: _propTypes.default.bool
+  isInInputGroup: _propTypes.default.bool,
+  // internal props
+  errorMessageId: _propTypes.default.string,
+  helpTextId: _propTypes.default.string
 };

package/lib/cjs/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;