feat(a11y): remove useless aria-label #205

content/show/collapse/index-en-US.md

@@ -154,15 +154,10 @@ import { IconCopy } from '@douyinfe/semi-icons';
 
 ### ARIA
 
-- The `aria-label` of the component is'Collapse'
 - The button on the right side of the panel header is set to `aria-hidden=true`
-- The extra section `aria-label` of the panel header is set to'Extra of collapse header'
-- Panel header `aria-label` is'Collapse panel'
 - The interactive part of the panel header is set to the `aria-owns` value corresponding to the panel content
-- Panel content `aria-label` is set to'Collapse content'
 - The content of the panel is set with `aria-hidden`, and its value is automatically switched between true and false with the display of the panel content
 
-
 ## Design Tokens
 
 <DesignToken/>

content/show/collapse/index.md

@@ -154,17 +154,10 @@ import { IconCopy } from '@douyinfe/semi-icons';
 
 ### ARIA
 
-- 组件的 `aria-label` 为 'Collapse'
 - 面板 header 右侧按钮 设置了 `aria-hidden=true`
-- 面板 header 的 extra 部分  `aria-label` 设置为 'Extra of collapse header'
-- 面板 header `aria-label` 为 'Collapse panel'
 - 面版 header 可交互部分 设置了 `aria-owns` 值为对应面板内容
-- 面板内容 `aria-label`设置为 'Collapse content'
 - 面版内容 设置了 `aria-hidden` 随面板内容展现隐藏其值在 true 和 false 之间自动切换
 
-
-
-
 ## 设计变量
 
 <DesignToken/>

content/show/sidesheet/index-en-US.md

@@ -303,9 +303,6 @@ class Demo extends React.Component {
 ### ARIA
 
 - SideSheet has a `dialog` role to indicate that it is a pop-up component, and the internal header has a `heading` role to indicate that it is a header.
-- SideSheet content title body footer has label to indicate the role of the element.
-- SideSheet supports passing in `aria-label` to indicate the role of the SideSheet
-
 
 ## API Reference
 

content/show/sidesheet/index.md

@@ -302,10 +302,6 @@ class Demo extends React.Component {
 ### ARIA
 
 - SideSheet 具有 `dialog` role 来表示它是一个弹窗组件， 内部 header 具有 `heading` role 表明是 header。
-- SideSheet content title body footer 均具有 label 来表明元素作用。
-- SideSheet 支持传入 `aria-label` 来表示该 SideSheet 作用
-
-
 
 ## API 参考
 

packages/semi-foundation/utils/uuid.ts

@@ -23,7 +23,8 @@ function getUuidv4() {
  * getUuidShort({ prefix: '' }) => '0eer2i0'
  * getUuidShort({ prefix: 'semi', length: 4 }) => 'semi-8jts'
  */
-function getUuidShort({ prefix = '', length = 7 }: { prefix?: string; length?: number }) {
+function getUuidShort(options: GetUuidShortOptions = {}) {
+    const { prefix = '', length = 7 } = options;
     const characters = '0123456789abcdefghijklmnopqrstuvwxyz';
     const total = characters.length;
     let randomId = '';
@@ -35,4 +36,9 @@ function getUuidShort({ prefix = '', length = 7 }: { prefix?: string; length?: n
     return prefix ? `${prefix}-${randomId}` : randomId;
 }
 
+interface GetUuidShortOptions {
+    prefix?: string;
+    length?: number;
+}
+
 export { getUuid, getUuidv4, getUuidShort };

packages/semi-ui/avatar/avatarGroup.tsx

@@ -76,6 +76,6 @@ export default class AvatarGroup extends PureComponent<AvatarGroupProps> {
 
         }
 
-        return <div className={groupCls} aria-label="avatar group">{inner}</div>;
+        return <div className={groupCls}>{inner}</div>;
     }
 }

packages/semi-ui/avatar/index.tsx

@@ -136,24 +136,20 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         );
         let content = children;
         const hoverRender = hoverContent ? (<div className={`${prefixCls}-hover`}>{hoverContent}</div>) : null;
-        let ariaLabel;
         if (isImg) {
             content = (
                 <img src={src} srcSet={srcSet} onError={this.handleError} alt={alt} {...imgAttr} />
             );
-            ariaLabel = 'avatar';
         } else if (typeof children === 'string') {
             content = (
                 <span className={`${prefixCls}-content`}>
                     <span className={`${prefixCls}-label`}>{children}</span>
                 </span>
             );
-            ariaLabel = `avatar of ${children}`;
         }
         return (
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
             <span
-                aria-label={ariaLabel}
                 {...(others as any)}
                 style={style}
                 className={avatarCls}

packages/semi-ui/button/__test__/button.test.js

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

packages/semi-ui/collapse/index.tsx

@@ -97,7 +97,7 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
         const clsPrefix = cls(cssClasses.PREFIX, className);
         const { activeSet } = this.state;
         return (
-            <div className={clsPrefix} style={style} aria-label={`Collapse`}>
+            <div className={clsPrefix} style={style}>
                 <CollapseContext.Provider
                     value={{
                         activeSet,

packages/semi-ui/collapse/item.tsx

@@ -65,7 +65,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
                     {iconPosLeft ? icon : null}
                     <span>{header}</span>
                     <span className={`${cssClasses.PREFIX}-header-right`}>
-                        <span aria-label={'Extra of collapse header'}>{extra}</span>
+                        <span>{extra}</span>
                         {iconPosLeft ? null : icon}
                     </span>
                 </>
@@ -108,7 +108,6 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         });
         return (
             <div
-                aria-label={'Collapse panel'}
                 className={itemCls}
                 {...restProps}
             >
@@ -129,7 +128,6 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
                             reCalcKey={reCalcKey}>
                             <div
                                 className={contentCls}
-                                aria-label={'Collapse content'}
                                 aria-hidden={!active}
                                 id={this.ariaID}
                             >

packages/semi-ui/empty/index.tsx

@@ -108,7 +108,7 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
                 style: { fontWeight: 400 },
             };
         return (
-            <div className={wrapperCls} style={style} aria-label="empty placeholder image">
+            <div className={wrapperCls} style={style}>
                 <div className={`${prefixCls}-image`} style={imageStyle} >
                     {imageNode}
                 </div>

packages/semi-ui/sideSheet/SideSheetContent.tsx

@@ -87,7 +87,7 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
         let header, closer;
         if (title) {
             header = (
-                <div className={`${prefixCls}-title`} aria-label={'Sidesheet title'}>
+                <div className={`${prefixCls}-title`}>
                     {this.props.title}
                 </div>
             );
@@ -106,7 +106,7 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
             );
         }
         return (
-            <div className={`${prefixCls}-header`} role={'heading'} style={{ ...headerStyle }}>
+            <div className={`${prefixCls}-header`} role={'heading'} aria-level={1} style={{ ...headerStyle }}>
                 {header}
                 {closer}
             </div>
@@ -137,13 +137,13 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
                 style={{ ...props.style, ...style }}
                 // id={this.dialogId}
             >
-                <div className={`${prefixCls}-content`} aria-label={`Sidesheet content`}>
+                <div className={`${prefixCls}-content`}>
                     {header}
-                    <div className={`${prefixCls}-body`} aria-label={`Sidesheet body`} style={props.bodyStyle}>
+                    <div className={`${prefixCls}-body`} style={props.bodyStyle}>
                         {props.children}
                     </div>
                     {props.footer ? (
-                        <div className={`${prefixCls}-footer`} aria-label={`Sidesheet footer`}>
+                        <div className={`${prefixCls}-footer`}>
                             {props.footer}
                         </div>
                     ) : null}
@@ -167,9 +167,7 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
             wrapperStyle.width = width;
         }
         return (
-            <div className={wrapperCls}
-                style={wrapperStyle}
-                aria-label={this.props['aria-label']}>
+            <div className={wrapperCls} style={wrapperStyle}>
                 {this.getMaskElement()}
                 {this.getDialogElement()}
             </div>

packages/semi-ui/spin/icon.tsx

@@ -29,7 +29,8 @@ function Icon(props: IconProps = {}) {
             viewBox="0 0 36 36"
             version="1.1"
             xmlns="http://www.w3.org/2000/svg"
-            aria-label="spin"
+            aria-hidden
+            data-icon="spin"
         >
             <defs>
                 <linearGradient x1="0%" y1="100%" x2="100%" y2="100%" id={id}>

packages/semi-ui/tooltip/index.tsx

@@ -12,7 +12,7 @@ import { ArrayElement } from '@douyinfe/semi-foundation/utils/type';
 import { convertDOMRectToObject, DOMRectLikeType } from '@douyinfe/semi-foundation/utils/dom';
 import TooltipFoundation, { TooltipAdapter, Position, PopupContainerDOMRect } from '@douyinfe/semi-foundation/tooltip/foundation';
 import { strings, cssClasses, numbers } from '@douyinfe/semi-foundation/tooltip/constants';
-import { getUuidv4 } from '@douyinfe/semi-foundation/utils/uuid';
+import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 import '@douyinfe/semi-foundation/tooltip/tooltip.scss';
 
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
@@ -174,7 +174,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
             placement: props.position || 'top',
             transitionStyle: {},
             isPositionUpdated: false,
-            id: getUuidv4(), // auto generate id, will be used by children.aria-descriptionby & content.id, improve a11y
+            id: getUuidShort(), // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
         };
         this.foundation = new TooltipFoundation(this.adapter);
         this.eventManager = new Event();
@@ -540,6 +540,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
 
         return (
             <Portal getPopupContainer={this.props.getPopupContainer} style={{ zIndex }}>
+                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                 <div
                     className={`${BASE_CLASS_PREFIX}-portal-inner`}
                     style={portalInnerStyle}