@douyinfe/semi-ui 2.2.0 → 2.3.0

package/lib/cjs/upload/index.js

@@ -233,6 +233,7 @@ class Upload extends _baseComponent.default {
       });
       const mainCls = "".concat(prefixCls, "-file-list-main");
       const addContentProps = {
+        role: 'button',
         className: uploadAddCls,
         onClick: this.onClick
       };
@@ -265,7 +266,9 @@ class Upload extends _baseComponent.default {
       return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
         componentName: "Upload"
       }, locale => /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, containerProps), /*#__PURE__*/_react.default.createElement("div", {
-        className: mainCls
+        className: mainCls,
+        role: "list",
+        "aria-label": "picture list"
       }, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList ? addContent : null)));
     };
 
@@ -299,10 +302,14 @@ class Upload extends _baseComponent.default {
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(titleCls, "-choosen")
       }, locale.selectedFiles), showClear ? /*#__PURE__*/_react.default.createElement("span", {
+        role: "button",
+        tabIndex: 0,
         onClick: this.clear,
         className: "".concat(titleCls, "-clear")
       }, locale.clear) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
-        className: mainCls
+        className: mainCls,
+        role: "list",
+        "aria-label": "file list"
       }, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)))));
     };
 
@@ -327,7 +334,8 @@ class Upload extends _baseComponent.default {
       const {
         draggable,
         children,
-        listType
+        listType,
+        disabled
       } = this.props;
       const uploadAddCls = (0, _classnames.default)("".concat(prefixCls, "-add"));
 
@@ -340,6 +348,9 @@ class Upload extends _baseComponent.default {
       }
 
       return /*#__PURE__*/_react.default.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        "aria-disabled": disabled,
         className: uploadAddCls,
         onClick: this.onClick
       }, children);
@@ -353,7 +364,8 @@ class Upload extends _baseComponent.default {
         children,
         dragIcon,
         dragMainText,
-        dragSubText
+        dragSubText,
+        disabled
       } = this.props;
       const dragAreaBaseCls = "".concat(prefixCls, "-drag-area");
       const dragAreaCls = (0, _classnames.default)(dragAreaBaseCls, {
@@ -364,6 +376,9 @@ class Upload extends _baseComponent.default {
       return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
         componentName: "Upload"
       }, locale => /*#__PURE__*/_react.default.createElement("div", {
+        role: "button",
+        tabIndex: 0,
+        "aria-disabled": disabled,
         className: dragAreaCls,
         onDrop: this.onDrop,
         onDragOver: this.onDragOver,

package/lib/es/_utils/hooks/usePrevFocus.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function usePrevFocus(): (HTMLElement | import("react").Dispatch<import("react").SetStateAction<HTMLElement>>)[];

package/lib/es/_utils/hooks/usePrevFocus.js

@@ -0,0 +1,15 @@
+import _isFunction from "lodash/isFunction";
+import _get from "lodash/get";
+import { useState, useEffect } from 'react';
+import { getActiveElement } from '../index';
+export function usePrevFocus() {
+  const [prevFocusElement, setPrevFocus] = useState(getActiveElement());
+  useEffect(() => {
+    return function cleanup() {
+      const blur = _get(prevFocusElement, 'blur');
+
+      _isFunction(blur) && blur();
+    };
+  }, [prevFocusElement]);
+  return [prevFocusElement, setPrevFocus];
+}

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

@@ -67,3 +67,4 @@ export interface HighLightTextHTMLChunk {
  * @returns boolean
  */
 export declare const isSemiIcon: (icon: any) => boolean;
+export declare function getActiveElement(): HTMLElement;

package/lib/es/_utils/index.js

@@ -165,4 +165,7 @@ export const registerMediaQuery = (media, _ref2) => {
  * @returns boolean
  */
 
-export const isSemiIcon = icon => /*#__PURE__*/React.isValidElement(icon) && _get(icon.type, 'elementType') === 'Icon';
+export const isSemiIcon = icon => /*#__PURE__*/React.isValidElement(icon) && _get(icon.type, 'elementType') === 'Icon';
+export function getActiveElement() {
+  return document ? document.activeElement : null;
+}

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

@@ -24,6 +24,7 @@ export interface AnchorProps {
     targetOffset?: number;
     onChange?: (currentLink: string, previousLink: string) => void;
     onClick?: (e: React.MouseEvent<HTMLElement>, currentLink: string) => void;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export interface AnchorState {
     activeLink: string;
@@ -51,6 +52,7 @@ declare class Anchor extends BaseComponent<AnchorProps, AnchorState> {
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         defaultAnchor: PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
         size: string;

package/lib/es/anchor/index.js

@@ -221,6 +221,7 @@ class Anchor extends BaseComponent {
       position,
       autoCollapse
     } = this.props;
+    const ariaLabel = this.props['aria-label'];
     const {
       activeLink,
       scrollHeight,
@@ -255,10 +256,13 @@ class Anchor extends BaseComponent {
         removeLink: this.removeLink
       }
     }, /*#__PURE__*/React.createElement("div", {
+      role: "navigation",
+      "aria-label": ariaLabel || 'Side navigation',
       className: wrapperCls,
       style: wrapperStyle,
       id: this.anchorID
     }, /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": true,
       className: slideCls,
       style: {
         height: scrollHeight
@@ -292,7 +296,8 @@ Anchor.PropTypes = {
   getContainer: PropTypes.func,
   onChange: PropTypes.func,
   onClick: PropTypes.func,
-  defaultAnchor: PropTypes.string
+  defaultAnchor: PropTypes.string,
+  'aria-label': PropTypes.string
 };
 Anchor.defaultProps = {
   size: 'default',

package/lib/es/anchor/link.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import BaseComponent from '../_base/baseComponent';
 import LinkFoundation, { LinkAdapter } from '@douyinfe/semi-foundation/lib/es/anchor/linkFoundation';
+import { AnchorContextType } from './anchor-context';
 export interface LinkProps {
     href?: string;
     title?: string | React.ReactNode;
@@ -21,13 +22,15 @@ export default class Link extends BaseComponent<LinkProps, {}> {
         title: string;
         className: string;
     };
-    static contextType: React.Context<import("./anchor-context").AnchorContextType>;
+    static contextType: React.Context<AnchorContextType>;
     foundation: LinkFoundation;
+    context: AnchorContextType;
     constructor(props: LinkProps);
     get adapter(): LinkAdapter;
     handleAddLink(): void;
     handleRemoveLink(): void;
     handleUpdateLink(href: string, prevHref: string): void;
+    handleClick(e: React.KeyboardEvent | React.MouseEvent): void;
     componentDidMount(): void;
     componentDidUpdate(prevProps: LinkProps): void;
     componentWillUnmount(): void;

package/lib/es/anchor/link.js

@@ -1,4 +1,5 @@
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -11,6 +12,8 @@ const prefixCls = cssClasses.PREFIX; // eslint-disable-next-line @typescript-esl
 
 export default class Link extends BaseComponent {
   constructor(props) {
+    var _context;
+
     super(props);
 
     this.renderTitle = () => {
@@ -69,6 +72,7 @@ export default class Link extends BaseComponent {
     };
 
     this.foundation = new LinkFoundation(this.adapter);
+    this.handleClick = _bindInstanceProperty(_context = this.handleClick).call(_context, this);
   }
 
   get adapter() {
@@ -94,6 +98,17 @@ export default class Link extends BaseComponent {
     this.foundation.handleUpdateLink(href, prevHref);
   }
 
+  handleClick(e) {
+    const {
+      disabled,
+      href
+    } = this.props;
+    const {
+      onClick
+    } = this.context;
+    !disabled && onClick(e, href);
+  }
+
   componentDidMount() {
     this.handleAddLink();
   }
@@ -115,11 +130,12 @@ export default class Link extends BaseComponent {
       href,
       className,
       style,
-      disabled = false
+      disabled = false,
+      title
     } = this.props;
     const {
       activeLink,
-      onClick
+      showTooltip
     } = this.context;
     const active = activeLink === href;
     const linkCls = cls("".concat(prefixCls, "-link"), className);
@@ -127,13 +143,30 @@ export default class Link extends BaseComponent {
       ["".concat(prefixCls, "-link-title-active")]: active,
       ["".concat(prefixCls, "-link-title-disabled")]: disabled
     });
+    const ariaProps = {
+      'aria-disabled': disabled,
+      'aria-label': href
+    };
+
+    if (active) {
+      ariaProps['aria-details'] = 'active';
+    }
+
+    if (!showTooltip && typeof title === 'string') {
+      ariaProps['title'] = title;
+    }
+
     return /*#__PURE__*/React.createElement("div", {
       className: linkCls,
       style: style
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", _Object$assign({
+      role: "link",
+      tabIndex: 0
+    }, ariaProps, {
       className: linkTitleCls,
-      onClick: e => !disabled && onClick(e, href)
-    }, this.renderTitle()), this.renderChildren());
+      onClick: e => this.handleClick(e),
+      onKeyPress: e => this.handleClick(e)
+    }), this.renderTitle()), this.renderChildren());
   }
 
 }

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

@@ -18,6 +18,12 @@ export interface BaseDataItem extends DataItem {
 }
 export declare type AutoCompleteItems = BaseDataItem | string | number;
 export interface AutoCompleteProps<T extends AutoCompleteItems> {
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean;
     className?: string;
@@ -33,6 +39,8 @@ export interface AutoCompleteProps<T extends AutoCompleteItems> {
     emptyContent?: React.ReactNode | null;
     getPopupContainer?: () => HTMLElement;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
+    id?: string;
     loading?: boolean;
     motion?: Motion;
     maxHeight?: string | number;
@@ -77,6 +85,12 @@ interface AutoCompleteState {
 }
 declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoCompleteProps<T>, AutoCompleteState> {
     static propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-describedby': PropTypes.Requireable<string>;
+        'aria-required': PropTypes.Requireable<boolean>;
         autoFocus: PropTypes.Requireable<boolean>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
         className: PropTypes.Requireable<string>;
@@ -90,6 +104,9 @@ declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<Au
         dropdownClassName: PropTypes.Requireable<string>;
         dropdownStyle: PropTypes.Requireable<object>;
         emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        id: PropTypes.Requireable<string>;
+        insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        insetLabelId: PropTypes.Requireable<string>;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         onClear: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/autoComplete/index.js

@@ -175,6 +175,7 @@ class AutoComplete extends BaseComponent {
       size,
       prefix,
       insetLabel,
+      insetLabelId,
       suffix,
       placeholder,
       style,
@@ -184,7 +185,8 @@ class AutoComplete extends BaseComponent {
       triggerRender,
       validateStatus,
       autoFocus,
-      value
+      value,
+      id
     } = this.props;
     const {
       inputValue,
@@ -200,7 +202,8 @@ class AutoComplete extends BaseComponent {
         ["".concat(prefixCls, "-disabled")]: disabled
       }, className),
       onClick: this.handleInputClick,
-      ref: this.triggerRef
+      ref: this.triggerRef,
+      id
     }, keyboardEventSet);
 
     const innerProps = {
@@ -209,9 +212,16 @@ class AutoComplete extends BaseComponent {
       autofocus: autoFocus,
       onChange: this.onSearch,
       onClear: this.onInputClear,
+      'aria-label': this.props['aria-label'],
+      'aria-labelledby': this.props['aria-labelledby'],
+      'aria-invalid': this.props['aria-invalid'],
+      'aria-errormessage': this.props['aria-errormessage'],
+      'aria-describedby': this.props['aria-describedby'],
+      'aria-required': this.props['aria-required'],
       // TODO: remove in next major version
       suffix,
       prefix: prefix || insetLabel,
+      insetLabelId,
       showClear,
       validateStatus,
       size,
@@ -326,6 +336,12 @@ class AutoComplete extends BaseComponent {
 }
 
 AutoComplete.propTypes = {
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string,
+  'aria-invalid': PropTypes.bool,
+  'aria-errormessage': PropTypes.string,
+  'aria-describedby': PropTypes.string,
+  'aria-required': PropTypes.bool,
   autoFocus: PropTypes.bool,
   autoAdjustOverflow: PropTypes.bool,
   className: PropTypes.string,
@@ -339,6 +355,9 @@ AutoComplete.propTypes = {
   dropdownClassName: PropTypes.string,
   dropdownStyle: PropTypes.object,
   emptyContent: PropTypes.node,
+  id: PropTypes.string,
+  insetLabel: PropTypes.node,
+  insetLabelId: PropTypes.string,
   onSearch: PropTypes.func,
   onSelect: PropTypes.func,
   onClear: PropTypes.func,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { AvatarAdapter } from '@douyinfe/semi-foundation/lib/es/avatar/foundation';
+import AvatarFoundation, { AvatarAdapter } from '@douyinfe/semi-foundation/lib/es/avatar/foundation';
 import '@douyinfe/semi-foundation/lib/es/avatar/avatar.css';
 import { noop } from '@douyinfe/semi-foundation/lib/es/utils/function';
 import BaseComponent from '../_base/baseComponent';
@@ -36,13 +36,14 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
     };
+    foundation: AvatarFoundation;
     constructor(props: AvatarProps);
     get adapter(): AvatarAdapter<AvatarProps, AvatarState>;
     componentDidMount(): void;
     componentDidUpdate(prevProps: AvatarProps): void;
     componentWillUnmount(): void;
-    onEnter(): void;
-    onLeave(): void;
+    onEnter(e: React.MouseEvent): void;
+    onLeave(e: React.MouseEvent): void;
     handleError(): void;
     render(): JSX.Element;
 }

package/lib/es/avatar/index.js

@@ -110,12 +110,12 @@ export default class Avatar extends BaseComponent {
     this.foundation.destroy();
   }
 
-  onEnter() {
-    this.foundation.handleEnter();
+  onEnter(e) {
+    this.foundation.handleEnter(e);
   }
 
-  onLeave() {
-    this.foundation.handleLeave();
+  onLeave(e) {
+    this.foundation.handleLeave(e);
   }
 
   handleError() {
@@ -174,13 +174,17 @@ export default class Avatar extends BaseComponent {
       }, children));
     }
 
-    return /*#__PURE__*/React.createElement("span", _Object$assign({}, others, {
-      style: style,
-      className: avatarCls,
-      onClick: onClick,
-      onMouseEnter: this.onEnter,
-      onMouseLeave: this.onLeave
-    }), content, hoverRender);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
+      React.createElement("span", _Object$assign({}, others, {
+        style: style,
+        className: avatarCls,
+        onClick: onClick,
+        onMouseEnter: this.onEnter,
+        onMouseLeave: this.onLeave
+      }), content, hoverRender)
+    );
   }
 
 }

package/lib/es/banner/index.js

@@ -70,7 +70,8 @@ export default class Banner extends BaseComponent {
       icon: closeIcon || /*#__PURE__*/React.createElement(IconClose, null),
       theme: "borderless",
       size: "small",
-      type: "tertiary"
+      type: "tertiary",
+      "aria-label": 'Close'
     });
     return closer;
   }
@@ -137,7 +138,8 @@ export default class Banner extends BaseComponent {
     });
     const banner = visible ? /*#__PURE__*/React.createElement("div", {
       className: wrapper,
-      style: style
+      style: style,
+      role: "alert"
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-content-wrapper")
     }, /*#__PURE__*/React.createElement("div", {

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

@@ -27,6 +27,7 @@ export interface BreadcrumbProps extends BaseProps {
     autoCollapse?: boolean;
     renderMore?: (restItem: Array<React.ReactNode>) => React.ReactNode;
     moreType?: MoreType;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 interface BreadcrumbState {
     isCollapsed: boolean;
@@ -52,6 +53,7 @@ declare class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState>
         maxItemCount: propTypes.Requireable<number>;
         renderMore: propTypes.Requireable<(...args: any[]) => any>;
         moreType: propTypes.Requireable<string>;
+        'aria-label': propTypes.Requireable<string>;
     };
     static defaultProps: {
         routes: [];
@@ -66,6 +68,7 @@ declare class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState>
         autoCollapse: boolean;
         moreType: string;
         maxItemCount: number;
+        'aria-label': string;
     };
     constructor(props: BreadcrumbProps);
     get adapter(): BreadcrumbAdapter<BreadcrumbProps, BreadcrumbState>;

package/lib/es/breadcrumb/index.js

@@ -47,8 +47,12 @@ class Breadcrumb extends BaseComponent {
       }, /*#__PURE__*/React.createElement("span", {
         className: "".concat(clsPrefix, "-item-wrap")
       }, /*#__PURE__*/React.createElement("span", {
+        role: 'button',
+        tabIndex: 0,
+        "aria-label": 'Expand breadcrumb items',
         className: _concatInstanceProperty(_context = "".concat(clsPrefix, "-item ")).call(_context, clsPrefix, "-item-more"),
-        onClick: item => this.foundation.handleExpand(item)
+        onClick: item => this.foundation.handleExpand(item),
+        onKeyPress: e => this.foundation.handleExpandEnterPress(e)
       }, hasRenderMore && renderMore(restItem), !hasRenderMore && moreType === 'default' && /*#__PURE__*/React.createElement(IconMore, null), !hasRenderMore && moreType === 'popover' && this.renderPopoverMore(restItem)), /*#__PURE__*/React.createElement("span", {
         className: "".concat(clsPrefix, "-separator")
       }, this.props.separator)));
@@ -210,7 +214,7 @@ class Breadcrumb extends BaseComponent {
         separator
       }
     }, /*#__PURE__*/React.createElement("nav", {
-      "aria-label": "".concat(clsPrefix),
+      "aria-label": this.props['aria-label'],
       className: sizeCls,
       style: style
     }, breadcrumbs));
@@ -241,7 +245,8 @@ Breadcrumb.propTypes = {
   renderMore: propTypes.func,
 
   /* Type of ellipsis area */
-  moreType: propTypes.oneOf(strings.MORE_TYPE)
+  moreType: propTypes.oneOf(strings.MORE_TYPE),
+  'aria-label': propTypes.string
 };
 Breadcrumb.defaultProps = {
   routes: [],
@@ -255,6 +260,7 @@ Breadcrumb.defaultProps = {
   },
   autoCollapse: true,
   moreType: 'default',
-  maxItemCount: 4
+  maxItemCount: 4,
+  'aria-label': 'Breadcrumb'
 };
 export default Breadcrumb;

package/lib/es/breadcrumb/item.js

@@ -177,9 +177,9 @@ export default class BreadcrumbItem extends BaseComponent {
       shouldRenderSeparator // children,
 
     } = this.props;
-    const pageLabel = active ? {} : {
+    const pageLabel = active ? {
       'aria-current': 'page'
-    };
+    } : {};
     const item = this.renderItem();
     const separator = !active ? this.props.separator || /*#__PURE__*/React.createElement("span", {
       className: "".concat(clsPrefix, "-separator")

package/lib/es/button/Button.d.ts

@@ -25,6 +25,7 @@ export interface ButtonProps {
     onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
     onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export default class Button extends PureComponent<ButtonProps> {
     static defaultProps: {
@@ -57,6 +58,7 @@ export default class Button extends PureComponent<ButtonProps> {
         className: PropTypes.Requireable<string>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     render(): JSX.Element;
 }

package/lib/es/button/Button.js

@@ -64,7 +64,8 @@ export default class Button extends PureComponent {
         ["".concat(prefixCls, "-circle")]: circle,
         ["".concat(prefixCls, "-borderless")]: theme === 'borderless'
       }, className),
-      type: htmlType
+      type: htmlType,
+      'aria-disabled': disabled
     });
 
     return (
@@ -111,5 +112,6 @@ Button.propTypes = {
   theme: PropTypes.oneOf(strings.themes),
   className: PropTypes.string,
   onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func
+  onMouseLeave: PropTypes.func,
+  'aria-label': PropTypes.string
 };

package/lib/es/button/buttonGroup.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { Type, Size } from './Button';
@@ -8,6 +9,7 @@ export interface ButtonGroupProps extends BaseProps {
     type?: Type;
     size?: Size;
     theme?: Theme;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
     static propTypes: {
@@ -16,6 +18,7 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         type: PropTypes.Requireable<string>;
         size: PropTypes.Requireable<unknown>;
         theme: PropTypes.Requireable<unknown>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
         size: string;

package/lib/es/button/buttonGroup.js

@@ -29,9 +29,10 @@ export default class ButtonGroup extends BaseComponent {
       children,
       disabled,
       size,
-      type
+      type,
+      'aria-label': ariaLabel
     } = _a,
-          rest = __rest(_a, ["children", "disabled", "size", "type"]);
+          rest = __rest(_a, ["children", "disabled", "size", "type", 'aria-label']);
 
     let inner;
 
@@ -48,7 +49,9 @@ export default class ButtonGroup extends BaseComponent {
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-group")
+      className: "".concat(prefixCls, "-group"),
+      role: "group",
+      "aria-label": ariaLabel
     }, inner);
   }
 
@@ -58,7 +61,8 @@ ButtonGroup.propTypes = {
   disabled: PropTypes.bool,
   type: PropTypes.string,
   size: PropTypes.oneOf(btnSizes),
-  theme: PropTypes.oneOf(strings.themes)
+  theme: PropTypes.oneOf(strings.themes),
+  'aria-label': PropTypes.string
 };
 ButtonGroup.defaultProps = {
   size: 'default',

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

@@ -30,6 +30,7 @@ declare class Button extends React.PureComponent<ButtonProps> {
         onMouseDown: import("prop-types").Requireable<(...args: any[]) => any>;
         circle: import("prop-types").Requireable<boolean>;
         htmlType: import("prop-types").Requireable<unknown>;
+        'aria-label': import("prop-types").Requireable<string>;
     };
     constructor(props?: {});
     render(): JSX.Element;

package/lib/es/button/splitButtonGroup.d.ts

@@ -1,12 +1,15 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/es/button/button.css';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 export interface SplitButtonGroupProps extends BaseProps {
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export default class SplitButtonGroup extends BaseComponent<SplitButtonGroupProps> {
     static propTypes: {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     render(): JSX.Element;
 }