@douyinfe/semi-ui 2.5.0 → 2.6.0

package/lib/cjs/table/Body/index.js

@@ -418,8 +418,13 @@ class Body extends _baseComponent.default {
       const {
         flattenedColumns,
         getCellWidths
-      } = _this.context;
-      const cellWidths = getCellWidths(flattenedColumns);
+      } = _this.context; // we use memoized cellWidths to avoid re-render expanded row (fix #686)
+
+      if (flattenedColumns !== _this.flattenedColumns) {
+        _this.flattenedColumns = flattenedColumns;
+        _this.cellWidths = getCellWidths(flattenedColumns);
+      }
+
       return /*#__PURE__*/_react.default.createElement(_ExpandedRow.default, {
         style: style,
         components: components,
@@ -431,7 +436,7 @@ class Body extends _baseComponent.default {
         index: index,
         virtualized: virtualized,
         key: (0, _utils.genExpandedRowKey)(key),
-        cellWidths: cellWidths
+        cellWidths: _this.cellWidths
       });
     };
     /**
@@ -601,7 +606,9 @@ class Body extends _baseComponent.default {
     };
     this.listRef = /*#__PURE__*/_react.default.createRef();
     const {
-      getVirtualizedListRef
+      getVirtualizedListRef,
+      flattenedColumns,
+      getCellWidths
     } = context;
 
     if (getVirtualizedListRef) {
@@ -613,6 +620,8 @@ class Body extends _baseComponent.default {
     }
 
     this.foundation = new _bodyFoundation.default(this.adapter);
+    this.flattenedColumns = flattenedColumns;
+    this.cellWidths = getCellWidths(flattenedColumns);
     this.observer = null;
   }
 

package/lib/cjs/tooltip/index.js

@@ -229,7 +229,9 @@ class Tooltip extends _baseComponent.default {
         } = _ref;
         return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
           className: (0, _classnames.default)(className, animateCls),
-          style: (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, animateStyle), {
+          style: (0, _assign.default)((0, _assign.default)((0, _assign.default)({
+            visibility: 'visible'
+          }, animateStyle), {
             transformOrigin
           }), style)
         }, portalEventSet, animateEvents, {
@@ -241,7 +243,9 @@ class Tooltip extends _baseComponent.default {
         className: className
       }, portalEventSet, {
         "x-placement": placement,
-        style: style
+        style: (0, _assign.default)({
+          visibility: motion ? undefined : 'visible'
+        }, style)
       }), content, icon);
       return /*#__PURE__*/_react.default.createElement(_index.default, {
         getPopupContainer: this.props.getPopupContainer,

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/button/Button.d.ts

@@ -46,15 +46,15 @@ export default class Button extends PureComponent<ButtonProps> {
         disabled: PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
-        size: PropTypes.Requireable<unknown>;
-        type: PropTypes.Requireable<unknown>;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
+        type: PropTypes.Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
         circle: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
-        htmlType: PropTypes.Requireable<unknown>;
-        theme: PropTypes.Requireable<unknown>;
+        htmlType: PropTypes.Requireable<"button" | "reset" | "submit">;
+        theme: PropTypes.Requireable<"solid" | "light" | "borderless">;
         className: PropTypes.Requireable<string>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -16,8 +16,8 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         disabled: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<unknown>;
-        theme: PropTypes.Requireable<unknown>;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
+        theme: PropTypes.Requireable<"solid" | "light" | "borderless">;
         'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import { ButtonProps as BaseButtonProps } from './Button';
 import { IconButtonProps } from '../iconButton';
 export { ButtonProps as BaseButtonProps, HtmlType, Size, Theme, Type } from './Button';
 export { HorizontalPaddingType } from '../iconButton';
 export { ButtonGroupProps } from './buttonGroup';
 export { SplitButtonGroupProps } from './splitButtonGroup';
-export interface ButtonProps extends IconButtonProps, BaseButtonProps {
+export interface ButtonProps extends IconButtonProps {
 }
 declare class Button extends React.PureComponent<ButtonProps> {
     static propTypes: {
@@ -18,18 +17,18 @@ declare class Button extends React.PureComponent<ButtonProps> {
         noHorizontalPadding: import("prop-types").Requireable<string | boolean | any[]>;
         children: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         theme: import("prop-types").Requireable<string>;
-        iconPosition: import("prop-types").Requireable<unknown>;
+        iconPosition: import("prop-types").Requireable<"left" | "right">;
         className: import("prop-types").Requireable<string>;
         onMouseEnter: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseLeave: import("prop-types").Requireable<(...args: any[]) => any>;
         disabled: import("prop-types").Requireable<boolean>;
-        size: import("prop-types").Requireable<unknown>;
-        type: import("prop-types").Requireable<unknown>;
+        size: import("prop-types").Requireable<"default" | "small" | "large">;
+        type: import("prop-types").Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: import("prop-types").Requireable<boolean>;
         onClick: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseDown: import("prop-types").Requireable<(...args: any[]) => any>;
         circle: import("prop-types").Requireable<boolean>;
-        htmlType: import("prop-types").Requireable<unknown>;
+        htmlType: import("prop-types").Requireable<"button" | "reset" | "submit">;
         'aria-label': import("prop-types").Requireable<string>;
     };
     constructor(props?: {});

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

@@ -330,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 {
@@ -356,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));
@@ -445,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'],
@@ -887,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]),
@@ -981,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),

package/lib/es/datePicker/dateInput.d.ts

@@ -25,7 +25,6 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         value: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
-        multiple: PropTypes.Requireable<boolean>;
         showClear: PropTypes.Requireable<boolean>;
         format: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;
@@ -49,7 +48,6 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onBlur: typeof noop;
         onClear: typeof noop;
         onFocus: typeof noop;
-        multiple: boolean;
         type: string;
         inputStyle: {};
         inputReadOnly: boolean;

package/lib/es/datePicker/dateInput.js

@@ -15,6 +15,8 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/interactive-supports-focus */
+
 /* eslint-disable max-lines-per-function */
 
 /* eslint-disable no-unused-vars */
@@ -170,9 +172,14 @@ export default class DateInput extends BaseComponent {
     } = this.props;
     const allowClear = (rangeStart || rangeEnd) && showClear;
     return allowClear && !disabled ? /*#__PURE__*/React.createElement("div", {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "Clear range input value",
       className: "".concat(prefixCls, "-range-input-clearbtn"),
       onMouseDown: e => !disabled && this.handleRangeInputClear(e)
-    }, /*#__PURE__*/React.createElement(IconClear, null)) : null;
+    }, /*#__PURE__*/React.createElement(IconClear, {
+      "aria-hidden": true
+    })) : null;
   }
 
   renderRangeSuffix(suffix) {
@@ -273,6 +280,8 @@ export default class DateInput extends BaseComponent {
       validateStatus,
       block,
       prefixCls,
+      multiple,
+      // Whether to allow multiple values for email and file types
       dateFnsLocale,
       // No need to pass to input
       onBlur,
@@ -290,10 +299,14 @@ export default class DateInput extends BaseComponent {
       rangeInputFocus,
       rangeSeparator
     } = _a,
-          rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator"]);
+          rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "multiple", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator"]);
 
-    const dateIcon = /*#__PURE__*/React.createElement(IconCalendar, null);
-    const dateTimeIcon = /*#__PURE__*/React.createElement(IconCalendarClock, null);
+    const dateIcon = /*#__PURE__*/React.createElement(IconCalendar, {
+      "aria-hidden": true
+    });
+    const dateTimeIcon = /*#__PURE__*/React.createElement(IconCalendarClock, {
+      "aria-hidden": true
+    });
     const suffix = _includesInstanceProperty(type).call(type, 'Time') ? dateTimeIcon : dateIcon;
     let text = '';
 
@@ -348,7 +361,6 @@ DateInput.propTypes = {
   value: PropTypes.array,
   disabled: PropTypes.bool,
   type: PropTypes.oneOf(strings.TYPE_SET),
-  multiple: PropTypes.bool,
   showClear: PropTypes.bool,
   format: PropTypes.string,
   inputStyle: PropTypes.object,
@@ -372,7 +384,6 @@ DateInput.defaultProps = {
   onBlur: noop,
   onClear: noop,
   onFocus: noop,
-  multiple: false,
   type: 'date',
   inputStyle: {},
   inputReadOnly: false,

package/lib/es/datePicker/datePicker.js

@@ -9,6 +9,8 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus */
+
 /* eslint-disable max-len */
 import React from 'react';
 import classnames from 'classnames';
@@ -576,18 +578,19 @@ export default class DatePicker extends BaseComponent {
       onRangeEndTabPress: this.handleRangeEndTabPress
     });
 
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-      React.createElement("div", {
-        onClick: this.handleTriggerWrapperClick,
-        className: inputCls
-      }, typeof triggerRender === 'function' ? /*#__PURE__*/React.createElement(Trigger, _Object$assign({}, props, {
-        triggerRender: triggerRender,
-        componentName: "DatePicker",
-        componentProps: _Object$assign({}, this.props)
-      })) : /*#__PURE__*/React.createElement(DateInput, _Object$assign({}, props)))
-    );
+    return /*#__PURE__*/React.createElement("div", {
+      // tooltip will mount a11y props to children
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      role: "combobox",
+      "aria-label": _Array$isArray(value) && value.length ? "Change date" : "Choose date",
+      "aria-disabled": disabled,
+      onClick: this.handleTriggerWrapperClick,
+      className: inputCls
+    }, typeof triggerRender === 'function' ? /*#__PURE__*/React.createElement(Trigger, _Object$assign({}, props, {
+      triggerRender: triggerRender,
+      componentName: "DatePicker",
+      componentProps: _Object$assign({}, this.props)
+    })) : /*#__PURE__*/React.createElement(DateInput, _Object$assign({}, props)));
   }
 
   render() {

package/lib/es/datePicker/month.d.ts

@@ -33,6 +33,7 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
         endDateOffset: PropTypes.Requireable<(...args: any[]) => any>;
         rangeInputFocus: PropTypes.Requireable<string | boolean>;
         focusRecordsRef: PropTypes.Requireable<object>;
+        multiple: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         month: Date;