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

package/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>

package/lib/cjs/avatar/avatarGroup.js

@@ -149,8 +149,7 @@ class AvatarGroup extends _react.PureComponent {
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: groupCls,
-      "aria-label": "avatar group"
+      className: groupCls
     }, inner);
   }
 

package/lib/cjs/avatar/index.js

@@ -204,7 +204,6 @@ class Avatar extends _baseComponent.default {
     const hoverRender = hoverContent ? /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-hover")
     }, hoverContent) : null;
-    let ariaLabel;
 
     if (isImg) {
       content = /*#__PURE__*/_react.default.createElement("img", (0, _assign.default)({
@@ -213,22 +212,18 @@ class Avatar extends _baseComponent.default {
         onError: this.handleError,
         alt: alt
       }, imgAttr));
-      ariaLabel = 'avatar';
     } else if (typeof children === 'string') {
       content = /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(prefixCls, "-content")
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(prefixCls, "-label")
       }, children));
-      ariaLabel = "avatar of ".concat(children);
     }
 
     return (
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
-      _react.default.createElement("span", (0, _assign.default)({
-        "aria-label": ariaLabel
-      }, others, {
+      _react.default.createElement("span", (0, _assign.default)({}, others, {
         style: style,
         className: avatarCls,
         onClick: onClick,

package/lib/cjs/collapse/index.js

@@ -126,8 +126,7 @@ class Collapse extends _baseComponent.default {
     } = this.state;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: clsPrefix,
-      style: style,
-      "aria-label": "Collapse"
+      style: style
     }, /*#__PURE__*/_react.default.createElement(_collapseContext.default.Provider, {
       value: {
         activeSet,

package/lib/cjs/collapse/item.js

@@ -91,9 +91,7 @@ class CollapsePanel extends _react.PureComponent {
     if (typeof header === 'string') {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconPosLeft ? icon : null, /*#__PURE__*/_react.default.createElement("span", null, header), /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(_constants.cssClasses.PREFIX, "-header-right")
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        "aria-label": 'Extra of collapse header'
-      }, extra), iconPosLeft ? null : icon));
+      }, /*#__PURE__*/_react.default.createElement("span", null, extra), iconPosLeft ? null : icon));
     }
 
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconPosLeft ? icon : null, header, iconPosLeft ? null : icon);
@@ -128,7 +126,6 @@ class CollapsePanel extends _react.PureComponent {
       ["".concat(_constants.cssClasses.PREFIX, "-content")]: true
     });
     return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
-      "aria-label": 'Collapse panel',
       className: itemCls
     }, restProps), /*#__PURE__*/_react.default.createElement("div", {
       role: "button",
@@ -144,7 +141,6 @@ class CollapsePanel extends _react.PureComponent {
       reCalcKey: reCalcKey
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: contentCls,
-      "aria-label": 'Collapse content',
       "aria-hidden": !active,
       id: this.ariaID
     }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/cjs/empty/index.js

@@ -119,8 +119,7 @@ class Empty extends _baseComponent.default {
     };
     return /*#__PURE__*/_react.default.createElement("div", {
       className: wrapperCls,
-      style: style,
-      "aria-label": "empty placeholder image"
+      style: style
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-image"),
       style: imageStyle

package/lib/cjs/sideSheet/SideSheetContent.js

@@ -102,8 +102,7 @@ class SideSheetContent extends _react.default.PureComponent {
 
     if (title) {
       header = /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-title"),
-        "aria-label": 'Sidesheet title'
+        className: "".concat(prefixCls, "-title")
       }, this.props.title);
     }
 
@@ -122,6 +121,7 @@ class SideSheetContent extends _react.default.PureComponent {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-header"),
       role: 'heading',
+      "aria-level": 1,
       style: (0, _assign.default)({}, headerStyle)
     }, header, closer);
   }
@@ -155,15 +155,12 @@ class SideSheetContent extends _react.default.PureComponent {
       // onMouseDown={this.onDialogMouseDown}
       style: (0, _assign.default)((0, _assign.default)({}, props.style), style)
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-content"),
-      "aria-label": "Sidesheet content"
+      className: "".concat(prefixCls, "-content")
     }, header, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-body"),
-      "aria-label": "Sidesheet body",
       style: props.bodyStyle
     }, props.children), props.footer ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-footer"),
-      "aria-label": "Sidesheet footer"
+      className: "".concat(prefixCls, "-footer")
     }, props.footer) : null));
 
     return dialogElement;
@@ -186,8 +183,7 @@ class SideSheetContent extends _react.default.PureComponent {
 
     return /*#__PURE__*/_react.default.createElement("div", {
       className: wrapperCls,
-      style: wrapperStyle,
-      "aria-label": this.props['aria-label']
+      style: wrapperStyle
     }, this.getMaskElement(), this.getDialogElement());
   }
 

package/lib/cjs/spin/icon.js

@@ -59,7 +59,8 @@ function Icon() {
     viewBox: "0 0 36 36",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
-    "aria-label": "spin"
+    "aria-hidden": true,
+    "data-icon": "spin"
   }), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     x1: "0%",
     y1: "100%",

package/lib/cjs/tooltip/index.js

@@ -308,7 +308,7 @@ class Tooltip extends _baseComponent.default {
       placement: props.position || 'top',
       transitionStyle: {},
       isPositionUpdated: false,
-      id: (0, _uuid.getUuidv4)() // auto generate id, will be used by children.aria-descriptionby & content.id, improve a11y
+      id: (0, _uuid.getUuidShort)() // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
 
     };
     this.foundation = new _foundation.default(this.adapter);

package/lib/cjs/upload/fileCard.js

@@ -259,12 +259,12 @@ class FileCard extends _react.PureComponent {
       orbitStroke: '#FFF',
       "aria-label": "uploading file progress"
     }) : null, showRetry ? retry : null, showReplace && replace, showPicInfo && picInfo, !disabled && /*#__PURE__*/_react.default.createElement("div", {
-      className: closeCls
+      className: closeCls,
+      onClick: e => this.onRemove(e)
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
       tabIndex: 0,
       role: "button",
-      size: "extra-small",
-      onClick: e => this.onRemove(e)
+      size: "extra-small"
     })), this.renderPicValidateMsg());
   }
 

package/lib/es/avatar/avatarGroup.js

@@ -115,8 +115,7 @@ export default class AvatarGroup extends PureComponent {
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: groupCls,
-      "aria-label": "avatar group"
+      className: groupCls
     }, inner);
   }
 

package/lib/es/avatar/index.js

@@ -158,7 +158,6 @@ export default class Avatar extends BaseComponent {
     const hoverRender = hoverContent ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-hover")
     }, hoverContent) : null;
-    let ariaLabel;
 
     if (isImg) {
       content = /*#__PURE__*/React.createElement("img", _Object$assign({
@@ -167,22 +166,18 @@ export default class Avatar extends BaseComponent {
         onError: this.handleError,
         alt: alt
       }, imgAttr));
-      ariaLabel = 'avatar';
     } else if (typeof children === 'string') {
       content = /*#__PURE__*/React.createElement("span", {
         className: "".concat(prefixCls, "-content")
       }, /*#__PURE__*/React.createElement("span", {
         className: "".concat(prefixCls, "-label")
       }, children));
-      ariaLabel = "avatar of ".concat(children);
     }
 
     return (
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
-      React.createElement("span", _Object$assign({
-        "aria-label": ariaLabel
-      }, others, {
+      React.createElement("span", _Object$assign({}, others, {
         style: style,
         className: avatarCls,
         onClick: onClick,

package/lib/es/collapse/index.js

@@ -99,8 +99,7 @@ class Collapse extends BaseComponent {
     } = this.state;
     return /*#__PURE__*/React.createElement("div", {
       className: clsPrefix,
-      style: style,
-      "aria-label": "Collapse"
+      style: style
     }, /*#__PURE__*/React.createElement(CollapseContext.Provider, {
       value: {
         activeSet,

package/lib/es/collapse/item.js

@@ -60,9 +60,7 @@ export default class CollapsePanel extends PureComponent {
     if (typeof header === 'string') {
       return /*#__PURE__*/React.createElement(React.Fragment, null, iconPosLeft ? icon : null, /*#__PURE__*/React.createElement("span", null, header), /*#__PURE__*/React.createElement("span", {
         className: "".concat(cssClasses.PREFIX, "-header-right")
-      }, /*#__PURE__*/React.createElement("span", {
-        "aria-label": 'Extra of collapse header'
-      }, extra), iconPosLeft ? null : icon));
+      }, /*#__PURE__*/React.createElement("span", null, extra), iconPosLeft ? null : icon));
     }
 
     return /*#__PURE__*/React.createElement(React.Fragment, null, iconPosLeft ? icon : null, header, iconPosLeft ? null : icon);
@@ -97,7 +95,6 @@ export default class CollapsePanel extends PureComponent {
       ["".concat(cssClasses.PREFIX, "-content")]: true
     });
     return /*#__PURE__*/React.createElement("div", _Object$assign({
-      "aria-label": 'Collapse panel',
       className: itemCls
     }, restProps), /*#__PURE__*/React.createElement("div", {
       role: "button",
@@ -113,7 +110,6 @@ export default class CollapsePanel extends PureComponent {
       reCalcKey: reCalcKey
     }, /*#__PURE__*/React.createElement("div", {
       className: contentCls,
-      "aria-label": 'Collapse content',
       "aria-hidden": !active,
       id: this.ariaID
     }, /*#__PURE__*/React.createElement("div", {

package/lib/es/empty/index.js

@@ -98,8 +98,7 @@ export default class Empty extends BaseComponent {
     };
     return /*#__PURE__*/React.createElement("div", {
       className: wrapperCls,
-      style: style,
-      "aria-label": "empty placeholder image"
+      style: style
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-image"),
       style: imageStyle

package/lib/es/sideSheet/SideSheetContent.js

@@ -79,8 +79,7 @@ export default class SideSheetContent extends React.PureComponent {
 
     if (title) {
       header = /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-title"),
-        "aria-label": 'Sidesheet title'
+        className: "".concat(prefixCls, "-title")
       }, this.props.title);
     }
 
@@ -99,6 +98,7 @@ export default class SideSheetContent extends React.PureComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-header"),
       role: 'heading',
+      "aria-level": 1,
       style: _Object$assign({}, headerStyle)
     }, header, closer);
   }
@@ -131,15 +131,12 @@ export default class SideSheetContent extends React.PureComponent {
       // onMouseDown={this.onDialogMouseDown}
       style: _Object$assign(_Object$assign({}, props.style), style)
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-content"),
-      "aria-label": "Sidesheet content"
+      className: "".concat(prefixCls, "-content")
     }, header, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-body"),
-      "aria-label": "Sidesheet body",
       style: props.bodyStyle
     }, props.children), props.footer ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-footer"),
-      "aria-label": "Sidesheet footer"
+      className: "".concat(prefixCls, "-footer")
     }, props.footer) : null));
     return dialogElement;
   }
@@ -161,8 +158,7 @@ export default class SideSheetContent extends React.PureComponent {
 
     return /*#__PURE__*/React.createElement("div", {
       className: wrapperCls,
-      style: wrapperStyle,
-      "aria-label": this.props['aria-label']
+      style: wrapperStyle
     }, this.getMaskElement(), this.getDialogElement());
   }
 

package/lib/es/spin/icon.js

@@ -44,7 +44,8 @@ function Icon() {
     viewBox: "0 0 36 36",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
-    "aria-label": "spin"
+    "aria-hidden": true,
+    "data-icon": "spin"
   }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     x1: "0%",
     y1: "100%",

package/lib/es/tooltip/index.js

@@ -33,7 +33,7 @@ import Event from '@douyinfe/semi-foundation/lib/es/utils/Event';
 import { convertDOMRectToObject } from '@douyinfe/semi-foundation/lib/es/utils/dom';
 import TooltipFoundation from '@douyinfe/semi-foundation/lib/es/tooltip/foundation';
 import { strings, cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/tooltip/constants';
-import { getUuidv4 } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
+import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 import '@douyinfe/semi-foundation/lib/es/tooltip/tooltip.css';
 import BaseComponent from '../_base/baseComponent';
 import { isHTMLElement } from '../_base/reactUtils';
@@ -268,7 +268,7 @@ export default class Tooltip extends BaseComponent {
       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);

package/lib/es/upload/fileCard.js

@@ -223,12 +223,12 @@ class FileCard extends PureComponent {
       orbitStroke: '#FFF',
       "aria-label": "uploading file progress"
     }) : null, showRetry ? retry : null, showReplace && replace, showPicInfo && picInfo, !disabled && /*#__PURE__*/React.createElement("div", {
-      className: closeCls
+      className: closeCls,
+      onClick: e => this.onRemove(e)
     }, /*#__PURE__*/React.createElement(IconClose, {
       tabIndex: 0,
       role: "button",
-      size: "extra-small",
-      onClick: e => this.onRemove(e)
+      size: "extra-small"
     })), this.renderPicValidateMsg());
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.3.0-beta.0",
+    "version": "2.3.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.3.0-beta.0",
-        "@douyinfe/semi-foundation": "2.3.0-beta.0",
-        "@douyinfe/semi-icons": "2.3.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.3.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.3.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.3.0",
+        "@douyinfe/semi-foundation": "2.3.0",
+        "@douyinfe/semi-icons": "2.3.0",
+        "@douyinfe/semi-illustrations": "2.3.0",
+        "@douyinfe/semi-theme-default": "2.3.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -68,13 +68,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "5847f92fd90bc37f1fed5c7d2d6d64f6ebf632bc",
+    "gitHead": "456b90e3f3501dd92e9d0b55bb9c8c86312837aa",
     "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.3.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.3.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/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>

package/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}>

package/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}

package/upload/fileCard.tsx

@@ -163,8 +163,8 @@ class FileCard extends PureComponent<FileCardProps> {
                 {showReplace && replace}
                 {showPicInfo && picInfo}
                 {!disabled && (
-                    <div className={closeCls}>
-                        <IconClose tabIndex={0} role="button" size="extra-small" onClick={e => this.onRemove(e)} />
+                    <div className={closeCls} onClick={e => this.onRemove(e)}>
+                        <IconClose tabIndex={0} role="button" size="extra-small" />
                     </div>
                 )}
                 {this.renderPicValidateMsg()}