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

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

@@ -18,6 +18,12 @@ export interface BaseDataItem extends DataItem {
 }
 export declare type AutoCompleteItems = BaseDataItem | string | number;
 export interface AutoCompleteProps<T extends AutoCompleteItems> {
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean;
     className?: string;
@@ -33,6 +39,8 @@ export interface AutoCompleteProps<T extends AutoCompleteItems> {
     emptyContent?: React.ReactNode | null;
     getPopupContainer?: () => HTMLElement;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
+    id?: string;
     loading?: boolean;
     motion?: Motion;
     maxHeight?: string | number;
@@ -77,6 +85,12 @@ interface AutoCompleteState {
 }
 declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoCompleteProps<T>, AutoCompleteState> {
     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>;
         autoFocus: PropTypes.Requireable<boolean>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
         className: PropTypes.Requireable<string>;
@@ -90,6 +104,9 @@ declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<Au
         dropdownClassName: PropTypes.Requireable<string>;
         dropdownStyle: PropTypes.Requireable<object>;
         emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        id: PropTypes.Requireable<string>;
+        insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        insetLabelId: PropTypes.Requireable<string>;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         onClear: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/autoComplete/index.js

@@ -175,6 +175,7 @@ class AutoComplete extends BaseComponent {
       size,
       prefix,
       insetLabel,
+      insetLabelId,
       suffix,
       placeholder,
       style,
@@ -184,7 +185,8 @@ class AutoComplete extends BaseComponent {
       triggerRender,
       validateStatus,
       autoFocus,
-      value
+      value,
+      id
     } = this.props;
     const {
       inputValue,
@@ -200,7 +202,8 @@ class AutoComplete extends BaseComponent {
         ["".concat(prefixCls, "-disabled")]: disabled
       }, className),
       onClick: this.handleInputClick,
-      ref: this.triggerRef
+      ref: this.triggerRef,
+      id
     }, keyboardEventSet);
 
     const innerProps = {
@@ -209,9 +212,16 @@ class AutoComplete extends BaseComponent {
       autofocus: autoFocus,
       onChange: this.onSearch,
       onClear: this.onInputClear,
+      'aria-label': this.props['aria-label'],
+      'aria-labelledby': this.props['aria-labelledby'],
+      'aria-invalid': this.props['aria-invalid'],
+      'aria-errormessage': this.props['aria-errormessage'],
+      'aria-describedby': this.props['aria-describedby'],
+      'aria-required': this.props['aria-required'],
       // TODO: remove in next major version
       suffix,
       prefix: prefix || insetLabel,
+      insetLabelId,
       showClear,
       validateStatus,
       size,
@@ -326,6 +336,12 @@ class AutoComplete extends BaseComponent {
 }
 
 AutoComplete.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,
   autoFocus: PropTypes.bool,
   autoAdjustOverflow: PropTypes.bool,
   className: PropTypes.string,
@@ -339,6 +355,9 @@ AutoComplete.propTypes = {
   dropdownClassName: PropTypes.string,
   dropdownStyle: PropTypes.object,
   emptyContent: PropTypes.node,
+  id: PropTypes.string,
+  insetLabel: PropTypes.node,
+  insetLabelId: PropTypes.string,
   onSearch: PropTypes.func,
   onSelect: PropTypes.func,
   onClear: PropTypes.func,

package/lib/es/avatar/avatarGroup.js

@@ -115,7 +115,8 @@ export default class AvatarGroup extends PureComponent {
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: groupCls
+      className: groupCls,
+      "aria-label": "avatar group"
     }, inner);
   }
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { AvatarAdapter } from '@douyinfe/semi-foundation/lib/es/avatar/foundation';
+import AvatarFoundation, { AvatarAdapter } from '@douyinfe/semi-foundation/lib/es/avatar/foundation';
 import '@douyinfe/semi-foundation/lib/es/avatar/avatar.css';
 import { noop } from '@douyinfe/semi-foundation/lib/es/utils/function';
 import BaseComponent from '../_base/baseComponent';
@@ -36,13 +36,14 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
     };
+    foundation: AvatarFoundation;
     constructor(props: AvatarProps);
     get adapter(): AvatarAdapter<AvatarProps, AvatarState>;
     componentDidMount(): void;
     componentDidUpdate(prevProps: AvatarProps): void;
     componentWillUnmount(): void;
-    onEnter(): void;
-    onLeave(): void;
+    onEnter(e: React.MouseEvent): void;
+    onLeave(e: React.MouseEvent): void;
     handleError(): void;
     render(): JSX.Element;
 }

package/lib/es/avatar/index.js

@@ -110,12 +110,12 @@ export default class Avatar extends BaseComponent {
     this.foundation.destroy();
   }
 
-  onEnter() {
-    this.foundation.handleEnter();
+  onEnter(e) {
+    this.foundation.handleEnter(e);
   }
 
-  onLeave() {
-    this.foundation.handleLeave();
+  onLeave(e) {
+    this.foundation.handleLeave(e);
   }
 
   handleError() {
@@ -158,6 +158,7 @@ export default class Avatar extends BaseComponent {
     const hoverRender = hoverContent ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-hover")
     }, hoverContent) : null;
+    let ariaLabel;
 
     if (isImg) {
       content = /*#__PURE__*/React.createElement("img", _Object$assign({
@@ -166,21 +167,29 @@ export default class Avatar extends BaseComponent {
         onError: this.handleError,
         alt: alt
       }, imgAttr));
+      ariaLabel = 'avatar';
     } else if (typeof children === 'string') {
       content = /*#__PURE__*/React.createElement("span", {
         className: "".concat(prefixCls, "-content")
       }, /*#__PURE__*/React.createElement("span", {
         className: "".concat(prefixCls, "-label")
       }, children));
+      ariaLabel = "avatar of ".concat(children);
     }
 
-    return /*#__PURE__*/React.createElement("span", _Object$assign({}, others, {
-      style: style,
-      className: avatarCls,
-      onClick: onClick,
-      onMouseEnter: this.onEnter,
-      onMouseLeave: this.onLeave
-    }), content, hoverRender);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
+      React.createElement("span", _Object$assign({
+        "aria-label": ariaLabel
+      }, others, {
+        style: style,
+        className: avatarCls,
+        onClick: onClick,
+        onMouseEnter: this.onEnter,
+        onMouseLeave: this.onLeave
+      }), content, hoverRender)
+    );
   }
 
 }

package/lib/es/banner/index.js

@@ -70,7 +70,8 @@ export default class Banner extends BaseComponent {
       icon: closeIcon || /*#__PURE__*/React.createElement(IconClose, null),
       theme: "borderless",
       size: "small",
-      type: "tertiary"
+      type: "tertiary",
+      "aria-label": 'Close'
     });
     return closer;
   }
@@ -137,7 +138,8 @@ export default class Banner extends BaseComponent {
     });
     const banner = visible ? /*#__PURE__*/React.createElement("div", {
       className: wrapper,
-      style: style
+      style: style,
+      role: "alert"
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-content-wrapper")
     }, /*#__PURE__*/React.createElement("div", {

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

@@ -27,6 +27,7 @@ export interface BreadcrumbProps extends BaseProps {
     autoCollapse?: boolean;
     renderMore?: (restItem: Array<React.ReactNode>) => React.ReactNode;
     moreType?: MoreType;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 interface BreadcrumbState {
     isCollapsed: boolean;
@@ -52,6 +53,7 @@ declare class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState>
         maxItemCount: propTypes.Requireable<number>;
         renderMore: propTypes.Requireable<(...args: any[]) => any>;
         moreType: propTypes.Requireable<string>;
+        'aria-label': propTypes.Requireable<string>;
     };
     static defaultProps: {
         routes: [];
@@ -66,6 +68,7 @@ declare class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState>
         autoCollapse: boolean;
         moreType: string;
         maxItemCount: number;
+        'aria-label': string;
     };
     constructor(props: BreadcrumbProps);
     get adapter(): BreadcrumbAdapter<BreadcrumbProps, BreadcrumbState>;

package/lib/es/breadcrumb/index.js

@@ -47,8 +47,12 @@ class Breadcrumb extends BaseComponent {
       }, /*#__PURE__*/React.createElement("span", {
         className: "".concat(clsPrefix, "-item-wrap")
       }, /*#__PURE__*/React.createElement("span", {
+        role: 'button',
+        tabIndex: 0,
+        "aria-label": 'Expand breadcrumb items',
         className: _concatInstanceProperty(_context = "".concat(clsPrefix, "-item ")).call(_context, clsPrefix, "-item-more"),
-        onClick: item => this.foundation.handleExpand(item)
+        onClick: item => this.foundation.handleExpand(item),
+        onKeyPress: e => this.foundation.handleExpandEnterPress(e)
       }, hasRenderMore && renderMore(restItem), !hasRenderMore && moreType === 'default' && /*#__PURE__*/React.createElement(IconMore, null), !hasRenderMore && moreType === 'popover' && this.renderPopoverMore(restItem)), /*#__PURE__*/React.createElement("span", {
         className: "".concat(clsPrefix, "-separator")
       }, this.props.separator)));
@@ -210,7 +214,7 @@ class Breadcrumb extends BaseComponent {
         separator
       }
     }, /*#__PURE__*/React.createElement("nav", {
-      "aria-label": "".concat(clsPrefix),
+      "aria-label": this.props['aria-label'],
       className: sizeCls,
       style: style
     }, breadcrumbs));
@@ -241,7 +245,8 @@ Breadcrumb.propTypes = {
   renderMore: propTypes.func,
 
   /* Type of ellipsis area */
-  moreType: propTypes.oneOf(strings.MORE_TYPE)
+  moreType: propTypes.oneOf(strings.MORE_TYPE),
+  'aria-label': propTypes.string
 };
 Breadcrumb.defaultProps = {
   routes: [],
@@ -255,6 +260,7 @@ Breadcrumb.defaultProps = {
   },
   autoCollapse: true,
   moreType: 'default',
-  maxItemCount: 4
+  maxItemCount: 4,
+  'aria-label': 'Breadcrumb'
 };
 export default Breadcrumb;

package/lib/es/breadcrumb/item.js

@@ -177,9 +177,9 @@ export default class BreadcrumbItem extends BaseComponent {
       shouldRenderSeparator // children,
 
     } = this.props;
-    const pageLabel = active ? {} : {
+    const pageLabel = active ? {
       'aria-current': 'page'
-    };
+    } : {};
     const item = this.renderItem();
     const separator = !active ? this.props.separator || /*#__PURE__*/React.createElement("span", {
       className: "".concat(clsPrefix, "-separator")

package/lib/es/button/Button.d.ts

@@ -25,6 +25,7 @@ export interface ButtonProps {
     onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
     onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export default class Button extends PureComponent<ButtonProps> {
     static defaultProps: {
@@ -57,6 +58,7 @@ export default class Button extends PureComponent<ButtonProps> {
         className: PropTypes.Requireable<string>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     render(): JSX.Element;
 }

package/lib/es/button/Button.js

@@ -64,7 +64,8 @@ export default class Button extends PureComponent {
         ["".concat(prefixCls, "-circle")]: circle,
         ["".concat(prefixCls, "-borderless")]: theme === 'borderless'
       }, className),
-      type: htmlType
+      type: htmlType,
+      'aria-disabled': disabled
     });
 
     return (
@@ -111,5 +112,6 @@ Button.propTypes = {
   theme: PropTypes.oneOf(strings.themes),
   className: PropTypes.string,
   onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func
+  onMouseLeave: PropTypes.func,
+  'aria-label': PropTypes.string
 };

package/lib/es/button/buttonGroup.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { Type, Size } from './Button';
@@ -8,6 +9,7 @@ export interface ButtonGroupProps extends BaseProps {
     type?: Type;
     size?: Size;
     theme?: Theme;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
     static propTypes: {
@@ -16,6 +18,7 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         type: PropTypes.Requireable<string>;
         size: PropTypes.Requireable<unknown>;
         theme: PropTypes.Requireable<unknown>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
         size: string;

package/lib/es/button/buttonGroup.js

@@ -29,9 +29,10 @@ export default class ButtonGroup extends BaseComponent {
       children,
       disabled,
       size,
-      type
+      type,
+      'aria-label': ariaLabel
     } = _a,
-          rest = __rest(_a, ["children", "disabled", "size", "type"]);
+          rest = __rest(_a, ["children", "disabled", "size", "type", 'aria-label']);
 
     let inner;
 
@@ -48,7 +49,9 @@ export default class ButtonGroup extends BaseComponent {
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-group")
+      className: "".concat(prefixCls, "-group"),
+      role: "group",
+      "aria-label": ariaLabel
     }, inner);
   }
 
@@ -58,7 +61,8 @@ ButtonGroup.propTypes = {
   disabled: PropTypes.bool,
   type: PropTypes.string,
   size: PropTypes.oneOf(btnSizes),
-  theme: PropTypes.oneOf(strings.themes)
+  theme: PropTypes.oneOf(strings.themes),
+  'aria-label': PropTypes.string
 };
 ButtonGroup.defaultProps = {
   size: 'default',

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

@@ -30,6 +30,7 @@ declare class Button extends React.PureComponent<ButtonProps> {
         onMouseDown: import("prop-types").Requireable<(...args: any[]) => any>;
         circle: import("prop-types").Requireable<boolean>;
         htmlType: import("prop-types").Requireable<unknown>;
+        'aria-label': import("prop-types").Requireable<string>;
     };
     constructor(props?: {});
     render(): JSX.Element;

package/lib/es/button/splitButtonGroup.d.ts

@@ -1,12 +1,15 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/es/button/button.css';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 export interface SplitButtonGroupProps extends BaseProps {
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export default class SplitButtonGroup extends BaseComponent<SplitButtonGroupProps> {
     static propTypes: {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     render(): JSX.Element;
 }

package/lib/es/button/splitButtonGroup.js

@@ -15,12 +15,15 @@ export default class SplitButtonGroup extends BaseComponent {
     const cls = classNames("".concat(prefixCls, "-split"), className);
     return /*#__PURE__*/React.createElement("div", {
       className: cls,
-      style: style
+      style: style,
+      role: "group",
+      "aria-label": this.props['aria-label']
     }, children);
   }
 
 }
 SplitButtonGroup.propTypes = {
   style: PropTypes.object,
-  className: PropTypes.string
+  className: PropTypes.string,
+  'aria-label': PropTypes.string
 };

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

@@ -38,6 +38,8 @@ export interface CardProps {
     style?: CSSProperties;
     /** Title */
     title?: ReactNode;
+    /** aria label */
+    'aria-label'?: string;
 }
 declare class Card extends PureComponent<CardProps> {
     static Meta: typeof Meta;
@@ -59,6 +61,7 @@ declare class Card extends PureComponent<CardProps> {
         shadows: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
         bordered: boolean;

package/lib/es/card/index.js

@@ -150,6 +150,7 @@ class Card extends PureComponent {
       [_concatInstanceProperty(_context = "".concat(prefixcls, "-shadows-")).call(_context, shadows)]: shadows
     });
     return /*#__PURE__*/React.createElement("div", _Object$assign({}, others, {
+      "aria-busy": this.props.loading,
       className: cardCls,
       style: style
     }), this.renderHeader(), this.renderCover(), this.renderBody(), this.renderFooter());
@@ -175,7 +176,8 @@ Card.propTypes = {
   loading: PropTypes.bool,
   shadows: PropTypes.oneOf(strings.SHADOWS),
   style: PropTypes.object,
-  title: PropTypes.node
+  title: PropTypes.node,
+  'aria-label': PropTypes.string
 };
 Card.defaultProps = {
   bordered: true,

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

@@ -19,6 +19,11 @@ export interface TriggerRenderProps extends BasicTriggerRenderProps {
 export declare type SimpleValueType = string | number | CascaderData;
 export declare type Value = SimpleValueType | Array<SimpleValueType> | Array<Array<SimpleValueType>>;
 export interface CascaderProps extends BasicCascaderProps {
+    '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'];
     arrowIcon?: ReactNode;
     defaultValue?: Value;
     dropdownStyle?: CSSProperties;
@@ -30,7 +35,9 @@ export interface CascaderProps extends BasicCascaderProps {
     value?: Value;
     prefix?: ReactNode;
     suffix?: ReactNode;
+    id?: string;
     insetLabel?: ReactNode;
+    insetLabelId?: string;
     style?: CSSProperties;
     bottomSlot?: ReactNode;
     topSlot?: ReactNode;
@@ -53,6 +60,11 @@ export interface CascaderState extends BasicCascaderInnerData {
 declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     static contextType: React.Context<import("../configProvider/context").ContextValue>;
     static propTypes: {
+        '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>;
         arrowIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         changeOnSelect: PropTypes.Requireable<boolean>;
         defaultValue: PropTypes.Requireable<string | any[]>;
@@ -76,6 +88,8 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        insetLabelId: PropTypes.Requireable<string>;
+        id: PropTypes.Requireable<string>;
         displayProp: PropTypes.Requireable<string>;
         displayRender: PropTypes.Requireable<(...args: any[]) => any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/cascader/index.js

@@ -134,7 +134,7 @@ class Cascader extends BaseComponent {
       const renderData = this.foundation.getRenderData();
       const content = /*#__PURE__*/React.createElement("div", {
         className: popoverCls,
-        role: "list-box",
+        role: "listbox",
         style: dropdownStyle
       }, topSlot, /*#__PURE__*/React.createElement(Item, {
         activeKeys: activeKeys,
@@ -262,7 +262,8 @@ class Cascader extends BaseComponent {
     this.renderPrefix = () => {
       const {
         prefix,
-        insetLabel
+        insetLabel,
+        insetLabelId
       } = this.props;
       const labelNode = prefix || insetLabel;
       const prefixWrapperCls = cls({
@@ -273,7 +274,8 @@ class Cascader extends BaseComponent {
         ["".concat(prefixcls, "-prefix-icon")]: isSemiIcon(labelNode)
       });
       return /*#__PURE__*/React.createElement("div", {
-        className: prefixWrapperCls
+        className: prefixWrapperCls,
+        id: insetLabelId
       }, labelNode);
     };
 
@@ -352,7 +354,9 @@ class Cascader extends BaseComponent {
       if (allowClear) {
         return /*#__PURE__*/React.createElement("div", {
           className: clearCls,
-          onClick: this.handleClear
+          onClick: this.handleClear,
+          role: 'button',
+          tabIndex: 0
         }, /*#__PURE__*/React.createElement(IconClear, null));
       }
 
@@ -387,7 +391,8 @@ class Cascader extends BaseComponent {
         suffix,
         insetLabel,
         triggerRender,
-        showClear
+        showClear,
+        id
       } = this.props;
       const {
         isOpen,
@@ -429,12 +434,28 @@ class Cascader extends BaseComponent {
       }, suffix ? this.renderSuffix() : null), /*#__PURE__*/React.createElement(Fragment, {
         key: 'arrow'
       }, this.renderArrow())];
+      /**
+       * Reasons for disabling the a11y eslint rule:
+       * The following attributes(aria-controls,aria-expanded) will be automatically added by Tooltip, no need to declare here
+       */
+
       return /*#__PURE__*/React.createElement("div", _Object$assign({
         className: classNames,
         style: style,
         ref: this.triggerRef,
-        onClick: e => this.foundation.handleClick(e)
-      }, mouseEvent), inner);
+        onClick: e => this.foundation.handleClick(e),
+        "aria-invalid": this.props['aria-invalid'],
+        "aria-errormessage": this.props['aria-errormessage'],
+        "aria-label": this.props['aria-label'],
+        "aria-labelledby": this.props['aria-labelledby'],
+        "aria-describedby": this.props["aria-describedby"],
+        "aria-required": this.props['aria-required'],
+        id: id
+      }, mouseEvent, {
+        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+        role: 'combobox',
+        tabIndex: 0
+      }), inner);
     };
 
     this.state = {
@@ -856,6 +877,11 @@ class Cascader extends BaseComponent {
 
 Cascader.contextType = ConfigContext;
 Cascader.propTypes = {
+  'aria-labelledby': PropTypes.string,
+  'aria-invalid': PropTypes.bool,
+  'aria-errormessage': PropTypes.string,
+  'aria-describedby': PropTypes.string,
+  'aria-required': PropTypes.bool,
   arrowIcon: PropTypes.node,
   changeOnSelect: PropTypes.bool,
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
@@ -881,6 +907,8 @@ Cascader.propTypes = {
   suffix: PropTypes.node,
   prefix: PropTypes.node,
   insetLabel: PropTypes.node,
+  insetLabelId: PropTypes.string,
+  id: PropTypes.string,
   displayProp: PropTypes.string,
   displayRender: PropTypes.func,
   onChange: PropTypes.func,