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

package/lib/cjs/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/cjs/layout/Sider.js

@@ -137,6 +137,7 @@ class Sider extends _react.default.PureComponent {
     });
     return /*#__PURE__*/_react.default.createElement("aside", (0, _assign.default)({
       className: classString,
+      "aria-label": this.props['aria-label'],
       style: style
     }, (0, _getDataAttr.default)(others)), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-sider-children")
@@ -150,7 +151,9 @@ Sider.propTypes = {
   style: _propTypes.default.object,
   className: _propTypes.default.string,
   breakpoint: _propTypes.default.arrayOf(_propTypes.default.oneOf(bpt)),
-  onBreakpoint: _propTypes.default.func
+  onBreakpoint: _propTypes.default.func,
+  'aria-label': _propTypes.default.string,
+  role: _propTypes.default.string
 };
 Sider.defaultProps = {
   prefixCls: _constants.cssClasses.PREFIX

package/lib/cjs/layout/index.js

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

package/lib/cjs/list/item.js

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

package/lib/cjs/modal/Modal.js

@@ -114,6 +114,7 @@ class Modal extends _baseComponent.default {
           return null;
         } else {
           return /*#__PURE__*/_react.default.createElement(_button.default, (0, _assign.default)({
+            "aria-label": "cancel",
             onClick: this.handleCancel,
             loading: cancelLoading,
             type: "tertiary"
@@ -124,6 +125,7 @@ class Modal extends _baseComponent.default {
       return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
         componentName: "Modal"
       }, (locale, localeCode) => /*#__PURE__*/_react.default.createElement("div", null, getCancelButton(locale), /*#__PURE__*/_react.default.createElement(_button.default, (0, _assign.default)({
+        "aria-label": "confirm",
         type: okType,
         theme: "solid",
         loading: confirmLoading,

package/lib/cjs/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/cjs/modal/modalContentFoundation';
+import ModalContentFoundation, { ModalContentAdapter, ModalContentProps, ModalContentState } from '@douyinfe/semi-foundation/lib/cjs/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/cjs/modal/ModalContent.js

@@ -22,6 +22,10 @@ var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-j
 
 var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
 
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -44,6 +48,8 @@ var _modalContentFoundation = _interopRequireDefault(require("@douyinfe/semi-fou
 
 var _semiIcons = require("@douyinfe/semi-icons");
 
+var _utils = require("../_utils");
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -118,6 +124,7 @@ class ModalContent extends _baseComponent.default {
         const iconType = closeIcon || /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null);
 
         closer = /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+          "aria-label": "close",
           className: "".concat(_constants.cssClasses.DIALOG, "-close"),
           key: "close-btn",
           onClick: this.close,
@@ -154,7 +161,8 @@ class ModalContent extends _baseComponent.default {
         className: "".concat(_constants.cssClasses.DIALOG, "-header")
       }, icon, /*#__PURE__*/_react.default.createElement(_typography.default.Title, {
         heading: 5,
-        className: "".concat(_constants.cssClasses.DIALOG, "-title")
+        className: "".concat(_constants.cssClasses.DIALOG, "-title"),
+        id: "".concat(_constants.cssClasses.DIALOG, "-title")
       }, title), closer);
     };
 
@@ -172,6 +180,7 @@ class ModalContent extends _baseComponent.default {
       const hasHeader = title !== null && title !== undefined || 'header' in this.props;
       return hasHeader ? /*#__PURE__*/_react.default.createElement("div", {
         className: bodyCls,
+        id: "".concat(_constants.cssClasses.DIALOG, "-body"),
         style: bodyStyle
       }, children) : /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_constants.cssClasses.DIALOG, "-body-wrapper")
@@ -212,13 +221,21 @@ class ModalContent extends _baseComponent.default {
         className: "".concat(_constants.cssClasses.DIALOG, "-footer")
       }, props.footer) : null;
 
-      const dialogElement = /*#__PURE__*/_react.default.createElement("div", {
+      const dialogElement =
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      _react.default.createElement("div", {
         key: "dialog-element",
         className: digCls,
         onMouseDown: this.onDialogMouseDown,
         style: (0, _assign.default)((0, _assign.default)({}, props.style), style),
         id: this.dialogId
       }, /*#__PURE__*/_react.default.createElement("div", {
+        role: "dialog",
+        ref: this.modalDialogRef,
+        "aria-modal": "true",
+        "aria-labelledby": "".concat(_constants.cssClasses.DIALOG, "-title"),
+        "aria-describedby": "".concat(_constants.cssClasses.DIALOG, "-body"),
         onAnimationEnd: props.onAnimationEnd,
         className: (0, _classnames.default)(["".concat(_constants.cssClasses.DIALOG, "-content"), props.contentClassName, {
           ["".concat(_constants.cssClasses.DIALOG, "-content-fullScreen")]: props.isFullScreen
@@ -230,10 +247,12 @@ class ModalContent extends _baseComponent.default {
     };
 
     this.state = {
-      dialogMouseDown: false
+      dialogMouseDown: false,
+      prevFocusElement: (0, _utils.getActiveElement)()
     };
     this.foundation = new _modalContentFoundation.default(this.adapter);
     this.dialogId = "dialog-".concat(uuid++);
+    this.modalDialogRef = /*#__PURE__*/_react.default.createRef();
   }
 
   get adapter() {
@@ -270,12 +289,35 @@ class ModalContent extends _baseComponent.default {
           document.removeEventListener('keydown', (0, _bind.default)(_context3 = this.foundation.handleKeyDown).call(_context3, this.foundation));
         }
       },
-      getMouseState: () => this.state.dialogMouseDown
+      getMouseState: () => this.state.dialogMouseDown,
+      modalDialogFocus: () => {
+        let activeElementInDialog;
+
+        if (this.modalDialogRef) {
+          const activeElement = (0, _utils.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 = (0, _get2.default)(prevFocusElement, 'focus');
+        (0, _isFunction2.default)(focus) && prevFocusElement.focus();
+      }
     });
   }
 
   componentDidMount() {
     this.foundation.handleKeyDownEventListenerMount();
+    this.foundation.modalDialogFocus();
   }
 
   componentWillUnmount() {
@@ -304,7 +346,7 @@ class ModalContent extends _baseComponent.default {
     const elem = /*#__PURE__*/_react.default.createElement("div", {
       className: classList
     }, this.getMaskElement(), /*#__PURE__*/_react.default.createElement("div", {
-      role: "modal",
+      role: "none",
       tabIndex: -1,
       className: "".concat(_constants.cssClasses.DIALOG, "-wrap"),
       onClick: maskClosable ? this.onMaskClick : null,

package/lib/cjs/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/cjs/navigation/itemFoundation';
+import ItemFoundation, { ItemProps, SelectedItemProps, ItemAdapter } from '@douyinfe/semi-foundation/lib/cjs/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/cjs/navigation/Item.js

@@ -73,6 +73,8 @@ class NavItem extends _baseComponent.default {
 
     this.handleClick = e => this.foundation.handleClick(e);
 
+    this.handleKeyPress = e => this.foundation.handleKeyPress(e);
+
     this.state = {
       tooltipShow: false
     };
@@ -131,12 +133,17 @@ class NavItem extends _baseComponent.default {
         var _context;
 
         return Boolean(this.context && this.context.selectedKeys && (0, _includes.default)(_context = this.context.selectedKeys).call(_context, this.props.itemKey));
+      },
+      getIsOpen: () => {
+        var _context2;
+
+        return Boolean(this.context && this.context.openKeys && (0, _includes.default)(_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;
 
@@ -155,7 +162,7 @@ class NavItem extends _baseComponent.default {
     }
 
     const className = (0, _classnames.default)("".concat(clsPrefix, "-icon"), {
-      [(0, _concat.default)(_context2 = "".concat(clsPrefix, "-icon-toggle-")).call(_context2, this.context.toggleIconPosition)]: isToggleIcon,
+      [(0, _concat.default)(_context3 = "".concat(clsPrefix, "-icon-toggle-")).call(_context3, this.context.toggleIconPosition)]: isToggleIcon,
       ["".concat(clsPrefix, "-icon-info")]: !isToggleIcon
     });
     return /*#__PURE__*/_react.default.createElement("i", {
@@ -243,14 +250,27 @@ class NavItem extends _baseComponent.default {
         ["".concat(clsPrefix, "-collapsed")]: isCollapsed,
         ["".concat(clsPrefix, "-disabled")]: disabled
       });
-      itemDom = /*#__PURE__*/_react.default.createElement("li", {
+      const ariaProps = {
+        'aria-disabled': disabled
+      };
+
+      if (isSubNav) {
+        const isOpen = this.adapter.getIsOpen();
+        ariaProps['aria-expanded'] = isOpen;
+      }
+
+      itemDom = /*#__PURE__*/_react.default.createElement("li", (0, _assign.default)({
+        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/cjs/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/cjs/navigation/navigation.css';
-import { SubNavAdapter } from '@douyinfe/semi-foundation/lib/cjs/navigation/subNavFoundation';
+import SubNavFoundation, { SubNavAdapter } from '@douyinfe/semi-foundation/lib/cjs/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/cjs/navigation/SubNav.js

@@ -79,6 +79,10 @@ class SubNav extends _baseComponent.default {
       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 = {
@@ -233,9 +237,12 @@ class SubNav extends _baseComponent.default {
     }
 
     const titleDiv = /*#__PURE__*/_react.default.createElement("div", {
+      role: "menuitem",
+      tabIndex: -1,
       ref: this.setTitleRef,
       className: titleCls,
-      onClick: this.handleClick
+      onClick: this.handleClick,
+      onKeyPress: this.handleKeyPress
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-item-inner")
     }, placeholderIcons, this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, _constants.strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== _constants.strings.MODE_HORIZONTAL ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT, undefined, undefined, 'key-inSubNav-position-left') : null, /*#__PURE__*/_react.default.createElement("span", {

package/lib/cjs/navigation/index.js

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

package/lib/cjs/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/cjs/notification/notificationFoundation';
+import { NoticeAdapter, NoticeProps, NoticeState } from '@douyinfe/semi-foundation/lib/cjs/notification/notificationFoundation';
 import BaseComponent from '../_base/baseComponent';
 export interface NoticeReactProps extends NoticeProps {
     style?: React.CSSProperties;

package/lib/cjs/notification/notice.js

@@ -42,6 +42,8 @@ var _utils = require("../_utils");
 
 var _semiIcons = require("@douyinfe/semi-icons");
 
+var _uuid = require("@douyinfe/semi-foundation/lib/cjs/utils/uuid");
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -181,28 +183,36 @@ class Notice extends _baseComponent.default {
       [(0, _concat.default)(_context3 = "".concat(prefixCls, "-")).call(_context3, theme)]: theme === 'light',
       ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
     });
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: wrapper,
-      style: style,
-      onMouseEnter: this.clearCloseTimer,
-      onMouseLeave: this.startCloseTimer,
-      onClick: this.notifyClick
-    }, /*#__PURE__*/_react.default.createElement("div", null, this.renderTypeIcon()), /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-inner")
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-content-wrapper")
-    }, title ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-title")
-    }, title) : '', content ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-content")
-    }, content) : ''), showClose && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-      className: "".concat(prefixCls, "-icon-close"),
-      type: "tertiary",
-      icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
-      theme: "borderless",
-      size: "small",
-      onClick: this.close
-    })));
+    const titleID = (0, _uuid.getUuidShort)({});
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      _react.default.createElement("div", {
+        className: wrapper,
+        style: style,
+        onMouseEnter: this.clearCloseTimer,
+        onMouseLeave: this.startCloseTimer,
+        onClick: this.notifyClick,
+        "aria-labelledby": titleID,
+        role: 'alert'
+      }, /*#__PURE__*/_react.default.createElement("div", null, this.renderTypeIcon()), /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-inner")
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-content-wrapper")
+      }, title ? /*#__PURE__*/_react.default.createElement("div", {
+        id: titleID,
+        className: "".concat(prefixCls, "-title")
+      }, title) : '', content ? /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-content")
+      }, content) : ''), showClose && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+        className: "".concat(prefixCls, "-icon-close"),
+        type: "tertiary",
+        icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
+        theme: "borderless",
+        size: "small",
+        onClick: this.close
+      })))
+    );
   }
 
 }

package/lib/cjs/pagination/index.js

@@ -55,6 +55,8 @@ var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 var _index3 = _interopRequireDefault(require("../popover/index"));
 
 /* eslint-disable max-len */
+
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 const prefixCls = _constants.cssClasses.PREFIX;
 const {
   Option
@@ -182,9 +184,11 @@ class Pagination extends _baseComponent.default {
       ["".concat(prefixCls, "-item-disabled")]: prevDisabled
     });
     return /*#__PURE__*/_react.default.createElement("li", {
+      role: "button",
+      "aria-disabled": prevDisabled ? true : false,
+      "aria-label": "Previous",
       onClick: e => !prevDisabled && this.foundation.goPrev(e),
-      className: preClassName,
-      "tab-index": 0
+      className: preClassName
     }, prevText || /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronLeft, {
       size: "large"
     }));
@@ -203,9 +207,11 @@ class Pagination extends _baseComponent.default {
       ["".concat(prefixCls, "-next")]: true
     });
     return /*#__PURE__*/_react.default.createElement("li", {
+      role: "button",
+      "aria-disabled": nextDisabled ? true : false,
+      "aria-label": "Next",
       onClick: e => !nextDisabled && this.foundation.goNext(e),
-      className: nextClassName,
-      "tab-index": 0
+      className: nextClassName
     }, nextText || /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronRight, {
       size: "large"
     }));
@@ -239,6 +245,7 @@ class Pagination extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: switchCls
     }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      "aria-label": "Page size selector",
       onChange: newPageSize => this.foundation.changePageSize(newPageSize),
       value: pageSize,
       key: pageSizeText,
@@ -305,7 +312,8 @@ class Pagination extends _baseComponent.default {
         key: (0, _concat.default)(_context3 = "".concat(page)).call(_context3, i),
         onClick: () => this.foundation.goPage(page, i),
         className: pageListClassName,
-        "tab-index": 0
+        "aria-label": page === '...' ? 'More' : "Page ".concat(page),
+        "aria-current": currentPage === page ? "page" : false
       }, page);
 
       if (page === '...') {
@@ -344,10 +352,12 @@ class Pagination extends _baseComponent.default {
       } = item;
       const page = restList[index];
       return /*#__PURE__*/_react.default.createElement("div", {
+        role: "listitem",
         key: (0, _concat.default)(_context5 = "".concat(page)).call(_context5, index),
         className: className,
         onClick: () => this.foundation.goPage(page, index),
-        style: style
+        style: style,
+        "aria-label": "".concat(page)
       }, page);
     };
 

package/lib/cjs/popover/index.js

@@ -77,9 +77,10 @@ class Popover extends _react.default.PureComponent {
       arrowStyle = {},
       arrowBounding,
       position,
-      style
+      style,
+      trigger
     } = _a,
-          attr = __rest(_a, ["children", "prefixCls", "showArrow", "arrowStyle", "arrowBounding", "position", "style"]);
+          attr = __rest(_a, ["children", "prefixCls", "showArrow", "arrowStyle", "arrowBounding", "position", "style", "trigger"]);
 
     let {
       spacing
@@ -97,14 +98,17 @@ class Popover extends _react.default.PureComponent {
       spacing = showArrow ? _constants.numbers.SPACING_WITH_ARROW : _constants.numbers.SPACING;
     }
 
+    const role = trigger === 'click' || trigger === 'custom' ? 'dialog' : 'tooltip';
     return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({}, attr, {
+      trigger: trigger,
       position: position,
       style: style,
       content: popContent,
       prefixCls: prefixCls,
       spacing: spacing,
       showArrow: arrow,
-      arrowBounding: arrowBounding
+      arrowBounding: arrowBounding,
+      role: role
     }), children);
   }
 

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

@@ -4,9 +4,13 @@ import '@douyinfe/semi-foundation/lib/cjs/progress/progress.css';
 import { Animation } from '@douyinfe/semi-animation';
 import { Motion } from '../_base/base';
 export interface ProgressProps {
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-valuetext'?: string | undefined;
     className?: string;
     direction?: 'horizontal' | 'vertical';
     format?: (percent: number) => React.ReactNode;
+    id?: string;
     motion?: Motion;
     orbitStroke?: string;
     percent?: number;
@@ -24,9 +28,13 @@ export interface ProgressState {
 }
 declare class Progress extends Component<ProgressProps, ProgressState> {
     static propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-valuetext': PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         direction: PropTypes.Requireable<string>;
         format: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        id: PropTypes.Requireable<string>;
         motion: PropTypes.Requireable<boolean | object>;
         orbitStroke: PropTypes.Requireable<string>;
         percent: PropTypes.Requireable<number>;