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

package/_base/_story/a11y.jsx

@@ -839,12 +839,12 @@ export default function SemiA11y() {
                                     </Timeline.Item>
                                 </Timeline>
                                 <div style={{ width: 200 }}>
-                                    <Progress className="mb12" percent={10} stroke="#fc8800" />
-                                    <Progress className="mb12" percent={25} stroke="#f93920" />
-                                    <Progress className="mb12" percent={50} />
-                                    <Progress className="mb12" percent={80} />
-                                    <Progress className="mb12" percent={80} size="large" />
-                                    <Progress className="mb12" percent={80} style={{ height: '8px' }} />
+                                    <Progress className="mb12" percent={10} stroke="#fc8800" aria-label='download progress'/>
+                                    <Progress className="mb12" percent={25} stroke="#f93920" aria-label='download progress'/>
+                                    <Progress className="mb12" percent={50} aria-label='download progress'/>
+                                    <Progress className="mb12" percent={80} aria-label='download progress'/>
+                                    <Progress className="mb12" percent={80} size="large" aria-label='download progress'/>
+                                    <Progress className="mb12" percent={80} style={{ height: '8px' }} aria-label='download progress'/>
                                 </div>
                                 <div className="mb12">
                                     <Skeleton placeholder={placeholder} loading={true} active>

package/_base/_story/a11y.scss

@@ -22,7 +22,6 @@ body[data-page="a11y"] {
     }
     
     .grid {
-    
         .semi-row,
         .semi-row-flex {
             text-align: center;

package/_base/_story/index.scss

@@ -7,9 +7,6 @@ body {
 
 
 // 给每个组件的 story 区域加个 padding，如果需要更大的 padding 可以在组件内自定义样式
-.sb-show-main.sb-main-padded {
-
-    #root {
-        padding: 20px;
-    }
+.sb-show-main.sb-main-padded > #root {
+    padding: 20px;
 }

package/_utils/hooks/usePrevFocus.ts

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

package/_utils/index.ts

@@ -160,3 +160,7 @@ export interface HighLightTextHTMLChunk {
  * @returns boolean
  */
 export const isSemiIcon = (icon: any): boolean => React.isValidElement(icon) && get(icon.type, 'elementType') === 'Icon';
+
+export function getActiveElement() {
+    return document ? document.activeElement as HTMLElement : null;
+}

package/anchor/_story/anchor.stories.js

@@ -15,7 +15,7 @@ const Link = Anchor.Link;
 export const Size = () => (
   <div>
     <div>小号尺寸</div>
-    <Anchor size={'small'}>
+    <Anchor aria-label='小号尺寸' size={'small'}>
       <Link href="#welcome" title="welcome" />
       <Link href="#api" title="api too much to show" />
       <Link href="#contact" title="contact" />

package/anchor/index.tsx

@@ -31,6 +31,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 {
@@ -60,6 +61,7 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
         onChange: PropTypes.func,
         onClick: PropTypes.func,
         defaultAnchor: PropTypes.string,
+        'aria-label': PropTypes.string,
     };
 
     static defaultProps = {
@@ -251,6 +253,7 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
             position,
             autoCollapse,
         } = this.props;
+        const ariaLabel = this.props['aria-label'];
         const { activeLink, scrollHeight, slideBarTop } = this.state;
         const wrapperCls = cls(prefixCls, className, {
             [`${prefixCls}-size-${size}`]: size,
@@ -282,8 +285,8 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
                     removeLink: this.removeLink,
                 }}
             >
-                <div className={wrapperCls} style={wrapperStyle} id={this.anchorID}>
-                    <div className={slideCls} style={{ height: scrollHeight }}>
+                <div role="navigation" aria-label={ ariaLabel || 'Side navigation'} className={wrapperCls} style={wrapperStyle} id={this.anchorID}>
+                    <div aria-hidden className={slideCls} style={{ height: scrollHeight }}>
                         <span className={slideBarCls} style={{ top: slideBarTop }} />
                     </div>
                     <div className={anchorWrapper}>{children}</div>

package/anchor/link.tsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import BaseComponent from '../_base/baseComponent';
 import { cssClasses } from '@douyinfe/semi-foundation/anchor/constants';
 import LinkFoundation, { LinkAdapter } from '@douyinfe/semi-foundation/anchor/linkFoundation';
-import AnchorContext from './anchor-context';
+import AnchorContext, { AnchorContextType } from './anchor-context';
 import Typography from '../typography/index';
 
 const prefixCls = cssClasses.PREFIX;
@@ -36,9 +36,11 @@ export default class Link extends BaseComponent<LinkProps, {}> {
 
     foundation: LinkFoundation;
 
+    context!: AnchorContextType;
     constructor(props: LinkProps) {
         super(props);
         this.foundation = new LinkFoundation(this.adapter);
+        this.handleClick = this.handleClick.bind(this);
     }
 
     get adapter(): LinkAdapter {
@@ -65,6 +67,12 @@ export default class Link extends BaseComponent<LinkProps, {}> {
         this.foundation.handleUpdateLink(href, prevHref);
     }
 
+    handleClick(e: React.KeyboardEvent | React.MouseEvent) {
+        const { disabled, href } = this.props;
+        const { onClick } = this.context;
+        !disabled && onClick(e as any, href);
+    }
+
     componentDidMount() {
         this.handleAddLink();
     }
@@ -115,18 +123,35 @@ export default class Link extends BaseComponent<LinkProps, {}> {
     };
 
     render() {
-        const { href, className, style, disabled = false } = this.props;
-        const { activeLink, onClick } = this.context;
+        const { href, className, style, disabled = false, title } = this.props;
+        const { activeLink, showTooltip } = this.context;
         const active = activeLink === href;
         const linkCls = cls(`${prefixCls}-link`, className);
         const linkTitleCls = cls(`${prefixCls}-link-title`, {
             [`${prefixCls}-link-title-active`]: active,
             [`${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 (
             <div className={linkCls} style={style}>
-                <div className={linkTitleCls} onClick={e => !disabled && onClick(e, href)}>
+                <div
+                    role="link"
+                    tabIndex={0}
+                    {...ariaProps}
+                    className={linkTitleCls}
+                    onClick={e => this.handleClick(e)}
+                    onKeyPress={e => this.handleClick(e)}
+                >
                     {this.renderTitle()}
                 </div>
                 {this.renderChildren()}

package/autoComplete/index.tsx

@@ -39,6 +39,12 @@ export interface BaseDataItem extends DataItem {
 export 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;
@@ -54,6 +60,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;
@@ -101,6 +109,12 @@ interface AutoCompleteState {
 
 class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoCompleteProps<T>, AutoCompleteState> {
     static 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,
@@ -114,6 +128,9 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
         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,
@@ -313,6 +330,7 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
             size,
             prefix,
             insetLabel,
+            insetLabelId,
             suffix,
             placeholder,
             style,
@@ -322,7 +340,8 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
             triggerRender,
             validateStatus,
             autoFocus,
-            value
+            value,
+            id,
         } = this.props;
         const { inputValue, keyboardEventSet, selection } = this.state;
 
@@ -341,6 +360,7 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
                 ),
             onClick: this.handleInputClick,
             ref: this.triggerRef,
+            id,
             ...keyboardEventSet,
         };
 
@@ -350,9 +370,16 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
             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,

package/avatar/_story/avatar.stories.js

@@ -11,7 +11,7 @@ export const Basic = () => (
   <div>
     <div>
       <Avatar>U</Avatar>
-      <Avatar size="large">U</Avatar>
+      <Avatar autoFocus size="large" onClick={() => console.log('ok')}>U</Avatar>
       <Avatar size="extra-small">U</Avatar>
       <Avatar size="small">U</Avatar>
       <Avatar size="default">U</Avatar>
@@ -45,9 +45,9 @@ export const CustomAvatar = () => (
     <Avatar color="red" size="default">
       DF
     </Avatar>
-    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
-    <Avatar size="default" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
-    <Avatar size="small" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="a man" />
+    <Avatar size="default" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="a man" />
+    <Avatar size="small" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="a man" />
     <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
     <Avatar style={{ backgroundColor: '#87d068' }}>YZ</Avatar>
   </div>

package/avatar/index.tsx

@@ -47,6 +47,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         onMouseLeave: PropTypes.func,
     };
 
+    foundation!: AvatarFoundation;
     constructor(props: AvatarProps) {
         super(props);
         this.state = {
@@ -106,12 +107,12 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         this.foundation.destroy();
     }
 
-    onEnter() {
-        this.foundation.handleEnter();
+    onEnter(e: React.MouseEvent) {
+        this.foundation.handleEnter(e);
     }
 
-    onLeave() {
-        this.foundation.handleLeave();
+    onLeave(e: React.MouseEvent) {
+        this.foundation.handleLeave(e);
     }
 
     handleError() {
@@ -147,6 +148,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
             );
         }
         return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
             <span
                 {...(others as any)}
                 style={style}

package/banner/index.tsx

@@ -112,6 +112,7 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
                 theme="borderless"
                 size="small"
                 type="tertiary"
+                aria-label='Close'
             />
         );
         return closer;
@@ -153,7 +154,7 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
             [`${prefixCls}-bordered`]: !fullMode && bordered,
         });
         const banner = visible ? (
-            <div className={wrapper} style={style}>
+            <div className={wrapper} style={style} role="alert">
                 <div className={`${prefixCls}-content-wrapper`}>
                     <div className={`${prefixCls}-content`}>
                         {this.renderIcon()}

package/breadcrumb/_story/breadcrumb.stories.js

@@ -25,9 +25,11 @@ export const Default = () => (
         'breadcrumb',
         'default',
       ]}
+      aria-label='example-1'
       onClick={item => console.log(item)}
     />
     <Breadcrumb
+      aria-label='example-2'
       routes={[
         {
           path: '/home',
@@ -44,6 +46,7 @@ export const Default = () => (
       onClick={item => console.log(item)}
     />
     <Breadcrumb
+      aria-label='example-3'
       routes={[
         {
           path: '/home',
@@ -57,6 +60,7 @@ export const Default = () => (
       separator={'>'}
     />
     <Breadcrumb
+      aria-label='example-4'
       routes={[
         {
           path: '/home',
@@ -70,10 +74,12 @@ export const Default = () => (
       separator={<IconArrowRight size={'small'} />}
     />
     <Breadcrumb
+      aria-label='example-5'
       routes={['首页', '当这个页面标题很长时需要省略', '详情页']}
       onClick={item => console.log(item)}
     />
     <Breadcrumb
+      aria-label='example-6'
       routes={[
         '首页',
         '当层级很多的时候',
@@ -91,6 +97,7 @@ export const Default = () => (
 export const Compact = () => (
   <div>
     <Breadcrumb
+      aria-label='example-1'
       routes={[
         {
           path: '/home',
@@ -103,6 +110,7 @@ export const Compact = () => (
       compact={true}
     />
     <Breadcrumb
+      aria-label='example-2'
       routes={[
         {
           path: '/home',
@@ -119,6 +127,7 @@ export const Compact = () => (
       compact={true}
     />
     <Breadcrumb
+      aria-label='example-3'
       routes={[
         {
           path: '/home',
@@ -133,6 +142,7 @@ export const Compact = () => (
       compact={true}
     />
     <Breadcrumb
+      aria-label='example-4'
       routes={[
         {
           path: '/home',
@@ -147,11 +157,13 @@ export const Compact = () => (
       compact={true}
     />
     <Breadcrumb
+      aria-label='example-5'
       routes={['首页', '当这个页面标题很长时需要省略', '详情页']}
       onClick={item => console.log(item)}
       compact={true}
     />
     <Breadcrumb
+      aria-label='example-6'
       routes={[
         '首页',
         '当层级很多的时候',
@@ -169,32 +181,32 @@ export const Compact = () => (
 
 export const BreadcrumbItemJSX = () => (
   <div>
-    <Breadcrumb onClick={item => console.log(item)}>
+    <Breadcrumb aria-label='example-1' onClick={item => console.log(item)}>
       <Breadcrumb.Item onClick={item => console.log('child', item)}>home</Breadcrumb.Item>
       <Breadcrumb.Item href="#">breadcrumb</Breadcrumb.Item>
       <Breadcrumb.Item>default</Breadcrumb.Item>
     </Breadcrumb>
-    <Breadcrumb onClick={item => console.log(item)}>
+    <Breadcrumb aria-label='example-2' onClick={item => console.log(item)}>
       <Breadcrumb.Item icon={<IconHome />}></Breadcrumb.Item>
       <Breadcrumb.Item>breadcrumb</Breadcrumb.Item>
       <Breadcrumb.Item>default</Breadcrumb.Item>
     </Breadcrumb>
-    <Breadcrumb separator={'>'} onClick={item => console.log(item)}>
+    <Breadcrumb aria-label='example-3' separator={'>'} onClick={item => console.log(item)}>
       <Breadcrumb.Item>home</Breadcrumb.Item>
       <Breadcrumb.Item href="#">breadcrumb</Breadcrumb.Item>
       <Breadcrumb.Item>separator</Breadcrumb.Item>
     </Breadcrumb>
-    <Breadcrumb compact={true} onClick={item => console.log(item)}>
+    <Breadcrumb aria-label='example-4' compact={true} onClick={item => console.log(item)}>
       <Breadcrumb.Item>home</Breadcrumb.Item>
       <Breadcrumb.Item>breadcrumb</Breadcrumb.Item>
       <Breadcrumb.Item>compact</Breadcrumb.Item>
     </Breadcrumb>
-    <Breadcrumb onClick={item => console.log(item)}>
+    <Breadcrumb aria-label='example-5' onClick={item => console.log(item)}>
       <Breadcrumb.Item>首页</Breadcrumb.Item>
       <Breadcrumb.Item>当这个页面标题很长时需要省略</Breadcrumb.Item>
       <Breadcrumb.Item>详情页</Breadcrumb.Item>
     </Breadcrumb>
-    <Breadcrumb onClick={item => console.log(item)}>
+    <Breadcrumb aria-label='example-6' onClick={item => console.log(item)}>
       <Breadcrumb.Item>首页</Breadcrumb.Item>
       <Breadcrumb.Item>当层级很多的时候</Breadcrumb.Item>
       <Breadcrumb.Item>又一层很长需要省略的时候</Breadcrumb.Item>
@@ -209,14 +221,14 @@ export const BreadcrumbItemJSX = () => (
 
 export const Test = () => (
   <div>
-    <Breadcrumb onClick={item => console.log(item)}>
+    <Breadcrumb aria-label='example-1' onClick={item => console.log(item)}>
       <Breadcrumb.Item onClick={item => console.log('child', item)}>home jump</Breadcrumb.Item>
       <Breadcrumb.Item href="#">breadcrumb</Breadcrumb.Item>
       <Breadcrumb.Item>
         <h1>default</h1>
       </Breadcrumb.Item>
     </Breadcrumb>
-    <Breadcrumb>
+    <Breadcrumb aria-label='example-2'>
       <Breadcrumb.Item icon={<IconHome />}></Breadcrumb.Item>
       <Breadcrumb.Item icon={<IconArticle />}>
         <h5>breadcrumb</h5>
@@ -268,6 +280,7 @@ export const RenderMore = () => (
     }}
   >
     <Breadcrumb
+      aria-label='example-1'
       renderMore={restItem => renderMore(restItem)}
       onClick={(item, e) => console.log(item, e)}
     >
@@ -283,6 +296,7 @@ export const RenderMore = () => (
     <br />
     <div>
       <Breadcrumb
+        aria-label='example-2'
         renderMore={restItem => renderMore(restItem)}
         onClick={(item, e) => console.log(item, e)}
         routes={[

package/breadcrumb/index.tsx

@@ -41,6 +41,7 @@ export interface BreadcrumbProps extends BaseProps {
     renderMore?: (restItem: Array<React.ReactNode>) => React.ReactNode;
     /* Style type for ellipsis area */
     moreType?: MoreType;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 
 interface BreadcrumbState {
@@ -77,6 +78,7 @@ class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
 
         /* Type of ellipsis area */
         moreType: propTypes.oneOf(strings.MORE_TYPE),
+        'aria-label': propTypes.string,
     };
     static defaultProps = {
         routes: [] as [],
@@ -91,6 +93,7 @@ class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
         autoCollapse: true,
         moreType: 'default',
         maxItemCount: 4,
+        'aria-label': 'Breadcrumb'
     };
 
     constructor(props: BreadcrumbProps) {
@@ -164,8 +167,12 @@ class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
             <span className={`${clsPrefix}-collapse`} key={`more-${itemsLen}`}>
                 <span className={`${clsPrefix}-item-wrap`}>
                     <span
+                        role='button'
+                        tabIndex={0}
+                        aria-label='Expand breadcrumb items'
                         className={`${clsPrefix}-item ${clsPrefix}-item-more`}
                         onClick={item => this.foundation.handleExpand(item)}
+                        onKeyPress={e => this.foundation.handleExpandEnterPress(e)}
                     >
                         {hasRenderMore && renderMore(restItem)}
                         {!hasRenderMore && moreType === 'default' && <IconMore />}
@@ -282,7 +289,7 @@ class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
                     separator,
                 }}
             >
-                <nav aria-label={`${clsPrefix}`} className={sizeCls} style={style}>
+                <nav aria-label={this.props['aria-label']} className={sizeCls} style={style}>
                     {breadcrumbs}
                 </nav>
             </BreadContext.Provider>

package/breadcrumb/item.tsx

@@ -188,7 +188,7 @@ export default class BreadcrumbItem extends BaseComponent<BreadcrumbItemProps, B
             shouldRenderSeparator
             // children,
         } = this.props;
-        const pageLabel = active ? {} : { 'aria-current': 'page' as const };
+        const pageLabel = active ? { 'aria-current': 'page' as const } : {} ;
         const item = this.renderItem();
         const separator = !active ?
             this.props.separator || <span className={`${clsPrefix}-separator`}>{this.context.separator}</span> :

package/button/Button.tsx

@@ -33,6 +33,7 @@ export interface ButtonProps {
     onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
     onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 
 // TODO: icon configuration
@@ -68,6 +69,7 @@ export default class Button extends PureComponent<ButtonProps> {
         className: PropTypes.string,
         onMouseEnter: PropTypes.func,
         onMouseLeave: PropTypes.func,
+        'aria-label': PropTypes.string,
     };
 
     render() {
@@ -107,6 +109,7 @@ export default class Button extends PureComponent<ButtonProps> {
                 className
             ),
             type: htmlType,
+            'aria-disabled': disabled,
         };
 
         return (
@@ -117,6 +120,7 @@ export default class Button extends PureComponent<ButtonProps> {
                 onMouseDown={this.props.onMouseDown}
                 style={style}
             >
+                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                 <span className={`${prefixCls}-content`} onClick={e => disabled && e.stopPropagation()}>
                     {children}
                 </span>

package/button/__test__/button.test.js

@@ -29,7 +29,7 @@ describe('Button', () => {
 
     it(`test loading`, () => {
         const elem = mount(<Button icon={<IconEdit />} loading />);
-        expect(elem.find(`#Artboard`).length).toBe(1);
+        expect(elem.find({ 'data-icon': 'spin' }).length).toBe(1);
     });
 
     it('test button type',()=>{