@douyinfe/semi-ui 2.2.2 → 2.3.0-beta.0

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

@@ -1,3 +1,4 @@
+import _isFunction from "lodash/isFunction";
 import _isNull from "lodash/isNull";
 import _pick from "lodash/pick";
 import _isEqual from "lodash/isEqual";
@@ -37,7 +38,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { VariableSizeList as List } from 'react-window';
-import { arrayAdd, getRecordKey, isExpanded, isSelected, isDisabled, getRecord, genExpandedRowKey, getDefaultVirtualizedRowConfig } from '@douyinfe/semi-foundation/lib/es/table/utils';
+import { arrayAdd, getRecordKey, isExpanded, isSelected, isDisabled, getRecord, genExpandedRowKey, getDefaultVirtualizedRowConfig, isTreeTable } from '@douyinfe/semi-foundation/lib/es/table/utils';
 import BodyFoundation from '@douyinfe/semi-foundation/lib/es/table/bodyFoundation';
 import { strings } from '@douyinfe/semi-foundation/lib/es/table/constants';
 import BaseComponent from '../../_base/baseComponent';
@@ -494,7 +495,8 @@ class Body extends BaseComponent {
         includeHeader,
         dataSource,
         onScroll,
-        groups
+        groups,
+        expandedRowRender
       } = this.props;
 
       const x = _get(scroll, 'x');
@@ -538,6 +540,11 @@ class Body extends BaseComponent {
         onWheel: handleWheel,
         onScroll: handleBodyScroll
       }, /*#__PURE__*/React.createElement(Table, {
+        role: _isMap(groups) || _isFunction(expandedRowRender) || isTreeTable({
+          dataSource
+        }) ? 'treegrid' : 'grid',
+        "aria-rowcount": dataSource && dataSource.length,
+        "aria-colcount": columns && columns.length,
         style: tableStyle,
         className: classnames(prefixCls, {
           ["".concat(prefixCls, "-fixed")]: anyColumnFixed

package/lib/es/table/ColumnFilter.js

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

package/lib/es/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/es/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/es/table/ColumnSelection.js

@@ -41,6 +41,7 @@ export default class TableSelectionCell extends BaseComponent {
       prefixCls,
       className
     } = this.props;
+    const ariaLabel = this.props['aria-label'];
     let checkboxProps = {
       onChange: this.handleChange,
       disabled,
@@ -57,7 +58,9 @@ export default class TableSelectionCell extends BaseComponent {
     }, className);
     return /*#__PURE__*/React.createElement("span", {
       className: wrapCls
-    }, /*#__PURE__*/React.createElement(Checkbox, _Object$assign({}, checkboxProps)));
+    }, /*#__PURE__*/React.createElement(Checkbox, _Object$assign({
+      "aria-label": ariaLabel
+    }, checkboxProps)));
   }
 
 }
@@ -70,7 +73,8 @@ TableSelectionCell.propTypes = {
   disabled: PropTypes.bool,
   indeterminate: PropTypes.bool,
   prefixCls: PropTypes.string,
-  className: PropTypes.string
+  className: PropTypes.string,
+  'aria-label': PropTypes.string
 };
 TableSelectionCell.defaultProps = {
   disabled: false,

package/lib/es/table/ColumnSorter.js

@@ -1,9 +1,11 @@
 import _noop from "lodash/noop";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
 import { IconCaretup, IconCaretdown } from '@douyinfe/semi-icons';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/table/constants';
+import isEnterPress from '@douyinfe/semi-foundation/lib/es/utils/isEnterPress';
 export default class ColumnSorter extends PureComponent {
   render() {
     const {
@@ -19,11 +21,23 @@ export default class ColumnSorter extends PureComponent {
     const downCls = cls("".concat(prefixCls, "-column-sorter-down"), {
       on: sortOrder === strings.SORT_DIRECTIONS[1]
     });
-    return /*#__PURE__*/React.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.createElement("div", _Object$assign({
+      role: 'button'
+    }, ariaProps, {
+      tabIndex: -1,
       style: style,
       className: "".concat(prefixCls, "-column-sorter"),
-      onClick: onClick
-    }, /*#__PURE__*/React.createElement("span", {
+      onClick: onClick,
+      onKeyPress: e => isEnterPress(e) && onClick(e)
+    }), /*#__PURE__*/React.createElement("span", {
       className: "".concat(upCls)
     }, /*#__PURE__*/React.createElement(IconCaretup, {
       size: iconBtnSize

package/lib/es/table/CustomExpandIcon.js

@@ -5,6 +5,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { IconChevronRight, IconChevronDown, IconTreeTriangleDown, IconTreeTriangleRight } from '@douyinfe/semi-icons';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/table/constants';
+import isEnterPress from '@douyinfe/semi-foundation/lib/es/utils/isEnterPress';
 import Rotate from '../motions/Rotate';
 /**
  * render expand icon
@@ -51,10 +52,14 @@ export default function CustomExpandIcon(props) {
   }
 
   return /*#__PURE__*/React.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 => isEnterPress(e) && handleClick(e)
   }, icon);
 }
 CustomExpandIcon.propTypes = {

package/lib/es/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/es/table/Table.js

@@ -335,6 +335,7 @@ class Table extends BaseComponent {
           const hasRowSelected = _this.foundation.hasRowSelected(selectedRowKeys, allRowKeysSet);
 
           return /*#__PURE__*/React.createElement(ColumnSelection, {
+            "aria-label": "".concat(allIsSelected ? 'Deselect' : 'Select', " all rows"),
             disabled: disabled,
             key: columnKey,
             selected: allIsSelected,
@@ -351,6 +352,7 @@ class Table extends BaseComponent {
           const checkboxPropsFn = () => typeof getCheckboxProps === 'function' ? getCheckboxProps(record) : {};
 
           return /*#__PURE__*/React.createElement(ColumnSelection, {
+            "aria-label": "".concat(selected ? 'Deselect' : 'Select', " this row"),
             getCheckboxProps: checkboxPropsFn,
             selected: selected,
             onChange: (status, e) => _this.toggleSelectRow(status, key, e)
@@ -535,6 +537,7 @@ class Table extends BaseComponent {
     /**
      * render pagination
      * @param {object} pagination
+     * @param {object} propRenderPagination
      */
 
 
@@ -841,7 +844,8 @@ class Table extends BaseComponent {
       disabledRowKeysSet: new _Set(),
       headWidths: [],
       bodyHasScrollBar: false,
-      prePropRowSelection: undefined
+      prePropRowSelection: undefined,
+      prePagination: undefined
     };
     this.rootWrapRef = /*#__PURE__*/createRef();
     this.wrapRef = /*#__PURE__*/createRef(); // table's outside wrap
@@ -1081,7 +1085,8 @@ class Table extends BaseComponent {
       rowSelection,
       dataSource,
       childrenRecordName,
-      rowKey
+      rowKey,
+      pagination
     } = props;
     props.columns && props.children && logger.warn('columns should not given by object and children at the same time');
 
@@ -1136,6 +1141,21 @@ class Table extends BaseComponent {
       willUpdateStates.prePropRowSelection = rowSelection;
     }
 
+    if (pagination !== state.prePagination) {
+      let newPagination = {};
+
+      if (_isObject(state.pagination)) {
+        newPagination = _Object$assign(_Object$assign({}, newPagination), state.pagination);
+      }
+
+      if (_isObject(pagination)) {
+        newPagination = _Object$assign(_Object$assign({}, newPagination), pagination);
+      }
+
+      willUpdateStates.pagination = newPagination;
+      willUpdateStates.prePagination = pagination;
+    }
+
     return willUpdateStates;
   }
 
@@ -1151,15 +1171,16 @@ class Table extends BaseComponent {
 
   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,
@@ -1203,11 +1224,6 @@ class Table extends BaseComponent {
       this.foundation.initExpandedRowKeys({
         groups: stateGroups
       });
-    } // Update pagination
-
-
-    if (pagination !== prevProps.pagination) {
-      states.pagination = _isObject(pagination) ? _Object$assign({}, pagination) : pagination;
     }
     /**
      * After dataSource is updated || (cachedColumns || cachedChildren updated)
@@ -1222,11 +1238,11 @@ class Table extends BaseComponent {
       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 = _isObject(pagination) ? _Object$assign({}, pagination) : pagination;
-      }
+      states.pagination = _isObject(statePagination) ? _Object$assign(_Object$assign({}, statePagination), {
+        currentPage: _isObject(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1
+      }) : statePagination;
 
       if (this.props.groupBy) {
         states.groups = null;
@@ -1236,11 +1252,11 @@ class Table extends BaseComponent {
     if (_Object$keys(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/es/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/es/table/TableCell.js

@@ -288,7 +288,8 @@ export default class TableCell extends BaseComponent {
       fixedLeft,
       fixedRight,
       lastFixedLeft,
-      firstFixedRight
+      firstFixedRight,
+      colIndex
     } = this.props;
     const {
       className
@@ -327,6 +328,8 @@ export default class TableCell extends BaseComponent {
       ["".concat(prefixCls, "-cell-fixed-right-first")]: firstFixedRight
     });
     return /*#__PURE__*/React.createElement(BodyCell, _Object$assign({
+      role: "gridcell",
+      "aria-colindex": colIndex + 1,
       className: columnCls,
       onClick: this.handleClick
     }, newTdProps, {
@@ -366,5 +369,6 @@ TableCell.propTypes = {
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   selected: PropTypes.bool,
-  expanded: PropTypes.bool
+  expanded: PropTypes.bool,
+  colIndex: PropTypes.number
 };

package/lib/es/table/TableHeaderRow.js

@@ -157,13 +157,19 @@ export default class TableHeaderRow extends BaseComponent {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(HeaderCell, _Object$assign({}, props, {
+      return /*#__PURE__*/React.createElement(HeaderCell, _Object$assign({
+        role: "columnheader",
+        "aria-colindex": cellIndex + 1
+      }, props, {
         style: cellStyle,
         key: column.key || column.dataIndex || cellIndex
       }));
     });
 
-    return /*#__PURE__*/React.createElement(HeaderRow, _Object$assign({}, rowProps, {
+    return /*#__PURE__*/React.createElement(HeaderRow, _Object$assign({
+      role: "row",
+      "aria-rowindex": index + 1
+    }, rowProps, {
       style: style,
       ref: this.cacheRef
     }), cells);

package/lib/es/tabs/TabBar.js

@@ -57,6 +57,8 @@ class TabBar extends React.Component {
       } = this.props;
       const panelIcon = panel.icon ? this.renderIcon(panel.icon) : null;
       const closableIcon = type === 'card' && panel.closable ? /*#__PURE__*/React.createElement(IconClose, {
+        "aria-label": "Close",
+        role: "button",
         className: "".concat(cssClasses.TABS_TAB, "-icon-close"),
         onClick: e => deleteTabItem(panel.itemKey, e)
       }) : null;
@@ -69,16 +71,20 @@ class TabBar extends React.Component {
         };
       }
 
+      const isSelected = this._isActive(key);
+
       const className = cls(cssClasses.TABS_TAB, {
-        [cssClasses.TABS_TAB_ACTIVE]: this._isActive(key),
+        [cssClasses.TABS_TAB_ACTIVE]: isSelected,
         [cssClasses.TABS_TAB_DISABLED]: panel.disabled,
         ["".concat(cssClasses.TABS_TAB, "-small")]: size === 'small',
         ["".concat(cssClasses.TABS_TAB, "-medium")]: size === 'medium'
       });
       return /*#__PURE__*/React.createElement("div", _Object$assign({
         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)
@@ -154,6 +160,7 @@ class TabBar extends React.Component {
         style: dropdownStyle,
         trigger: 'hover'
       }, /*#__PURE__*/React.createElement("div", {
+        role: "presentation",
         className: arrowCls,
         onClick: e => this.handleArrowClick(items, pos)
       }, /*#__PURE__*/React.createElement(Button, {
@@ -264,7 +271,8 @@ class TabBar extends React.Component {
     const extra = this.renderExtra();
     const contents = collapsible ? this.renderCollapsedTab() : this.renderTabComponents(list);
     return /*#__PURE__*/React.createElement("div", _Object$assign({
-      role: "tab-list",
+      role: "tablist",
+      "aria-orientation": tabPosition === "left" ? "vertical" : "horizontal",
       className: classNames,
       style: style
     }, getDataAttr(restProps), {

package/lib/es/tabs/TabPane.js

@@ -105,7 +105,9 @@ class TabPane extends PureComponent {
     const shouldRender = this.shouldRender();
     return /*#__PURE__*/React.createElement("div", _Object$assign({
       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/es/tabs/index.js

@@ -328,7 +328,6 @@ class Tabs extends BaseComponent {
       }
     }, /*#__PURE__*/React.createElement("div", {
       ref: this.setContentRef,
-      role: "tab-content",
       className: tabContentCls,
       style: _Object$assign({}, contentStyle)
     }, content)));

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

package/lib/es/tagInput/index.js

@@ -45,6 +45,10 @@ class TagInput extends BaseComponent {
       this.foundation.handleClearBtn(e);
     };
 
+    this.handleClearEnterPress = e => {
+      this.foundation.handleClearEnterPress(e);
+    };
+
     this.handleTagClose = idx => {
       this.foundation.handleTagClose(idx);
     };
@@ -72,8 +76,21 @@ class TagInput extends BaseComponent {
       value,
       inputValue
     } = nextProps;
+    const {
+      tagsArray: prevTagsArray
+    } = prevState;
+    let tagsArray;
+
+    if (_isArray(value)) {
+      tagsArray = value;
+    } else if ('value' in nextProps && !value) {
+      tagsArray = [];
+    } else {
+      tagsArray = prevTagsArray;
+    }
+
     return {
-      tagsArray: _isArray(value) ? value : prevState.tagsArray,
+      tagsArray,
       inputValue: _isString(inputValue) ? inputValue : prevState.inputValue
     };
   }
@@ -151,8 +168,12 @@ class TagInput extends BaseComponent {
 
     if (showClear) {
       return /*#__PURE__*/React.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "Clear TagInput value",
         className: clearCls,
-        onClick: e => this.handleClearBtn(e)
+        onClick: e => this.handleClearBtn(e),
+        onKeyPress: e => this.handleClearEnterPress(e)
       }, /*#__PURE__*/React.createElement(IconClear, null));
     }
 
@@ -307,6 +328,9 @@ class TagInput extends BaseComponent {
     return /*#__PURE__*/React.createElement("div", {
       style: style,
       className: tagInputCls,
+      "aria-disabled": disabled,
+      "aria-label": this.props['aria-label'],
+      "aria-invalid": validateStatus === 'error',
       onMouseEnter: e => {
         this.handleInputMouseEnter(e);
       },
@@ -316,6 +340,7 @@ class TagInput extends BaseComponent {
     }, this.renderPrefix(), /*#__PURE__*/React.createElement("div", {
       className: wrapperCls
     }, this.renderTags(), /*#__PURE__*/React.createElement(Input, {
+      "aria-label": 'input value',
       ref: this.inputRef,
       className: inputCls,
       disabled: disabled,
@@ -372,7 +397,8 @@ TagInput.propTypes = {
   size: PropTypes.oneOf(strings.SIZE_SET),
   validateStatus: PropTypes.oneOf(strings.STATUS),
   prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  'aria-label': PropTypes.string
 };
 TagInput.defaultProps = {
   showClear: false,

package/lib/es/timePicker/TimePicker.d.ts

@@ -15,6 +15,11 @@ export interface Panel {
 export declare type BaseValueType = string | number | Date;
 export declare type Type = 'time' | 'timeRange';
 export declare type TimePickerProps = {
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean;
     className?: string;
@@ -35,6 +40,7 @@ export declare type TimePickerProps = {
     inputReadOnly?: boolean;
     inputStyle?: React.CSSProperties;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     locale?: Locale['TimePicker'];
     localeCode?: string;
     minuteStep?: number;
@@ -83,6 +89,11 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         inputStyle: PropTypes.Requireable<object>;
         panelHeader: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         panelFooter: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         clearText: PropTypes.Requireable<string>;
         value: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
@@ -124,6 +135,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         dateFnsLocale: PropTypes.Requireable<object>;
         zIndex: PropTypes.Requireable<string | number>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        insetLabelId: PropTypes.Requireable<string>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         type: PropTypes.Requireable<Type>;
         rangeSeparator: PropTypes.Requireable<string>;

package/lib/es/timePicker/TimePicker.js

@@ -291,6 +291,7 @@ export default class TimePicker extends BaseComponent {
       zIndex,
       getPopupContainer,
       insetLabel,
+      insetLabelId,
       inputStyle,
       showClear,
       panelHeader,
@@ -308,7 +309,7 @@ export default class TimePicker extends BaseComponent {
       motion,
       autoAdjustOverflow
     } = _a,
-          rest = __rest(_a, ["prefixCls", "placeholder", "disabled", "defaultValue", "className", "popupStyle", "size", "style", "locale", "localeCode", "zIndex", "getPopupContainer", "insetLabel", "inputStyle", "showClear", "panelHeader", "panelFooter", "rangeSeparator", "onOpenChange", "popupClassName", "hideDisabledOptions", "use12Hours", "minuteStep", "hourStep", "secondStep", "scrollItemProps", "triggerRender", "motion", "autoAdjustOverflow"]);
+          rest = __rest(_a, ["prefixCls", "placeholder", "disabled", "defaultValue", "className", "popupStyle", "size", "style", "locale", "localeCode", "zIndex", "getPopupContainer", "insetLabel", "insetLabelId", "inputStyle", "showClear", "panelHeader", "panelFooter", "rangeSeparator", "onOpenChange", "popupClassName", "hideDisabledOptions", "use12Hours", "minuteStep", "hourStep", "secondStep", "scrollItemProps", "triggerRender", "motion", "autoAdjustOverflow"]);
 
     const format = this.foundation.getDefaultFormatIfNeed();
     const position = this.foundation.getPosition();
@@ -337,6 +338,7 @@ export default class TimePicker extends BaseComponent {
       value: inputValue,
       onFocus: this.handleFocus,
       insetLabel,
+      insetLabelId,
       format,
       locale,
       localeCode,
@@ -387,6 +389,11 @@ export default class TimePicker extends BaseComponent {
 }
 TimePicker.contextType = ConfigContext;
 TimePicker.propTypes = _Object$assign(_Object$assign({
+  'aria-labelledby': PropTypes.string,
+  'aria-invalid': PropTypes.bool,
+  'aria-errormessage': PropTypes.string,
+  'aria-describedby': PropTypes.string,
+  'aria-required': PropTypes.bool,
   prefixCls: PropTypes.string,
   clearText: PropTypes.string,
   value: TimeShape,
@@ -425,6 +432,7 @@ TimePicker.propTypes = _Object$assign(_Object$assign({
   dateFnsLocale: PropTypes.object,
   zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   insetLabel: PropTypes.node,
+  insetLabelId: PropTypes.string,
   validateStatus: PropTypes.oneOf(strings.STATUS),
   type: PropTypes.oneOf(strings.TYPES),
   rangeSeparator: PropTypes.string,

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

@@ -11,6 +11,11 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         inputStyle: import("prop-types").Requireable<object>;
         panelHeader: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         panelFooter: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+        'aria-labelledby': import("prop-types").Requireable<string>;
+        'aria-invalid': import("prop-types").Requireable<boolean>;
+        'aria-errormessage': import("prop-types").Requireable<string>;
+        'aria-describedby': import("prop-types").Requireable<string>;
+        'aria-required': import("prop-types").Requireable<boolean>;
         prefixCls: import("prop-types").Requireable<string>;
         clearText: import("prop-types").Requireable<string>;
         value: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
@@ -52,6 +57,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         dateFnsLocale: import("prop-types").Requireable<object>;
         zIndex: import("prop-types").Requireable<string | number>;
         insetLabel: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+        insetLabelId: import("prop-types").Requireable<string>;
         validateStatus: import("prop-types").Requireable<"default" | "error" | "warning" | "success">;
         type: import("prop-types").Requireable<import("./TimePicker").Type>;
         rangeSeparator: import("prop-types").Requireable<string>;

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

@@ -6,7 +6,7 @@ export { TimelineItemProps } from './item';
 export interface Data extends TimelineItemProps {
     content: React.ReactNode;
 }
-export interface TimelineProps {
+export interface TimelineProps extends Pick<React.AriaAttributes, 'aria-label'> {
     mode?: 'left' | 'right' | 'center' | 'alternate';
     className?: string;
     style?: React.CSSProperties;