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

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>;

package/lib/cjs/progress/index.js

@@ -122,8 +122,12 @@ class Progress extends _react.Component {
       stroke,
       showInfo,
       percent,
-      orbitStroke
+      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;
@@ -153,13 +157,22 @@ class Progress extends _react.Component {
     const strokeDasharray = (0, _concat.default)(_context = "".concat(circumference, " ")).call(_context, circumference);
     const text = format(percNumber);
     return /*#__PURE__*/_react.default.createElement("div", {
+      id: id,
       className: classNames.wrapper,
-      style: style
+      style: style,
+      role: 'progressbar',
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": percNumber,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-label": ariaLabel,
+      "aria-valuetext": ariaValueText
     }, /*#__PURE__*/_react.default.createElement("svg", {
       key: size,
       className: classNames.svg,
       height: width,
-      width: width
+      width: width,
+      "aria-hidden": true
     }, /*#__PURE__*/_react.default.createElement("circle", {
       strokeDashoffset: 0,
       strokeWidth: strokeWidth,
@@ -169,7 +182,8 @@ class Progress extends _react.Component {
       stroke: orbitStroke,
       r: radius,
       cx: cx,
-      cy: cy
+      cy: cy,
+      "aria-hidden": true
     }), /*#__PURE__*/_react.default.createElement("circle", {
       className: classNames.circle,
       strokeDashoffset: strokeDashoffset,
@@ -180,7 +194,8 @@ class Progress extends _react.Component {
       stroke: stroke,
       r: radius,
       cx: cx,
-      cy: cy
+      cy: cy,
+      "aria-hidden": true
     })), showInfo && size !== 'small' ? /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(prefixCls, "-circle-text")
     }, text) : null);
@@ -210,8 +225,12 @@ class Progress extends _react.Component {
       showInfo,
       size,
       percent,
-      orbitStroke
+      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;
@@ -238,16 +257,26 @@ class Progress extends _react.Component {
 
     const text = format(percNumber);
     return /*#__PURE__*/_react.default.createElement("div", {
+      id: id,
       className: progressWrapperCls,
-      style: style
+      style: style,
+      role: 'progressbar',
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": perc,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-label": ariaLabel,
+      "aria-valuetext": ariaValueText
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: progressTrackCls,
       style: orbitStroke ? {
         backgroundColor: orbitStroke
-      } : {}
+      } : {},
+      "aria-hidden": true
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: innerCls,
-      style: innerStyle
+      style: innerStyle,
+      "aria-hidden": true
     })), showInfo ? /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-line-text")
     }, text) : null);
@@ -268,9 +297,13 @@ class Progress extends _react.Component {
 }
 
 Progress.propTypes = {
+  'aria-label': _propTypes.default.string,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-valuetext': _propTypes.default.string,
   className: _propTypes.default.string,
   direction: _propTypes.default.oneOf(_constants.strings.directions),
   format: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+  id: _propTypes.default.string,
   motion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func, _propTypes.default.object]),
   orbitStroke: _propTypes.default.string,
   percent: _propTypes.default.number,

package/lib/cjs/radio/radio.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RadioAdapter } from '@douyinfe/semi-foundation/lib/cjs/radio/radioFoundation';
+import RadioFoundation, { RadioAdapter } from '@douyinfe/semi-foundation/lib/cjs/radio/radioFoundation';
 import { RadioChangeEvent } from '@douyinfe/semi-foundation/lib/cjs/radio/radioInnerFoundation';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/radio/constants';
 import '@douyinfe/semi-foundation/lib/cjs/radio/radio.css';
@@ -27,6 +27,7 @@ export declare type RadioProps = {
     addonStyle?: React.CSSProperties;
     addonClassName?: string;
     type?: RadioType;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 };
 export interface RadioState {
     hover?: boolean;
@@ -52,10 +53,14 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
         addonStyle: PropTypes.Requireable<object>;
         addonClassName: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<"default" | "button" | "card" | "pureCard">;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: Partial<RadioProps>;
     radioEntity: RadioInner;
     context: RadioContextValue;
+    foundation: RadioFoundation;
+    addonId: string;
+    extraId: string;
     constructor(props: RadioProps);
     get adapter(): RadioAdapter;
     isInGroup(): {

package/lib/cjs/radio/radio.js

@@ -26,6 +26,8 @@ var _radioFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation
 
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/radio/constants");
 
+var _uuid = require("@douyinfe/semi-foundation/lib/cjs/utils/uuid");
+
 require("@douyinfe/semi-foundation/lib/cjs/radio/radio.css");
 
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
@@ -69,6 +71,12 @@ class Radio extends _baseComponent.default {
     };
     this.foundation = new _radioFoundation.default(this.adapter);
     this.radioEntity = null;
+    this.addonId = (0, _uuid.getUuidShort)({
+      prefix: 'addon'
+    });
+    this.extraId = (0, _uuid.getUuidShort)({
+      prefix: 'extra'
+    });
   }
 
   get adapter() {
@@ -165,9 +173,11 @@ class Radio extends _baseComponent.default {
 
     const renderContent = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children ? /*#__PURE__*/_react.default.createElement("span", {
       className: addonCls,
-      style: addonStyle
+      style: addonStyle,
+      id: this.addonId
     }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefix, "-extra")
+      className: "".concat(prefix, "-extra"),
+      id: this.extraId
     }, extra) : null);
 
     return /*#__PURE__*/_react.default.createElement("label", {
@@ -183,7 +193,9 @@ class Radio extends _baseComponent.default {
       onChange: this.onChange,
       ref: ref => {
         this.radioEntity = ref;
-      }
+      },
+      addonId: children && this.addonId,
+      extraId: extra && this.extraId
     })), isCardRadioGroup ? /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefix, "-isCardRadioGroup_content")
     }, renderContent()) : renderContent());
@@ -209,8 +221,8 @@ Radio.propTypes = {
   extra: _propTypes.default.node,
   addonStyle: _propTypes.default.object,
   addonClassName: _propTypes.default.string,
-  type: _propTypes.default.oneOf([_constants.strings.TYPE_DEFAULT, _constants.strings.TYPE_BUTTON, _constants.strings.TYPE_CARD, _constants.strings.TYPE_PURECARD]) // Button style type
-
+  type: _propTypes.default.oneOf([_constants.strings.TYPE_DEFAULT, _constants.strings.TYPE_BUTTON, _constants.strings.TYPE_CARD, _constants.strings.TYPE_PURECARD]),
+  'aria-label': _propTypes.default.string
 };
 Radio.defaultProps = {
   autoFocus: false,

package/lib/cjs/radio/radioGroup.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/radio/constants';
-import { RadioGroupAdapter } from '@douyinfe/semi-foundation/lib/cjs/radio/radioGroupFoundation';
+import RadioGroupFoundation, { RadioGroupAdapter } from '@douyinfe/semi-foundation/lib/cjs/radio/radioGroupFoundation';
 import { RadioChangeEvent } from '@douyinfe/semi-foundation/lib/cjs/radio/radioInnerFoundation';
 import BaseComponent from '../_base/baseComponent';
 import { ArrayElement } from '../_base/base';
@@ -30,6 +30,13 @@ export declare 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 {
     value?: any;
@@ -50,8 +57,16 @@ declare class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState>
         style: PropTypes.Requireable<object>;
         direction: PropTypes.Requireable<"horizontal" | "vertical">;
         mode: PropTypes.Requireable<"" | "advanced">;
+        'aria-label': PropTypes.Requireable<string>;
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
+        id: PropTypes.Requireable<string>;
     };
     static defaultProps: Partial<RadioGroupProps>;
+    foundation: RadioGroupFoundation;
     constructor(props: RadioGroupProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: RadioGroupProps): void;

package/lib/cjs/radio/radioGroup.js

@@ -91,7 +91,8 @@ class RadioGroup extends _baseComponent.default {
       style,
       direction,
       type,
-      buttonSize
+      buttonSize,
+      id
     } = this.props;
     const isButtonRadio = type === _constants.strings.TYPE_BUTTON;
     const isPureCardRadio = type === _constants.strings.TYPE_PURECARD;
@@ -140,7 +141,14 @@ class RadioGroup extends _baseComponent.default {
 
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixClsDisplay,
-      style: style
+      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']
     }, /*#__PURE__*/_react.default.createElement(_context6.default.Provider, {
       value: {
         radioGroup: {
@@ -175,7 +183,14 @@ RadioGroup.propTypes = {
   className: _propTypes.default.string,
   style: _propTypes.default.object,
   direction: _propTypes.default.oneOf(_constants.strings.DIRECTION_SET),
-  mode: _propTypes.default.oneOf(_constants.strings.MODE)
+  mode: _propTypes.default.oneOf(_constants.strings.MODE),
+  'aria-label': _propTypes.default.string,
+  'aria-describedby': _propTypes.default.string,
+  'aria-errormessage': _propTypes.default.string,
+  'aria-invalid': _propTypes.default.bool,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-required': _propTypes.default.bool,
+  id: _propTypes.default.string
 };
 RadioGroup.defaultProps = {
   disabled: false,

package/lib/cjs/radio/radioInner.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RadioChangeEvent, RadioInnerAdapter } from '@douyinfe/semi-foundation/lib/cjs/radio/radioInnerFoundation';
+import RadioInnerFoundation, { RadioChangeEvent, RadioInnerAdapter } from '@douyinfe/semi-foundation/lib/cjs/radio/radioInnerFoundation';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 export declare type RadioInnerMode = 'advanced' | '';
 export interface RadioInnerProps extends BaseProps {
@@ -14,6 +14,9 @@ export interface RadioInnerProps extends BaseProps {
     prefixCls?: string;
     ref?: React.MutableRefObject<RadioInner> | ((instance: RadioInner) => void);
     isPureCardRadioGroup?: boolean;
+    addonId?: string;
+    extraId?: string;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 interface RadioInnerState {
     checked?: boolean;
@@ -26,12 +29,14 @@ declare class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState>
         isButtonRadio: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         mode: PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
         onChange: (...args: any[]) => void;
         isButtonRadio: boolean;
     };
     inputEntity: HTMLInputElement;
+    foundation: RadioInnerFoundation;
     constructor(props: RadioInnerProps);
     get adapter(): RadioInnerAdapter;
     componentDidMount(): void;