@douyinfe/semi-ui 2.2.1 → 2.3.1

package/lib/es/timeline/index.js

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

package/lib/es/timeline/item.js

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

package/lib/es/toast/toast.js

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

package/lib/es/tooltip/TriangleArrow.js

@@ -23,6 +23,7 @@ const TriangleArrow = props => {
         restProps = __rest(props, ["className", "style"]);
 
   return /*#__PURE__*/React.createElement("svg", _Object$assign({
+    "aria-hidden": true,
     className: className,
     style: style
   }, restProps, {

package/lib/es/tooltip/TriangleArrowVertical.js

@@ -23,6 +23,7 @@ const TriangleArrowVertical = props => {
         restProps = __rest(props, ["className", "style"]);
 
   return /*#__PURE__*/React.createElement("svg", _Object$assign({
+    "aria-hidden": true,
     className: className,
     style: style
   }, restProps, {

package/lib/es/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/es/tooltip/index.js

@@ -8,6 +8,7 @@ import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -32,6 +33,7 @@ import Event from '@douyinfe/semi-foundation/lib/es/utils/Event';
 import { convertDOMRectToObject } from '@douyinfe/semi-foundation/lib/es/utils/dom';
 import TooltipFoundation from '@douyinfe/semi-foundation/lib/es/tooltip/foundation';
 import { strings, cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/tooltip/constants';
+import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 import '@douyinfe/semi-foundation/lib/es/tooltip/tooltip.css';
 import BaseComponent from '../_base/baseComponent';
 import { isHTMLElement } from '../_base/reactUtils';
@@ -79,18 +81,11 @@ export default class Tooltip extends BaseComponent {
       }
 
       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();
@@ -148,7 +143,9 @@ export default class Tooltip extends BaseComponent {
         visible,
         portalEventSet,
         placement,
-        transitionState
+        transitionState,
+        id,
+        isPositionUpdated
       } = this.state;
       const {
         prefixCls,
@@ -156,6 +153,7 @@ export default class Tooltip extends BaseComponent {
         showArrow,
         style,
         motion,
+        role,
         zIndex
       } = this.props;
       const {
@@ -174,9 +172,8 @@ export default class Tooltip extends BaseComponent {
 
       const transformOrigin = _get(containerStyle, 'transformOrigin');
 
-      const inner = motion ? /*#__PURE__*/React.createElement(TooltipTransition, {
+      const inner = motion && isPositionUpdated ? /*#__PURE__*/React.createElement(TooltipTransition, {
         position: placement,
-        willEnter: this.willEnter,
         didLeave: this.didLeave,
         motion: motion
       }, transitionState === 'enter' ? _ref => {
@@ -187,13 +184,13 @@ export default class Tooltip extends BaseComponent {
         } = _ref;
         return /*#__PURE__*/React.createElement("div", _Object$assign({
           className: classNames(className, animateCls),
-          style: _Object$assign(_Object$assign(_Object$assign({
-            visibility: 'visible'
-          }, animateStyle), {
+          style: _Object$assign(_Object$assign(_Object$assign({}, animateStyle), {
             transformOrigin
           }), style)
         }, portalEventSet, animateEvents, {
-          "x-placement": placement
+          role: role,
+          "x-placement": placement,
+          id: id
         }), content, icon);
       } : null) : /*#__PURE__*/React.createElement("div", _Object$assign({
         className: className
@@ -269,7 +266,10 @@ export default class Tooltip extends BaseComponent {
       },
       isInsert: false,
       placement: props.position || 'top',
-      transitionStyle: {}
+      transitionStyle: {},
+      isPositionUpdated: false,
+      id: getUuidShort() // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
+
     };
     this.foundation = new TooltipFoundation(this.adapter);
     this.eventManager = new Event();
@@ -307,18 +307,16 @@ export default class Tooltip extends BaseComponent {
           transitionState: 'enter',
           containerStyle: _Object$assign(_Object$assign({}, 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');
+          _setTimeout(() => {
+            // waiting child component mounted
+            this.eventManager.emit('portalInserted');
+          }, 0);
         });
       },
       removePortal: () => {
         this.setState({
-          isInsert: false
+          isInsert: false,
+          isPositionUpdated: false
         });
       },
       getEventName: () => ({
@@ -399,7 +397,8 @@ export default class Tooltip extends BaseComponent {
 
         this.setState({
           containerStyle: _Object$assign(_Object$assign({}, this.state.containerStyle), style),
-          placement: position
+          placement: position,
+          isPositionUpdated: true
         }, () => {
           this.eventManager.emit('positionUpdated');
         });
@@ -557,10 +556,13 @@ export default class Tooltip extends BaseComponent {
   render() {
     const {
       isInsert,
-      triggerEventSet
+      triggerEventSet,
+      visible,
+      id
     } = this.state;
     const {
-      wrapWhenSpecial
+      wrapWhenSpecial,
+      role
     } = this.props;
     let {
       children
@@ -589,13 +591,23 @@ export default class Tooltip extends BaseComponent {
         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.cloneElement(children, _Object$assign(_Object$assign(_Object$assign({}, children.props), this.mergeEvents(children.props, triggerEventSet)), {
+    const newChild = /*#__PURE__*/React.cloneElement(children, _Object$assign(_Object$assign(_Object$assign(_Object$assign({}, ariaAttribute), children.props), this.mergeEvents(children.props, triggerEventSet)), {
       style: _Object$assign(_Object$assign({}, _get(children, 'props.style')), extraStyle),
-      className: classNames(_get(children, 'props.className') // `${prefixCls}-trigger`
-      ),
+      className: classNames(_get(children, 'props.className')),
       // to maintain refs with callback
       ref: node => {
         // Keep your own reference
@@ -648,24 +660,26 @@ Tooltip.propTypes = {
   arrowPointAtCenter: PropTypes.bool,
   stopPropagation: PropTypes.bool,
   // private
+  role: PropTypes.string,
   wrapWhenSpecial: PropTypes.bool // when trigger has special status such as "disabled" or "loading", wrap span
 
 };
 Tooltip.defaultProps = {
-  transformFromCenter: true,
+  arrowBounding: numbers.ARROW_BOUNDING,
+  autoAdjustOverflow: true,
   arrowPointAtCenter: true,
-  wrapWhenSpecial: true,
-  motion: true,
-  zIndex: numbers.DEFAULT_Z_INDEX,
   trigger: 'hover',
+  transformFromCenter: true,
   position: 'top',
   prefixCls: prefix,
-  autoAdjustOverflow: true,
+  role: 'tooltip',
   mouseEnterDelay: numbers.MOUSE_ENTER_DELAY,
   mouseLeaveDelay: numbers.MOUSE_LEAVE_DELAY,
+  motion: true,
   onVisibleChange: _noop,
   onClickOutSide: _noop,
   spacing: numbers.SPACING,
   showArrow: true,
-  arrowBounding: numbers.ARROW_BOUNDING
+  wrapWhenSpecial: true,
+  zIndex: numbers.DEFAULT_Z_INDEX
 };

package/lib/es/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/es/transfer/index.js

@@ -167,6 +167,8 @@ class Transfer extends BaseComponent {
     }
 
     return /*#__PURE__*/React.createElement("div", {
+      role: "search",
+      "aria-label": "Transfer filter",
       className: "".concat(prefixcls, "-filter")
     }, /*#__PURE__*/React.createElement(Input, _Object$assign({
       prefix: /*#__PURE__*/React.createElement(IconSearch, null),
@@ -234,6 +236,7 @@ class Transfer extends BaseComponent {
       disabled: item.disabled || disabled,
       className: leftItemCls,
       checked: checked,
+      role: "listitem",
       onChange: () => this.onSelectOrRemove(item)
     }, item.label);
   }
@@ -329,11 +332,11 @@ class Transfer extends BaseComponent {
     }, inputCom, content);
   }
 
-  renderGroupTitle(group) {
+  renderGroupTitle(group, index) {
     const groupCls = cls("".concat(prefixcls, "-group-title"));
     return /*#__PURE__*/React.createElement("div", {
       className: groupCls,
-      key: group.title
+      key: "title-".concat(index)
     }, group.title);
   }
 
@@ -390,7 +393,7 @@ class Transfer extends BaseComponent {
         // 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);
@@ -400,7 +403,9 @@ class Transfer extends BaseComponent {
     });
 
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixcls, "-left-list")
+      className: "".concat(prefixcls, "-left-list"),
+      role: "list",
+      "aria-label": "Option list"
     }, content);
   }
 
@@ -438,19 +443,27 @@ class Transfer extends BaseComponent {
     }
 
     const DragHandle = SortableHandle(() => /*#__PURE__*/React.createElement(IconHandle, {
+      role: "button",
+      "aria-label": "Drag and sort",
       className: "".concat(prefixcls, "-right-item-drag-handler")
     }));
-    return /*#__PURE__*/React.createElement("div", {
-      className: rightItemCls,
-      key: newItem.key
-    }, draggable ? /*#__PURE__*/React.createElement(DragHandle, null) : null, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixcls, "-right-item-text")
-    }, label), /*#__PURE__*/React.createElement(IconClose, {
-      onClick: onRemove,
-      className: cls("".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.createElement("div", {
+        role: "listitem",
+        className: rightItemCls,
+        key: newItem.key
+      }, draggable ? /*#__PURE__*/React.createElement(DragHandle, null) : null, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixcls, "-right-item-text")
+      }, label), /*#__PURE__*/React.createElement(IconClose, {
+        onClick: onRemove,
+        "aria-disabled": item.disabled,
+        className: cls("".concat(prefixcls, "-item-close-icon"), {
+          ["".concat(prefixcls, "-item-close-icon-disabled")]: item.disabled
+        })
+      }))
+    );
   }
 
   renderEmpty(type, emptyText) {
@@ -460,6 +473,7 @@ class Transfer extends BaseComponent {
       ["".concat(prefixcls, "-left-empty")]: type === 'left'
     });
     return /*#__PURE__*/React.createElement("div", {
+      "aria-label": "empty",
       className: emptyCls
     }, emptyText);
   }
@@ -472,7 +486,9 @@ class Transfer extends BaseComponent {
         items
       } = _ref;
       return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixcls, "-right-list")
+        className: "".concat(prefixcls, "-right-list"),
+        role: "list",
+        "aria-label": "Selected list"
       }, _mapInstanceProperty(items).call(items, (item, index) =>
       /*#__PURE__*/
       // sortableElement will take over the property 'key', so use another '_optionKey' to pass
@@ -540,7 +556,9 @@ class Transfer extends BaseComponent {
 
       case selectedData.length && !draggable:
         const list = /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixcls, "-right-list")
+          className: "".concat(prefixcls, "-right-list"),
+          role: "list",
+          "aria-label": "Selected list"
         }, _mapInstanceProperty(selectedData).call(selectedData, item => this.renderRightItem(_Object$assign({}, item))));
         content = list;
         break;

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

package/lib/es/tree/index.js

@@ -504,6 +504,7 @@ class Tree extends BaseComponent {
       }
 
       return /*#__PURE__*/React.createElement(Input, _Object$assign({
+        "aria-label": 'Filter Tree',
         ref: this.inputRef
       }, inputProps));
     }));
@@ -606,6 +607,14 @@ class Tree extends BaseComponent {
     });
     const searchNoRes = Boolean(inputValue) && !filteredKeys.size;
     const noData = _isEmpty(keyEntities) || showFilteredOnly && searchNoRes;
+    const ariaAttr = {
+      role: noData ? 'none' : 'tree'
+    };
+
+    if (ariaAttr.role === 'tree') {
+      ariaAttr['aria-multiselectable'] = multiple ? true : false;
+    }
+
     return /*#__PURE__*/React.createElement(TreeContext.Provider, {
       value: {
         treeDisabled: disabled,
@@ -643,13 +652,12 @@ class Tree extends BaseComponent {
         labelEllipsis: typeof labelEllipsis === 'undefined' ? virtualize : labelEllipsis
       }
     }, /*#__PURE__*/React.createElement("div", {
+      "aria-label": this.props['aria-label'],
       className: wrapperCls,
-      role: "list-box",
       style: style
-    }, filterTreeNode ? this.renderInput() : null, /*#__PURE__*/React.createElement("div", {
-      className: listCls,
-      role: "tree"
-    }, noData ? this.renderEmpty() : this.renderNodeList())));
+    }, filterTreeNode ? this.renderInput() : null, /*#__PURE__*/React.createElement("div", _Object$assign({
+      className: listCls
+    }, ariaAttr), noData ? this.renderEmpty() : this.renderNodeList())));
   }
 
 }
@@ -714,7 +722,8 @@ Tree.propTypes = {
   onDragOver: PropTypes.func,
   onDragStart: PropTypes.func,
   onDrop: PropTypes.func,
-  labelEllipsis: PropTypes.bool
+  labelEllipsis: PropTypes.bool,
+  'aria-label': PropTypes.string
 };
 Tree.defaultProps = {
   showClear: true,

package/lib/es/tree/treeNode.d.ts

@@ -29,11 +29,19 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
     debounceSelect: any;
     refNode: HTMLElement;
     constructor(props: TreeNodeProps);
-    onSelect: (e: React.MouseEvent) => void;
-    onExpand: (e: React.MouseEvent) => void;
-    onCheck: (e: React.MouseEvent) => void;
+    onSelect: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    onExpand: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    onCheck: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * A11y: simulate checkbox click
+     */
+    handleCheckEnterPress: (e: React.KeyboardEvent) => void;
     onContextMenu: (e: React.MouseEvent) => void;
-    onClick: (e: React.MouseEvent) => void;
+    onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * A11y: simulate li click
+     */
+    handleliEnterPress: (e: React.KeyboardEvent) => void;
     onDoubleClick: (e: React.MouseEvent) => void;
     onDragStart: (e: React.DragEvent) => void;
     onDragEnter: (e: React.DragEvent) => void;

package/lib/es/tree/treeNode.js

@@ -1,3 +1,4 @@
+import _get from "lodash/get";
 import _isString from "lodash/isString";
 import _isFunction from "lodash/isFunction";
 import _debounce from "lodash/debounce";
@@ -22,6 +23,7 @@ import React, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/tree/constants';
+import isEnterPress from '@douyinfe/semi-foundation/lib/es/utils/isEnterPress';
 import { IconTreeTriangleDown, IconFile, IconFolder, IconFolderOpen } from '@douyinfe/semi-icons';
 import { Checkbox } from '../checkbox';
 import TreeContext from './treeContext';
@@ -59,6 +61,16 @@ export default class TreeNode extends PureComponent {
       e.nativeEvent.stopImmediatePropagation();
       onNodeCheck(e, this.props);
     };
+    /**
+     * A11y: simulate checkbox click
+     */
+
+
+    this.handleCheckEnterPress = e => {
+      if (isEnterPress(e)) {
+        this.onCheck(e);
+      }
+    };
 
     this.onContextMenu = e => {
       const {
@@ -83,6 +95,16 @@ export default class TreeNode extends PureComponent {
         this.onExpand(e);
       }
     };
+    /**
+     * A11y: simulate li click
+     */
+
+
+    this.handleliEnterPress = e => {
+      if (isEnterPress(e)) {
+        this.onClick(e);
+      }
+    };
 
     this.onDoubleClick = e => {
       const {
@@ -260,7 +282,8 @@ export default class TreeNode extends PureComponent {
   renderArrow() {
     const showIcon = !this.isLeaf();
     const {
-      loading
+      loading,
+      expanded
     } = this.props;
 
     if (loading) {
@@ -271,6 +294,8 @@ export default class TreeNode extends PureComponent {
 
     if (showIcon) {
       return /*#__PURE__*/React.createElement(IconTreeTriangleDown, {
+        role: 'button',
+        "aria-label": "".concat(expanded ? 'Expand' : 'Collapse', " the tree item"),
         className: "".concat(prefixcls, "-expand-icon"),
         size: "small",
         onClick: this.onExpand
@@ -289,8 +314,11 @@ export default class TreeNode extends PureComponent {
     } = this.props;
     const disabled = this.isDisabled();
     return /*#__PURE__*/React.createElement("div", {
-      onClick: this.onCheck
+      role: 'none',
+      onClick: this.onCheck,
+      onKeyPress: this.handleCheckEnterPress
     }, /*#__PURE__*/React.createElement(Checkbox, {
+      "aria-label": 'Toggle the checked state of checkbox',
       indeterminate: halfChecked,
       checked: checked,
       disabled: Boolean(disabled)
@@ -343,7 +371,7 @@ export default class TreeNode extends PureComponent {
     });
     return /*#__PURE__*/React.createElement("ul", {
       className: wrapperCls
-    }, /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React.createElement("li", {
       className: _concatInstanceProperty(_context2 = "".concat(prefixcls, "-label ")).call(_context2, prefixcls, "-label-empty")
     }, emptyContent));
   } // eslint-disable-next-line max-lines-per-function
@@ -450,11 +478,23 @@ export default class TreeNode extends PureComponent {
       ["".concat(prefixcls, "-drag-over-gap-top")]: !disabled && dragOverGapTop,
       ["".concat(prefixcls, "-drag-over-gap-bottom")]: !disabled && dragOverGapBottom
     });
+
+    const setsize = _get(rest, ['data', 'children', 'length']);
+
+    const posinset = _isString(rest.pos) ? Number(rest.pos.split('-')[level + 1]) + 1 : 1;
     return /*#__PURE__*/React.createElement("li", _Object$assign({
       className: nodeCls,
-      role: "treenode",
+      role: "treeitem",
+      "aria-disabled": disabled,
+      "aria-checked": checked,
+      "aria-selected": selected,
+      "aria-setsize": setsize,
+      "aria-posinset": posinset,
+      "aria-expanded": expanded,
+      "aria-level": level + 1,
       "data-key": eventKey,
       onClick: this.onClick,
+      onKeyPress: this.handleliEnterPress,
       onContextMenu: this.onContextMenu,
       onDoubleClick: this.onDoubleClick,
       ref: this.setRef,