@douyinfe/semi-ui 2.2.2 → 2.4.0-beta.0

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.2",
+    "version": "2.4.0-beta.0",
     "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.2",
-        "@douyinfe/semi-foundation": "2.2.2",
-        "@douyinfe/semi-icons": "2.2.2",
-        "@douyinfe/semi-illustrations": "2.2.2",
-        "@douyinfe/semi-theme-default": "2.2.2",
+        "@douyinfe/semi-animation-react": "2.4.0-beta.0",
+        "@douyinfe/semi-foundation": "2.4.0-beta.0",
+        "@douyinfe/semi-icons": "2.4.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.4.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.4.0-beta.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -68,13 +68,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "de84e4f81bb443c457c075e808c4bd1fcf9441d7",
+    "gitHead": "ebf8a78f5152f9733af771cd567f042eccb8c4b9",
     "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.2",
+        "@douyinfe/semi-scss-compile": "2.4.0-beta.0",
         "@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>
         );
     }

package/radio/radio.tsx

@@ -7,6 +7,7 @@ import { noop } from 'lodash';
 import RadioFoundation, { RadioAdapter } from '@douyinfe/semi-foundation/radio/radioFoundation';
 import { RadioChangeEvent } from '@douyinfe/semi-foundation/radio/radioInnerFoundation';
 import { strings, radioClasses as css } from '@douyinfe/semi-foundation/radio/constants';
+import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 import '@douyinfe/semi-foundation/radio/radio.scss';
 
 import BaseComponent from '../_base/baseComponent';
@@ -38,6 +39,7 @@ export type RadioProps = {
     addonStyle?: React.CSSProperties;
     addonClassName?: string;
     type?: RadioType;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 };
 
 export interface RadioState {
@@ -67,6 +69,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         addonStyle: PropTypes.object,
         addonClassName: PropTypes.string,
         type: PropTypes.oneOf([strings.TYPE_DEFAULT, strings.TYPE_BUTTON, strings.TYPE_CARD, strings.TYPE_PURECARD]), // Button style type
+        'aria-label': PropTypes.string,
     };
 
     static defaultProps: Partial<RadioProps> = {
@@ -82,6 +85,9 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
 
     radioEntity: RadioInner;
     context!: RadioContextValue;
+    foundation: RadioFoundation;
+    addonId: string;
+    extraId: string;
 
     constructor(props: RadioProps) {
         super(props);
@@ -90,6 +96,8 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         };
         this.foundation = new RadioFoundation(this.adapter);
         this.radioEntity = null;
+        this.addonId = getUuidShort({ prefix: 'addon' });
+        this.extraId = getUuidShort({ prefix: 'extra' });
     }
 
     get adapter(): RadioAdapter {
@@ -209,8 +217,8 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         }, addonClassName);
         const renderContent = () => (
             <>
-                {children ? <span className={addonCls} style={addonStyle}>{children}</span> : null}
-                {extra && !isButtonRadio ? <div className={`${prefix}-extra`}>{extra}</div> : null}
+                {children ? <span className={addonCls} style={addonStyle} id={this.addonId}>{children}</span> : null}
+                {extra && !isButtonRadio ? <div className={`${prefix}-extra`} id={this.extraId}>{extra}</div> : null}
             </>
         );
         return (
@@ -231,6 +239,8 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
                     ref={(ref: RadioInner) => {
                         this.radioEntity = ref;
                     }}
+                    addonId={children && this.addonId}
+                    extraId={extra && this.extraId}
                 />
                 {
                     isCardRadioGroup ?

package/radio/radioGroup.tsx

@@ -36,6 +36,13 @@ export type RadioGroupProps = {
     type?: RadioType;
     buttonSize?: RadioGroupButtonSize;
     prefixCls?: string;
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
+    id?: string;
 };
 
 export interface RadioGroupState {
@@ -57,7 +64,14 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
         className: PropTypes.string,
         style: PropTypes.object,
         direction: PropTypes.oneOf(strings.DIRECTION_SET),
-        mode: PropTypes.oneOf(strings.MODE)
+        mode: PropTypes.oneOf(strings.MODE),
+        'aria-label': PropTypes.string,
+        'aria-describedby': PropTypes.string,
+        'aria-errormessage': PropTypes.string,
+        'aria-invalid': PropTypes.bool,
+        'aria-labelledby': PropTypes.string,
+        'aria-required': PropTypes.bool,
+        id: PropTypes.string,
     };
 
     static defaultProps: Partial<RadioGroupProps> = {
@@ -69,6 +83,7 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
         buttonSize: 'middle'
     };
 
+    foundation: RadioGroupFoundation;
     constructor(props: RadioGroupProps) {
         super(props);
         this.state = {
@@ -121,7 +136,8 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
             style,
             direction,
             type,
-            buttonSize
+            buttonSize,
+            id,
         } = this.props;
 
         const isButtonRadio = type === strings.TYPE_BUTTON;
@@ -177,7 +193,17 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
         }
 
         return (
-            <div className={prefixClsDisplay} style={style}>
+            <div
+                className={prefixClsDisplay}
+                style={style}
+                id={id}
+                aria-label={this.props['aria-label']}
+                aria-invalid={this.props['aria-invalid']}
+                aria-errormessage={this.props['aria-errormessage']}
+                aria-labelledby={this.props['aria-labelledby']}
+                aria-describedby={this.props['aria-describedby']}
+                aria-required={this.props['aria-required']}
+            >
                 <Context.Provider
                     value={{
                         radioGroup: {