@douyinfe/semi-ui 2.2.1 → 2.3.1

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>

package/notification/notice.tsx

@@ -3,19 +3,20 @@ 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/notification/constants';
+import { cssClasses, numbers, strings } from '@douyinfe/semi-foundation/notification/constants';
 import NotificationFoundation, {
     NoticeAdapter,
-    NoticeState,
-    NoticeProps
+    NoticeProps,
+    NoticeState
 } from '@douyinfe/semi-foundation/notification/notificationFoundation';
 import Button from '../iconButton';
 import BaseComponent from '../_base/baseComponent';
 import { isSemiIcon } from '../_utils';
 import { noop } from 'lodash';
-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/utils/uuid';
 
-export interface NoticeReactProps extends NoticeProps{
+export interface NoticeReactProps extends NoticeProps {
     style?: React.CSSProperties;
     title?: React.ReactNode;
     content?: React.ReactNode;
@@ -88,15 +89,15 @@ class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
     renderTypeIcon() {
         const { type, icon } = this.props;
         const iconMap = {
-            warning: <IconAlertTriangle size="large" />,
-            success: <IconTickCircle size="large" />,
-            info: <IconInfoCircle size="large" />,
-            error: <IconAlertCircle size="large" />,
+            warning: <IconAlertTriangle size="large"/>,
+            success: <IconTickCircle size="large"/>,
+            info: <IconInfoCircle size="large"/>,
+            error: <IconAlertCircle size="large"/>,
         };
         let iconType = iconMap[type];
         const iconCls = cls({
-            [`${prefixCls }-icon`]: true,
-            [`${prefixCls }-${ type}`]: true,
+            [`${prefixCls}-icon`]: true,
+            [`${prefixCls}-${type}`]: true,
         });
         if (icon) {
             iconType = icon;
@@ -104,7 +105,7 @@ class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
         if (iconType) {
             return (
                 <div className={iconCls}>
-                    {isSemiIcon(iconType) ? React.cloneElement(iconType, {size : iconType.props.size || 'large'}): iconType}
+                    {isSemiIcon(iconType) ? React.cloneElement(iconType, { size: iconType.props.size || 'large' }) : iconType}
                 </div>
             );
         }
@@ -152,25 +153,29 @@ class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
             [`${prefixCls}-${theme}`]: theme === 'light',
             [`${prefixCls}-rtl`]: direction === 'rtl',
         });
+        const titleID = getUuidShort({});
         return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             <div
                 className={wrapper}
                 style={style}
                 onMouseEnter={this.clearCloseTimer}
                 onMouseLeave={this.startCloseTimer}
                 onClick={this.notifyClick}
+                aria-labelledby={titleID}
+                role={'alert'}
             >
                 <div>{this.renderTypeIcon()}</div>
                 <div className={`${prefixCls}-inner`}>
                     <div className={`${prefixCls}-content-wrapper`}>
-                        {title ? <div className={`${prefixCls}-title`}>{title}</div> : ''}
+                        {title ? <div id={titleID} className={`${prefixCls}-title`}>{title}</div> : ''}
                         {content ? <div className={`${prefixCls}-content`}>{content}</div> : ''}
                     </div>
                     {showClose && (
                         <Button
                             className={`${prefixCls}-icon-close`}
                             type="tertiary"
-                            icon={<IconClose />}
+                            icon={<IconClose/>}
                             theme="borderless"
                             size="small"
                             onClick={this.close}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.2.1",
+    "version": "2.3.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,11 +14,11 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation-react": "2.2.1",
-        "@douyinfe/semi-foundation": "2.2.1",
-        "@douyinfe/semi-icons": "2.2.1",
-        "@douyinfe/semi-illustrations": "2.2.1",
-        "@douyinfe/semi-theme-default": "2.2.1",
+        "@douyinfe/semi-animation-react": "2.3.1",
+        "@douyinfe/semi-foundation": "2.3.1",
+        "@douyinfe/semi-icons": "2.3.1",
+        "@douyinfe/semi-illustrations": "2.3.1",
+        "@douyinfe/semi-theme-default": "2.3.1",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -68,13 +68,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "6d8bb9dd22bf199225fa2a0dda4f8524a4b97f6f",
+    "gitHead": "c77d5f7c20ea94158c0c79458879c7d884d99c21",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.2.1",
+        "@douyinfe/semi-scss-compile": "2.3.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/pagination/index.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable max-len */
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -213,7 +214,7 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
             [`${prefixCls}-item-disabled`]: prevDisabled,
         });
         return (
-            <li onClick={e => !prevDisabled && this.foundation.goPrev(e)} className={preClassName} tab-index={0}>
+            <li role="button" aria-disabled={prevDisabled ? true : false} aria-label="Previous" onClick={e => !prevDisabled && this.foundation.goPrev(e)} className={preClassName}>
                 {prevText || <IconChevronLeft size="large" />}
             </li>
         );
@@ -228,7 +229,7 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
             [`${prefixCls}-next`]: true,
         });
         return (
-            <li onClick={e => !nextDisabled && this.foundation.goNext(e)} className={nextClassName} tab-index={0}>
+            <li role="button" aria-disabled={nextDisabled ? true : false} aria-label="Next" onClick={e => !nextDisabled && this.foundation.goNext(e)} className={nextClassName}>
                 {nextText || <IconChevronRight size="large" />}
             </li>
         );
@@ -257,6 +258,7 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
         return (
             <div className={switchCls}>
                 <Select
+                    aria-label="Page size selector"
                     onChange={newPageSize => this.foundation.changePageSize(newPageSize)}
                     value={pageSize}
                     key={pageSizeText}
@@ -319,8 +321,8 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
                     key={`${page}${i}`}
                     onClick={() => this.foundation.goPage(page, i)}
                     className={pageListClassName}
-                    tab-index={0}
-
+                    aria-label={page === '...' ? 'More' : `Page ${page}`}
+                    aria-current={currentPage === page ? "page" : false}
                 >
                     {page}
                 </li>
@@ -355,10 +357,12 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
             const page = restList[index];
             return (
                 <div
+                    role="listitem"
                     key={`${page}${index}`}
                     className={className}
                     onClick={() => this.foundation.goPage(page, index)}
                     style={style}
+                    aria-label={`${page}`}
                 >
                     {page}
                 </div>
@@ -417,7 +421,7 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
         const { total, pageSize } = this.state;
         const { showTotal, className, style, hideOnSinglePage, showSizeChanger } = this.props;
         const paginationCls = classNames(className, `${prefixCls}`);
-        const showTotalCls = `${prefixCls }-total`;
+        const showTotalCls = `${prefixCls}-total`;
         const totalPageNum = Math.ceil(total / pageSize);
         if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
             return null;

package/popover/index.tsx

@@ -118,6 +118,7 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
             arrowBounding,
             position,
             style,
+            trigger,
             ...attr
         } = this.props;
         let { spacing } = this.props;
@@ -136,9 +137,12 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
             spacing = showArrow ? numbers.SPACING_WITH_ARROW : numbers.SPACING;
         }
 
+        const role = trigger === 'click' || trigger === 'custom' ? 'dialog' : 'tooltip';
+
         return (
             <Tooltip
                 {...(attr as any)}
+                trigger={trigger}
                 position={position}
                 style={style}
                 content={popContent}
@@ -146,6 +150,7 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
                 spacing={spacing}
                 showArrow={arrow}
                 arrowBounding={arrowBounding}
+                role={role}
             >
                 {children}
             </Tooltip>

package/progress/_story/progress.stories.js

@@ -8,9 +8,9 @@ export default {
 export const _Progress = () => (
   <div style={{ width: 200 }}>
     {/* <Progress percent={10} style= {{ height: 10 }}/> */}
-    <Progress percent={25} />
-    <Progress percent={50} />
-    <Progress percent={80} />
+    <Progress percent={25} aria-label="disk usage"/>
+    <Progress percent={50} aria-label="disk usage"/>
+    <Progress percent={80} aria-label="disk usage"/>
   </div>
 );
 
@@ -20,10 +20,10 @@ _Progress.story = {
 
 export const Vertical = () => (
   <div style={{ height: 200 }}>
-    <Progress percent={10} direction="vertical" style={{ width: 10 }} />
-    <Progress percent={25} direction="vertical" />
-    <Progress percent={50} direction="vertical" />
-    <Progress percent={80} direction="vertical" />
+    <Progress percent={10} direction="vertical" style={{ width: 10 }} aria-label="disk usage"/>
+    <Progress percent={25} direction="vertical" aria-label="disk usage"/>
+    <Progress percent={50} direction="vertical" aria-label="disk usage"/>
+    <Progress percent={80} direction="vertical" aria-label="disk usage"/>
   </div>
 );
 
@@ -33,10 +33,10 @@ Vertical.story = {
 
 export const CircleProgress = () => (
   <React.Fragment>
-    <Progress percent={10} type="circle" />
-    <Progress percent={25} type="circle" />
-    <Progress percent={50} type="circle" />
-    <Progress percent={80} type="circle" />
+    <Progress percent={10} type="circle" aria-label="disk usage"/>
+    <Progress percent={25} type="circle" aria-label="disk usage"/>
+    <Progress percent={50} type="circle" aria-label="disk usage"/>
+    <Progress percent={80} type="circle" aria-label="disk usage"/>
   </React.Fragment>
 );
 
@@ -46,10 +46,10 @@ CircleProgress.story = {
 
 export const CircleProgressSmall = () => (
   <React.Fragment>
-    <Progress percent={10} type="circle" size="small" />
-    <Progress percent={25} type="circle" size="small" />
-    <Progress percent={50} type="circle" size="small" />
-    <Progress percent={80} type="circle" size="small" />
+    <Progress percent={10} type="circle" size="small" aria-label="disk usage"/>
+    <Progress percent={25} type="circle" size="small" aria-label="disk usage"/>
+    <Progress percent={50} type="circle" size="small" aria-label="disk usage"/>
+    <Progress percent={80} type="circle" size="small" aria-label="disk usage"/>
   </React.Fragment>
 );
 
@@ -60,9 +60,9 @@ CircleProgressSmall.story = {
 export const ProgressShowInfo = () => (
   <div style={{ width: 200 }}>
     {/* <Progress percent={10} style= {{ height: 10 }}/> */}
-    <Progress percent={25} showInfo />
-    <Progress percent={50} showInfo />
-    <Progress percent={80} showInfo />
+    <Progress percent={25} showInfo aria-label="disk usage"/>
+    <Progress percent={50} showInfo aria-label="disk usage"/>
+    <Progress percent={80} showInfo aria-label="disk usage"/>
   </div>
 );
 

package/progress/index.tsx

@@ -9,9 +9,13 @@ import { Motion } from '../_base/base';
 const prefixCls = cssClasses.PREFIX;
 
 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;
@@ -31,9 +35,13 @@ export interface ProgressState {
 
 class Progress extends Component<ProgressProps, ProgressState> {
     static propTypes = {
+        'aria-label': PropTypes.string,
+        'aria-labelledby': PropTypes.string,
+        'aria-valuetext': PropTypes.string,
         className: PropTypes.string,
         direction: PropTypes.oneOf(strings.directions),
         format: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+        id: PropTypes.string,
         motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
         orbitStroke: PropTypes.string,
         percent: PropTypes.number,
@@ -51,7 +59,7 @@ class Progress extends Component<ProgressProps, ProgressState> {
     static defaultProps = {
         className: '',
         direction: strings.DEFAULT_DIRECTION,
-        format: (text: string): string => `${text }%`,
+        format: (text: string): string => `${text}%`,
         motion: true,
         orbitStroke: 'var(--semi-color-fill-0)',
         percent: 0,
@@ -124,12 +132,15 @@ class Progress extends Component<ProgressProps, ProgressState> {
     }
 
     renderCircleProgress(): ReactNode {
-        const { strokeLinecap, style, className, strokeWidth, format, size, stroke, showInfo, percent, orbitStroke } = this.props;
+        const { strokeLinecap, style, className, strokeWidth, format, size, stroke, showInfo, percent, orbitStroke, id } = this.props;
+        const ariaLabel = this.props['aria-label'];
+        const ariaLabelledBy = this.props['aria-labelledby'];
+        const ariaValueText = this.props['aria-valuetext'];
         const { percentNumber } = this.state;
         const classNames = {
-            wrapper: cls(`${prefixCls }-circle`, className),
-            svg: cls(`${prefixCls }-circle-ring`),
-            circle: cls(`${prefixCls }-circle-ring-inner`)
+            wrapper: cls(`${prefixCls}-circle`, className),
+            svg: cls(`${prefixCls}-circle-ring`),
+            circle: cls(`${prefixCls}-circle-ring-inner`)
         };
         const perc = this.calcPercent(percent);
         const percNumber = this.calcPercent(percentNumber);
@@ -152,8 +163,19 @@ class Progress extends Component<ProgressProps, ProgressState> {
         const text = format(percNumber);
 
         return (
-            <div className={classNames.wrapper} style={style}>
-                <svg key={size} className={classNames.svg} height={width} width={width}>
+            <div
+                id={id}
+                className={classNames.wrapper} 
+                style={style} 
+                role='progressbar' 
+                aria-valuemin={0} 
+                aria-valuemax={100}
+                aria-valuenow={percNumber}
+                aria-labelledby={ariaLabelledBy}
+                aria-label={ariaLabel}
+                aria-valuetext={ariaValueText}
+            >
+                <svg key={size} className={classNames.svg} height={width} width={width} aria-hidden>
                     <circle
                         strokeDashoffset={0}
                         strokeWidth={strokeWidth}
@@ -164,6 +186,7 @@ class Progress extends Component<ProgressProps, ProgressState> {
                         r={radius}
                         cx={cx}
                         cy={cy}
+                        aria-hidden
                     />
                     <circle
                         className={classNames.circle}
@@ -176,9 +199,10 @@ class Progress extends Component<ProgressProps, ProgressState> {
                         r={radius}
                         cx={cx}
                         cy={cy}
+                        aria-hidden
                     />
                 </svg>
-                {showInfo && size !== 'small' ? (<span className={`${prefixCls }-circle-text`}>{text}</span>) : null}
+                {showInfo && size !== 'small' ? (<span className={`${prefixCls}-circle-text`}>{text}</span>) : null}
             </div>
         );
     }
@@ -196,17 +220,20 @@ class Progress extends Component<ProgressProps, ProgressState> {
     }
 
     renderLineProgress(): ReactNode {
-        const { className, style, stroke, direction, format, showInfo, size, percent, orbitStroke } = this.props;
+        const { className, style, stroke, direction, format, showInfo, size, percent, orbitStroke, id } = this.props;
+        const ariaLabel = this.props['aria-label'];
+        const ariaLabelledBy = this.props['aria-labelledby'];
+        const ariaValueText = this.props['aria-valuetext'];
         const { percentNumber } = this.state;
         const progressWrapperCls = cls(prefixCls, className, {
-            [`${prefixCls }-horizontal`]: direction === strings.DEFAULT_DIRECTION,
-            [`${prefixCls }-vertical`]: direction !== strings.DEFAULT_DIRECTION,
-            [`${prefixCls }-large`]: size === 'large',
+            [`${prefixCls}-horizontal`]: direction === strings.DEFAULT_DIRECTION,
+            [`${prefixCls}-vertical`]: direction !== strings.DEFAULT_DIRECTION,
+            [`${prefixCls}-large`]: size === 'large',
         });
         const progressTrackCls = cls({
-            [`${prefixCls }-track`]: true,
+            [`${prefixCls}-track`]: true,
         });
-        const innerCls = cls(`${prefixCls }-track-inner`);
+        const innerCls = cls(`${prefixCls}-track-inner`);
 
         const perc = this.calcPercent(percent);
         const percNumber = this.calcPercent(percentNumber);
@@ -215,19 +242,30 @@ class Progress extends Component<ProgressProps, ProgressState> {
             backgroundColor: stroke
         };
         if (direction === strings.DEFAULT_DIRECTION) {
-            innerStyle.width = `${perc }%`;
+            innerStyle.width = `${perc}%`;
         } else {
-            innerStyle.height = `${perc }%`;
+            innerStyle.height = `${perc}%`;
         }
 
         const text = format(percNumber);
 
         return (
-            <div className={progressWrapperCls} style={style}>
-                <div className={progressTrackCls} style={orbitStroke ? { backgroundColor: orbitStroke } : {}}>
-                    <div className={innerCls} style={innerStyle} />
+            <div
+                id={id}
+                className={progressWrapperCls}
+                style={style}
+                role='progressbar'
+                aria-valuemin={0}
+                aria-valuemax={100}
+                aria-valuenow={perc}
+                aria-labelledby={ariaLabelledBy}
+                aria-label={ariaLabel}
+                aria-valuetext={ariaValueText}
+            >
+                <div className={progressTrackCls} style={orbitStroke ? { backgroundColor: orbitStroke } : {}} aria-hidden>
+                    <div className={innerCls} style={innerStyle} aria-hidden />
                 </div>
-                {showInfo ? <div className={`${prefixCls }-line-text`}>{text}</div> : null}
+                {showInfo ? <div className={`${prefixCls}-line-text`}>{text}</div> : null}
             </div>
         );
     }