@douyinfe/semi-ui 2.2.0-beta.1 → 2.3.0-beta.0

package/lib/es/treeSelect/index.js

@@ -10,6 +10,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom';
@@ -44,6 +45,8 @@ const key = 0;
 
 class TreeSelect extends BaseComponent {
   constructor(props) {
+    var _context2;
+
     super(props);
 
     this.renderSuffix = () => {
@@ -63,7 +66,8 @@ class TreeSelect extends BaseComponent {
     this.renderPrefix = () => {
       const {
         prefix,
-        insetLabel
+        insetLabel,
+        insetLabelId
       } = this.props;
       const labelNode = prefix || insetLabel;
       const prefixWrapperCls = cls({
@@ -74,7 +78,8 @@ class TreeSelect extends BaseComponent {
         ["".concat(prefixcls, "-prefix-icon")]: isSemiIcon(labelNode)
       });
       return /*#__PURE__*/React.createElement("div", {
-        className: prefixWrapperCls
+        className: prefixWrapperCls,
+        id: insetLabelId
       }, labelNode);
     };
 
@@ -94,7 +99,6 @@ class TreeSelect extends BaseComponent {
       const popoverCls = cls(dropdownClassName, "".concat(prefixcls, "-popover"));
       return /*#__PURE__*/React.createElement("div", {
         className: popoverCls,
-        role: "list-box",
         style: style
       }, this.renderTree());
     };
@@ -107,6 +111,10 @@ class TreeSelect extends BaseComponent {
       this.foundation.handleClick(e);
     };
 
+    this.handleSelectionEnterPress = e => {
+      this.foundation.handleSelectionEnterPress(e);
+    };
+
     this.showClearBtn = () => {
       const {
         searchPosition
@@ -275,6 +283,11 @@ class TreeSelect extends BaseComponent {
       this.foundation.handleClear(e);
     };
 
+    this.handleClearEnterPress = e => {
+      e && e.stopPropagation();
+      this.foundation.handleClearEnterPress(e);
+    };
+
     this.handleMouseOver = e => {
       this.foundation.toggleHoverState(true);
     };
@@ -312,8 +325,12 @@ class TreeSelect extends BaseComponent {
 
       if (showClearBtn) {
         return /*#__PURE__*/React.createElement("div", {
+          role: 'button',
+          tabIndex: 0,
+          "aria-label": "Clear TreeSelect value",
           className: clearCls,
-          onClick: this.handleClear
+          onClick: this.handleClear,
+          onKeyPress: this.handleClearEnterPress
         }, /*#__PURE__*/React.createElement(IconClear, null));
       }
 
@@ -397,11 +414,29 @@ class TreeSelect extends BaseComponent {
       }, showClear || isTriggerPositionSearch && inputValue ? this.renderClearBtn() : null), /*#__PURE__*/React.createElement(Fragment, {
         key: 'arrow'
       }, this.renderArrow())];
+      const tabIndex = disabled ? null : 0;
+      /**
+       * Reasons for disabling the a11y eslint rule:
+       * The following attributes(aria-controls,aria-expanded) will be automatically added by Tooltip, no need to declare here
+       */
+
       return /*#__PURE__*/React.createElement("div", _Object$assign({
+        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+        role: 'combobox',
+        "aria-disabled": disabled,
+        "aria-haspopup": "tree",
+        tabIndex: tabIndex,
         className: classNames,
         style: style,
         ref: this.triggerRef,
-        onClick: this.handleClick
+        onClick: this.handleClick,
+        onKeyPress: this.handleSelectionEnterPress,
+        "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'],
+        "aria-required": this.props['aria-required']
       }, mouseEvent), inner);
     }; // eslint-disable-next-line @typescript-eslint/no-shadow
 
@@ -478,7 +513,8 @@ class TreeSelect extends BaseComponent {
         disabled,
         size,
         searchAutoFocus,
-        placeholder
+        placeholder,
+        maxTagCount
       } = this.props;
       const {
         keyEntities,
@@ -487,6 +523,7 @@ class TreeSelect extends BaseComponent {
       } = this.state;
       const keyList = normalizeKeyList(checkedKeys, keyEntities, leafOnly);
       return /*#__PURE__*/React.createElement(TagInput, {
+        maxTagCount: maxTagCount,
         disabled: disabled,
         onInputChange: v => this.search(v),
         ref: this.tagInputRef,
@@ -558,6 +595,7 @@ class TreeSelect extends BaseComponent {
         }
 
         return /*#__PURE__*/React.createElement(Input, _Object$assign({
+          "aria-label": 'Filter TreeSelect item',
           ref: this.inputRef,
           autofocus: searchAutoFocus,
           placeholder: placeholder
@@ -786,11 +824,11 @@ class TreeSelect extends BaseComponent {
           labelEllipsis: typeof labelEllipsis === 'undefined' ? virtualize : labelEllipsis
         }
       }, /*#__PURE__*/React.createElement("div", {
-        className: wrapperCls,
-        role: "list-box"
+        className: wrapperCls
       }, outerTopSlot, !outerTopSlot && filterTreeNode && isDropdownPositionSearch && this.renderInput(), /*#__PURE__*/React.createElement("div", {
         className: listCls,
         role: "tree",
+        "aria-multiselectable": multiple ? true : false,
         style: optionListStyle
       }, noData ? this.renderEmpty() : this.renderNodeList()), outerBottomSlot));
     };
@@ -827,6 +865,7 @@ class TreeSelect extends BaseComponent {
     this.optionsRef = /*#__PURE__*/React.createRef();
     this.clickOutsideHandler = null;
     this.foundation = new TreeSelectFoundation(this.adapter);
+    this.treeSelectID = _sliceInstanceProperty(_context2 = Math.random().toString(36)).call(_context2, 2);
   } // eslint-disable-next-line max-lines-per-function
 
 
@@ -1127,6 +1166,11 @@ class TreeSelect extends BaseComponent {
 
 TreeSelect.contextType = ConfigContext;
 TreeSelect.propTypes = {
+  'aria-describedby': PropTypes.string,
+  'aria-errormessage': PropTypes.string,
+  'aria-invalid': PropTypes.bool,
+  'aria-labelledby': PropTypes.string,
+  'aria-required': PropTypes.bool,
   loadedKeys: PropTypes.arrayOf(PropTypes.string),
   loadData: PropTypes.func,
   onLoad: PropTypes.func,
@@ -1179,6 +1223,7 @@ TreeSelect.propTypes = {
   suffix: PropTypes.node,
   prefix: PropTypes.node,
   insetLabel: PropTypes.node,
+  insetLabelId: PropTypes.string,
   zIndex: PropTypes.number,
   getPopupContainer: PropTypes.func,
   dropdownMatchSelectWidth: PropTypes.bool,
@@ -1198,7 +1243,8 @@ TreeSelect.propTypes = {
   labelEllipsis: PropTypes.bool,
   optionListStyle: PropTypes.object,
   searchRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-  renderSelectedItem: PropTypes.func
+  renderSelectedItem: PropTypes.func,
+  'aria-label': PropTypes.string
 };
 TreeSelect.defaultProps = {
   searchPosition: strings.SEARCH_POSITION_DROPDOWN,
@@ -1225,6 +1271,7 @@ TreeSelect.defaultProps = {
   onVisibleChange: _noop,
   expandAction: false,
   clickToHide: true,
-  searchAutoFocus: false
+  searchAutoFocus: false,
+  'aria-label': 'TreeSelect'
 };
 export default TreeSelect;

package/lib/es/typography/base.js

@@ -32,6 +32,7 @@ import Tooltip from '../tooltip/index';
 import Popover from '../popover/index';
 import getRenderText from './util';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
+import isEnterPress from '@douyinfe/semi-foundation/lib/es/utils/isEnterPress';
 import LocaleConsumer from '../locale/localeConsumer';
 import { isSemiIcon } from '../_utils';
 const prefixCls = cssClasses.PREFIX;
@@ -234,13 +235,22 @@ export default class Base extends Component {
       }
 
       if (!noExpandText || !noCollapseText) {
-        return /*#__PURE__*/React.createElement("a", {
-          className: "".concat(prefixCls, "-ellipsis-expand"),
-          key: "expand",
-          ref: this.expandRef,
-          "aria-label": text,
-          onClick: this.toggleOverflow
-        }, text);
+        return (
+          /*#__PURE__*/
+          // TODO: replace `a` tag with `span` in next major version
+          // NOTE: may have effect on style
+          // eslint-disable-next-line jsx-a11y/anchor-is-valid
+          React.createElement("a", {
+            role: "button",
+            tabIndex: 0,
+            className: "".concat(prefixCls, "-ellipsis-expand"),
+            key: "expand",
+            ref: this.expandRef,
+            "aria-label": text,
+            onClick: this.toggleOverflow,
+            onKeyPress: e => isEnterPress(e) && this.toggleOverflow(e)
+          }, text)
+        );
       }
 
       return null;

package/lib/es/typography/copyable.js

@@ -9,6 +9,7 @@ import cls from 'classnames';
 import { noop } from '@douyinfe/semi-foundation/lib/es/utils/function';
 import LocaleConsumer from '../locale/localeConsumer';
 import { IconCopy, IconTick } from '@douyinfe/semi-icons';
+import isEnterPress from '@douyinfe/semi-foundation/lib/es/utils/isEnterPress';
 const prefixCls = cssClasses.PREFIX;
 export class Copyable extends React.PureComponent {
   constructor(props) {
@@ -100,7 +101,10 @@ export class Copyable extends React.PureComponent {
     }, /*#__PURE__*/React.createElement("a", {
       className: "".concat(prefixCls, "-action-copy-icon")
     }, /*#__PURE__*/React.createElement(IconCopy, {
-      onClick: this.copy
+      role: "button",
+      tabIndex: 0,
+      onClick: this.copy,
+      onKeyPress: e => isEnterPress(e) && this.copy(e)
     })))));
   }
 

package/lib/es/upload/fileCard.js

@@ -16,6 +16,8 @@ const prefixCls = cssClasses.PREFIX;
 const ErrorSvg = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return /*#__PURE__*/React.createElement("svg", _Object$assign({
+    focusable: false,
+    "aria-hidden": true,
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
@@ -37,6 +39,8 @@ const ErrorSvg = function () {
 const ReplaceSvg = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return /*#__PURE__*/React.createElement("svg", _Object$assign({
+    focusable: false,
+    "aria-hidden": true,
     width: "28",
     height: "28",
     viewBox: "0 0 28 28",
@@ -64,6 +68,8 @@ const ReplaceSvg = function () {
 const DirectorySvg = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return /*#__PURE__*/React.createElement("svg", _Object$assign({
+    focusable: false,
+    "aria-hidden": true,
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
@@ -177,6 +183,8 @@ class FileCard extends PureComponent {
     });
     const closeCls = "".concat(prefixCls, "-picture-file-card-close");
     const retry = /*#__PURE__*/React.createElement("div", {
+      role: "button",
+      tabIndex: 0,
       className: "".concat(prefixCls, "-picture-file-card-retry"),
       onClick: e => this.onRetry(e)
     }, /*#__PURE__*/React.createElement(IconRefresh, {
@@ -189,6 +197,8 @@ class FileCard extends PureComponent {
       showArrow: false,
       spacing: 4
     }, /*#__PURE__*/React.createElement("div", {
+      role: "button",
+      tabIndex: 0,
       className: "".concat(prefixCls, "-picture-file-card-replace"),
       onClick: e => this.onReplace(e)
     }, /*#__PURE__*/React.createElement(ReplaceSvg, {
@@ -199,9 +209,10 @@ class FileCard extends PureComponent {
     }, index + 1);
     const thumbnail = typeof renderThumbnail === 'function' ? renderThumbnail(this.props) : /*#__PURE__*/React.createElement("img", {
       src: url,
-      alt: "picture of ".concat(name)
+      alt: name
     });
     return /*#__PURE__*/React.createElement("div", {
+      role: "listitem",
       className: filePicCardCls,
       style: style,
       onClick: onPreviewClick
@@ -209,10 +220,13 @@ class FileCard extends PureComponent {
       percent: percent,
       type: "circle",
       size: "small",
-      orbitStroke: '#FFF'
+      orbitStroke: '#FFF',
+      "aria-label": "uploading file progress"
     }) : null, showRetry ? retry : null, showReplace && replace, showPicInfo && picInfo, !disabled && /*#__PURE__*/React.createElement("div", {
       className: closeCls
     }, /*#__PURE__*/React.createElement(IconClose, {
+      tabIndex: 0,
+      role: "button",
       size: "extra-small",
       onClick: e => this.onRemove(e)
     })), this.renderPicValidateMsg());
@@ -250,7 +264,8 @@ class FileCard extends PureComponent {
     const showReplace = status === strings.FILE_STATUS_SUCCESS && propsShowReplace;
     const fileSize = this.transSize(size);
     let previewContent = preview ? /*#__PURE__*/React.createElement("img", {
-      src: url
+      src: url,
+      alt: name
     }) : /*#__PURE__*/React.createElement(IconFile, {
       size: "large"
     });
@@ -260,6 +275,7 @@ class FileCard extends PureComponent {
     }
 
     return /*#__PURE__*/React.createElement("div", {
+      role: "listitem",
       className: fileCardCls,
       style: style,
       onClick: onPreviewClick
@@ -289,12 +305,15 @@ class FileCard extends PureComponent {
       percent: percent,
       style: {
         width: '100%'
-      }
+      },
+      "aria-label": "uploading file progress"
     }) : null, /*#__PURE__*/React.createElement("div", {
       className: "".concat(infoCls, "-main-control")
     }, /*#__PURE__*/React.createElement("span", {
       className: "".concat(infoCls, "-validate-message")
     }, this.renderValidateMessage()), showRetry ? /*#__PURE__*/React.createElement("span", {
+      role: "button",
+      tabIndex: 0,
       className: "".concat(infoCls, "-retry"),
       onClick: e => this.onRetry(e)
     }, locale.retry) : null)), /*#__PURE__*/React.createElement(IconButton, {

package/lib/es/upload/index.js

@@ -208,6 +208,7 @@ class Upload extends BaseComponent {
       });
       const mainCls = "".concat(prefixCls, "-file-list-main");
       const addContentProps = {
+        role: 'button',
         className: uploadAddCls,
         onClick: this.onClick
       };
@@ -240,7 +241,9 @@ class Upload extends BaseComponent {
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Upload"
       }, locale => /*#__PURE__*/React.createElement("div", _Object$assign({}, containerProps), /*#__PURE__*/React.createElement("div", {
-        className: mainCls
+        className: mainCls,
+        role: "list",
+        "aria-label": "picture list"
       }, _mapInstanceProperty(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList ? addContent : null)));
     };
 
@@ -274,10 +277,14 @@ class Upload extends BaseComponent {
       }, /*#__PURE__*/React.createElement("span", {
         className: "".concat(titleCls, "-choosen")
       }, locale.selectedFiles), showClear ? /*#__PURE__*/React.createElement("span", {
+        role: "button",
+        tabIndex: 0,
         onClick: this.clear,
         className: "".concat(titleCls, "-clear")
       }, locale.clear) : null) : null, /*#__PURE__*/React.createElement("div", {
-        className: mainCls
+        className: mainCls,
+        role: "list",
+        "aria-label": "file list"
       }, _mapInstanceProperty(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)))));
     };
 
@@ -302,7 +309,8 @@ class Upload extends BaseComponent {
       const {
         draggable,
         children,
-        listType
+        listType,
+        disabled
       } = this.props;
       const uploadAddCls = cls("".concat(prefixCls, "-add"));
 
@@ -315,6 +323,9 @@ class Upload extends BaseComponent {
       }
 
       return /*#__PURE__*/React.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        "aria-disabled": disabled,
         className: uploadAddCls,
         onClick: this.onClick
       }, children);
@@ -328,7 +339,8 @@ class Upload extends BaseComponent {
         children,
         dragIcon,
         dragMainText,
-        dragSubText
+        dragSubText,
+        disabled
       } = this.props;
       const dragAreaBaseCls = "".concat(prefixCls, "-drag-area");
       const dragAreaCls = cls(dragAreaBaseCls, {
@@ -339,6 +351,9 @@ class Upload extends BaseComponent {
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Upload"
       }, locale => /*#__PURE__*/React.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        "aria-disabled": disabled,
         className: dragAreaCls,
         onDrop: this.onDrop,
         onDragOver: this.onDragOver,

package/list/item.tsx

@@ -86,7 +86,6 @@ export default class ListItem extends PureComponent<ListItemProps> {
         }
         let content = (
             <li
-                role="list-item"
                 className={itemCls}
                 style={style}
                 onClick={handleClick}

package/modal/Modal.tsx

@@ -283,6 +283,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
             } else {
                 return (
                     <Button
+                        aria-label="cancel"
                         onClick={this.handleCancel}
                         loading={cancelLoading}
                         type="tertiary"
@@ -300,6 +301,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                     <div>
                         {getCancelButton(locale)}
                         <Button
+                            aria-label="confirm"
                             type={okType}
                             theme="solid"
                             loading={confirmLoading}

package/modal/ModalContent.tsx

@@ -13,8 +13,9 @@ import ModalContentFoundation, {
     ModalContentProps,
     ModalContentState
 } from '@douyinfe/semi-foundation/modal/modalContentFoundation';
-import { noop } from 'lodash';
+import { noop, isFunction, get } from 'lodash';
 import { IconClose } from '@douyinfe/semi-icons';
+import { getActiveElement } from '../_utils';
 
 let uuid = 0;
 
@@ -37,14 +38,17 @@ export default class ModalContent extends BaseComponent<ModalContentProps, Modal
     dialogId: string;
     private timeoutId: NodeJS.Timeout;
 
-
+    modalDialogRef: React.MutableRefObject<HTMLDivElement>;
+    foundation: ModalContentFoundation;
     constructor(props: ModalContentProps) {
         super(props);
         this.state = {
             dialogMouseDown: false,
+            prevFocusElement: getActiveElement(),
         };
         this.foundation = new ModalContentFoundation(this.adapter);
         this.dialogId = `dialog-${uuid++}`;
+        this.modalDialogRef = React.createRef();
     }
 
     get adapter(): ModalContentAdapter {
@@ -75,11 +79,30 @@ export default class ModalContent extends BaseComponent<ModalContentProps, Modal
                 }
             },
             getMouseState: () => this.state.dialogMouseDown,
+            modalDialogFocus: () => {
+                let activeElementInDialog;
+                if (this.modalDialogRef) {
+                    const activeElement = getActiveElement();
+                    activeElementInDialog = this.modalDialogRef.current.contains(activeElement);
+                }
+                if (!activeElementInDialog) {
+                    this.modalDialogRef && this.modalDialogRef.current.focus();
+                }
+            },
+            modalDialogBlur: () => {
+                this.modalDialogRef && this.modalDialogRef.current.blur();
+            },
+            prevFocusElementReFocus: () => {
+                const { prevFocusElement } = this.state;
+                const focus = get(prevFocusElement, 'focus');
+                isFunction(focus) && prevFocusElement.focus();
+            }
         };
     }
 
     componentDidMount() {
         this.foundation.handleKeyDownEventListenerMount();
+        this.foundation.modalDialogFocus();
     }
 
     componentWillUnmount() {
@@ -132,6 +155,7 @@ export default class ModalContent extends BaseComponent<ModalContentProps, Modal
             const iconType = closeIcon || <IconClose/>;
             closer = (
                 <Button
+                    aria-label="close"
                     className={`${cssClasses.DIALOG}-close`}
                     key="close-btn"
                     onClick={this.close}
@@ -162,7 +186,7 @@ export default class ModalContent extends BaseComponent<ModalContentProps, Modal
             (
                 <div className={`${cssClasses.DIALOG}-header`}>
                     {icon}
-                    <Typography.Title heading={5} className={`${cssClasses.DIALOG}-title`}>{title}</Typography.Title>
+                    <Typography.Title heading={5} className={`${cssClasses.DIALOG}-title`} id={`${cssClasses.DIALOG}-title`}>{title}</Typography.Title>
                     {closer}
                 </div>
             );
@@ -181,7 +205,7 @@ export default class ModalContent extends BaseComponent<ModalContentProps, Modal
         const icon = this.renderIcon();
         const hasHeader = title !== null && title !== undefined || 'header' in this.props;
         return hasHeader ?
-            <div className={bodyCls} style={bodyStyle}>{children}</div> :
+            <div className={bodyCls} id={`${cssClasses.DIALOG}-body`} style={bodyStyle}>{children}</div> :
             (
                 <div className={`${cssClasses.DIALOG}-body-wrapper`}>
                     {icon}
@@ -214,6 +238,7 @@ export default class ModalContent extends BaseComponent<ModalContentProps, Modal
         const header = this.renderHeader();
         const footer = props.footer ? <div className={`${cssClasses.DIALOG}-footer`}>{props.footer}</div> : null;
         const dialogElement = (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             <div
                 key="dialog-element"
                 className={digCls}
@@ -222,6 +247,11 @@ export default class ModalContent extends BaseComponent<ModalContentProps, Modal
                 id={this.dialogId}
             >
                 <div
+                    role="dialog"
+                    ref={this.modalDialogRef}
+                    aria-modal="true"
+                    aria-labelledby={`${cssClasses.DIALOG}-title`}
+                    aria-describedby={`${cssClasses.DIALOG}-body`}
                     onAnimationEnd={props.onAnimationEnd}
                     className={cls([`${cssClasses.DIALOG}-content`,
                         props.contentClassName,
@@ -257,7 +287,7 @@ export default class ModalContent extends BaseComponent<ModalContentProps, Modal
             <div className={classList}>
                 {this.getMaskElement()}
                 <div
-                    role="modal"
+                    role="none"
                     tabIndex={-1}
                     className={`${cssClasses.DIALOG}-wrap`}
                     onClick={maskClosable ? this.onMaskClick : null}

package/navigation/Item.tsx

@@ -76,6 +76,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         disabled: false,
     };
 
+    foundation: ItemFoundation;
     constructor(props: NavItemProps) {
         super(props);
         this.state = {
@@ -108,6 +109,8 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
             getIsCollapsed: () => this.props.isCollapsed || Boolean(this.context && this.context.isCollapsed) || false,
             getSelected: () =>
                 Boolean(this.context && this.context.selectedKeys && this.context.selectedKeys.includes(this.props.itemKey)),
+            getIsOpen: () =>
+                Boolean(this.context && this.context.openKeys && this.context.openKeys.includes(this.props.itemKey)),
         };
     }
 
@@ -159,6 +162,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
     };
 
     handleClick = (e: React.MouseEvent) => this.foundation.handleClick(e);
+    handleKeyPress = (e: React.KeyboardEvent) => this.foundation.handleKeyPress(e);
 
     render() {
         const {
@@ -249,15 +253,26 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
                 [`${clsPrefix}-collapsed`]: isCollapsed,
                 [`${clsPrefix}-disabled`]: disabled,
             });
+            const ariaProps = {
+                'aria-disabled': disabled,
+            };
+            if (isSubNav) {
+                const isOpen = this.adapter.getIsOpen();
+                ariaProps['aria-expanded'] = isOpen;
+            }
 
             itemDom = (
                 <li
+                    role="menuitem"
+                    tabIndex={-1}
+                    {...ariaProps}
                     style={style}
                     ref={this.setItemRef}
                     className={popoverItemCls}
                     onClick={this.handleClick}
                     onMouseEnter={onMouseEnter}
                     onMouseLeave={onMouseLeave}
+                    onKeyPress={this.handleKeyPress}
                 >
                     {itemChildren}
                 </li>

package/navigation/SubNav.tsx

@@ -115,6 +115,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
 
     titleRef: React.RefObject<HTMLDivElement>;
     itemRef: React.RefObject<HTMLLIElement>;
+    foundation: SubNavFoundation;
     constructor(props: SubNavProps) {
         super(props);
         this.state = {
@@ -171,6 +172,10 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         this.foundation.handleClick(e && e.nativeEvent, this.titleRef && this.titleRef.current);
     };
 
+    handleKeyPress = (e: React.KeyboardEvent) => {
+        this.foundation.handleKeyPress(e && e.nativeEvent, this.titleRef && this.titleRef.current);
+    }
+
     handleDropdownVisible = (visible: boolean) => this.foundation.handleDropdownVisibleChange(visible);
 
     renderIcon(icon: React.ReactNode, pos: string, withTransition?: boolean, isToggleIcon = false, key: number | string = 0) {
@@ -239,7 +244,14 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         }
 
         const titleDiv = (
-            <div ref={this.setTitleRef as any} className={titleCls} onClick={this.handleClick}>
+            <div
+                role="menuitem"
+                tabIndex={-1}
+                ref={this.setTitleRef as any} 
+                className={titleCls} 
+                onClick={this.handleClick}
+                onKeyPress={this.handleKeyPress}
+            >
                 <div className={`${prefixCls}-item-inner`}>
                     {placeholderIcons}
                     {this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left')}

package/navigation/index.tsx

@@ -408,7 +408,7 @@ class Nav extends BaseComponent<NavProps, NavState> {
                                 <div className={headerListOuterCls}>
                                     {headers}
                                     <div style={bodyStyle} className={`${prefixCls}-list-wrapper`}>
-                                        <ul className={`${prefixCls}-list`}>
+                                        <ul role="menu" aria-orientation={mode} className={`${prefixCls}-list`}>
                                             {this.adapter.getCache('itemElems')}
                                             {children}
                                         </ul>