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

package/dist/umd/semi-ui.js

@@ -41517,6 +41517,8 @@ weekCalendar_WeekCalendar.contextType = locale_context;
 
 
 
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
+
 
 
 
@@ -41572,11 +41574,13 @@ class monthCalendar_monthCalendar extends baseComponent_BaseComponent {
       } = this.props;
       this.monthlyData = this.foundation.getMonthlyData(displayValue, dateFnsLocale);
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-        className: "".concat(monthCalendar_prefixCls, "-header")
+        className: "".concat(monthCalendar_prefixCls, "-header"),
+        role: "presentation"
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-        role: "gridcell",
+        role: "presentation",
         className: "".concat(monthCalendar_prefixCls, "-grid")
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("ul", {
+        role: "row",
         className: "".concat(monthCalendar_prefixCls, "-grid-row")
       }, map_default()(_context = this.monthlyData[0]).call(_context, day => {
         const {
@@ -41586,6 +41590,8 @@ class monthCalendar_monthCalendar extends baseComponent_BaseComponent {
           ["".concat(calendar_constants_cssClasses.PREFIX, "-weekend")]: markWeekend && day.isWeekend
         });
         return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("li", {
+          role: "columnheader",
+          "aria-label": weekday,
           key: "".concat(weekday, "-monthheader"),
           className: listCls
         }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", null, weekday));
@@ -41668,7 +41674,10 @@ class monthCalendar_monthCalendar extends baseComponent_BaseComponent {
       const pos = showCard && showCard[key] ? showCard[key][1] : 'leftTopOver';
       const text = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(localeConsumer_LocaleConsumer, {
         componentName: "Calendar"
-      }, locale => /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      }, locale =>
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
         className: "".concat(cardCls, "-wrapper"),
         style: {
           bottom: 0
@@ -41736,11 +41745,12 @@ class monthCalendar_monthCalendar extends baseComponent_BaseComponent {
         day
       } = events;
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-        role: "gridcell",
+        role: "presentation",
         className: "".concat(monthCalendar_prefixCls, "-weekrow"),
         ref: _this.cellDom,
         key: "".concat(index, "-weekrow")
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("ul", {
+        role: "row",
         className: "".concat(monthCalendar_prefixCls, "-skeleton")
       }, map_default()(weekDay).call(weekDay, each => {
         const {
@@ -41759,6 +41769,9 @@ class monthCalendar_monthCalendar extends baseComponent_BaseComponent {
         });
         const shouldRenderCollapsed = Boolean(day && day[ind] && day[ind].length > itemLimit);
         const inner = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.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])
@@ -41781,9 +41794,10 @@ class monthCalendar_monthCalendar extends baseComponent_BaseComponent {
         parsedEvents
       } = this.state;
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-        role: "gridcell",
+        role: "presentation",
         className: "".concat(monthCalendar_prefixCls, "-week")
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("ul", {
+        role: "presentation",
         className: "".concat(monthCalendar_prefixCls, "-grid-col")
       }, map_default()(_context3 = keys_default()(this.monthlyData)).call(_context3, weekInd => this.renderWeekRow(weekInd, this.monthlyData[weekInd], parsedEvents[weekInd]))));
     };
@@ -41914,12 +41928,15 @@ class monthCalendar_monthCalendar extends baseComponent_BaseComponent {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(localeConsumer_LocaleConsumer, {
       componentName: "Calendar"
     }, (locale, localeCode, dateFnsLocale) => /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "grid",
       className: monthCls,
       key: this.state.itemLimit,
       style: monthStyle
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "presentation",
       className: "".concat(monthCalendar_prefixCls, "-sticky-top")
     }, header, this.renderHeader(dateFnsLocale)), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "presentation",
       className: "".concat(monthCalendar_prefixCls, "-grid-wrapper")
     }, this.renderMonthGrid())));
   }
@@ -43912,6 +43929,7 @@ function calcMergeType(autoMergeValue, leafOnly) {
 
 
 
+
 
 
  // eslint-disable-next-line max-len
@@ -44421,6 +44439,16 @@ class foundation_CascaderFoundation extends foundation {
       this.close(e);
     }
   }
+  /**
+   * A11y: simulate selection click
+   */
+
+
+  handleSelectionEnterPress(keyboardEvent) {
+    if (utils_isEnterPress(keyboardEvent)) {
+      this.handleClick(keyboardEvent);
+    }
+  }
 
   toggleHoverState(bool) {
     this._adapter.toggleHovering(bool);
@@ -44852,6 +44880,16 @@ class foundation_CascaderFoundation extends foundation {
 
     this._adapter.rePositionDropdown();
   }
+  /**
+   * A11y: simulate clear button click
+   */
+
+
+  handleClearEnterPress(keyboardEvent) {
+    if (utils_isEnterPress(keyboardEvent)) {
+      this.handleClear();
+    }
+  }
 
   getRenderData() {
     var _context9, _context10;
@@ -45686,6 +45724,8 @@ checkbox_CheckboxWithGroup.Group = checkboxGroup;
 
 
 
+
+
 const item_prefixcls = cascader_constants_cssClasses.PREFIX_OPTION;
 class item_Item extends external_root_React_commonjs2_react_commonjs_react_amd_react_["PureComponent"] {
   constructor() {
@@ -45702,6 +45742,16 @@ class item_Item extends external_root_React_commonjs2_react_commonjs_react_amd_r
 
       onItemClick(e, item);
     };
+    /**
+     * A11y: simulate item click
+     */
+
+
+    this.handleItemEnterPress = (keyboardEvent, item) => {
+      if (utils_isEnterPress(keyboardEvent)) {
+        this.onClick(keyboardEvent, item);
+      }
+    };
 
     this.onHover = (e, item) => {
       const {
@@ -45781,6 +45831,7 @@ class item_Item extends external_root_React_commonjs2_react_commonjs_react_amd_r
 
         case 'empty':
           return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
+            "aria-hidden": true,
             className: concat_default()(_context3 = "".concat(item_prefixcls, "-icon ")).call(_context3, item_prefixcls, "-icon-empty")
           });
 
@@ -45844,11 +45895,13 @@ class item_Item extends external_root_React_commonjs2_react_commonjs_react_amd_r
           ["".concat(item_prefixcls, "-disabled")]: disabled
         });
         return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("li", {
+          role: 'menuitem',
           className: className,
           key: key,
           onClick: e => {
             this.onClick(e, item);
-          }
+          },
+          onKeyPress: e => this.handleItemEnterPress(e, item)
         }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
           className: "".concat(item_prefixcls, "-label")
         }, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(checkbox_0, {
@@ -45873,13 +45926,15 @@ class item_Item extends external_root_React_commonjs2_react_commonjs_react_amd_r
     let showChildItem;
     const ind = content.length;
     content.push( /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("ul", {
+      role: 'menu',
       className: "".concat(item_prefixcls, "-list"),
       key: renderData[0].key,
       onScroll: e => this.props.onListScroll(e, ind)
     }, map_default()(renderData).call(renderData, item => {
       const {
         data,
-        key
+        key,
+        parentKey
       } = item;
       const {
         children,
@@ -45904,16 +45959,26 @@ class item_Item extends external_root_React_commonjs2_react_commonjs_react_amd_r
         ["".concat(item_prefixcls, "-select")]: selected && !multiple,
         ["".concat(item_prefixcls, "-disabled")]: disabled
       });
-      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("li", {
+      const otherAriaProps = parentKey ? {
+        ['aria-owns']: "cascaderItem-".concat(parentKey)
+      } : {};
+      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("li", assign_default()({
+        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__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
+      }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
         className: "".concat(item_prefixcls, "-label")
       }, selected && !multiple && this.renderIcon('tick'), !selected && !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(checkbox_0, {
         onChange: e => this.onCheckboxChange(e, item),
@@ -47237,6 +47302,15 @@ class cascader_Cascader extends baseComponent_BaseComponent {
       e && e.stopPropagation();
       this.foundation.handleClear();
     };
+    /**
+     * A11y: simulate clear button click
+     */
+
+
+    this.handleClearEnterPress = e => {
+      e && e.stopPropagation();
+      this.foundation.handleClearEnterPress();
+    };
 
     this.showClearBtn = () => {
       const {
@@ -47263,6 +47337,7 @@ class cascader_Cascader extends baseComponent_BaseComponent {
         return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
           className: clearCls,
           onClick: this.handleClear,
+          onKeyPress: this.handleClearEnterPress,
           role: 'button',
           tabIndex: 0
         }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClear, null));
@@ -47352,6 +47427,7 @@ class cascader_Cascader extends baseComponent_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'],
@@ -47794,6 +47870,7 @@ cascader_Cascader.propTypes = {
   'aria-errormessage': prop_types_default.a.string,
   'aria-describedby': prop_types_default.a.string,
   'aria-required': prop_types_default.a.bool,
+  'aria-label': prop_types_default.a.string,
   arrowIcon: prop_types_default.a.node,
   changeOnSelect: prop_types_default.a.bool,
   defaultValue: prop_types_default.a.oneOfType([prop_types_default.a.string, prop_types_default.a.array]),
@@ -47888,7 +47965,8 @@ cascader_Cascader.defaultProps = {
   onClear: noop_default.a,
   onDropdownVisibleChange: noop_default.a,
   onListScroll: noop_default.a,
-  enableLeafClick: false
+  enableLeafClick: false,
+  'aria-label': 'Cascader'
 };
 /* harmony default export */ var cascader_0 = (cascader_Cascader);
 // CONCATENATED MODULE: ../semi-foundation/collapse/constants.ts
@@ -54108,6 +54186,8 @@ var dateInput_rest = undefined && undefined.__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 */
@@ -54263,9 +54343,14 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
     } = this.props;
     const allowClear = (rangeStart || rangeEnd) && showClear;
     return allowClear && !disabled ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.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__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClear, null)) : null;
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClear, {
+      "aria-hidden": true
+    })) : null;
   }
 
   renderRangeSuffix(suffix) {
@@ -54366,6 +54451,8 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
       validateStatus,
       block,
       prefixCls,
+      multiple,
+      // Whether to allow multiple values for email and file types
       dateFnsLocale,
       // No need to pass to input
       onBlur,
@@ -54383,10 +54470,14 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
       rangeInputFocus,
       rangeSeparator
     } = _a,
-          rest = dateInput_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 = dateInput_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__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconCalendar, null);
-    const dateTimeIcon = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconCalendarClock, null);
+    const dateIcon = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconCalendar, {
+      "aria-hidden": true
+    });
+    const dateTimeIcon = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconCalendarClock, {
+      "aria-hidden": true
+    });
     const suffix = includes_default()(type).call(type, 'Time') ? dateTimeIcon : dateIcon;
     let text = '';
 
@@ -54441,7 +54532,6 @@ dateInput_DateInput.propTypes = {
   value: prop_types_default.a.array,
   disabled: prop_types_default.a.bool,
   type: prop_types_default.a.oneOf(datePicker_constants_strings.TYPE_SET),
-  multiple: prop_types_default.a.bool,
   showClear: prop_types_default.a.bool,
   format: prop_types_default.a.string,
   inputStyle: prop_types_default.a.object,
@@ -54465,7 +54555,6 @@ dateInput_DateInput.defaultProps = {
   onBlur: function_noop,
   onClear: function_noop,
   onFocus: function_noop,
-  multiple: false,
   type: 'date',
   inputStyle: {},
   inputReadOnly: false,
@@ -56120,7 +56209,9 @@ class navigation_Navigation extends external_root_React_commonjs2_react_commonjs
       ref: ref
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(iconButton_0, {
       key: "double-chevron-left",
+      "aria-label": "Previous year",
       icon: /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconDoubleChevronLeft, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -56130,7 +56221,9 @@ class navigation_Navigation extends external_root_React_commonjs2_react_commonjs
       style: leftButtonStyle
     }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(iconButton_0, {
       key: "chevron-left",
+      "aria-label": "Previous month",
       icon: /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconChevronLeft, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -56146,7 +56239,9 @@ class navigation_Navigation extends external_root_React_commonjs2_react_commonjs
       size: buttonSize
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", null, monthText))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(iconButton_0, {
       key: "chevron-right",
+      "aria-label": "Next month",
       icon: /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconChevronRight, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -56156,7 +56251,9 @@ class navigation_Navigation extends external_root_React_commonjs2_react_commonjs
       style: rightButtonStyle
     }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(iconButton_0, {
       key: "double-chevron-right",
+      "aria-label": "Next year",
       icon: /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconDoubleChevronRight, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -56426,6 +56523,8 @@ function isBetween(day, _ref) {
 
 
 
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
+
 /* eslint-disable max-len */
 
 
@@ -56748,8 +56847,10 @@ class month_Month extends baseComponent_BaseComponent {
     const weekdaysText = map_default()(weekdays).call(weekdays, key => locale.weeks[key]);
 
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "row",
       className: weekdayCls
     }, map_default()(weekdaysText).call(weekdaysText, (E, i) => /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "columnheader",
       key: E + i,
       className: weekdayItemCls
     }, E)));
@@ -56784,6 +56885,7 @@ class month_Month extends baseComponent_BaseComponent {
   renderWeek(week, weekIndex) {
     const weekCls = datePicker_constants_cssClasses.WEEK;
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "row",
       className: weekCls,
       key: weekIndex
     }, map_default()(week).call(week, (day, dayIndex) => this.renderDay(day, dayIndex)));
@@ -56804,6 +56906,8 @@ class month_Month extends baseComponent_BaseComponent {
 
     if (!fullDate) {
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+        role: "gridcell",
+        tabIndex: -1,
         key: dayNumber + dayIndex,
         className: datePicker_constants_cssClasses.DAY
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", null));
@@ -56841,6 +56945,11 @@ class month_Month extends baseComponent_BaseComponent {
     const customRender = isFunction_default()(renderFullDate);
 
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "gridcell",
+      tabIndex: dayStatus.isDisabled ? -1 : 0,
+      "aria-disabled": dayStatus.isDisabled,
+      "aria-selected": dayStatus.isSelected,
+      "aria-label": fullDate,
       className: !customRender ? dayCls : datePicker_constants_cssClasses.DAY,
       title: fullDate,
       key: dayNumber + dayIndex,
@@ -56854,13 +56963,16 @@ class month_Month extends baseComponent_BaseComponent {
 
   render() {
     const {
-      forwardRef
+      forwardRef,
+      multiple
     } = this.props;
     const weekday = this.renderDayOfWeek();
     const weeks = this.renderWeeks();
     const monthCls = classnames_default()(datePicker_constants_cssClasses.MONTH);
     const ref = forwardRef || this.monthRef;
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "grid",
+      "aria-multiselectable": multiple,
       ref: ref,
       className: monthCls
     }, weekday, weeks);
@@ -56886,7 +56998,8 @@ month_Month.propTypes = {
   startDateOffset: prop_types_default.a.func,
   endDateOffset: prop_types_default.a.func,
   rangeInputFocus: prop_types_default.a.oneOfType([prop_types_default.a.string, prop_types_default.a.bool]),
-  focusRecordsRef: prop_types_default.a.object
+  focusRecordsRef: prop_types_default.a.object,
+  multiple: prop_types_default.a.bool
 };
 month_Month.defaultProps = {
   month: new Date(),
@@ -57573,13 +57686,14 @@ class scrollItem_ScrollItem extends baseComponent_BaseComponent {
           transform: itemTrans
         } = item;
         const transform = typeof itemTrans === 'function' ? itemTrans : commonTrans;
+        const selected = selectedIndex === index;
         const cls = classnames_default()({
-          ["".concat(scrollList_constants_cssClasses.PREFIX, "-item-sel")]: selectedIndex === index && mode !== wheelMode,
+          ["".concat(scrollList_constants_cssClasses.PREFIX, "-item-sel")]: selected && mode !== wheelMode,
           ["".concat(scrollList_constants_cssClasses.PREFIX, "-item-disabled")]: Boolean(item.disabled)
         });
         let text = '';
 
-        if (selectedIndex === index) {
+        if (selected) {
           if (typeof transform === 'function') {
             text = transform(item.value, item.text);
           } else {
@@ -57603,7 +57717,10 @@ class scrollItem_ScrollItem extends baseComponent_BaseComponent {
           external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("li", assign_default()({
             key: prefixKey + index
           }, events, {
-            className: cls
+            className: cls,
+            role: "option",
+            "aria-selected": selected,
+            "aria-disabled": item.disabled
           }), text)
         );
       });
@@ -57622,6 +57739,9 @@ class scrollItem_ScrollItem extends baseComponent_BaseComponent {
         className: wrapperCls,
         ref: this._cacheWrapperNode
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("ul", {
+        role: "listbox",
+        "aria-multiselectable": false,
+        "aria-label": this.props['aria-label'],
         ref: this._cacheListNode
       }, inner));
     };
@@ -57679,6 +57799,9 @@ class scrollItem_ScrollItem extends baseComponent_BaseComponent {
         ref: this._cacheWrapperNode,
         onScroll: this.scrollToSelectItem
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("ul", {
+        role: "listbox",
+        "aria-label": this.props['aria-label'],
+        "aria-multiselectable": false,
         ref: this._cacheListNode,
         onClick: this.clickToSelectItem
       }, prependList, inner, appendList)));
@@ -58701,6 +58824,7 @@ class yearAndMonth_YearAndMonth extends baseComponent_BaseComponent {
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(iconButton_0, {
       noHorizontalPadding: false,
       icon: /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconChevronLeft, {
+        "aria-hidden": true,
         size: iconSize
       }),
       size: buttonSize,
@@ -58740,6 +58864,8 @@ yearAndMonth_YearAndMonth.defaultProps = {
 
 
 
+/* eslint-disable jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events */
+
 /* eslint-disable react/no-did-update-set-state */
 
 /* eslint-disable max-len */
@@ -59095,7 +59221,8 @@ class monthsGrid_MonthsGrid extends baseComponent_BaseComponent {
       endDateOffset,
       density,
       rangeInputFocus,
-      syncSwitchMonth
+      syncSwitchMonth,
+      multiple
     } = this.props;
     let monthText = ''; // i18n monthText
 
@@ -59161,7 +59288,8 @@ class monthsGrid_MonthsGrid extends baseComponent_BaseComponent {
       onWeeksRowNumChange: weeksRowNum => this.handleWeeksRowNumChange(weeksRowNum, panelType),
       startDateOffset: startDateOffset,
       endDateOffset: endDateOffset,
-      focusRecordsRef: this.props.focusRecordsRef
+      focusRecordsRef: this.props.focusRecordsRef,
+      multiple: multiple
     }));
   }
 
@@ -59317,14 +59445,22 @@ class monthsGrid_MonthsGrid extends baseComponent_BaseComponent {
       className: switchCls,
       ref: current => this.adapter.setCache("switch-".concat(panelType), current)
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "button",
+      "aria-label": "Switch to date panel",
       className: dateCls,
       onClick: e => this.foundation.showDatePanel(panelType)
-    }, showSwithIcon && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconCalendar, null), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
+    }, showSwithIcon && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconCalendar, {
+      "aria-hidden": true
+    }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
       className: textCls
     }, dateText || monthText)), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "button",
+      "aria-label": "Switch to time panel",
       className: timeCls,
       onClick: e => this.foundation.showTimePicker(panelType, true)
-    }, showSwithIcon && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClock, null), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
+    }, showSwithIcon && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClock, {
+      "aria-hidden": true
+    }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
       className: textCls
     }, timeText)));
   }
@@ -59413,6 +59549,8 @@ monthsGrid_MonthsGrid.defaultProps = {
 
 
 
+/* eslint-disable jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events */
+
 
 
 
@@ -59506,6 +59644,8 @@ var datePicker = __webpack_require__("IJ0B");
 
 
 
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus */
+
 /* eslint-disable max-len */
 
 
@@ -60073,18 +60213,19 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       onRangeEndTabPress: this.handleRangeEndTabPress
     });
 
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-      external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-        onClick: this.handleTriggerWrapperClick,
-        className: inputCls
-      }, typeof triggerRender === 'function' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(trigger_0, assign_default()({}, props, {
-        triggerRender: triggerRender,
-        componentName: "DatePicker",
-        componentProps: assign_default()({}, this.props)
-      })) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(dateInput_DateInput, assign_default()({}, props)))
-    );
+    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      // tooltip will mount a11y props to children
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      role: "combobox",
+      "aria-label": is_array_default()(value) && value.length ? "Change date" : "Choose date",
+      "aria-disabled": disabled,
+      onClick: this.handleTriggerWrapperClick,
+      className: inputCls
+    }, typeof triggerRender === 'function' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(trigger_0, assign_default()({}, props, {
+      triggerRender: triggerRender,
+      componentName: "DatePicker",
+      componentProps: assign_default()({}, this.props)
+    })) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(dateInput_DateInput, assign_default()({}, props)));
   }
 
   render() {
@@ -101249,7 +101390,7 @@ class foundation_FormFoundation extends foundation {
   } // update formState value
 
 
-  updateStateValue(field, value, opts) {
+  updateStateValue(field, value, opts, callback) {
     const notNotify = opts && opts.notNotify;
     const notUpdate = opts && opts.notUpdate;
     const fieldAllowEmpty = opts && opts.fieldAllowEmpty;
@@ -101281,7 +101422,7 @@ class foundation_FormFoundation extends foundation {
     }
 
     if (!notUpdate) {
-      this._adapter.forceUpdate();
+      this._adapter.forceUpdate(callback);
     }
   } // get touched from formState
 
@@ -101295,7 +101436,7 @@ class foundation_FormFoundation extends foundation {
   } // update formState touched
 
 
-  updateStateTouched(field, isTouched, opts) {
+  updateStateTouched(field, isTouched, opts, callback) {
     const notNotify = opts && opts.notNotify;
     const notUpdate = opts && opts.notUpdate;
     object_set(this.data.touched, field, isTouched);
@@ -101305,7 +101446,7 @@ class foundation_FormFoundation extends foundation {
     }
 
     if (!notUpdate) {
-      this._adapter.forceUpdate();
+      this._adapter.forceUpdate(callback);
     }
   } // get error from formState
 
@@ -101319,7 +101460,7 @@ class foundation_FormFoundation extends foundation {
   } // update formState error
 
 
-  updateStateError(field, error, opts) {
+  updateStateError(field, error, opts, callback) {
     const notNotify = opts && opts.notNotify;
     const notUpdate = opts && opts.notUpdate;
     object_set(this.data.errors, field, error); // The setError caused by centralized validation does not need to trigger notify, otherwise it will be called too frequently, as many times as there are fields
@@ -101330,7 +101471,7 @@ class foundation_FormFoundation extends foundation {
     }
 
     if (!notUpdate) {
-      this._adapter.forceUpdate();
+      this._adapter.forceUpdate(callback);
     }
   } // For internal use in the FormApi Operating Field
 
@@ -101349,22 +101490,21 @@ class foundation_FormFoundation extends foundation {
         // At this time, first modify formState directly, then find out the subordinate fields and drive them to update
         // Eg: peoples: [0, 2, 3]. Each value of the peoples array corresponds to an Input Field
         // When the user directly calls formA pi.set Value ('peoples', [2,3])
-        this.updateStateValue(field, newValue, opts);
-
-        let nestedFields = this._getNestedField(field);
-
-        if (nestedFields.size) {
-          for_each_default()(nestedFields).call(nestedFields, fieldStaff => {
-            let fieldPath = fieldStaff.field;
-            let newFieldVal = object_get(instance_values_default()(this.data), fieldPath);
-            let nestedBatchUpdateOpts = {
-              notNotify: true,
-              notUpdate: true
-            };
-            fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
-          });
-        } // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
-
+        this.updateStateValue(field, newValue, opts, () => {
+          let nestedFields = this._getNestedField(field);
+
+          if (nestedFields.size) {
+            for_each_default()(nestedFields).call(nestedFields, fieldStaff => {
+              let fieldPath = fieldStaff.field;
+              let newFieldVal = object_get(instance_values_default()(this.data), fieldPath);
+              let nestedBatchUpdateOpts = {
+                notNotify: true,
+                notUpdate: true
+              };
+              fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
+            });
+          }
+        }); // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
 
         if (this.getArrayField(field)) {
           this.updateArrayField(field, {
@@ -101382,21 +101522,21 @@ class foundation_FormFoundation extends foundation {
       if (fieldApi) {
         fieldApi.setError(newError, opts);
       } else {
-        this.updateStateError(field, newError, opts);
-
-        let nestedFields = this._getNestedField(field);
-
-        if (nestedFields.size) {
-          for_each_default()(nestedFields).call(nestedFields, fieldStaff => {
-            let fieldPath = fieldStaff.field;
-            let newFieldError = object_get(this.data.errors, fieldPath);
-            let nestedBatchUpdateOpts = {
-              notNotify: true,
-              notUpdate: true
-            };
-            fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
-          });
-        }
+        this.updateStateError(field, newError, opts, () => {
+          let nestedFields = this._getNestedField(field);
+
+          if (nestedFields.size) {
+            for_each_default()(nestedFields).call(nestedFields, fieldStaff => {
+              let fieldPath = fieldStaff.field;
+              let newFieldError = object_get(this.data.errors, fieldPath);
+              let nestedBatchUpdateOpts = {
+                notNotify: true,
+                notUpdate: true
+              };
+              fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
+            });
+          }
+        });
 
         if (this.getArrayField(field)) {
           this.updateArrayField(field, {
@@ -101412,21 +101552,21 @@ class foundation_FormFoundation extends foundation {
       if (fieldApi) {
         fieldApi.setTouched(isTouched, opts);
       } else {
-        this.updateStateTouched(field, isTouched, opts);
-
-        let nestedFields = this._getNestedField(field);
-
-        if (nestedFields.size) {
-          for_each_default()(nestedFields).call(nestedFields, fieldStaff => {
-            let fieldPath = fieldStaff.field;
-            let newFieldTouch = object_get(this.data.touched, fieldPath);
-            let nestedBatchUpdateOpts = {
-              notNotify: true,
-              notUpdate: true
-            };
-            fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
-          });
-        }
+        this.updateStateTouched(field, isTouched, opts, () => {
+          let nestedFields = this._getNestedField(field);
+
+          if (nestedFields.size) {
+            for_each_default()(nestedFields).call(nestedFields, fieldStaff => {
+              let fieldPath = fieldStaff.field;
+              let newFieldTouch = object_get(this.data.touched, fieldPath);
+              let nestedBatchUpdateOpts = {
+                notNotify: true,
+                notUpdate: true
+              };
+              fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
+            });
+          }
+        });
 
         if (this.getArrayField(field)) {
           this.updateArrayField(field, {
@@ -102582,7 +102722,7 @@ function withField(Component, opts) {
           text: label || field,
           id: labelId,
           required: required,
-          name: name || field,
+          name: a11yId || name || field,
           width: mergeLabelWidth,
           align: mergeLabelAlign
         }, needSpread));
@@ -102784,8 +102924,8 @@ class baseForm_Form extends baseComponent_BaseComponent {
       notifySubmitFail: (errors, values) => {
         this.props.onSubmitFail(errors, values);
       },
-      forceUpdate: () => {
-        this.forceUpdate();
+      forceUpdate: callback => {
+        this.forceUpdate(callback);
       },
       notifyChange: formState => {
         this.props.onChange(formState);