@douyinfe/semi-ui 2.5.0 → 2.6.0

package/lib/cjs/cascader/item.js

@@ -20,6 +20,8 @@ var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
 var _includes2 = _interopRequireDefault(require("lodash/includes"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -30,6 +32,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/cascader/constants");
 
+var _isEnterPress = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isEnterPress"));
+
 var _context7 = _interopRequireDefault(require("../configProvider/context"));
 
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
@@ -61,6 +65,16 @@ class Item extends _react.PureComponent {
 
       onItemClick(e, item);
     };
+    /**
+     * A11y: simulate item click
+     */
+
+
+    this.handleItemEnterPress = (keyboardEvent, item) => {
+      if ((0, _isEnterPress.default)(keyboardEvent)) {
+        this.onClick(keyboardEvent, item);
+      }
+    };
 
     this.onHover = (e, item) => {
       const {
@@ -140,6 +154,7 @@ class Item extends _react.PureComponent {
 
         case 'empty':
           return /*#__PURE__*/_react.default.createElement("span", {
+            "aria-hidden": true,
             className: (0, _concat.default)(_context3 = "".concat(prefixcls, "-icon ")).call(_context3, prefixcls, "-icon-empty")
           });
 
@@ -202,11 +217,13 @@ class Item extends _react.PureComponent {
           ["".concat(prefixcls, "-disabled")]: disabled
         });
         return /*#__PURE__*/_react.default.createElement("li", {
+          role: 'menuitem',
           className: className,
           key: key,
           onClick: e => {
             this.onClick(e, item);
-          }
+          },
+          onKeyPress: e => this.handleItemEnterPress(e, item)
         }, /*#__PURE__*/_react.default.createElement("span", {
           className: "".concat(prefixcls, "-label")
         }, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/_react.default.createElement(_checkbox.default, {
@@ -232,13 +249,15 @@ class Item extends _react.PureComponent {
     let showChildItem;
     const ind = content.length;
     content.push( /*#__PURE__*/_react.default.createElement("ul", {
+      role: 'menu',
       className: "".concat(prefixcls, "-list"),
       key: renderData[0].key,
       onScroll: e => this.props.onListScroll(e, ind)
     }, (0, _map.default)(renderData).call(renderData, item => {
       const {
         data,
-        key
+        key,
+        parentKey
       } = item;
       const {
         children,
@@ -263,16 +282,26 @@ class Item extends _react.PureComponent {
         ["".concat(prefixcls, "-select")]: selected && !multiple,
         ["".concat(prefixcls, "-disabled")]: disabled
       });
-      return /*#__PURE__*/_react.default.createElement("li", {
+      const otherAriaProps = parentKey ? {
+        ['aria-owns']: "cascaderItem-".concat(parentKey)
+      } : {};
+      return /*#__PURE__*/_react.default.createElement("li", (0, _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__*/_react.default.createElement("span", {
+      }), /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(prefixcls, "-label")
       }, selected && !multiple && this.renderIcon('tick'), !selected && !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/_react.default.createElement(_checkbox.default, {
         onChange: e => this.onCheckboxChange(e, item),

package/lib/cjs/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/cjs/datePicker/dateInput.js

@@ -52,6 +52,8 @@ var __rest = void 0 && (void 0).__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 */
@@ -195,9 +197,14 @@ class DateInput extends _baseComponent.default {
     } = this.props;
     const allowClear = (rangeStart || rangeEnd) && showClear;
     return allowClear && !disabled ? /*#__PURE__*/_react.default.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.default.createElement(_semiIcons.IconClear, null)) : null;
+    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, {
+      "aria-hidden": true
+    })) : null;
   }
 
   renderRangeSuffix(suffix) {
@@ -298,6 +305,8 @@ class DateInput extends _baseComponent.default {
       validateStatus,
       block,
       prefixCls,
+      multiple,
+      // Whether to allow multiple values for email and file types
       dateFnsLocale,
       // No need to pass to input
       onBlur,
@@ -315,11 +324,15 @@ class DateInput extends _baseComponent.default {
       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.default.createElement(_semiIcons.IconCalendar, null);
+    const dateIcon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendar, {
+      "aria-hidden": true
+    });
 
-    const dateTimeIcon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendarClock, null);
+    const dateTimeIcon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendarClock, {
+      "aria-hidden": true
+    });
 
     const suffix = (0, _includes.default)(type).call(type, 'Time') ? dateTimeIcon : dateIcon;
     let text = '';
@@ -375,7 +388,6 @@ DateInput.propTypes = {
   value: _propTypes.default.array,
   disabled: _propTypes.default.bool,
   type: _propTypes.default.oneOf(_constants.strings.TYPE_SET),
-  multiple: _propTypes.default.bool,
   showClear: _propTypes.default.bool,
   format: _propTypes.default.string,
   inputStyle: _propTypes.default.object,
@@ -399,7 +411,6 @@ DateInput.defaultProps = {
   onBlur: _function.noop,
   onClear: _function.noop,
   onFocus: _function.noop,
-  multiple: false,
   type: 'date',
   inputStyle: {},
   inputReadOnly: false,

package/lib/cjs/datePicker/datePicker.js

@@ -62,6 +62,8 @@ var _yearAndMonth = _interopRequireDefault(require("./yearAndMonth"));
 
 require("@douyinfe/semi-foundation/lib/cjs/datePicker/datePicker.css");
 
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus */
+
 /* eslint-disable max-len */
 class DatePicker extends _baseComponent.default {
   constructor(props) {
@@ -608,18 +610,19 @@ class DatePicker extends _baseComponent.default {
       onRangeClear: this.handleRangeInputClear,
       onRangeEndTabPress: this.handleRangeEndTabPress
     });
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-      _react.default.createElement("div", {
-        onClick: this.handleTriggerWrapperClick,
-        className: inputCls
-      }, typeof triggerRender === 'function' ? /*#__PURE__*/_react.default.createElement(_trigger.default, (0, _assign.default)({}, props, {
-        triggerRender: triggerRender,
-        componentName: "DatePicker",
-        componentProps: (0, _assign.default)({}, this.props)
-      })) : /*#__PURE__*/_react.default.createElement(_dateInput.default, (0, _assign.default)({}, props)))
-    );
+    return /*#__PURE__*/_react.default.createElement("div", {
+      // tooltip will mount a11y props to children
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      role: "combobox",
+      "aria-label": (0, _isArray.default)(value) && value.length ? "Change date" : "Choose date",
+      "aria-disabled": disabled,
+      onClick: this.handleTriggerWrapperClick,
+      className: inputCls
+    }, typeof triggerRender === 'function' ? /*#__PURE__*/_react.default.createElement(_trigger.default, (0, _assign.default)({}, props, {
+      triggerRender: triggerRender,
+      componentName: "DatePicker",
+      componentProps: (0, _assign.default)({}, this.props)
+    })) : /*#__PURE__*/_react.default.createElement(_dateInput.default, (0, _assign.default)({}, props)));
   }
 
   render() {

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

package/lib/cjs/datePicker/month.js

@@ -40,6 +40,8 @@ var _index = require("@douyinfe/semi-foundation/lib/cjs/datePicker/_utils/index"
 
 var _dateFns = require("date-fns");
 
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
+
 /* eslint-disable max-len */
 const prefixCls = _constants.cssClasses.PREFIX;
 
@@ -353,8 +355,10 @@ class Month extends _baseComponent.default {
 
     const weekdaysText = (0, _map.default)(weekdays).call(weekdays, key => locale.weeks[key]);
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "row",
       className: weekdayCls
     }, (0, _map.default)(weekdaysText).call(weekdaysText, (E, i) => /*#__PURE__*/_react.default.createElement("div", {
+      role: "columnheader",
       key: E + i,
       className: weekdayItemCls
     }, E)));
@@ -389,6 +393,7 @@ class Month extends _baseComponent.default {
   renderWeek(week, weekIndex) {
     const weekCls = _constants.cssClasses.WEEK;
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "row",
       className: weekCls,
       key: weekIndex
     }, (0, _map.default)(week).call(week, (day, dayIndex) => this.renderDay(day, dayIndex)));
@@ -409,6 +414,8 @@ class Month extends _baseComponent.default {
 
     if (!fullDate) {
       return /*#__PURE__*/_react.default.createElement("div", {
+        role: "gridcell",
+        tabIndex: -1,
         key: dayNumber + dayIndex,
         className: _constants.cssClasses.DAY
       }, /*#__PURE__*/_react.default.createElement("span", null));
@@ -444,6 +451,11 @@ class Month extends _baseComponent.default {
     const fullDateArgs = [dayNumber, fullDate, dayStatus];
     const customRender = (0, _isFunction2.default)(renderFullDate);
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "gridcell",
+      tabIndex: dayStatus.isDisabled ? -1 : 0,
+      "aria-disabled": dayStatus.isDisabled,
+      "aria-selected": dayStatus.isSelected,
+      "aria-label": fullDate,
       className: !customRender ? dayCls : _constants.cssClasses.DAY,
       title: fullDate,
       key: dayNumber + dayIndex,
@@ -457,13 +469,16 @@ class Month extends _baseComponent.default {
 
   render() {
     const {
-      forwardRef
+      forwardRef,
+      multiple
     } = this.props;
     const weekday = this.renderDayOfWeek();
     const weeks = this.renderWeeks();
     const monthCls = (0, _classnames.default)(_constants.cssClasses.MONTH);
     const ref = forwardRef || this.monthRef;
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "grid",
+      "aria-multiselectable": multiple,
       ref: ref,
       className: monthCls
     }, weekday, weeks);
@@ -491,7 +506,8 @@ Month.propTypes = {
   startDateOffset: _propTypes.default.func,
   endDateOffset: _propTypes.default.func,
   rangeInputFocus: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  focusRecordsRef: _propTypes.default.object
+  focusRecordsRef: _propTypes.default.object,
+  multiple: _propTypes.default.bool
 };
 Month.defaultProps = {
   month: new Date(),

package/lib/cjs/datePicker/monthsGrid.js

@@ -54,6 +54,8 @@ var _semiIcons = require("@douyinfe/semi-icons");
 
 var _getDefaultFormatToken = require("@douyinfe/semi-foundation/lib/cjs/datePicker/_utils/getDefaultFormatToken");
 
+/* 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 */
@@ -395,7 +397,8 @@ class MonthsGrid extends _baseComponent.default {
       endDateOffset,
       density,
       rangeInputFocus,
-      syncSwitchMonth
+      syncSwitchMonth,
+      multiple
     } = this.props;
     let monthText = ''; // i18n monthText
 
@@ -461,7 +464,8 @@ class MonthsGrid extends _baseComponent.default {
       onWeeksRowNumChange: weeksRowNum => this.handleWeeksRowNumChange(weeksRowNum, panelType),
       startDateOffset: startDateOffset,
       endDateOffset: endDateOffset,
-      focusRecordsRef: this.props.focusRecordsRef
+      focusRecordsRef: this.props.focusRecordsRef,
+      multiple: multiple
     }));
   }
 
@@ -613,14 +617,22 @@ class MonthsGrid extends _baseComponent.default {
       className: switchCls,
       ref: current => this.adapter.setCache("switch-".concat(panelType), current)
     }, /*#__PURE__*/_react.default.createElement("div", {
+      role: "button",
+      "aria-label": "Switch to date panel",
       className: dateCls,
       onClick: e => this.foundation.showDatePanel(panelType)
-    }, showSwithIcon && /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendar, null), /*#__PURE__*/_react.default.createElement("span", {
+    }, showSwithIcon && /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendar, {
+      "aria-hidden": true
+    }), /*#__PURE__*/_react.default.createElement("span", {
       className: textCls
     }, dateText || monthText)), /*#__PURE__*/_react.default.createElement("div", {
+      role: "button",
+      "aria-label": "Switch to time panel",
       className: timeCls,
       onClick: e => this.foundation.showTimePicker(panelType, true)
-    }, showSwithIcon && /*#__PURE__*/_react.default.createElement(_semiIcons.IconClock, null), /*#__PURE__*/_react.default.createElement("span", {
+    }, showSwithIcon && /*#__PURE__*/_react.default.createElement(_semiIcons.IconClock, {
+      "aria-hidden": true
+    }), /*#__PURE__*/_react.default.createElement("span", {
       className: textCls
     }, timeText)));
   }

package/lib/cjs/datePicker/navigation.js

@@ -82,7 +82,9 @@ class Navigation extends _react.PureComponent {
       ref: ref
     }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       key: "double-chevron-left",
+      "aria-label": "Previous year",
       icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconDoubleChevronLeft, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -92,7 +94,9 @@ class Navigation extends _react.PureComponent {
       style: leftButtonStyle
     }), /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       key: "chevron-left",
+      "aria-label": "Previous month",
       icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronLeft, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -108,7 +112,9 @@ class Navigation extends _react.PureComponent {
       size: buttonSize
     }, /*#__PURE__*/_react.default.createElement("span", null, monthText))), /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       key: "chevron-right",
+      "aria-label": "Next month",
       icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronRight, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -118,7 +124,9 @@ class Navigation extends _react.PureComponent {
       style: rightButtonStyle
     }), /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       key: "double-chevron-right",
+      "aria-label": "Next year",
       icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconDoubleChevronRight, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,

package/lib/cjs/datePicker/quickControl.js

@@ -34,6 +34,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/* eslint-disable jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events */
 const prefixCls = _constants.cssClasses.PREFIX;
 
 class QuickControl extends _react.PureComponent {

package/lib/cjs/datePicker/yearAndMonth.js

@@ -249,6 +249,7 @@ class YearAndMonth extends _baseComponent.default {
     }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       noHorizontalPadding: false,
       icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronLeft, {
+        "aria-hidden": true,
         size: iconSize
       }),
       size: buttonSize,

package/lib/cjs/form/baseForm.js

@@ -115,8 +115,8 @@ class Form extends _baseComponent.default {
       notifySubmitFail: (errors, values) => {
         this.props.onSubmitFail(errors, values);
       },
-      forceUpdate: () => {
-        this.forceUpdate();
+      forceUpdate: callback => {
+        this.forceUpdate(callback);
       },
       notifyChange: formState => {
         this.props.onChange(formState);

package/lib/cjs/form/hoc/withField.js

@@ -531,7 +531,7 @@ function withField(Component, opts) {
           text: label || field,
           id: labelId,
           required: required,
-          name: name || field,
+          name: a11yId || name || field,
           width: mergeLabelWidth,
           align: mergeLabelAlign
         }, needSpread));

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

@@ -19,7 +19,7 @@ export interface IconButtonProps extends ButtonProps {
 }
 declare class IconButton extends PureComponent<IconButtonProps> {
     static defaultProps: {
-        iconPosition: any;
+        iconPosition: "left";
         prefixCls: string;
         loading: boolean;
         noHorizontalPadding: boolean;
@@ -36,7 +36,7 @@ declare class IconButton extends PureComponent<IconButtonProps> {
         noHorizontalPadding: PropTypes.Requireable<string | boolean | any[]>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         theme: PropTypes.Requireable<string>;
-        iconPosition: PropTypes.Requireable<unknown>;
+        iconPosition: PropTypes.Requireable<"left" | "right">;
         className: PropTypes.Requireable<string>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/navigation/Item.d.ts

@@ -1,7 +1,7 @@
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import React from 'react';
 import PropTypes from 'prop-types';
-import ItemFoundation, { ItemProps, SelectedItemProps, ItemAdapter } from '@douyinfe/semi-foundation/lib/cjs/navigation/itemFoundation';
+import ItemFoundation, { ItemAdapter, ItemProps, SelectedItemProps } from '@douyinfe/semi-foundation/lib/cjs/navigation/itemFoundation';
 export interface NavItemProps extends ItemProps, BaseProps {
     children?: React.ReactNode;
     disabled?: boolean;
@@ -63,7 +63,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
     constructor(props: NavItemProps);
     _invokeContextFunc(funcName: string, ...args: any[]): any;
     get adapter(): ItemAdapter<NavItemProps, NavItemState>;
-    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon?: boolean): JSX.Element;
+    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon?: boolean, key?: number | string): JSX.Element;
     setItemRef: (ref: HTMLLIElement) => void;
     wrapTooltip: (node: React.ReactNode) => JSX.Element;
     handleClick: (e: React.MouseEvent) => void;

package/lib/cjs/navigation/Item.js

@@ -16,10 +16,10 @@ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-s
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
-var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
 var _times2 = _interopRequireDefault(require("lodash/times"));
 
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -146,6 +146,7 @@ class NavItem extends _baseComponent.default {
     var _context3;
 
     let isToggleIcon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    let key = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
 
     if (this.props.isSubNav) {
       return null;
@@ -166,7 +167,8 @@ class NavItem extends _baseComponent.default {
       ["".concat(clsPrefix, "-icon-info")]: !isToggleIcon
     });
     return /*#__PURE__*/_react.default.createElement("i", {
-      className: className
+      className: className,
+      key: key
     }, (0, _utils.isSemiIcon)(icon) ? /*#__PURE__*/_react.default.cloneElement(icon, {
       size: icon.props.size || iconSize
     }) : icon);
@@ -206,12 +208,12 @@ class NavItem extends _baseComponent.default {
 
       if (mode === _constants.strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
         const iconAmount = icon && !indent ? level : level - 1;
-        placeholderIcons = (0, _times2.default)(iconAmount, () => this.renderIcon(null, _constants.strings.ICON_POS_RIGHT, false));
+        placeholderIcons = (0, _times2.default)(iconAmount, index => this.renderIcon(null, _constants.strings.ICON_POS_RIGHT, false, index));
       }
 
-      itemChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholderIcons, this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true), icon || indent || isInSubNav ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT) : null, !(0, _isNullOrUndefined.default)(text) ? /*#__PURE__*/_react.default.createElement("span", {
+      itemChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholderIcons, this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'), icon || indent || isInSubNav ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT, false, 'key-position-left') : null, !(0, _isNullOrUndefined.default)(text) ? /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(_constants.cssClasses.PREFIX, "-item-text")
-      }, text) : '', this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true));
+      }, text) : '', this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'));
     }
 
     if (typeof link === 'string') {

package/lib/cjs/navigation/SubNav.js

@@ -233,7 +233,7 @@ class SubNav extends _baseComponent.default {
     if (mode === _constants.strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
       /* Different icons' amount means different indents.*/
       const iconAmount = icon && !indent ? level : level - 1;
-      placeholderIcons = (0, _times2.default)(iconAmount, index => this.renderIcon(null, _constants.strings.ICON_POS_RIGHT, false, undefined, index));
+      placeholderIcons = (0, _times2.default)(iconAmount, index => this.renderIcon(null, _constants.strings.ICON_POS_RIGHT, false, false, index));
     }
 
     const titleDiv = /*#__PURE__*/_react.default.createElement("div", {
@@ -245,7 +245,7 @@ class SubNav extends _baseComponent.default {
       onKeyPress: this.handleKeyPress
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-item-inner")
-    }, placeholderIcons, this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, _constants.strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== _constants.strings.MODE_HORIZONTAL ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT, undefined, undefined, 'key-inSubNav-position-left') : null, /*#__PURE__*/_react.default.createElement("span", {
+    }, placeholderIcons, this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, _constants.strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== _constants.strings.MODE_HORIZONTAL ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left') : null, /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(prefixCls, "-item-text")
     }, text), this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIconType, _constants.strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')));
 

package/lib/cjs/scrollList/scrollItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { Item, ScrollItemAdapter } from '@douyinfe/semi-foundation/lib/cjs/scrollList/itemFoundation';
@@ -18,6 +18,7 @@ export interface ScrollItemProps<T extends Item> {
     motion?: Motion;
     style?: React.CSSProperties;
     type?: string | number;
+    'aria-label'?: AriaAttributes['aria-label'];
 }
 export interface ScrollItemState {
     prependCount: number;

package/lib/cjs/scrollList/scrollItem.js

@@ -299,13 +299,14 @@ class ScrollItem extends _baseComponent.default {
           transform: itemTrans
         } = item;
         const transform = typeof itemTrans === 'function' ? itemTrans : commonTrans;
+        const selected = selectedIndex === index;
         const cls = (0, _classnames.default)({
-          ["".concat(_constants.cssClasses.PREFIX, "-item-sel")]: selectedIndex === index && mode !== wheelMode,
+          ["".concat(_constants.cssClasses.PREFIX, "-item-sel")]: selected && mode !== wheelMode,
           ["".concat(_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 {
@@ -329,7 +330,10 @@ class ScrollItem extends _baseComponent.default {
           _react.default.createElement("li", (0, _assign.default)({
             key: prefixKey + index
           }, events, {
-            className: cls
+            className: cls,
+            role: "option",
+            "aria-selected": selected,
+            "aria-disabled": item.disabled
           }), text)
         );
       });
@@ -348,6 +352,9 @@ class ScrollItem extends _baseComponent.default {
         className: wrapperCls,
         ref: this._cacheWrapperNode
       }, /*#__PURE__*/_react.default.createElement("ul", {
+        role: "listbox",
+        "aria-multiselectable": false,
+        "aria-label": this.props['aria-label'],
         ref: this._cacheListNode
       }, inner));
     };
@@ -402,6 +409,9 @@ class ScrollItem extends _baseComponent.default {
         ref: this._cacheWrapperNode,
         onScroll: this.scrollToSelectItem
       }, /*#__PURE__*/_react.default.createElement("ul", {
+        role: "listbox",
+        "aria-label": this.props['aria-label'],
+        "aria-multiselectable": false,
         ref: this._cacheListNode,
         onClick: this.clickToSelectItem
       }, prependList, inner, appendList)));

package/lib/cjs/table/Body/index.d.ts

@@ -43,6 +43,8 @@ export interface BodyState {
 }
 export interface BodyContext {
     getVirtualizedListRef: GetVirtualizedListRef;
+    flattenedColumns: ColumnProps[];
+    getCellWidths: (flattenedColumns: ColumnProps[]) => number[];
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<BodyProps, "forwardedRef"> & React.RefAttributes<HTMLDivElement>>;
 export default _default;