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

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

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

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({ 'aria-label': 'spin' }).length).toBe(1);
+        expect(elem.find({ 'data-icon': 'spin' }).length).toBe(1);
     });
 
     it('test button type',()=>{

package/checkbox/_story/checkbox.stories.js

@@ -578,9 +578,9 @@ export const CheckboxGroupCardStyle = () => (
     </CheckboxGroup>
     <br />
     <br />
-    <div>radio disabled</div>
+    <div>Checkbox disabled</div>
     <CheckboxGroup key={getUuidShort({ prefix: '' })} aria-label='group demo' type="card" direction="horizontal" defaultValue={['1']}>
-      <Checkbox value="1" disabled extra="Semi Design" style={{ width: 280 }}>
+      <Checkbox value="1" disabled extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
       <Checkbox value="2" disabled extra="disabled+unchecked" style={{ width: 280 }}>

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

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

package/dist/umd/semi-ui.js

@@ -24579,13 +24579,14 @@ function getUuidv4() {
  */
 
 
-function getUuidShort(_ref) {
+function getUuidShort() {
   var _context3;
 
-  let {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
     prefix = '',
     length = 7
-  } = _ref;
+  } = options;
   const characters = '0123456789abcdefghijklmnopqrstuvwxyz';
   const total = characters.length;
   let randomId = '';
@@ -26917,7 +26918,7 @@ class tooltip_Tooltip extends baseComponent_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 foundation_Tooltip(this.adapter);
@@ -32715,7 +32716,8 @@ function icon_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__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("defs", null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("linearGradient", {
     x1: "0%",
     y1: "100%",
@@ -34694,7 +34696,6 @@ class avatar_Avatar extends baseComponent_BaseComponent {
     const hoverRender = hoverContent ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: "".concat(avatar_prefixCls, "-hover")
     }, hoverContent) : null;
-    let ariaLabel;
 
     if (isImg) {
       content = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("img", assign_default()({
@@ -34703,22 +34704,18 @@ class avatar_Avatar extends baseComponent_BaseComponent {
         onError: this.handleError,
         alt: alt
       }, imgAttr));
-      ariaLabel = 'avatar';
     } else if (typeof children === 'string') {
       content = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
         className: "".concat(avatar_prefixCls, "-content")
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
         className: "".concat(avatar_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
-      external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", assign_default()({
-        "aria-label": ariaLabel
-      }, others, {
+      external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", assign_default()({}, others, {
         style: style,
         className: avatarCls,
         onClick: onClick,
@@ -34872,8 +34869,7 @@ class avatarGroup_AvatarGroup extends external_root_React_commonjs2_react_common
     }
 
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-      className: groupCls,
-      "aria-label": "avatar group"
+      className: groupCls
     }, inner);
   }
 
@@ -48118,9 +48114,7 @@ class item_CollapsePanel extends external_root_React_commonjs2_react_commonjs_re
     if (typeof header === 'string') {
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, iconPosLeft ? icon : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", null, header), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
         className: "".concat(collapse_constants_cssClasses.PREFIX, "-header-right")
-      }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
-        "aria-label": 'Extra of collapse header'
-      }, extra), iconPosLeft ? null : icon));
+      }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", null, extra), iconPosLeft ? null : icon));
     }
 
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, iconPosLeft ? icon : null, header, iconPosLeft ? null : icon);
@@ -48155,7 +48149,6 @@ class item_CollapsePanel extends external_root_React_commonjs2_react_commonjs_re
       ["".concat(collapse_constants_cssClasses.PREFIX, "-content")]: true
     });
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", assign_default()({
-      "aria-label": 'Collapse panel',
       className: itemCls
     }, restProps), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       role: "button",
@@ -48171,7 +48164,6 @@ class item_CollapsePanel extends external_root_React_commonjs2_react_commonjs_re
       reCalcKey: reCalcKey
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: contentCls,
-      "aria-label": 'Collapse content',
       "aria-hidden": !active,
       id: this.ariaID
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
@@ -48295,8 +48287,7 @@ class collapse_Collapse extends baseComponent_BaseComponent {
     } = this.state;
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: clsPrefix,
-      style: style,
-      "aria-label": "Collapse"
+      style: style
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(collapse_context.Provider, {
       value: {
         activeSet,
@@ -60448,8 +60439,7 @@ class empty_Empty extends baseComponent_BaseComponent {
     };
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: wrapperCls,
-      style: style,
-      "aria-label": "empty placeholder image"
+      style: style
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: "".concat(empty_prefixCls, "-image"),
       style: imageStyle
@@ -67464,7 +67454,7 @@ class notificationListFoundation_NotificationListFoundation extends foundation {
     // }
 
 
-    this._adapter.updateNotices([...notices, opts]); // return id;
+    this._adapter.updateNotices([opts, ...notices]); // return id;
 
   }
 
@@ -76680,8 +76670,7 @@ class SideSheetContent_SideSheetContent extends external_root_React_commonjs2_re
 
     if (title) {
       header = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-        className: "".concat(SideSheetContent_prefixCls, "-title"),
-        "aria-label": 'Sidesheet title'
+        className: "".concat(SideSheetContent_prefixCls, "-title")
       }, this.props.title);
     }
 
@@ -76700,6 +76689,7 @@ class SideSheetContent_SideSheetContent extends external_root_React_commonjs2_re
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: "".concat(SideSheetContent_prefixCls, "-header"),
       role: 'heading',
+      "aria-level": 1,
       style: assign_default()({}, headerStyle)
     }, header, closer);
   }
@@ -76732,15 +76722,12 @@ class SideSheetContent_SideSheetContent extends external_root_React_commonjs2_re
       // onMouseDown={this.onDialogMouseDown}
       style: assign_default()(assign_default()({}, props.style), style)
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-      className: "".concat(SideSheetContent_prefixCls, "-content"),
-      "aria-label": "Sidesheet content"
+      className: "".concat(SideSheetContent_prefixCls, "-content")
     }, header, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: "".concat(SideSheetContent_prefixCls, "-body"),
-      "aria-label": "Sidesheet body",
       style: props.bodyStyle
     }, props.children), props.footer ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-      className: "".concat(SideSheetContent_prefixCls, "-footer"),
-      "aria-label": "Sidesheet footer"
+      className: "".concat(SideSheetContent_prefixCls, "-footer")
     }, props.footer) : null));
     return dialogElement;
   }
@@ -76762,8 +76749,7 @@ class SideSheetContent_SideSheetContent extends external_root_React_commonjs2_re
 
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: wrapperCls,
-      style: wrapperStyle,
-      "aria-label": this.props['aria-label']
+      style: wrapperStyle
     }, this.getMaskElement(), this.getDialogElement());
   }
 
@@ -96503,12 +96489,12 @@ class fileCard_FileCard extends external_root_React_commonjs2_react_commonjs_rea
       orbitStroke: '#FFF',
       "aria-label": "uploading file progress"
     }) : null, showRetry ? retry : null, showReplace && replace, showPicInfo && picInfo, !disabled && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-      className: closeCls
+      className: closeCls,
+      onClick: e => this.onRemove(e)
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClose, {
       tabIndex: 0,
       role: "button",
-      size: "extra-small",
-      onClick: e => this.onRemove(e)
+      size: "extra-small"
     })), this.renderPicValidateMsg());
   }