@douyinfe/semi-ui 2.2.0 → 2.3.0

package/lib/cjs/tagInput/index.js

@@ -78,6 +78,10 @@ class TagInput extends _baseComponent.default {
       this.foundation.handleClearBtn(e);
     };
 
+    this.handleClearEnterPress = e => {
+      this.foundation.handleClearEnterPress(e);
+    };
+
     this.handleTagClose = idx => {
       this.foundation.handleTagClose(idx);
     };
@@ -105,8 +109,21 @@ class TagInput extends _baseComponent.default {
       value,
       inputValue
     } = nextProps;
+    const {
+      tagsArray: prevTagsArray
+    } = prevState;
+    let tagsArray;
+
+    if ((0, _isArray2.default)(value)) {
+      tagsArray = value;
+    } else if ('value' in nextProps && !value) {
+      tagsArray = [];
+    } else {
+      tagsArray = prevTagsArray;
+    }
+
     return {
-      tagsArray: (0, _isArray2.default)(value) ? value : prevState.tagsArray,
+      tagsArray,
       inputValue: (0, _isString2.default)(inputValue) ? inputValue : prevState.inputValue
     };
   }
@@ -184,8 +201,12 @@ class TagInput extends _baseComponent.default {
 
     if (showClear) {
       return /*#__PURE__*/_react.default.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.default.createElement(_semiIcons.IconClear, null));
     }
 
@@ -338,6 +359,9 @@ class TagInput extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement("div", {
       style: style,
       className: tagInputCls,
+      "aria-disabled": disabled,
+      "aria-label": this.props['aria-label'],
+      "aria-invalid": validateStatus === 'error',
       onMouseEnter: e => {
         this.handleInputMouseEnter(e);
       },
@@ -347,6 +371,7 @@ class TagInput extends _baseComponent.default {
     }, this.renderPrefix(), /*#__PURE__*/_react.default.createElement("div", {
       className: wrapperCls
     }, this.renderTags(), /*#__PURE__*/_react.default.createElement(_input.default, {
+      "aria-label": 'input value',
       ref: this.inputRef,
       className: inputCls,
       disabled: disabled,
@@ -403,7 +428,8 @@ TagInput.propTypes = {
   size: _propTypes.default.oneOf(_constants.strings.SIZE_SET),
   validateStatus: _propTypes.default.oneOf(_constants.strings.STATUS),
   prefix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
-  suffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+  suffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  'aria-label': _propTypes.default.string
 };
 TagInput.defaultProps = {
   showClear: false,

package/lib/cjs/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/cjs/timePicker/TimePicker.js

@@ -325,6 +325,7 @@ class TimePicker extends _baseComponent.default {
       zIndex,
       getPopupContainer,
       insetLabel,
+      insetLabelId,
       inputStyle,
       showClear,
       panelHeader,
@@ -342,7 +343,7 @@ class TimePicker extends _baseComponent.default {
       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();
@@ -370,6 +371,7 @@ class TimePicker extends _baseComponent.default {
       value: inputValue,
       onFocus: this.handleFocus,
       insetLabel,
+      insetLabelId,
       format,
       locale,
       localeCode,
@@ -421,6 +423,11 @@ class TimePicker extends _baseComponent.default {
 exports.default = TimePicker;
 TimePicker.contextType = _context3.default;
 TimePicker.propTypes = (0, _assign.default)((0, _assign.default)({
+  'aria-labelledby': _propTypes.default.string,
+  'aria-invalid': _propTypes.default.bool,
+  'aria-errormessage': _propTypes.default.string,
+  'aria-describedby': _propTypes.default.string,
+  'aria-required': _propTypes.default.bool,
   prefixCls: _propTypes.default.string,
   clearText: _propTypes.default.string,
   value: _TimeShape.TimeShape,
@@ -459,6 +466,7 @@ TimePicker.propTypes = (0, _assign.default)((0, _assign.default)({
   dateFnsLocale: _propTypes.default.object,
   zIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   insetLabel: _propTypes.default.node,
+  insetLabelId: _propTypes.default.string,
   validateStatus: _propTypes.default.oneOf(_constants.strings.STATUS),
   type: _propTypes.default.oneOf(_constants.strings.TYPES),
   rangeSeparator: _propTypes.default.string,

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

package/lib/cjs/timeline/index.js

@@ -123,6 +123,7 @@ class Timeline extends _react.PureComponent {
 
     const items = childrenList || this.addClassName(children);
     return /*#__PURE__*/_react.default.createElement("ul", {
+      "aria-label": this.props['aria-label'],
       style: style,
       className: classString
     }, items);

package/lib/cjs/timeline/item.js

@@ -67,9 +67,11 @@ class Item extends _react.PureComponent {
       style: style,
       onClick: onClick
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-tail")
+      className: "".concat(prefixCls, "-tail"),
+      "aria-hidden": true
     }), /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
-      className: dotCls
+      className: dotCls,
+      "aria-hidden": true
     }, dotStyle), dot), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-content")
     }, children, extra && /*#__PURE__*/_react.default.createElement("div", {

package/lib/cjs/toast/toast.js

@@ -135,6 +135,8 @@ class Toast extends _baseComponent.default {
     const btnTheme = 'borderless';
     const btnSize = 'small';
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: 'alert',
+      "aria-label": "".concat(type ? type : 'default', " type"),
       className: toastCls,
       style: style,
       onMouseEnter: this.clearCloseTimer,

package/lib/cjs/tooltip/TriangleArrow.js

@@ -37,6 +37,7 @@ const TriangleArrow = props => {
         restProps = __rest(props, ["className", "style"]);
 
   return /*#__PURE__*/_react.default.createElement("svg", (0, _assign.default)({
+    "aria-hidden": true,
     className: className,
     style: style
   }, restProps, {

package/lib/cjs/tooltip/TriangleArrowVertical.js

@@ -37,6 +37,7 @@ const TriangleArrowVertical = props => {
         restProps = __rest(props, ["className", "style"]);
 
   return /*#__PURE__*/_react.default.createElement("svg", (0, _assign.default)({
+    "aria-hidden": true,
     className: className,
     style: style
   }, restProps, {

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

@@ -36,6 +36,7 @@ export interface TooltipProps extends BaseProps {
     showArrow?: boolean | React.ReactNode;
     zIndex?: number;
     rePosKey?: string | number;
+    role?: string;
     arrowBounding?: ArrowBounding;
     transformFromCenter?: boolean;
     arrowPointAtCenter?: boolean;
@@ -57,6 +58,8 @@ interface TooltipState {
     isInsert: boolean;
     placement: Position;
     transitionStyle: Record<string, any>;
+    isPositionUpdated: boolean;
+    id: string;
 }
 export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     static contextType: React.Context<import("../configProvider/context").ContextValue>;
@@ -92,30 +95,32 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         transformFromCenter: PropTypes.Requireable<boolean>;
         arrowPointAtCenter: PropTypes.Requireable<boolean>;
         stopPropagation: PropTypes.Requireable<boolean>;
+        role: PropTypes.Requireable<string>;
         wrapWhenSpecial: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
-        transformFromCenter: boolean;
+        arrowBounding: {
+            readonly offsetX: 0;
+            readonly offsetY: 2;
+            readonly width: 24;
+            readonly height: 7;
+        };
+        autoAdjustOverflow: boolean;
         arrowPointAtCenter: boolean;
-        wrapWhenSpecial: boolean;
-        motion: boolean;
-        zIndex: 1060;
         trigger: string;
+        transformFromCenter: boolean;
         position: string;
         prefixCls: "semi-tooltip";
-        autoAdjustOverflow: boolean;
+        role: string;
         mouseEnterDelay: 50;
         mouseLeaveDelay: 50;
+        motion: boolean;
         onVisibleChange: (...args: any[]) => void;
         onClickOutSide: (...args: any[]) => void;
         spacing: 8;
         showArrow: boolean;
-        arrowBounding: {
-            readonly offsetX: 0;
-            readonly offsetY: 2;
-            readonly width: 24;
-            readonly height: 7;
-        };
+        wrapWhenSpecial: boolean;
+        zIndex: 1060;
     };
     eventManager: Event;
     triggerEl: React.RefObject<unknown>;
@@ -135,7 +140,6 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     isSpecial: (elem: React.ReactNode | HTMLElement | any) => boolean | "disabled" | "loading";
-    willEnter: () => void;
     didLeave: () => void;
     /** for transition - end */
     rePosition(): any;

package/lib/cjs/tooltip/index.js

@@ -22,6 +22,8 @@ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-s
 
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
 
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
 var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
 
 var _each2 = _interopRequireDefault(require("lodash/each"));
@@ -54,6 +56,8 @@ var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/
 
 var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/tooltip/constants");
 
+var _uuid = require("@douyinfe/semi-foundation/lib/cjs/utils/uuid");
+
 require("@douyinfe/semi-foundation/lib/cjs/tooltip/tooltip.css");
 
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
@@ -127,18 +131,11 @@ class Tooltip extends _baseComponent.default {
       }
 
       return false;
-    };
+    }; // willEnter = () => {
+    // this.foundation.calcPosition();
+    // this.setState({ visible: true });
+    // };
 
-    this.willEnter = () => {
-      this.foundation.calcPosition();
-      /**
-       * Dangerous: remove setState in motion fix #1379
-       * because togglePortalVisible callback function will use visible state to notifyVisibleChange
-       * if visible state is old value, then notifyVisibleChange function will not be called
-       * we should ensure that after calling togglePortalVisible, callback function can get right visible value
-       */
-      // this.setState({ visible: true });
-    };
 
     this.didLeave = () => {
       this.adapter.unregisterClickOutsideHandler();
@@ -194,7 +191,9 @@ class Tooltip extends _baseComponent.default {
         visible,
         portalEventSet,
         placement,
-        transitionState
+        transitionState,
+        id,
+        isPositionUpdated
       } = this.state;
       const {
         prefixCls,
@@ -202,6 +201,7 @@ class Tooltip extends _baseComponent.default {
         showArrow,
         style,
         motion,
+        role,
         zIndex
       } = this.props;
       const {
@@ -217,9 +217,8 @@ class Tooltip extends _baseComponent.default {
       const icon = this.renderIcon();
       const portalInnerStyle = (0, _omit2.default)(containerStyle, motion ? ['transformOrigin'] : undefined);
       const transformOrigin = (0, _get2.default)(containerStyle, 'transformOrigin');
-      const inner = motion ? /*#__PURE__*/_react.default.createElement(_TooltipStyledTransition.default, {
+      const inner = motion && isPositionUpdated ? /*#__PURE__*/_react.default.createElement(_TooltipStyledTransition.default, {
         position: placement,
-        willEnter: this.willEnter,
         didLeave: this.didLeave,
         motion: motion
       }, transitionState === 'enter' ? _ref => {
@@ -230,13 +229,13 @@ class Tooltip extends _baseComponent.default {
         } = _ref;
         return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
           className: (0, _classnames.default)(className, animateCls),
-          style: (0, _assign.default)((0, _assign.default)((0, _assign.default)({
-            visibility: 'visible'
-          }, animateStyle), {
+          style: (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, animateStyle), {
             transformOrigin
           }), style)
         }, portalEventSet, animateEvents, {
-          "x-placement": placement
+          role: role,
+          "x-placement": placement,
+          id: id
         }), content, icon);
       } : null) : /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
         className: className
@@ -307,7 +306,10 @@ class Tooltip extends _baseComponent.default {
       },
       isInsert: false,
       placement: props.position || 'top',
-      transitionStyle: {}
+      transitionStyle: {},
+      isPositionUpdated: false,
+      id: (0, _uuid.getUuidShort)() // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
+
     };
     this.foundation = new _foundation.default(this.adapter);
     this.eventManager = new _Event.default();
@@ -345,18 +347,16 @@ class Tooltip extends _baseComponent.default {
           transitionState: 'enter',
           containerStyle: (0, _assign.default)((0, _assign.default)({}, this.state.containerStyle), containerStyle)
         }, () => {
-          /**
-           * Dangerous: remove setTimeout from here fix #1301
-           * setTimeout may emit portalInserted event after hiding portal
-           * Hiding portal will remove portalInserted event listener(normal process)
-           * then portal can't hide because _togglePortalVisible(false) will found isVisible=false and nowVisible=false(bug here)
-           */
-          this.eventManager.emit('portalInserted');
+          (0, _setTimeout2.default)(() => {
+            // waiting child component mounted
+            this.eventManager.emit('portalInserted');
+          }, 0);
         });
       },
       removePortal: () => {
         this.setState({
-          isInsert: false
+          isInsert: false,
+          isPositionUpdated: false
         });
       },
       getEventName: () => ({
@@ -438,7 +438,8 @@ class Tooltip extends _baseComponent.default {
 
         this.setState({
           containerStyle: (0, _assign.default)((0, _assign.default)({}, this.state.containerStyle), style),
-          placement: position
+          placement: position,
+          isPositionUpdated: true
         }, () => {
           this.eventManager.emit('positionUpdated');
         });
@@ -596,10 +597,13 @@ class Tooltip extends _baseComponent.default {
   render() {
     const {
       isInsert,
-      triggerEventSet
+      triggerEventSet,
+      visible,
+      id
     } = this.state;
     const {
-      wrapWhenSpecial
+      wrapWhenSpecial,
+      role
     } = this.props;
     let {
       children
@@ -626,13 +630,23 @@ class Tooltip extends _baseComponent.default {
         children = this.wrapSpan(children);
         this.isWrapped = true;
       }
+    } // eslint-disable-next-line prefer-const
+
+
+    let ariaAttribute = {}; // Take effect when used by Popover component
+
+    if (role === 'dialog') {
+      ariaAttribute['aria-expanded'] = visible ? 'true' : 'false';
+      ariaAttribute['aria-haspopup'] = 'dialog';
+      ariaAttribute['aria-controls'] = id;
+    } else {
+      ariaAttribute['aria-describedby'] = id;
     } // The incoming children is a single valid element, otherwise wrap a layer with span
 
 
-    const newChild = /*#__PURE__*/_react.default.cloneElement(children, (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, children.props), this.mergeEvents(children.props, triggerEventSet)), {
+    const newChild = /*#__PURE__*/_react.default.cloneElement(children, (0, _assign.default)((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, ariaAttribute), children.props), this.mergeEvents(children.props, triggerEventSet)), {
       style: (0, _assign.default)((0, _assign.default)({}, (0, _get2.default)(children, 'props.style')), extraStyle),
-      className: (0, _classnames.default)((0, _get2.default)(children, 'props.className') // `${prefixCls}-trigger`
-      ),
+      className: (0, _classnames.default)((0, _get2.default)(children, 'props.className')),
       // to maintain refs with callback
       ref: node => {
         // Keep your own reference
@@ -688,24 +702,26 @@ Tooltip.propTypes = {
   arrowPointAtCenter: _propTypes.default.bool,
   stopPropagation: _propTypes.default.bool,
   // private
+  role: _propTypes.default.string,
   wrapWhenSpecial: _propTypes.default.bool // when trigger has special status such as "disabled" or "loading", wrap span
 
 };
 Tooltip.defaultProps = {
-  transformFromCenter: true,
+  arrowBounding: _constants2.numbers.ARROW_BOUNDING,
+  autoAdjustOverflow: true,
   arrowPointAtCenter: true,
-  wrapWhenSpecial: true,
-  motion: true,
-  zIndex: _constants2.numbers.DEFAULT_Z_INDEX,
   trigger: 'hover',
+  transformFromCenter: true,
   position: 'top',
   prefixCls: prefix,
-  autoAdjustOverflow: true,
+  role: 'tooltip',
   mouseEnterDelay: _constants2.numbers.MOUSE_ENTER_DELAY,
   mouseLeaveDelay: _constants2.numbers.MOUSE_LEAVE_DELAY,
+  motion: true,
   onVisibleChange: _noop2.default,
   onClickOutSide: _noop2.default,
   spacing: _constants2.numbers.SPACING,
   showArrow: true,
-  arrowBounding: _constants2.numbers.ARROW_BOUNDING
+  wrapWhenSpecial: true,
+  zIndex: _constants2.numbers.DEFAULT_Z_INDEX
 };

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

@@ -152,7 +152,7 @@ declare class Transfer extends BaseComponent<TransferProps, TransferState> {
     renderHeader(headerConfig: HeaderConfig): JSX.Element;
     renderLeftItem(item: ResolvedDataItem, index: number): React.ReactNode;
     renderLeft(locale: Locale['Transfer']): React.ReactNode;
-    renderGroupTitle(group: GroupItem): JSX.Element;
+    renderGroupTitle(group: GroupItem, index: number): JSX.Element;
     renderLeftTree(): JSX.Element;
     renderLeftList(visibileItems: Array<ResolvedDataItem>): JSX.Element;
     renderRightItem(item: ResolvedDataItem): React.ReactNode;

package/lib/cjs/transfer/index.js

@@ -209,6 +209,8 @@ class Transfer extends _baseComponent.default {
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "search",
+      "aria-label": "Transfer filter",
       className: "".concat(prefixcls, "-filter")
     }, /*#__PURE__*/_react.default.createElement(_index2.default, (0, _assign.default)({
       prefix: /*#__PURE__*/_react.default.createElement(_semiIcons.IconSearch, null),
@@ -276,6 +278,7 @@ class Transfer extends _baseComponent.default {
       disabled: item.disabled || disabled,
       className: leftItemCls,
       checked: checked,
+      role: "listitem",
       onChange: () => this.onSelectOrRemove(item)
     }, item.label);
   }
@@ -373,11 +376,11 @@ class Transfer extends _baseComponent.default {
     }, inputCom, content);
   }
 
-  renderGroupTitle(group) {
+  renderGroupTitle(group, index) {
     const groupCls = (0, _classnames.default)("".concat(prefixcls, "-group-title"));
     return /*#__PURE__*/_react.default.createElement("div", {
       className: groupCls,
-      key: group.title
+      key: "title-".concat(index)
     }, group.title);
   }
 
@@ -432,7 +435,7 @@ class Transfer extends _baseComponent.default {
         // group content already insert
         content.push(optionContent);
       } else if (parentGroup) {
-        const groupContent = this.renderGroupTitle(parentGroup);
+        const groupContent = this.renderGroupTitle(parentGroup, index);
         groupStatus.set(parentGroup.title, true);
         content.push(groupContent);
         content.push(optionContent);
@@ -441,7 +444,9 @@ class Transfer extends _baseComponent.default {
       }
     });
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixcls, "-left-list")
+      className: "".concat(prefixcls, "-left-list"),
+      role: "list",
+      "aria-label": "Option list"
     }, content);
   }
 
@@ -479,19 +484,27 @@ class Transfer extends _baseComponent.default {
     }
 
     const DragHandle = (0, _reactSortableHoc.SortableHandle)(() => /*#__PURE__*/_react.default.createElement(_semiIcons.IconHandle, {
+      role: "button",
+      "aria-label": "Drag and sort",
       className: "".concat(prefixcls, "-right-item-drag-handler")
     }));
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: rightItemCls,
-      key: newItem.key
-    }, draggable ? /*#__PURE__*/_react.default.createElement(DragHandle, null) : null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixcls, "-right-item-text")
-    }, label), /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
-      onClick: onRemove,
-      className: (0, _classnames.default)("".concat(prefixcls, "-item-close-icon"), {
-        ["".concat(prefixcls, "-item-close-icon-disabled")]: item.disabled
-      })
-    }));
+    return (
+      /*#__PURE__*/
+      // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+      _react.default.createElement("div", {
+        role: "listitem",
+        className: rightItemCls,
+        key: newItem.key
+      }, draggable ? /*#__PURE__*/_react.default.createElement(DragHandle, null) : null, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixcls, "-right-item-text")
+      }, label), /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
+        onClick: onRemove,
+        "aria-disabled": item.disabled,
+        className: (0, _classnames.default)("".concat(prefixcls, "-item-close-icon"), {
+          ["".concat(prefixcls, "-item-close-icon-disabled")]: item.disabled
+        })
+      }))
+    );
   }
 
   renderEmpty(type, emptyText) {
@@ -501,6 +514,7 @@ class Transfer extends _baseComponent.default {
       ["".concat(prefixcls, "-left-empty")]: type === 'left'
     });
     return /*#__PURE__*/_react.default.createElement("div", {
+      "aria-label": "empty",
       className: emptyCls
     }, emptyText);
   }
@@ -513,7 +527,9 @@ class Transfer extends _baseComponent.default {
         items
       } = _ref;
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixcls, "-right-list")
+        className: "".concat(prefixcls, "-right-list"),
+        role: "list",
+        "aria-label": "Selected list"
       }, (0, _map2.default)(items).call(items, (item, index) =>
       /*#__PURE__*/
       // sortableElement will take over the property 'key', so use another '_optionKey' to pass
@@ -583,7 +599,9 @@ class Transfer extends _baseComponent.default {
 
       case selectedData.length && !draggable:
         const list = /*#__PURE__*/_react.default.createElement("div", {
-          className: "".concat(prefixcls, "-right-list")
+          className: "".concat(prefixcls, "-right-list"),
+          role: "list",
+          "aria-label": "Selected list"
         }, (0, _map2.default)(selectedData).call(selectedData, item => this.renderRightItem((0, _assign.default)({}, item))));
 
         content = list;

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

@@ -70,6 +70,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
         onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
         onDrop: PropTypes.Requireable<(...args: any[]) => any>;
         labelEllipsis: PropTypes.Requireable<boolean>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
         showClear: boolean;