@douyinfe/semi-ui 2.4.1 → 2.6.0-beta.0

package/lib/cjs/upload/fileCard.js

@@ -30,7 +30,7 @@ var _semiIcons = require("@douyinfe/semi-icons");
 
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
 
-var _index = _interopRequireDefault(require("../iconButton/index"));
+var _index = _interopRequireDefault(require("../button/index"));
 
 var _index2 = _interopRequireDefault(require("../progress/index"));
 
@@ -200,6 +200,7 @@ class FileCard extends _react.PureComponent {
       onPreviewClick,
       showPicInfo,
       renderPicInfo,
+      renderPicPreviewIcon,
       renderThumbnail,
       name,
       index
@@ -207,6 +208,7 @@ class FileCard extends _react.PureComponent {
     const showProgress = status === _constants.strings.FILE_STATUS_UPLOADING && percent !== 100;
     const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
     const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && this.props.showReplace;
+    const showPreview = status === _constants.strings.FILE_STATUS_SUCCESS && !this.props.showReplace;
     const filePicCardCls = (0, _classnames.default)({
       ["".concat(prefixCls, "-picture-file-card")]: true,
       ["".concat(prefixCls, "-picture-file-card-disabled")]: disabled,
@@ -214,7 +216,6 @@ class FileCard extends _react.PureComponent {
       ["".concat(prefixCls, "-picture-file-card-error")]: status === _constants.strings.FILE_STATUS_UPLOAD_FAIL,
       ["".concat(prefixCls, "-picture-file-card-uploading")]: showProgress
     });
-    const closeCls = "".concat(prefixCls, "-picture-file-card-close");
 
     const retry = /*#__PURE__*/_react.default.createElement("div", {
       role: "button",
@@ -240,6 +241,19 @@ class FileCard extends _react.PureComponent {
       className: "".concat(prefixCls, "-picture-file-card-icon-replace")
     })));
 
+    const preview = /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-picture-file-card-preview")
+    }, typeof renderPicPreviewIcon === 'function' ? renderPicPreviewIcon(this.props) : null);
+
+    const close = /*#__PURE__*/_react.default.createElement("div", {
+      role: "button",
+      tabIndex: 0,
+      className: "".concat(prefixCls, "-picture-file-card-close"),
+      onClick: e => this.onRemove(e)
+    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, {
+      className: "".concat(prefixCls, "-picture-file-card-icon-close")
+    }));
+
     const picInfo = typeof renderPicInfo === 'function' ? renderPicInfo(this.props) : /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-picture-file-card-pic-info")
     }, index + 1);
@@ -258,14 +272,7 @@ class FileCard extends _react.PureComponent {
       size: "small",
       orbitStroke: '#FFF',
       "aria-label": "uploading file progress"
-    }) : null, showRetry ? retry : null, showReplace && replace, showPicInfo && picInfo, !disabled && /*#__PURE__*/_react.default.createElement("div", {
-      className: closeCls,
-      onClick: e => this.onRemove(e)
-    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
-      tabIndex: 0,
-      role: "button",
-      size: "extra-small"
-    })), this.renderPicValidateMsg());
+    }) : null, showRetry ? retry : null, showReplace && replace, showPreview && preview, showPicInfo && picInfo, !disabled && close, this.renderPicValidateMsg());
   }
 
   renderFile(locale) {
@@ -280,7 +287,8 @@ class FileCard extends _react.PureComponent {
       previewFile,
       status,
       style,
-      onPreviewClick
+      onPreviewClick,
+      renderFileOperation
     } = this.props;
     const fileCardCls = (0, _classnames.default)({
       ["".concat(prefixCls, "-file-card")]: true,
@@ -310,6 +318,14 @@ class FileCard extends _react.PureComponent {
       previewContent = previewFile(this.props);
     }
 
+    const operation = typeof renderFileOperation === 'function' ? renderFileOperation(this.props) : /*#__PURE__*/_react.default.createElement(_index.default, {
+      onClick: e => this.onRemove(e),
+      type: "tertiary",
+      icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
+      theme: "borderless",
+      size: "small",
+      className: closeCls
+    });
     return /*#__PURE__*/_react.default.createElement("div", {
       role: "listitem",
       className: fileCardCls,
@@ -352,29 +368,22 @@ class FileCard extends _react.PureComponent {
       tabIndex: 0,
       className: "".concat(infoCls, "-retry"),
       onClick: e => this.onRetry(e)
-    }, locale.retry) : null)), /*#__PURE__*/_react.default.createElement(_index.default, {
-      onClick: e => this.onRemove(e),
-      type: "tertiary",
-      icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
-      theme: "borderless",
-      size: "small",
-      className: closeCls
-    }));
+    }, locale.retry) : null)), operation);
   }
 
   onRemove(e) {
     e.stopPropagation();
-    this.props.onRemove(this.props, e);
+    this.props.onRemove();
   }
 
   onReplace(e) {
     e.stopPropagation();
-    this.props.onReplace(this.props, e);
+    this.props.onReplace();
   }
 
   onRetry(e) {
     e.stopPropagation();
-    this.props.onRetry(this.props, e);
+    this.props.onRetry();
   }
 
   render() {

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

@@ -29,6 +29,7 @@ export interface UploadProps {
     fileList?: Array<FileItem>;
     fileName?: string;
     headers?: Record<string, any> | ((file: File) => Record<string, string>);
+    hotSpotLocation?: 'start' | 'end';
     itemStyle?: CSSProperties;
     limit?: number;
     listType?: UploadListType;
@@ -56,6 +57,8 @@ export interface UploadProps {
     renderFileItem?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     renderThumbnail?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderPicPreviewIcon?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderFileOperation?: (fileItem: RenderFileItemProps) => ReactNode;
     showClear?: boolean;
     showPicInfo?: boolean;
     showReplace?: boolean;
@@ -99,6 +102,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         fileList: PropTypes.Requireable<any[]>;
         fileName: PropTypes.Requireable<string>;
         headers: PropTypes.Requireable<object>;
+        hotSpotLocation: PropTypes.Requireable<string>;
         itemStyle: PropTypes.Requireable<object>;
         limit: PropTypes.Requireable<number>;
         listType: PropTypes.Requireable<"picture" | "list">;
@@ -124,6 +128,8 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         prompt: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         promptPosition: PropTypes.Requireable<"left" | "right" | "bottom">;
         renderFileItem: PropTypes.Requireable<(...args: any[]) => any>;
+        renderPicPreviewIcon: PropTypes.Requireable<(...args: any[]) => any>;
+        renderFileOperation: PropTypes.Requireable<(...args: any[]) => any>;
         renderPicInfo: PropTypes.Requireable<(...args: any[]) => any>;
         renderThumbnail: PropTypes.Requireable<(...args: any[]) => any>;
         showClear: PropTypes.Requireable<boolean>;

package/lib/cjs/upload/index.js

@@ -16,6 +16,8 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
+var _pick2 = _interopRequireDefault(require("lodash/pick"));
+
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -136,14 +138,14 @@ class Upload extends _baseComponent.default {
         previewFile,
         listType,
         itemStyle,
-        showRetry,
         showPicInfo,
         renderPicInfo,
+        renderPicPreviewIcon,
+        renderFileOperation,
         renderFileItem,
         renderThumbnail,
         disabled,
-        onPreviewClick,
-        showReplace
+        onPreviewClick
       } = this.props;
 
       const onRemove = () => this.remove(file);
@@ -156,20 +158,20 @@ class Upload extends _baseComponent.default {
         this.replace(index);
       };
 
-      const fileCardProps = (0, _assign.default)((0, _assign.default)({}, file), {
+      const fileCardProps = (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, (0, _pick2.default)(this.props, ['showRetry', 'showReplace', ''])), file), {
         previewFile,
         listType,
         onRemove,
         onRetry,
         index,
         key: uid || (0, _concat.default)(_context = "".concat(name)).call(_context, index),
-        showRetry: typeof file.showRetry !== 'undefined' ? file.showRetry : showRetry,
         style: itemStyle,
         disabled,
         showPicInfo,
         renderPicInfo,
+        renderPicPreviewIcon,
+        renderFileOperation,
         renderThumbnail,
-        showReplace: typeof file.showReplace !== 'undefined' ? file.showReplace : showReplace,
         onReplace,
         onPreviewClick: typeof onPreviewClick !== 'undefined' ? () => this.foundation.handlePreviewClick(file) : undefined
       });
@@ -211,7 +213,8 @@ class Upload extends _baseComponent.default {
         limit,
         disabled,
         children,
-        draggable
+        draggable,
+        hotSpotLocation
       } = this.props;
       const {
         fileList: stateFileList,
@@ -269,7 +272,7 @@ class Upload extends _baseComponent.default {
         className: mainCls,
         role: "list",
         "aria-label": "picture list"
-      }, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList ? addContent : null)));
+      }, showAddTriggerInList && hotSpotLocation === 'start' ? addContent : null, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList && hotSpotLocation === 'end' ? addContent : null)));
     };
 
     this.renderFileListDefault = () => {
@@ -609,6 +612,7 @@ Upload.propTypes = {
   fileList: _propTypes.default.array,
   fileName: _propTypes.default.string,
   headers: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
+  hotSpotLocation: _propTypes.default.oneOf(['start', 'end']),
   itemStyle: _propTypes.default.object,
   limit: _propTypes.default.number,
   listType: _propTypes.default.oneOf(_constants.strings.LIST_TYPE),
@@ -634,6 +638,8 @@ Upload.propTypes = {
   prompt: _propTypes.default.node,
   promptPosition: _propTypes.default.oneOf(_constants.strings.PROMPT_POSITION),
   renderFileItem: _propTypes.default.func,
+  renderPicPreviewIcon: _propTypes.default.func,
+  renderFileOperation: _propTypes.default.func,
   renderPicInfo: _propTypes.default.func,
   renderThumbnail: _propTypes.default.func,
   showClear: _propTypes.default.bool,
@@ -653,6 +659,7 @@ Upload.defaultProps = {
   defaultFileList: [],
   disabled: false,
   listType: 'list',
+  hotSpotLocation: 'end',
   multiple: false,
   onAcceptInvalid: _noop2.default,
   onChange: _noop2.default,

package/lib/cjs/upload/interface.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties, MouseEvent } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 import { BaseFileItem } from '@douyinfe/semi-foundation/lib/cjs/upload/foundation';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/upload/constants';
 import { ArrayElement } from '../_base/base';
@@ -45,14 +45,16 @@ export interface RenderFileItemProps extends FileItem {
     index?: number;
     previewFile?: (fileItem: RenderFileItemProps) => ReactNode;
     listType: UploadListType;
-    onRemove: (props: RenderFileItemProps, e: MouseEvent) => void;
-    onRetry: (props: RenderFileItemProps, e: MouseEvent) => void;
-    onReplace: (props: RenderFileItemProps, e: MouseEvent) => void;
+    onRemove: () => void;
+    onRetry: () => void;
+    onReplace: () => void;
     key: string;
     showPicInfo?: boolean;
     renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
-    showRetry: boolean;
-    showReplace: boolean;
+    renderPicPreviewIcon?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderFileOperation?: (fileItem: RenderFileItemProps) => ReactNode;
+    showRetry?: boolean;
+    showReplace?: boolean;
     style?: CSSProperties;
     disabled: boolean;
     onPreviewClick: () => void;

package/lib/es/_base/base.css

@@ -19,7 +19,7 @@ body .semi-always-light {
   --semi-blue-2: 152,205,253;
   --semi-blue-3: 101,178,252;
   --semi-blue-4: 50,149,251;
-  --semi-blue-5: 0,119,250;
+  --semi-blue-5: 0,100,250;
   --semi-blue-6: 0,98,214;
   --semi-blue-7: 0,79,179;
   --semi-blue-8: 0,61,143;
@@ -410,7 +410,7 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-color-bg-4: rgba(var(--semi-white), 1);
   --semi-color-text-0: rgba(var(--semi-grey-9), 1);
   --semi-color-text-1: rgba(var(--semi-grey-9), .8);
-  --semi-color-text-2: rgba(var(--semi-grey-9), .6);
+  --semi-color-text-2: rgba(var(--semi-grey-9), .62);
   --semi-color-text-3: rgba(var(--semi-grey-9), .35);
   --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1);
   --semi-border-radius-extra-small: 3px;
@@ -487,9 +487,9 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-color-nav-bg: rgba(35, 36, 41, 1);
   --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25);
   --semi-color-overlay-bg: rgba(22, 22, 26, .6);
-  --semi-color-fill-0: rgba(var(--semi-white), .05);
-  --semi-color-fill-1: rgba(var(--semi-white), .09);
-  --semi-color-fill-2: rgba(var(--semi-white), .13);
+  --semi-color-fill-0: rgba(var(--semi-white), .12);
+  --semi-color-fill-1: rgba(var(--semi-white), .16);
+  --semi-color-fill-2: rgba(var(--semi-white), .20);
   --semi-color-border: rgba(var(--semi-white), .08);
   --semi-color-shadow: rgba(var(--semi-black), .04);
   --semi-color-bg-0: rgba(22, 22, 26, 1);

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

@@ -113,7 +113,7 @@ declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<Au
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         placeholder: PropTypes.Requireable<string>;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onChangeWithObject: PropTypes.Requireable<boolean>;

package/lib/es/calendar/monthCalendar.js

@@ -6,6 +6,8 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
 import _Map from "@babel/runtime-corejs3/core-js-stable/map";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
@@ -62,11 +64,13 @@ export default class monthCalendar extends BaseComponent {
       } = this.props;
       this.monthlyData = this.foundation.getMonthlyData(displayValue, dateFnsLocale);
       return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-header")
+        className: "".concat(prefixCls, "-header"),
+        role: "presentation"
       }, /*#__PURE__*/React.createElement("div", {
-        role: "gridcell",
+        role: "presentation",
         className: "".concat(prefixCls, "-grid")
       }, /*#__PURE__*/React.createElement("ul", {
+        role: "row",
         className: "".concat(prefixCls, "-grid-row")
       }, _mapInstanceProperty(_context = this.monthlyData[0]).call(_context, day => {
         const {
@@ -76,6 +80,8 @@ export default class monthCalendar extends BaseComponent {
           ["".concat(cssClasses.PREFIX, "-weekend")]: markWeekend && day.isWeekend
         });
         return /*#__PURE__*/React.createElement("li", {
+          role: "columnheader",
+          "aria-label": weekday,
           key: "".concat(weekday, "-monthheader"),
           className: listCls
         }, /*#__PURE__*/React.createElement("span", null, weekday));
@@ -158,7 +164,10 @@ export default class monthCalendar extends BaseComponent {
       const pos = showCard && showCard[key] ? showCard[key][1] : 'leftTopOver';
       const text = /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Calendar"
-      }, locale => /*#__PURE__*/React.createElement("div", {
+      }, locale =>
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      React.createElement("div", {
         className: "".concat(cardCls, "-wrapper"),
         style: {
           bottom: 0
@@ -226,11 +235,12 @@ export default class monthCalendar extends BaseComponent {
         day
       } = events;
       return /*#__PURE__*/React.createElement("div", {
-        role: "gridcell",
+        role: "presentation",
         className: "".concat(prefixCls, "-weekrow"),
         ref: _this.cellDom,
         key: "".concat(index, "-weekrow")
       }, /*#__PURE__*/React.createElement("ul", {
+        role: "row",
         className: "".concat(prefixCls, "-skeleton")
       }, _mapInstanceProperty(weekDay).call(weekDay, each => {
         const {
@@ -249,6 +259,9 @@ export default class monthCalendar extends BaseComponent {
         });
         const shouldRenderCollapsed = Boolean(day && day[ind] && day[ind].length > itemLimit);
         const inner = /*#__PURE__*/React.createElement("li", {
+          role: "gridcell",
+          "aria-label": date.toLocaleDateString(),
+          "aria-current": isToday ? "date" : false,
           key: "".concat(date, "-weeksk"),
           className: listCls,
           onClick: e => _this.handleClick(e, [date])
@@ -271,9 +284,10 @@ export default class monthCalendar extends BaseComponent {
         parsedEvents
       } = this.state;
       return /*#__PURE__*/React.createElement("div", {
-        role: "gridcell",
+        role: "presentation",
         className: "".concat(prefixCls, "-week")
       }, /*#__PURE__*/React.createElement("ul", {
+        role: "presentation",
         className: "".concat(prefixCls, "-grid-col")
       }, _mapInstanceProperty(_context3 = _Object$keys(this.monthlyData)).call(_context3, weekInd => this.renderWeekRow(weekInd, this.monthlyData[weekInd], parsedEvents[weekInd]))));
     };
@@ -404,12 +418,15 @@ export default class monthCalendar extends BaseComponent {
     return /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Calendar"
     }, (locale, localeCode, dateFnsLocale) => /*#__PURE__*/React.createElement("div", {
+      role: "grid",
       className: monthCls,
       key: this.state.itemLimit,
       style: monthStyle
     }, /*#__PURE__*/React.createElement("div", {
+      role: "presentation",
       className: "".concat(prefixCls, "-sticky-top")
     }, header, this.renderHeader(dateFnsLocale)), /*#__PURE__*/React.createElement("div", {
+      role: "presentation",
       className: "".concat(prefixCls, "-grid-wrapper")
     }, this.renderMonthGrid())));
   }

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, CSSProperties, MouseEvent } from 'react';
+import React, { ReactNode, CSSProperties, MouseEvent, KeyboardEvent } from 'react';
 import PropTypes from 'prop-types';
 import { BasicCascaderInnerData, BasicCascaderProps, BasicTriggerRenderProps, BasicScrollPanelProps, CascaderAdapter, CascaderType } from '@douyinfe/semi-foundation/lib/es/cascader/foundation';
 import '@douyinfe/semi-foundation/lib/es/cascader/cascader.css';
@@ -24,6 +24,7 @@ export interface CascaderProps extends BasicCascaderProps {
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
     'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
     'aria-required'?: React.AriaAttributes['aria-required'];
+    'aria-label'?: React.AriaAttributes['aria-label'];
     arrowIcon?: ReactNode;
     defaultValue?: Value;
     dropdownStyle?: CSSProperties;
@@ -65,6 +66,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         'aria-errormessage': PropTypes.Requireable<string>;
         'aria-describedby': PropTypes.Requireable<string>;
         'aria-required': PropTypes.Requireable<boolean>;
+        'aria-label': PropTypes.Requireable<string>;
         arrowIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         changeOnSelect: PropTypes.Requireable<boolean>;
         defaultValue: PropTypes.Requireable<string | any[]>;
@@ -158,6 +160,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         onDropdownVisibleChange: (...args: any[]) => void;
         onListScroll: (...args: any[]) => void;
         enableLeafClick: boolean;
+        'aria-label': string;
     };
     options: any;
     isEmpty: boolean;
@@ -177,7 +180,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     renderTagItem: (value: string | Array<string>, idx: number, type: string) => React.ReactNode;
     renderTagInput(): JSX.Element;
     renderInput(): JSX.Element;
-    handleItemClick: (e: MouseEvent, item: Entity | Data) => void;
+    handleItemClick: (e: MouseEvent | KeyboardEvent, item: Entity | Data) => void;
     handleItemHover: (e: MouseEvent, item: Entity) => void;
     onItemCheckboxClick: (item: Entity | Data) => void;
     handleListScroll: (e: React.UIEvent<HTMLUListElement, UIEvent>, ind: number) => void;
@@ -191,6 +194,10 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     handleMouseOver: () => void;
     handleMouseLeave: () => void;
     handleClear: (e: MouseEvent) => void;
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress: (e: KeyboardEvent) => void;
     showClearBtn: () => boolean;
     renderClearBtn: () => JSX.Element;
     renderArrow: () => JSX.Element;

package/lib/es/cascader/index.js

@@ -5,6 +5,7 @@ import _isFunction from "lodash/isFunction";
 import _isEmpty from "lodash/isEmpty";
 import _isString from "lodash/isString";
 import _isEqual from "lodash/isEqual";
+import _isSet from "lodash/isSet";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
@@ -329,6 +330,15 @@ class Cascader extends BaseComponent {
       e && e.stopPropagation();
       this.foundation.handleClear();
     };
+    /**
+     * A11y: simulate clear button click
+     */
+
+
+    this.handleClearEnterPress = e => {
+      e && e.stopPropagation();
+      this.foundation.handleClearEnterPress();
+    };
 
     this.showClearBtn = () => {
       const {
@@ -355,6 +365,7 @@ class Cascader extends BaseComponent {
         return /*#__PURE__*/React.createElement("div", {
           className: clearCls,
           onClick: this.handleClear,
+          onKeyPress: this.handleClearEnterPress,
           role: 'button',
           tabIndex: 0
         }, /*#__PURE__*/React.createElement(IconClear, null));
@@ -444,6 +455,7 @@ class Cascader extends BaseComponent {
         style: style,
         ref: this.triggerRef,
         onClick: e => this.foundation.handleClick(e),
+        onKeyPress: e => this.foundation.handleSelectionEnterPress(e),
         "aria-invalid": this.props['aria-invalid'],
         "aria-errormessage": this.props['aria-errormessage'],
         "aria-label": this.props['aria-label'],
@@ -722,6 +734,10 @@ class Cascader extends BaseComponent {
           realKeys = formatKeys;
         }
 
+        if (_isSet(realKeys)) {
+          realKeys = [...realKeys];
+        }
+
         const calRes = calcCheckedKeys(_flatten(realKeys), keyEntities);
         const checkedKeys = new _Set(calRes.checkedKeys);
         const halfCheckedKeys = new _Set(calRes.halfCheckedKeys); // disableStrictly
@@ -882,6 +898,7 @@ Cascader.propTypes = {
   'aria-errormessage': PropTypes.string,
   'aria-describedby': PropTypes.string,
   'aria-required': PropTypes.bool,
+  'aria-label': PropTypes.string,
   arrowIcon: PropTypes.node,
   changeOnSelect: PropTypes.bool,
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
@@ -976,6 +993,7 @@ Cascader.defaultProps = {
   onClear: _noop,
   onDropdownVisibleChange: _noop,
   onListScroll: _noop,
-  enableLeafClick: false
+  enableLeafClick: false,
+  'aria-label': 'Cascader'
 };
 export default Cascader;

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

@@ -22,7 +22,7 @@ export interface CascaderItemProps {
     selectedKeys: Set<string>;
     loadedKeys: Set<string>;
     loadingKeys: Set<string>;
-    onItemClick: (e: React.MouseEvent, item: Entity | Data) => void;
+    onItemClick: (e: React.MouseEvent | React.KeyboardEvent, item: Entity | Data) => void;
     onItemHover: (e: React.MouseEvent, item: Entity) => void;
     showNext: ShowNextType;
     onItemCheckboxClick: (item: Entity | Data) => void;
@@ -57,7 +57,11 @@ export default class Item extends PureComponent<CascaderItemProps> {
     static defaultProps: {
         empty: boolean;
     };
-    onClick: (e: React.MouseEvent, item: Entity | Data) => void;
+    onClick: (e: React.MouseEvent | React.KeyboardEvent, item: Entity | Data) => void;
+    /**
+     * A11y: simulate item click
+     */
+    handleItemEnterPress: (keyboardEvent: React.KeyboardEvent, item: Entity | Data) => void;
     onHover: (e: React.MouseEvent, item: Entity) => void;
     onCheckboxChange: (e: CheckboxEvent, item: Entity | Data) => void;
     getItemStatus: (key: string) => {

package/lib/es/cascader/item.js

@@ -2,10 +2,12 @@ import _includes from "lodash/includes";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import React, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/cascader/constants';
+import isEnterPress from '@douyinfe/semi-foundation/lib/es/utils/isEnterPress';
 import ConfigContext from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
 import { IconChevronRight, IconTick } from '@douyinfe/semi-icons';
@@ -27,6 +29,16 @@ export default class Item extends PureComponent {
 
       onItemClick(e, item);
     };
+    /**
+     * A11y: simulate item click
+     */
+
+
+    this.handleItemEnterPress = (keyboardEvent, item) => {
+      if (isEnterPress(keyboardEvent)) {
+        this.onClick(keyboardEvent, item);
+      }
+    };
 
     this.onHover = (e, item) => {
       const {
@@ -106,6 +118,7 @@ export default class Item extends PureComponent {
 
         case 'empty':
           return /*#__PURE__*/React.createElement("span", {
+            "aria-hidden": true,
             className: _concatInstanceProperty(_context3 = "".concat(prefixcls, "-icon ")).call(_context3, prefixcls, "-icon-empty")
           });
 
@@ -169,11 +182,13 @@ export default class Item extends PureComponent {
           ["".concat(prefixcls, "-disabled")]: disabled
         });
         return /*#__PURE__*/React.createElement("li", {
+          role: 'menuitem',
           className: className,
           key: key,
           onClick: e => {
             this.onClick(e, item);
-          }
+          },
+          onKeyPress: e => this.handleItemEnterPress(e, item)
         }, /*#__PURE__*/React.createElement("span", {
           className: "".concat(prefixcls, "-label")
         }, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/React.createElement(Checkbox, {
@@ -198,13 +213,15 @@ export default class Item extends PureComponent {
     let showChildItem;
     const ind = content.length;
     content.push( /*#__PURE__*/React.createElement("ul", {
+      role: 'menu',
       className: "".concat(prefixcls, "-list"),
       key: renderData[0].key,
       onScroll: e => this.props.onListScroll(e, ind)
     }, _mapInstanceProperty(renderData).call(renderData, item => {
       const {
         data,
-        key
+        key,
+        parentKey
       } = item;
       const {
         children,
@@ -229,16 +246,26 @@ export default class Item extends PureComponent {
         ["".concat(prefixcls, "-select")]: selected && !multiple,
         ["".concat(prefixcls, "-disabled")]: disabled
       });
-      return /*#__PURE__*/React.createElement("li", {
+      const otherAriaProps = parentKey ? {
+        ['aria-owns']: "cascaderItem-".concat(parentKey)
+      } : {};
+      return /*#__PURE__*/React.createElement("li", _Object$assign({
+        role: 'menuitem',
+        id: "cascaderItem-".concat(key),
+        "aria-expanded": active,
+        "aria-haspopup": Boolean(showExpand),
+        "aria-disabled": disabled
+      }, otherAriaProps, {
         className: className,
         key: key,
         onClick: e => {
           this.onClick(e, item);
         },
+        onKeyPress: e => this.handleItemEnterPress(e, item),
         onMouseEnter: e => {
           this.onHover(e, item);
         }
-      }, /*#__PURE__*/React.createElement("span", {
+      }), /*#__PURE__*/React.createElement("span", {
         className: "".concat(prefixcls, "-label")
       }, selected && !multiple && this.renderIcon('tick'), !selected && !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/React.createElement(Checkbox, {
         onChange: e => this.onCheckboxChange(e, item),