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

package/lib/es/input/textarea.js

@@ -37,6 +37,10 @@ class TextArea extends BaseComponent {
       this.foundation.handleClear(e);
     };
 
+    this.handleClearEnterPress = e => {
+      this.foundation.handleClearEnterPress(e);
+    };
+
     this.setRef = node => {
       this.libRef.current = node;
       const {
@@ -162,8 +166,12 @@ class TextArea extends BaseComponent {
 
     if (showClear) {
       return /*#__PURE__*/React.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "Clear textarea value",
         className: clearCls,
-        onClick: this.handleClear
+        onClick: this.handleClear,
+        onKeyPress: this.handleClearEnterPress
       }, /*#__PURE__*/React.createElement(IconClear, null));
     }
 
@@ -189,6 +197,9 @@ class TextArea extends BaseComponent {
         ["".concat(prefixCls, "-textarea-counter-exceed")]: current > total
       });
       counter = /*#__PURE__*/React.createElement("div", {
+        "aria-label": "Textarea value length counter",
+        "aria-valuemax": maxCount,
+        "aria-valuenow": current,
         className: countCls
       }, current, total ? '/' : null, total);
     } else {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { InputProps } from '../input';
-import { InputNumberAdapter } from '@douyinfe/semi-foundation/lib/es/inputNumber/foundation';
+import InputNumberFoundation, { InputNumberAdapter } from '@douyinfe/semi-foundation/lib/es/inputNumber/foundation';
 import BaseComponent from '../_base/baseComponent';
 import { strings } from '@douyinfe/semi-foundation/lib/es/inputNumber/constants';
 import '@douyinfe/semi-foundation/lib/es/inputNumber/inputNumber.css';
@@ -16,6 +16,7 @@ export interface InputNumberProps extends InputProps {
     hideButtons?: boolean;
     innerButtons?: boolean;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     keepFocus?: boolean;
     max?: number;
     min?: number;
@@ -47,6 +48,12 @@ export interface InputNumberState {
 }
 declare class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
     static propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         autofocus: PropTypes.Requireable<boolean>;
         className: PropTypes.Requireable<string>;
         defaultValue: PropTypes.Requireable<string | number>;
@@ -56,6 +63,7 @@ declare class InputNumber extends BaseComponent<InputNumberProps, InputNumberSta
         hideButtons: PropTypes.Requireable<boolean>;
         innerButtons: PropTypes.Requireable<boolean>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        insetLabelId: PropTypes.Requireable<string>;
         keepFocus: PropTypes.Requireable<boolean>;
         max: PropTypes.Requireable<number>;
         min: PropTypes.Requireable<number>;
@@ -85,20 +93,21 @@ declare class InputNumber extends BaseComponent<InputNumberProps, InputNumberSta
     currentValue: number | string;
     cursorBefore: string;
     cursorAfter: string;
+    foundation: InputNumberFoundation;
     constructor(props: InputNumberProps);
     componentDidUpdate(prevProps: InputNumberProps): void;
     setInputRef: (node: HTMLInputElement) => void;
-    handleInputFocus: (e: React.FocusEvent<HTMLInputElement>) => any;
-    handleInputChange: (value: string, event: React.ChangeEvent<HTMLInputElement>) => any;
-    handleInputBlur: (e: React.FocusEvent<HTMLInputElement>) => any;
-    handleInputKeyDown: (e: React.KeyboardEvent) => any;
-    handleInputMouseEnter: (e: React.MouseEvent) => any;
-    handleInputMouseLeave: (e: React.MouseEvent) => any;
-    handleInputMouseMove: (e: React.MouseEvent) => any;
-    handleUpClick: (e: React.KeyboardEvent) => any;
-    handleDownClick: (e: React.KeyboardEvent) => any;
-    handleMouseUp: (e: React.MouseEvent) => any;
-    handleMouseLeave: (e: React.MouseEvent) => any;
+    handleInputFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleInputChange: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleInputBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleInputKeyDown: (e: React.KeyboardEvent) => void;
+    handleInputMouseEnter: (e: React.MouseEvent) => void;
+    handleInputMouseLeave: (e: React.MouseEvent) => void;
+    handleInputMouseMove: (e: React.MouseEvent) => void;
+    handleUpClick: (e: React.KeyboardEvent) => void;
+    handleDownClick: (e: React.KeyboardEvent) => void;
+    handleMouseUp: (e: React.MouseEvent) => void;
+    handleMouseLeave: (e: React.MouseEvent) => void;
     renderButtons: () => JSX.Element;
     renderSuffix: () => React.ReactNode;
     render(): JSX.Element;

package/lib/es/inputNumber/index.js

@@ -110,6 +110,8 @@ class InputNumber extends BaseComponent {
       return /*#__PURE__*/React.createElement("div", {
         className: suffixChildrenCls
       }, /*#__PURE__*/React.createElement("span", {
+        role: "button",
+        tabIndex: -1,
         className: upClassName,
         onMouseDown: notAllowedUp ? _noop : this.handleUpClick,
         onMouseUp: this.handleMouseUp,
@@ -117,6 +119,8 @@ class InputNumber extends BaseComponent {
       }, /*#__PURE__*/React.createElement(IconChevronUp, {
         size: "extra-small"
       })), /*#__PURE__*/React.createElement("span", {
+        role: "button",
+        tabIndex: -1,
         className: downClassName,
         onMouseDown: notAllowedDown ? _noop : this.handleDownClick,
         onMouseUp: this.handleMouseUp,
@@ -334,7 +338,11 @@ class InputNumber extends BaseComponent {
           if (this.foundation.isValidNumber(parsedNum) && parsedNum !== this.state.number) {
             const obj = {
               number: parsedNum
-            }; // Updates input when a button is clicked
+            };
+            /**
+             * If you are clicking the button, it will automatically format once
+             * We need to set the status to false after trigger focus event
+             */
 
             if (this.clickUpOrDown) {
               obj.value = this.foundation.doFormat(valueStr, true);
@@ -409,19 +417,39 @@ class InputNumber extends BaseComponent {
           rest = __rest(_a, ["disabled", "className", "prefixCls", "min", "max", "step", "shiftStep", "precision", "formatter", "parser", "forwardedRef", "onUpClick", "onDownClick", "pressInterval", "pressTimeout", "suffix", "size", "hideButtons", "innerButtons", "style", "onNumberChange", "keepFocus"]);
 
     const {
-      value
+      value,
+      number
     } = this.state;
     const inputNumberCls = classnames(className, "".concat(prefixCls, "-number"), {
       [_concatInstanceProperty(_context = "".concat(prefixCls, "-number-size-")).call(_context, size)]: size
     });
     const buttons = this.renderButtons();
+    const ariaProps = {
+      'aria-disabled': disabled,
+      step
+    };
+
+    if (number) {
+      ariaProps['aria-valuenow'] = number;
+    }
+
+    if (max !== Infinity) {
+      ariaProps['aria-valuemax'] = max;
+    }
+
+    if (min !== -Infinity) {
+      ariaProps['aria-valuemin'] = min;
+    }
+
     const input = /*#__PURE__*/React.createElement("div", {
       className: inputNumberCls,
       style: style,
       onMouseMove: e => this.handleInputMouseMove(e),
       onMouseEnter: e => this.handleInputMouseEnter(e),
       onMouseLeave: e => this.handleInputMouseLeave(e)
-    }, /*#__PURE__*/React.createElement(Input, _Object$assign({}, rest, {
+    }, /*#__PURE__*/React.createElement(Input, _Object$assign({
+      role: "spinbutton"
+    }, ariaProps, rest, {
       size: size,
       disabled: disabled,
       ref: this.setInputRef,
@@ -438,6 +466,12 @@ class InputNumber extends BaseComponent {
 }
 
 InputNumber.propTypes = {
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string,
+  'aria-invalid': PropTypes.bool,
+  'aria-errormessage': PropTypes.string,
+  'aria-describedby': PropTypes.string,
+  'aria-required': PropTypes.bool,
   autofocus: PropTypes.bool,
   className: PropTypes.string,
   defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -447,6 +481,7 @@ InputNumber.propTypes = {
   hideButtons: PropTypes.bool,
   innerButtons: PropTypes.bool,
   insetLabel: PropTypes.node,
+  insetLabelId: PropTypes.string,
   keepFocus: PropTypes.bool,
   max: PropTypes.number,
   min: PropTypes.number,

package/lib/es/layout/Sider.d.ts

@@ -14,6 +14,8 @@ export interface SiderProps {
     className?: string;
     breakpoint?: Array<keyof ResponsiveMap>;
     onBreakpoint?: (screen: keyof ResponsiveMap, match: boolean) => void;
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'role'?: React.AriaRole;
 }
 declare class Sider extends React.PureComponent<SiderProps> {
     static propTypes: {
@@ -22,6 +24,8 @@ declare class Sider extends React.PureComponent<SiderProps> {
         className: PropTypes.Requireable<string>;
         breakpoint: PropTypes.Requireable<string[]>;
         onBreakpoint: PropTypes.Requireable<(...args: any[]) => any>;
+        'aria-label': PropTypes.Requireable<string>;
+        role: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         prefixCls: string;

package/lib/es/layout/Sider.js

@@ -114,6 +114,7 @@ class Sider extends React.PureComponent {
     });
     return /*#__PURE__*/React.createElement("aside", _Object$assign({
       className: classString,
+      "aria-label": this.props['aria-label'],
       style: style
     }, getDataAttr(others)), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-sider-children")
@@ -127,7 +128,9 @@ Sider.propTypes = {
   style: PropTypes.object,
   className: PropTypes.string,
   breakpoint: PropTypes.arrayOf(PropTypes.oneOf(bpt)),
-  onBreakpoint: PropTypes.func
+  onBreakpoint: PropTypes.func,
+  'aria-label': PropTypes.string,
+  role: PropTypes.string
 };
 Sider.defaultProps = {
   prefixCls: cssClasses.PREFIX

package/lib/es/layout/index.js

@@ -35,6 +35,8 @@ function generator(type) {
   return BasicComponent => class Adapter extends React.PureComponent {
     render() {
       return /*#__PURE__*/React.createElement(BasicComponent, _Object$assign({
+        role: this.props.role,
+        "aria-label": this.props['aria-label'],
         type: typeName,
         tagName: tagName
       }, this.props));

package/lib/es/list/item.js

@@ -79,7 +79,6 @@ export default class ListItem extends PureComponent {
     }
 
     let content = /*#__PURE__*/React.createElement("li", {
-      role: "list-item",
       className: itemCls,
       style: style,
       onClick: handleClick,

package/lib/es/modal/Modal.js

@@ -75,6 +75,7 @@ class Modal extends BaseComponent {
           return null;
         } else {
           return /*#__PURE__*/React.createElement(Button, _Object$assign({
+            "aria-label": "cancel",
             onClick: this.handleCancel,
             loading: cancelLoading,
             type: "tertiary"
@@ -85,6 +86,7 @@ class Modal extends BaseComponent {
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Modal"
       }, (locale, localeCode) => /*#__PURE__*/React.createElement("div", null, getCancelButton(locale), /*#__PURE__*/React.createElement(Button, _Object$assign({
+        "aria-label": "confirm",
         type: okType,
         theme: "solid",
         loading: confirmLoading,

package/lib/es/modal/ModalContent.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import BaseComponent from '../_base/baseComponent';
-import { ModalContentAdapter, ModalContentProps, ModalContentState } from '@douyinfe/semi-foundation/lib/es/modal/modalContentFoundation';
+import ModalContentFoundation, { ModalContentAdapter, ModalContentProps, ModalContentState } from '@douyinfe/semi-foundation/lib/es/modal/modalContentFoundation';
 export default class ModalContent extends BaseComponent<ModalContentProps, ModalContentState> {
     static contextType: React.Context<import("../configProvider/context").ContextValue>;
     static propTypes: {
@@ -19,6 +19,8 @@ export default class ModalContent extends BaseComponent<ModalContentProps, Modal
     };
     dialogId: string;
     private timeoutId;
+    modalDialogRef: React.MutableRefObject<HTMLDivElement>;
+    foundation: ModalContentFoundation;
     constructor(props: ModalContentProps);
     get adapter(): ModalContentAdapter;
     componentDidMount(): void;

package/lib/es/modal/ModalContent.js

@@ -1,3 +1,5 @@
+import _get from "lodash/get";
+import _isFunction from "lodash/isFunction";
 import _noop from "lodash/noop";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
@@ -30,6 +32,7 @@ import BaseComponent from '../_base/baseComponent'; // eslint-disable-next-line
 
 import ModalContentFoundation from '@douyinfe/semi-foundation/lib/es/modal/modalContentFoundation';
 import { IconClose } from '@douyinfe/semi-icons';
+import { getActiveElement } from '../_utils';
 let uuid = 0;
 export default class ModalContent extends BaseComponent {
   constructor(props) {
@@ -89,6 +92,7 @@ export default class ModalContent extends BaseComponent {
       if (closable) {
         const iconType = closeIcon || /*#__PURE__*/React.createElement(IconClose, null);
         closer = /*#__PURE__*/React.createElement(Button, {
+          "aria-label": "close",
           className: "".concat(cssClasses.DIALOG, "-close"),
           key: "close-btn",
           onClick: this.close,
@@ -125,7 +129,8 @@ export default class ModalContent extends BaseComponent {
         className: "".concat(cssClasses.DIALOG, "-header")
       }, icon, /*#__PURE__*/React.createElement(Typography.Title, {
         heading: 5,
-        className: "".concat(cssClasses.DIALOG, "-title")
+        className: "".concat(cssClasses.DIALOG, "-title"),
+        id: "".concat(cssClasses.DIALOG, "-title")
       }, title), closer);
     };
 
@@ -143,6 +148,7 @@ export default class ModalContent extends BaseComponent {
       const hasHeader = title !== null && title !== undefined || 'header' in this.props;
       return hasHeader ? /*#__PURE__*/React.createElement("div", {
         className: bodyCls,
+        id: "".concat(cssClasses.DIALOG, "-body"),
         style: bodyStyle
       }, children) : /*#__PURE__*/React.createElement("div", {
         className: "".concat(cssClasses.DIALOG, "-body-wrapper")
@@ -182,13 +188,21 @@ export default class ModalContent extends BaseComponent {
       const footer = props.footer ? /*#__PURE__*/React.createElement("div", {
         className: "".concat(cssClasses.DIALOG, "-footer")
       }, props.footer) : null;
-      const dialogElement = /*#__PURE__*/React.createElement("div", {
+      const dialogElement =
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      React.createElement("div", {
         key: "dialog-element",
         className: digCls,
         onMouseDown: this.onDialogMouseDown,
         style: _Object$assign(_Object$assign({}, props.style), style),
         id: this.dialogId
       }, /*#__PURE__*/React.createElement("div", {
+        role: "dialog",
+        ref: this.modalDialogRef,
+        "aria-modal": "true",
+        "aria-labelledby": "".concat(cssClasses.DIALOG, "-title"),
+        "aria-describedby": "".concat(cssClasses.DIALOG, "-body"),
         onAnimationEnd: props.onAnimationEnd,
         className: cls(["".concat(cssClasses.DIALOG, "-content"), props.contentClassName, {
           ["".concat(cssClasses.DIALOG, "-content-fullScreen")]: props.isFullScreen
@@ -199,10 +213,12 @@ export default class ModalContent extends BaseComponent {
     };
 
     this.state = {
-      dialogMouseDown: false
+      dialogMouseDown: false,
+      prevFocusElement: getActiveElement()
     };
     this.foundation = new ModalContentFoundation(this.adapter);
     this.dialogId = "dialog-".concat(uuid++);
+    this.modalDialogRef = /*#__PURE__*/React.createRef();
   }
 
   get adapter() {
@@ -239,12 +255,37 @@ export default class ModalContent extends BaseComponent {
           document.removeEventListener('keydown', _bindInstanceProperty(_context3 = this.foundation.handleKeyDown).call(_context3, this.foundation));
         }
       },
-      getMouseState: () => this.state.dialogMouseDown
+      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() {
@@ -272,7 +313,7 @@ export default class ModalContent extends BaseComponent {
     const elem = /*#__PURE__*/React.createElement("div", {
       className: classList
     }, this.getMaskElement(), /*#__PURE__*/React.createElement("div", {
-      role: "modal",
+      role: "none",
       tabIndex: -1,
       className: "".concat(cssClasses.DIALOG, "-wrap"),
       onClick: maskClosable ? this.onMaskClick : null,

package/lib/es/navigation/Item.d.ts

@@ -1,7 +1,7 @@
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ItemProps, SelectedItemProps, ItemAdapter } from '@douyinfe/semi-foundation/lib/es/navigation/itemFoundation';
+import ItemFoundation, { ItemProps, SelectedItemProps, ItemAdapter } from '@douyinfe/semi-foundation/lib/es/navigation/itemFoundation';
 export interface NavItemProps extends ItemProps, BaseProps {
     children?: React.ReactNode;
     disabled?: boolean;
@@ -59,12 +59,14 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         onMouseLeave: (...args: any[]) => void;
         disabled: boolean;
     };
+    foundation: ItemFoundation;
     constructor(props: NavItemProps);
     _invokeContextFunc(funcName: string, ...args: any[]): any;
     get adapter(): ItemAdapter<NavItemProps, NavItemState>;
     renderIcon(icon: React.ReactNode, pos: string, isToggleIcon?: boolean): JSX.Element;
     setItemRef: (ref: HTMLLIElement) => void;
     wrapTooltip: (node: React.ReactNode) => JSX.Element;
-    handleClick: (e: React.MouseEvent) => any;
+    handleClick: (e: React.MouseEvent) => void;
+    handleKeyPress: (e: React.KeyboardEvent) => void;
     render(): {} | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 }

package/lib/es/navigation/Item.js

@@ -45,6 +45,8 @@ export default class NavItem extends BaseComponent {
 
     this.handleClick = e => this.foundation.handleClick(e);
 
+    this.handleKeyPress = e => this.foundation.handleKeyPress(e);
+
     this.state = {
       tooltipShow: false
     };
@@ -103,12 +105,17 @@ export default class NavItem extends BaseComponent {
         var _context;
 
         return Boolean(this.context && this.context.selectedKeys && _includesInstanceProperty(_context = this.context.selectedKeys).call(_context, this.props.itemKey));
+      },
+      getIsOpen: () => {
+        var _context2;
+
+        return Boolean(this.context && this.context.openKeys && _includesInstanceProperty(_context2 = this.context.openKeys).call(_context2, this.props.itemKey));
       }
     });
   }
 
   renderIcon(icon, pos) {
-    var _context2;
+    var _context3;
 
     let isToggleIcon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
@@ -127,7 +134,7 @@ export default class NavItem extends BaseComponent {
     }
 
     const className = cls("".concat(clsPrefix, "-icon"), {
-      [_concatInstanceProperty(_context2 = "".concat(clsPrefix, "-icon-toggle-")).call(_context2, this.context.toggleIconPosition)]: isToggleIcon,
+      [_concatInstanceProperty(_context3 = "".concat(clsPrefix, "-icon-toggle-")).call(_context3, this.context.toggleIconPosition)]: isToggleIcon,
       ["".concat(clsPrefix, "-icon-info")]: !isToggleIcon
     });
     return /*#__PURE__*/React.createElement("i", {
@@ -215,14 +222,27 @@ export default class NavItem extends BaseComponent {
         ["".concat(clsPrefix, "-collapsed")]: isCollapsed,
         ["".concat(clsPrefix, "-disabled")]: disabled
       });
-      itemDom = /*#__PURE__*/React.createElement("li", {
+      const ariaProps = {
+        'aria-disabled': disabled
+      };
+
+      if (isSubNav) {
+        const isOpen = this.adapter.getIsOpen();
+        ariaProps['aria-expanded'] = isOpen;
+      }
+
+      itemDom = /*#__PURE__*/React.createElement("li", _Object$assign({
+        role: "menuitem",
+        tabIndex: -1
+      }, ariaProps, {
         style: style,
         ref: this.setItemRef,
         className: popoverItemCls,
         onClick: this.handleClick,
         onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave
-      }, itemChildren);
+        onMouseLeave: onMouseLeave,
+        onKeyPress: this.handleKeyPress
+      }), itemChildren);
     } // Display Tooltip when disabled and SubNav
 
 

package/lib/es/navigation/SubNav.d.ts

@@ -2,7 +2,7 @@ import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import React from 'react';
 import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/es/navigation/navigation.css';
-import { SubNavAdapter } from '@douyinfe/semi-foundation/lib/es/navigation/subNavFoundation';
+import SubNavFoundation, { SubNavAdapter } from '@douyinfe/semi-foundation/lib/es/navigation/subNavFoundation';
 export interface ToggleIcon {
     open?: string;
     closed?: string;
@@ -88,13 +88,15 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
     };
     titleRef: React.RefObject<HTMLDivElement>;
     itemRef: React.RefObject<HTMLLIElement>;
+    foundation: SubNavFoundation;
     constructor(props: SubNavProps);
     setItemRef: (ref: HTMLLIElement | React.RefObject<HTMLLIElement>) => void;
     setTitleRef: (ref: HTMLDivElement | React.RefObject<HTMLDivElement>) => void;
     _invokeContextFunc(funcName: string, ...args: any[]): any;
     get adapter(): SubNavAdapter<SubNavProps, SubNavState>;
     handleClick: (e: React.MouseEvent) => void;
-    handleDropdownVisible: (visible: boolean) => any;
+    handleKeyPress: (e: React.KeyboardEvent) => void;
+    handleDropdownVisible: (visible: boolean) => void;
     renderIcon(icon: React.ReactNode, pos: string, withTransition?: boolean, isToggleIcon?: boolean, key?: number | string): JSX.Element;
     renderTitleDiv(): JSX.Element;
     renderSubUl(): JSX.Element;

package/lib/es/navigation/SubNav.js

@@ -49,6 +49,10 @@ export default class SubNav extends BaseComponent {
       this.foundation.handleClick(e && e.nativeEvent, this.titleRef && this.titleRef.current);
     };
 
+    this.handleKeyPress = e => {
+      this.foundation.handleKeyPress(e && e.nativeEvent, this.titleRef && this.titleRef.current);
+    };
+
     this.handleDropdownVisible = visible => this.foundation.handleDropdownVisibleChange(visible);
 
     this.state = {
@@ -203,9 +207,12 @@ export default class SubNav extends BaseComponent {
     }
 
     const titleDiv = /*#__PURE__*/React.createElement("div", {
+      role: "menuitem",
+      tabIndex: -1,
       ref: this.setTitleRef,
       className: titleCls,
-      onClick: this.handleClick
+      onClick: this.handleClick,
+      onKeyPress: this.handleKeyPress
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-item-inner")
     }, placeholderIcons, this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== strings.MODE_HORIZONTAL ? this.renderIcon(icon, strings.ICON_POS_LEFT, undefined, undefined, 'key-inSubNav-position-left') : null, /*#__PURE__*/React.createElement("span", {

package/lib/es/navigation/index.js

@@ -338,6 +338,8 @@ class Nav extends BaseComponent {
       style: bodyStyle,
       className: "".concat(prefixCls, "-list-wrapper")
     }, /*#__PURE__*/React.createElement("ul", {
+      role: "menu",
+      "aria-orientation": mode,
       className: "".concat(prefixCls, "-list")
     }, this.adapter.getCache('itemElems'), children))), footers))));
   }

package/lib/es/notification/notice.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { NoticeAdapter, NoticeState, NoticeProps } from '@douyinfe/semi-foundation/lib/es/notification/notificationFoundation';
+import { NoticeAdapter, NoticeProps, NoticeState } from '@douyinfe/semi-foundation/lib/es/notification/notificationFoundation';
 import BaseComponent from '../_base/baseComponent';
 export interface NoticeReactProps extends NoticeProps {
     style?: React.CSSProperties;

package/lib/es/notification/notice.js

@@ -22,12 +22,13 @@ import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import ConfigContext from '../configProvider/context';
-import { numbers, cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/notification/constants';
+import { cssClasses, numbers, strings } from '@douyinfe/semi-foundation/lib/es/notification/constants';
 import NotificationFoundation from '@douyinfe/semi-foundation/lib/es/notification/notificationFoundation';
 import Button from '../iconButton';
 import BaseComponent from '../_base/baseComponent';
 import { isSemiIcon } from '../_utils';
-import { IconAlertTriangle, IconInfoCircle, IconTickCircle, IconAlertCircle, IconClose } from '@douyinfe/semi-icons';
+import { IconAlertCircle, IconAlertTriangle, IconClose, IconInfoCircle, IconTickCircle } from '@douyinfe/semi-icons';
+import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 const prefixCls = cssClasses.NOTICE;
 const {
   duration
@@ -154,28 +155,36 @@ class Notice extends BaseComponent {
       [_concatInstanceProperty(_context3 = "".concat(prefixCls, "-")).call(_context3, theme)]: theme === 'light',
       ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
     });
-    return /*#__PURE__*/React.createElement("div", {
-      className: wrapper,
-      style: style,
-      onMouseEnter: this.clearCloseTimer,
-      onMouseLeave: this.startCloseTimer,
-      onClick: this.notifyClick
-    }, /*#__PURE__*/React.createElement("div", null, this.renderTypeIcon()), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-inner")
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-content-wrapper")
-    }, title ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-title")
-    }, title) : '', content ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-content")
-    }, content) : ''), showClose && /*#__PURE__*/React.createElement(Button, {
-      className: "".concat(prefixCls, "-icon-close"),
-      type: "tertiary",
-      icon: /*#__PURE__*/React.createElement(IconClose, null),
-      theme: "borderless",
-      size: "small",
-      onClick: this.close
-    })));
+    const titleID = getUuidShort({});
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      React.createElement("div", {
+        className: wrapper,
+        style: style,
+        onMouseEnter: this.clearCloseTimer,
+        onMouseLeave: this.startCloseTimer,
+        onClick: this.notifyClick,
+        "aria-labelledby": titleID,
+        role: 'alert'
+      }, /*#__PURE__*/React.createElement("div", null, this.renderTypeIcon()), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-inner")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-content-wrapper")
+      }, title ? /*#__PURE__*/React.createElement("div", {
+        id: titleID,
+        className: "".concat(prefixCls, "-title")
+      }, title) : '', content ? /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-content")
+      }, content) : ''), showClose && /*#__PURE__*/React.createElement(Button, {
+        className: "".concat(prefixCls, "-icon-close"),
+        type: "tertiary",
+        icon: /*#__PURE__*/React.createElement(IconClose, null),
+        theme: "borderless",
+        size: "small",
+        onClick: this.close
+      })))
+    );
   }
 
 }