@douyinfe/semi-ui 2.2.0 → 2.3.0

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

@@ -4,6 +4,11 @@ import { SwitchAdapter } from '@douyinfe/semi-foundation/lib/cjs/switch/foundati
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/cjs/switch/switch.css';
 export interface SwitchProps {
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
     defaultChecked?: boolean;
     checked?: boolean;
     disabled?: boolean;
@@ -16,6 +21,7 @@ export interface SwitchProps {
     size?: 'large' | 'default' | 'small';
     checkedText?: React.ReactNode;
     uncheckedText?: React.ReactNode;
+    id?: string;
 }
 export interface SwitchState {
     nativeControlChecked: boolean;
@@ -23,6 +29,11 @@ export interface SwitchState {
 }
 declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
     static propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-describedby': PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         checked: PropTypes.Requireable<boolean>;
         checkedText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -35,6 +46,7 @@ declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
         style: PropTypes.Requireable<object>;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         uncheckedText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        id: PropTypes.Requireable<string>;
     };
     static defaultProps: Partial<SwitchProps>;
     private switchRef;

package/lib/cjs/switch/index.js

@@ -30,7 +30,7 @@ require("@douyinfe/semi-foundation/lib/cjs/switch/switch.css");
 
 var _spin = _interopRequireDefault(require("../spin"));
 
-/* eslint-disable max-len */
+/* eslint-disable max-len, jsx-a11y/role-supports-aria-props */
 class Switch extends _baseComponent.default {
   constructor(props) {
     super(props);
@@ -91,7 +91,8 @@ class Switch extends _baseComponent.default {
       size,
       checkedText,
       uncheckedText,
-      loading
+      loading,
+      id
     } = this.props;
     const wrapperCls = (0, _classnames.default)(className, {
       [_constants.cssClasses.PREFIX]: true,
@@ -119,13 +120,21 @@ class Switch extends _baseComponent.default {
       wrapperClassName: _constants.cssClasses.LOADING_SPIN,
       size: size === 'default' ? 'middle' : size
     }) : /*#__PURE__*/_react.default.createElement("div", {
-      className: _constants.cssClasses.KNOB
+      className: _constants.cssClasses.KNOB,
+      "aria-hidden": true
     }), showCheckedText ? /*#__PURE__*/_react.default.createElement("div", {
       className: _constants.cssClasses.CHECKED_TEXT
     }, checkedText) : null, showUncheckedText ? /*#__PURE__*/_react.default.createElement("div", {
       className: _constants.cssClasses.UNCHECKED_TEXT
     }, uncheckedText) : null, /*#__PURE__*/_react.default.createElement("input", (0, _assign.default)({}, switchProps, {
       ref: this.switchRef,
+      id: id,
+      "aria-checked": nativeControlChecked,
+      "aria-invalid": this.props['aria-invalid'],
+      "aria-errormessage": this.props['aria-errormessage'],
+      "aria-label": this.props['aria-label'],
+      "aria-labelledby": this.props['aria-labelledby'],
+      "aria-describedby": this.props["aria-describedby"],
       onChange: e => this.foundation.handleChange(e.target.checked, e)
     })));
   }
@@ -133,6 +142,11 @@ class Switch extends _baseComponent.default {
 }
 
 Switch.propTypes = {
+  'aria-label': _propTypes.default.string,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-invalid': _propTypes.default.bool,
+  'aria-errormessage': _propTypes.default.string,
+  'aria-describedby': _propTypes.default.string,
   className: _propTypes.default.string,
   checked: _propTypes.default.bool,
   checkedText: _propTypes.default.node,
@@ -144,7 +158,8 @@ Switch.propTypes = {
   onMouseLeave: _propTypes.default.func,
   style: _propTypes.default.object,
   size: _propTypes.default.oneOf(_constants.strings.SIZE_MAP),
-  uncheckedText: _propTypes.default.node
+  uncheckedText: _propTypes.default.node,
+  id: _propTypes.default.string
 };
 Switch.defaultProps = {
   disabled: false,

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

@@ -217,6 +217,7 @@ class TableRow extends _baseComponent.default {
       if ((0, _utils.isExpandedColumn)(column) && !displayExpandedColumn) {
         cells.push( /*#__PURE__*/_react.default.createElement(_TableCell.default, {
           key: columnIndex,
+          colIndex: columnIndex,
           isSection: isSection
         }));
       } else if (!(0, _utils.isScrollbarColumn)(column)) {
@@ -226,7 +227,9 @@ class TableRow extends _baseComponent.default {
           diyProps.width = (0, _get2.default)(cellWidths, columnIndex);
         }
 
-        cells.push( /*#__PURE__*/_react.default.createElement(_TableCell.default, (0, _assign.default)({}, expandableProps, diyProps, {
+        cells.push( /*#__PURE__*/_react.default.createElement(_TableCell.default, (0, _assign.default)({
+          colIndex: columnIndex
+        }, expandableProps, diyProps, {
           hideExpandedColumn: hideExpandedColumn,
           indentSize: indentSize,
           isSection: isSection,
@@ -264,7 +267,11 @@ class TableRow extends _baseComponent.default {
       replaceClassName,
       record,
       hovered,
-      expanded
+      expanded,
+      expandableRow,
+      level,
+      expandedRow,
+      isSection
     } = this.props;
     const BodyRow = components.body.row;
 
@@ -282,7 +289,32 @@ class TableRow extends _baseComponent.default {
       ["".concat(prefixCls, "-row-expanded")]: expanded,
       ["".concat(prefixCls, "-row-hovered")]: hovered
     }, customClassName);
-    return /*#__PURE__*/_react.default.createElement(BodyRow, (0, _assign.default)({}, rowProps, {
+    const ariaProps = {};
+
+    if (typeof index === 'number') {
+      ariaProps['aria-rowindex'] = index + 1;
+    }
+
+    if (expandableRow) {
+      ariaProps['aria-expanded'] = expanded;
+    } // if row is expandedRow, set it's level to 2 
+
+
+    if (expanded || expandedRow) {
+      ariaProps['aria-level'] = 2;
+    }
+
+    if (typeof level === 'number') {
+      ariaProps['aria-level'] = level + 1;
+    }
+
+    if (isSection) {
+      ariaProps['aria-level'] = 1;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(BodyRow, (0, _assign.default)({
+      role: "row"
+    }, ariaProps, rowProps, {
       style: baseRowStyle,
       className: rowCls,
       ref: this._cacheNode,

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

@@ -30,6 +30,8 @@ var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 
 var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
 
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
 var _isNull2 = _interopRequireDefault(require("lodash/isNull"));
 
 var _pick2 = _interopRequireDefault(require("lodash/pick"));
@@ -517,7 +519,8 @@ class Body extends _baseComponent.default {
         includeHeader,
         dataSource,
         onScroll,
-        groups
+        groups,
+        expandedRowRender
       } = this.props;
       const x = (0, _get2.default)(scroll, 'x');
       const y = (0, _get2.default)(scroll, 'y');
@@ -558,6 +561,11 @@ class Body extends _baseComponent.default {
         onWheel: handleWheel,
         onScroll: handleBodyScroll
       }, /*#__PURE__*/_react.default.createElement(Table, {
+        role: (0, _isMap2.default)(groups) || (0, _isFunction2.default)(expandedRowRender) || (0, _utils.isTreeTable)({
+          dataSource
+        }) ? 'treegrid' : 'grid',
+        "aria-rowcount": dataSource && dataSource.length,
+        "aria-colcount": columns && columns.length,
         style: tableStyle,
         className: (0, _classnames.default)(prefixCls, {
           ["".concat(prefixCls, "-fixed")]: anyColumnFixed

package/lib/cjs/table/ColumnFilter.js

@@ -180,6 +180,10 @@ function ColumnFilter() {
     iconElem = /*#__PURE__*/_react.default.createElement("div", {
       className: finalCls
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconFilter, {
+      role: "button",
+      "aria-label": "Filter data with this column",
+      "aria-haspopup": "listbox",
+      tabIndex: -1,
       size: "small"
     }));
   }

package/lib/cjs/table/ColumnSelection.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { TableSelectionCellAdapter, TableSelectionCellEvent } from '@douyinfe/semi-foundation/lib/cjs/table/tableSelectionCellFoundation';
@@ -12,6 +13,7 @@ export interface TableSelectionCellProps {
     indeterminate?: boolean;
     prefixCls?: string;
     className?: string;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 /**
  * render selection cell
@@ -27,6 +29,7 @@ export default class TableSelectionCell extends BaseComponent<TableSelectionCell
         indeterminate: PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
         disabled: boolean;

package/lib/cjs/table/ColumnSelection.js

@@ -61,6 +61,7 @@ class TableSelectionCell extends _baseComponent.default {
       prefixCls,
       className
     } = this.props;
+    const ariaLabel = this.props['aria-label'];
     let checkboxProps = {
       onChange: this.handleChange,
       disabled,
@@ -77,7 +78,9 @@ class TableSelectionCell extends _baseComponent.default {
     }, className);
     return /*#__PURE__*/_react.default.createElement("span", {
       className: wrapCls
-    }, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, (0, _assign.default)({}, checkboxProps)));
+    }, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, (0, _assign.default)({
+      "aria-label": ariaLabel
+    }, checkboxProps)));
   }
 
 }
@@ -92,7 +95,8 @@ TableSelectionCell.propTypes = {
   disabled: _propTypes.default.bool,
   indeterminate: _propTypes.default.bool,
   prefixCls: _propTypes.default.string,
-  className: _propTypes.default.string
+  className: _propTypes.default.string,
+  'aria-label': _propTypes.default.string
 };
 TableSelectionCell.defaultProps = {
   disabled: false,

package/lib/cjs/table/ColumnSorter.js

@@ -14,6 +14,8 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports.default = void 0;
 
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -26,6 +28,8 @@ var _semiIcons = require("@douyinfe/semi-icons");
 
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
 
+var _isEnterPress = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isEnterPress"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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; }
@@ -45,11 +49,23 @@ class ColumnSorter extends _react.PureComponent {
     const downCls = (0, _classnames.default)("".concat(prefixCls, "-column-sorter-down"), {
       on: sortOrder === _constants.strings.SORT_DIRECTIONS[1]
     });
-    return /*#__PURE__*/_react.default.createElement("div", {
+    const ariaProps = {
+      /**
+       * Set 'aria-sort' to aria-columnheader is difficult, so set 'aria-label' about sort info to sorter
+       * reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort
+       */
+      'aria-label': "Current sort order is ".concat(sortOrder ? "".concat(sortOrder, "ing") : 'none'),
+      'aria-roledescription': 'Sort data with this column'
+    };
+    return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
+      role: 'button'
+    }, ariaProps, {
+      tabIndex: -1,
       style: style,
       className: "".concat(prefixCls, "-column-sorter"),
-      onClick: onClick
-    }, /*#__PURE__*/_react.default.createElement("span", {
+      onClick: onClick,
+      onKeyPress: e => (0, _isEnterPress.default)(e) && onClick(e)
+    }), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(upCls)
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconCaretup, {
       size: iconBtnSize

package/lib/cjs/table/CustomExpandIcon.js

@@ -24,6 +24,8 @@ var _semiIcons = require("@douyinfe/semi-icons");
 
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
 
+var _isEnterPress = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isEnterPress"));
+
 var _Rotate = _interopRequireDefault(require("../motions/Rotate"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -76,10 +78,14 @@ function CustomExpandIcon(props) {
   }
 
   return /*#__PURE__*/_react.default.createElement("span", {
+    role: "button",
+    "aria-label": "Expand this row",
+    tabIndex: -1,
     onClick: handleClick,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
-    className: "".concat(prefixCls, "-expand-icon")
+    className: "".concat(prefixCls, "-expand-icon"),
+    onKeyPress: e => (0, _isEnterPress.default)(e) && handleClick(e)
   }, icon);
 }
 

package/lib/cjs/table/Table.d.ts

@@ -31,6 +31,7 @@ export interface NormalTableState<RecordType extends Record<string, any> = Data>
     bodyHasScrollBar?: boolean;
     prePropRowSelection?: TableStateRowSelection<RecordType>;
     tableWidth?: number;
+    prePagination?: Pagination;
 }
 export declare type TableStateRowSelection<RecordType extends Record<string, any> = Data> = (RowSelectionProps<RecordType> & {
     selectedRowKeysSet?: Set<(string | number)>;
@@ -229,6 +230,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
     /**
      * render pagination
      * @param {object} pagination
+     * @param {object} propRenderPagination
      */
     renderPagination: (pagination: TablePaginationProps, propRenderPagination: RenderPagination) => JSX.Element;
     renderTitle: (props?: {

package/lib/cjs/table/Table.js

@@ -397,6 +397,7 @@ class Table extends _baseComponent.default {
           const hasRowSelected = _this.foundation.hasRowSelected(selectedRowKeys, allRowKeysSet);
 
           return /*#__PURE__*/_react.default.createElement(_ColumnSelection.default, {
+            "aria-label": "".concat(allIsSelected ? 'Deselect' : 'Select', " all rows"),
             disabled: disabled,
             key: columnKey,
             selected: allIsSelected,
@@ -413,6 +414,7 @@ class Table extends _baseComponent.default {
           const checkboxPropsFn = () => typeof getCheckboxProps === 'function' ? getCheckboxProps(record) : {};
 
           return /*#__PURE__*/_react.default.createElement(_ColumnSelection.default, {
+            "aria-label": "".concat(selected ? 'Deselect' : 'Select', " this row"),
             getCheckboxProps: checkboxPropsFn,
             selected: selected,
             onChange: (status, e) => _this.toggleSelectRow(status, key, e)
@@ -597,6 +599,7 @@ class Table extends _baseComponent.default {
     /**
      * render pagination
      * @param {object} pagination
+     * @param {object} propRenderPagination
      */
 
 
@@ -900,7 +903,8 @@ class Table extends _baseComponent.default {
       disabledRowKeysSet: new _set.default(),
       headWidths: [],
       bodyHasScrollBar: false,
-      prePropRowSelection: undefined
+      prePropRowSelection: undefined,
+      prePagination: undefined
     };
     this.rootWrapRef = /*#__PURE__*/(0, _react.createRef)();
     this.wrapRef = /*#__PURE__*/(0, _react.createRef)(); // table's outside wrap
@@ -1138,7 +1142,8 @@ class Table extends _baseComponent.default {
       rowSelection,
       dataSource,
       childrenRecordName,
-      rowKey
+      rowKey,
+      pagination
     } = props;
     props.columns && props.children && _utils2.logger.warn('columns should not given by object and children at the same time');
 
@@ -1192,6 +1197,21 @@ class Table extends _baseComponent.default {
       willUpdateStates.prePropRowSelection = rowSelection;
     }
 
+    if (pagination !== state.prePagination) {
+      let newPagination = {};
+
+      if ((0, _isObject2.default)(state.pagination)) {
+        newPagination = (0, _assign.default)((0, _assign.default)({}, newPagination), state.pagination);
+      }
+
+      if ((0, _isObject2.default)(pagination)) {
+        newPagination = (0, _assign.default)((0, _assign.default)({}, newPagination), pagination);
+      }
+
+      willUpdateStates.pagination = newPagination;
+      willUpdateStates.prePagination = pagination;
+    }
+
     return willUpdateStates;
   }
 
@@ -1207,15 +1227,16 @@ class Table extends _baseComponent.default {
 
   componentDidUpdate(prevProps, prevState) {
     const {
-      pagination,
       dataSource,
       expandedRowKeys,
       expandAllRows,
       expandAllGroupRows,
       virtualized,
-      components
+      components,
+      pagination: propsPagination
     } = this.props;
     const {
+      pagination: statePagination,
       queries: stateQueries,
       cachedColumns: stateCachedColumns,
       cachedChildren: stateCachedChildren,
@@ -1259,11 +1280,6 @@ class Table extends _baseComponent.default {
       this.foundation.initExpandedRowKeys({
         groups: stateGroups
       });
-    } // Update pagination
-
-
-    if (pagination !== prevProps.pagination) {
-      states.pagination = (0, _isObject2.default)(pagination) ? (0, _assign.default)({}, pagination) : pagination;
     }
     /**
      * After dataSource is updated || (cachedColumns || cachedChildren updated)
@@ -1278,11 +1294,11 @@ class Table extends _baseComponent.default {
       const _dataSource = [...dataSource];
       const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(_dataSource, stateQueries);
       this.foundation.setCachedFilteredSortedDataSource(filteredSortedDataSource);
-      states.dataSource = filteredSortedDataSource;
+      states.dataSource = filteredSortedDataSource; // when dataSource has change, should reset currentPage
 
-      if (pagination === prevProps.pagination) {
-        states.pagination = (0, _isObject2.default)(pagination) ? (0, _assign.default)({}, pagination) : pagination;
-      }
+      states.pagination = (0, _isObject2.default)(statePagination) ? (0, _assign.default)((0, _assign.default)({}, statePagination), {
+        currentPage: (0, _isObject2.default)(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1
+      }) : statePagination;
 
       if (this.props.groupBy) {
         states.groups = null;
@@ -1292,11 +1308,11 @@ class Table extends _baseComponent.default {
     if ((0, _keys.default)(states).length) {
       const {
         // eslint-disable-next-line @typescript-eslint/no-shadow
+        pagination: mergedStatePagination = null,
         queries: stateQueries = null,
-        pagination: statePagination = null,
         dataSource: stateDataSource = null
       } = states;
-      const handledProps = this.foundation.getCurrentPageData(stateDataSource, statePagination, stateQueries); // After the pager is updated, reset allRowKeys of the current page
+      const handledProps = this.foundation.getCurrentPageData(stateDataSource, mergedStatePagination, stateQueries); // After the pager is updated, reset allRowKeys of the current page
 
       this.adapter.setAllRowKeys(handledProps.allRowKeys);
       this.adapter.setDisabledRowKeys(handledProps.disabledRowKeys);

package/lib/cjs/table/TableCell.d.ts

@@ -31,6 +31,7 @@ export interface TableCellProps extends BaseProps {
     selected?: boolean;
     expanded?: boolean;
     disabled?: boolean;
+    colIndex?: number;
 }
 export default class TableCell extends BaseComponent<TableCellProps, Record<string, any>> {
     static contextType: React.Context<import("./table-context").TableContextProps>;
@@ -65,6 +66,7 @@ export default class TableCell extends BaseComponent<TableCellProps, Record<stri
         height: PropTypes.Requireable<string | number>;
         selected: PropTypes.Requireable<boolean>;
         expanded: PropTypes.Requireable<boolean>;
+        colIndex: PropTypes.Requireable<number>;
     };
     get adapter(): TableCellAdapter;
     ref: React.MutableRefObject<any>;

package/lib/cjs/table/TableCell.js

@@ -320,7 +320,8 @@ class TableCell extends _baseComponent.default {
       fixedLeft,
       fixedRight,
       lastFixedLeft,
-      firstFixedRight
+      firstFixedRight,
+      colIndex
     } = this.props;
     const {
       className
@@ -359,6 +360,8 @@ class TableCell extends _baseComponent.default {
       ["".concat(prefixCls, "-cell-fixed-right-first")]: firstFixedRight
     });
     return /*#__PURE__*/_react.default.createElement(BodyCell, (0, _assign.default)({
+      role: "gridcell",
+      "aria-colindex": colIndex + 1,
       className: columnCls,
       onClick: this.handleClick
     }, newTdProps, {
@@ -400,5 +403,6 @@ TableCell.propTypes = {
   width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   selected: _propTypes.default.bool,
-  expanded: _propTypes.default.bool
+  expanded: _propTypes.default.bool,
+  colIndex: _propTypes.default.number
 };

package/lib/cjs/table/TableHeaderRow.js

@@ -178,12 +178,18 @@ class TableHeaderRow extends _baseComponent.default {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(HeaderCell, (0, _assign.default)({}, props, {
+      return /*#__PURE__*/_react.default.createElement(HeaderCell, (0, _assign.default)({
+        role: "columnheader",
+        "aria-colindex": cellIndex + 1
+      }, props, {
         style: cellStyle,
         key: column.key || column.dataIndex || cellIndex
       }));
     });
-    return /*#__PURE__*/_react.default.createElement(HeaderRow, (0, _assign.default)({}, rowProps, {
+    return /*#__PURE__*/_react.default.createElement(HeaderRow, (0, _assign.default)({
+      role: "row",
+      "aria-rowindex": index + 1
+    }, rowProps, {
       style: style,
       ref: this.cacheRef
     }), cells);

package/lib/cjs/tabs/TabBar.js

@@ -83,6 +83,8 @@ class TabBar extends _react.default.Component {
       } = this.props;
       const panelIcon = panel.icon ? this.renderIcon(panel.icon) : null;
       const closableIcon = type === 'card' && panel.closable ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
+        "aria-label": "Close",
+        role: "button",
         className: "".concat(_constants.cssClasses.TABS_TAB, "-icon-close"),
         onClick: e => deleteTabItem(panel.itemKey, e)
       }) : null;
@@ -95,16 +97,20 @@ class TabBar extends _react.default.Component {
         };
       }
 
+      const isSelected = this._isActive(key);
+
       const className = (0, _classnames.default)(_constants.cssClasses.TABS_TAB, {
-        [_constants.cssClasses.TABS_TAB_ACTIVE]: this._isActive(key),
+        [_constants.cssClasses.TABS_TAB_ACTIVE]: isSelected,
         [_constants.cssClasses.TABS_TAB_DISABLED]: panel.disabled,
         ["".concat(_constants.cssClasses.TABS_TAB, "-small")]: size === 'small',
         ["".concat(_constants.cssClasses.TABS_TAB, "-medium")]: size === 'medium'
       });
       return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
         role: "tab",
+        id: "semiTab".concat(key),
+        "aria-controls": "semiTabPanel".concat(key),
         "aria-disabled": panel.disabled ? 'true' : 'false',
-        "aria-selected": this._isActive(key) ? 'true' : 'false'
+        "aria-selected": isSelected ? 'true' : 'false'
       }, events, {
         className: className,
         key: this._getItemKey(key)
@@ -182,6 +188,7 @@ class TabBar extends _react.default.Component {
         style: dropdownStyle,
         trigger: 'hover'
       }, /*#__PURE__*/_react.default.createElement("div", {
+        role: "presentation",
         className: arrowCls,
         onClick: e => this.handleArrowClick(items, pos)
       }, /*#__PURE__*/_react.default.createElement(_button.default, {
@@ -289,7 +296,8 @@ class TabBar extends _react.default.Component {
     const extra = this.renderExtra();
     const contents = collapsible ? this.renderCollapsedTab() : this.renderTabComponents(list);
     return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
-      role: "tab-list",
+      role: "tablist",
+      "aria-orientation": tabPosition === "left" ? "vertical" : "horizontal",
       className: classNames,
       style: style
     }, (0, _getDataAttr.default)(restProps), {

package/lib/cjs/tabs/TabPane.js

@@ -132,7 +132,9 @@ class TabPane extends _react.PureComponent {
     const shouldRender = this.shouldRender();
     return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
       ref: this.ref,
-      role: "tab-panel",
+      role: "tabpanel",
+      id: "semiTabPanel".concat(itemKey),
+      "aria-labelledby": "semiTab".concat(itemKey),
       className: classNames,
       style: style,
       "aria-hidden": active ? 'false' : 'true'

package/lib/cjs/tabs/index.js

@@ -387,7 +387,6 @@ class Tabs extends _baseComponent.default {
       }
     }, /*#__PURE__*/_react.default.createElement("div", {
       ref: this.setContentRef,
-      role: "tab-content",
       className: tabContentCls,
       style: (0, _assign.default)({}, contentStyle)
     }, content)));

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

@@ -40,8 +40,9 @@ export interface TagInputProps {
     style?: React.CSSProperties;
     suffix?: React.ReactNode;
     validateStatus?: ValidateStatus;
-    value?: string[];
+    value?: string[] | undefined;
     autoFocus?: boolean;
+    'aria-label'?: string;
 }
 export interface TagInputState {
     tagsArray?: string[];
@@ -84,6 +85,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning">;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
         showClear: boolean;
@@ -118,6 +120,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
     handleInputFocus: (e: React.MouseEvent<HTMLInputElement>) => void;
     handleInputBlur: (e: React.MouseEvent<HTMLInputElement>) => void;
     handleClearBtn: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleClearEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     handleTagClose: (idx: number) => void;
     handleInputMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => void;
     handleInputMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => void;