@douyinfe/semi-ui 2.14.0-alpha.0 → 2.14.0-beta.2

package/divider/index.tsx

@@ -60,10 +60,14 @@ const Divider: React.FC<DividerProps> = props => {
 
     return (
         <div {...rest} className={dividerClassNames} style={{ ...overrideDefaultStyle, ...style }}>
-            {(children && layout === 'horizontal') ? (
-                typeof children === 'string' ? <span className={`${prefixCls}-divider_inner-text`}>
-                    {children}
-                </span> : children
+            {children && layout === 'horizontal' ? (
+                typeof children === 'string' ? (
+                    <span className={`${prefixCls}-divider_inner-text`} x-semi-prop="children">
+                        {children}
+                    </span>
+                ) : (
+                    children
+                )
             ) : null}
         </div>
     );

package/dropdown/index.tsx

@@ -144,7 +144,7 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         return (
             <DropdownContext.Provider value={contextValue}>
                 <div className={className} style={style}>
-                    <div className={`${prefixCls}-content`}>{content}</div>
+                    <div className={`${prefixCls}-content`} x-semi-prop="render">{content}</div>
                 </div>
             </DropdownContext.Provider>
         );

package/empty/index.tsx

@@ -109,17 +109,25 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
             };
         return (
             <div className={wrapperCls} style={style}>
-                <div className={`${prefixCls}-image`} style={imageStyle} >
+                <div className={`${prefixCls}-image`} style={imageStyle} x-semi-prop="image,darkModeImage">
                     {imageNode}
                 </div>
-                <div className={`${prefixCls}-content`} >
+                <div className={`${prefixCls}-content`}>
                     {title ? (
-                        <Typography.Title {...(titleProps as any)} className={`${prefixCls}-title`} >
+                        <Typography.Title {...(titleProps as any)} className={`${prefixCls}-title`} x-semi-prop="title">
                             {title}
                         </Typography.Title>
                     ) : null}
-                    {description ? <div className={`${prefixCls}-description`} >{description}</div> : null}
-                    {children ? <div className={`${prefixCls}-footer`}>{children}</div> : null}
+                    {description ? (
+                        <div className={`${prefixCls}-description`} x-semi-prop="description">
+                            {description}
+                        </div>
+                    ) : null}
+                    {children ? (
+                        <div className={`${prefixCls}-footer`} x-semi-prop="children">
+                            {children}
+                        </div>
+                    ) : null}
                 </div>
             </div>
         );

package/form/_story/form.stories.tsx

@@ -138,14 +138,21 @@ interface IProps {
 interface IState {
     visible: boolean;
 }
+
+interface FData {
+    test: boolean;
+    test2: boolean;
+    test3: string;
+    // [x: string]: unknown;
+}
 class Demo extends React.Component<IProps, IState> {
     constructor(props:any) {
       super(props);
       this.state = { visible: false};
     }
 
-    getFormApi(formApi: FormApi) {
-
+    getFormApi(formApi: FormApi<FData>) {
+        formApi.getValue()
     }
 
     render() {

package/form/field.tsx

@@ -7,7 +7,7 @@ import Input from '../input/index';
 import TextArea from '../input/textarea';
 import InputNumber from '../inputNumber/index';
 import Select from '../select/index';
-import Checkbox from '../checkbox/index';
+import { Checkbox } from '../checkbox/index';
 import CheckboxGroup from '../checkbox/checkboxGroup';
 import { Radio } from '../radio/index';
 import RadioGroup from '../radio/radioGroup';

package/form/hoc/withField.tsx

@@ -439,7 +439,7 @@ function withField<
                 [`${prefix}-field-extra-botttom`]: mergeExtraPos === 'bottom',
             });
 
-            const extraContent = extraText ? <div className={extraCls} id={extraTextId}>{extraText}</div> : null;
+            const extraContent = extraText ? <div className={extraCls} id={extraTextId} x-semi-prop="extraText">{extraText}</div> : null;
 
             let newProps: Record<string, any> = {
                 id: a11yId,

package/form/label.tsx

@@ -61,7 +61,7 @@ export default class Label extends PureComponent<LabelProps> {
         width ? labelStyle.width = width : null;
 
         const textContent = (
-            <div className={`${prefixCls}-field-label-text`}>
+            <div className={`${prefixCls}-field-label-text`} x-semi-prop="label">
                 {typeof text !== 'undefined' ? text : children}
             </div>
         );

package/grid/col.tsx

@@ -125,7 +125,7 @@ class Col extends React.Component<ColProps> {
         };
 
         return (
-            <div {...others} style={style} className={classes}>
+            <div {...others} style={style} className={classes} x-semi-prop="children">
                 {children}
             </div>
         );

package/grid/row.tsx

@@ -167,7 +167,7 @@ class Row extends React.Component<RowProps, RowState> {
                     gutters,
                 }}
             >
-                <div {...otherProps} className={classes} style={rowStyle}>
+                <div {...otherProps} className={classes} style={rowStyle} x-semi-prop="children">
                     {children}
                 </div>
             </RowContext.Provider>

package/gulpfile.js

@@ -73,14 +73,14 @@ gulp.task('compileScss', function compileScss() {
             }
         ))
         .pipe(sass({
-            importer: (url, prev) => {
+            importer: (url, prev, done) => {
                 const rootPath = path.join(__dirname, '../../');
                 let realUrl = url;
                 if (/~@douyinfe\/semi-foundation/.test(url)) {
                     const semiUIPath = path.join(rootPath, 'packages/semi-foundation');
                     realUrl = url.replace(/~@douyinfe\/semi-foundation/, semiUIPath);
                 }
-                return { url: realUrl };
+                done({ file:realUrl });
             },
             charset: false
         }).on('error', sass.logError))
@@ -104,11 +104,11 @@ gulp.task('moveScssForCJS', function moveScssForCJS() {
     return moveScss(false);
 });
 
-gulp.task('compileLib', 
+gulp.task('compileLib',
     gulp.series(
         [
-            'cleanLib', 
-            'compileScss', 
+            'cleanLib',
+            'compileScss',
             gulp.parallel('moveScssForESM', 'moveScssForCJS'),
             gulp.parallel('compileTSXForESM', 'compileTSXForCJS')
         ]

package/iconButton/index.tsx

@@ -97,7 +97,8 @@ class IconButton extends PureComponent<IconButtonProps> {
             [`${prefixCls}-content-right`]: iconPosition === 'left',
         });
 
-        const children = originChildren != null ? <span className={btnTextCls}>{originChildren}</span> : null;
+        const xSemiProp = this.props['x-semi-children-alias'] || 'children';
+        const children = originChildren != null ? <span className={btnTextCls} x-semi-prop={xSemiProp}>{originChildren}</span> : null;
 
         if (iconPosition === 'left') {
             finalChildren = (

package/input/_story/input.stories.js

@@ -22,6 +22,7 @@ import {
   Switch,
   Form,
   Space,
+  Radio
 } from '../../index';
 import './input.scss';
 import RTLWrapper from '../../configProvider/_story/RTLDirection/RTLWrapper';
@@ -863,8 +864,7 @@ export const ClearButton = () => {
             Suffix
           </Typography.Text>
         }
-        showClear
-      ></Input>
+      />
       <Input showClear defaultValue="semi" />
       <Input showClear mode="password" defaultValue="semi" />
       <Input mode="password" defaultValue="semi" />
@@ -906,4 +906,33 @@ export const TextAreaAutosize = () => {
     </div>
   )
 };
-TextAreaAutosize.storyName = "textarea autosize";
+TextAreaAutosize.storyName = "textarea autosize";
+
+export const InputA11y = () => {
+  return (
+    <div style={{ width: 300 }}>
+      <Input prefix="search" defaultValue="Semi Design" showClear />
+      <br/><br/>
+      <Input aria-required prefix="search" defaultValue="Semi Design" showClear suffix="semi" />
+      <br/><br/>
+      <Input data-cy="password" defaultValue="Semi Design" mode="password" />
+      <br/><br/>
+      <Input defaultValue="Semi Design" mode="password" disabled />
+      <br/><br/>
+      <Input defaultValue='this value is too long' validateStatus='error' showClear></Input>
+      <br/><br/>
+      <TextArea defaultValue='semi' showClear />
+      <TextArea aria-required defaultValue='不能为空' showClear />
+      <InputGroup label={{ text: '成绩信息' }}>
+          <Input placeholder="Name" style={{ width: 100 }} />
+          <Input placeholder="Score" style={{ width: 140 }} />
+      </InputGroup>
+      <br/><br/>
+      <Form onSubmit={() => alert('submit')}>
+        <button>submit</button>
+        <Form.Input field="password" label="密码按钮上敲击 Enter 测试是否会触发 Form submit" mode="password" />
+      </Form>
+    </div>
+  );
+}
+InputA11y.storyName = "input a11y";

package/input/index.tsx

@@ -141,7 +141,7 @@ class Input extends BaseComponent<InputProps, InputState> {
         onKeyUp: noop,
         onKeyPress: noop,
         onEnterPress: noop,
-        validateStatus: 'default'
+        validateStatus: 'default',
     };
 
     inputRef!: React.RefObject<HTMLInputElement>;
@@ -195,7 +195,7 @@ class Input extends BaseComponent<InputProps, InputState> {
             notifyClear: (e: React.MouseEvent<HTMLDivElement>) => this.props.onClear(e),
             setPaddingLeft: (paddingLeft: string) => this.setState({ paddingLeft }),
             setMinLength: (minLength: number) => this.setState({ minLength }),
-            isEventTarget: (e: React.MouseEvent) => e && e.target === e.currentTarget
+            isEventTarget: (e: React.MouseEvent) => e && e.target === e.currentTarget,
         };
     }
 
@@ -221,10 +221,6 @@ class Input extends BaseComponent<InputProps, InputState> {
         this.foundation.handleClear(e);
     };
 
-    handleClearEnterPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
-        this.foundation.handleClearEnterPress(e);
-    };
-
     handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
         this.foundation.handleClick(e);
     };
@@ -255,7 +251,7 @@ class Input extends BaseComponent<InputProps, InputState> {
 
     handleModeEnterPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
         this.foundation.handleModeEnterPress(e);
-    }
+    };
 
     handleClickPrefixOrSuffix = (e: React.MouseEvent<HTMLInputElement>) => {
         this.foundation.handleClickPrefixOrSuffix(e);
@@ -273,7 +269,11 @@ class Input extends BaseComponent<InputProps, InputState> {
                 [`${prefixCls}-prepend-text`]: addonBefore && isString(addonBefore),
                 [`${prefixCls}-prepend-icon`]: isSemiIcon(addonBefore),
             });
-            return <div className={prefixWrapperCls}>{addonBefore}</div>;
+            return (
+                <div className={prefixWrapperCls} x-semi-prop="addonBefore">
+                    {addonBefore}
+                </div>
+            );
         }
         return null;
     }
@@ -286,7 +286,11 @@ class Input extends BaseComponent<InputProps, InputState> {
                 [`${prefixCls}-append-text`]: addonAfter && isString(addonAfter),
                 [`${prefixCls}-append-icon`]: isSemiIcon(addonAfter),
             });
-            return <div className={prefixWrapperCls}>{addonAfter}</div>;
+            return (
+                <div className={prefixWrapperCls} x-semi-prop="addonAfter">
+                    {addonAfter}
+                </div>
+            );
         }
         return null;
     }
@@ -297,13 +301,10 @@ class Input extends BaseComponent<InputProps, InputState> {
         // use onMouseDown to fix issue 1203
         if (allowClear) {
             return (
+                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
                 <div
-                    role="button"
-                    tabIndex={0}
-                    aria-label="Clear input value"
                     className={clearCls}
                     onMouseDown={this.handleClear}
-                    onKeyPress={this.handleClearEnterPress}
                 >
                     <IconClear />
                 </div>
@@ -313,11 +314,12 @@ class Input extends BaseComponent<InputProps, InputState> {
     }
 
     renderModeBtn() {
-        const { value, isFocus, isHovering, eyeClosed } = this.state;
+        const { eyeClosed } = this.state;
         const { mode, disabled } = this.props;
         const modeCls = cls(`${prefixCls}-modebtn`);
         const modeIcon = eyeClosed ? <IconEyeClosedSolid /> : <IconEyeOpened />;
-        const showModeBtn = mode === 'password' && value && !disabled && (isFocus || isHovering);
+        // alway show password button for a11y
+        const showModeBtn = mode === 'password' && !disabled;
         const ariaLabel = eyeClosed ? 'Show password' : 'Hidden password';
         if (showModeBtn) {
             return (
@@ -351,8 +353,18 @@ class Input extends BaseComponent<InputProps, InputState> {
             [`${prefixCls}-prefix-icon`]: isSemiIcon(labelNode),
         });
 
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-        return <div className={prefixWrapperCls} onMouseDown={this.handlePreventMouseDown} onClick={this.handleClickPrefixOrSuffix} id={insetLabelId}>{labelNode}</div>;
+        return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+            <div
+                className={prefixWrapperCls}
+                onMouseDown={this.handlePreventMouseDown}
+                onClick={this.handleClickPrefixOrSuffix}
+                id={insetLabelId}
+                x-semi-prop="prefix,insetLabel"
+            >
+                {labelNode}
+            </div>
+        );
     }
 
     showClearBtn() {
@@ -367,13 +379,22 @@ class Input extends BaseComponent<InputProps, InputState> {
             return null;
         }
         const suffixWrapperCls = cls({
-            [`${prefixCls }-suffix`]: true,
-            [`${prefixCls }-suffix-text`]: suffix && isString(suffix),
-            [`${prefixCls }-suffix-icon`]: isSemiIcon(suffix),
+            [`${prefixCls}-suffix`]: true,
+            [`${prefixCls}-suffix-text`]: suffix && isString(suffix),
+            [`${prefixCls}-suffix-icon`]: isSemiIcon(suffix),
             [`${prefixCls}-suffix-hidden`]: suffixAllowClear && Boolean(hideSuffix),
         });
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-        return <div className={suffixWrapperCls} onMouseDown={this.handlePreventMouseDown} onClick={this.handleClickPrefixOrSuffix}>{suffix}</div>;
+        return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+            <div
+                className={suffixWrapperCls}
+                onMouseDown={this.handlePreventMouseDown}
+                onClick={this.handleClickPrefixOrSuffix}
+                x-semi-prop="suffix"
+            >
+                {suffix}
+            </div>
+        );
     }
 
     render() {
@@ -383,6 +404,7 @@ class Input extends BaseComponent<InputProps, InputState> {
             autofocus,
             className,
             disabled,
+            defaultValue,
             placeholder,
             prefix,
             mode,
@@ -460,7 +482,7 @@ class Input extends BaseComponent<InputProps, InputState> {
             inputProps.minLength = stateMinLength;
         }
         if (validateStatus === 'error') {
-            inputProps['aria-invalid'] = "true";
+            inputProps['aria-invalid'] = 'true';
         }
         return (
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions

package/input/inputGroup.tsx

@@ -66,9 +66,11 @@ export default class inputGroup extends BaseComponent<InputGroupProps, InputGrou
         // const labelCls = cls(label.className, '');
         const defaultName = 'input-group';
         return (
-            <div role="group" aria-label="Input group" aria-disabled={this.props.disabled} className={groupWrapperCls}>
+            <div className={groupWrapperCls}>
                 {label && label.text ? <Label name={defaultName} {...label} /> : null}
                 <span
+                    role="group"
+                    aria-disabled={this.props.disabled}
                     id={label && label.name || defaultName}
                     className={groupCls}
                     style={this.props.style}

package/input/textarea.tsx

@@ -198,10 +198,6 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
         this.foundation.handleClear(e);
     };
 
-    handleClearEnterPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
-        this.foundation.handleClearEnterPress(e);
-    }
-
     renderClearBtn() {
         const { showClear } = this.props;
         const displayClearBtn = this.foundation.isAllowClear();
@@ -210,13 +206,10 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
         });
         if (showClear) {
             return (
+                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
                 <div
-                    role="button"
-                    tabIndex={0}
-                    aria-label="Clear textarea value"
                     className={clearCls}
                     onClick={this.handleClear}
-                    onKeyPress={this.handleClearEnterPress}
                 >
                     <IconClear />
                 </div>
@@ -243,12 +236,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
                 }
             );
             counter = (
-                <div
-                    aria-label="Textarea value length counter"
-                    aria-valuemax={maxCount}
-                    aria-valuenow={current}
-                    className={countCls}
-                >
+                <div className={countCls}>
                     {current}{total ? '/' : null}{total}
                 </div>
             );

package/lib/cjs/_base/base.css

@@ -345,13 +345,13 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-color-primary-light-default: rgba(var(--semi-blue-0), 1);
   --semi-color-primary-light-hover: rgba(var(--semi-blue-1), 1);
   --semi-color-primary-light-active: rgba(var(--semi-blue-2), 1);
-  --semi-color-secondary: rgba(var(--semi-blue-5), 1);
-  --semi-color-secondary-hover: rgba(var(--semi-blue-6), 1);
-  --semi-color-secondary-active: rgba(var(--semi-blue-7), 1);
-  --semi-color-secondary-disabled: rgba(var(--semi-blue-2), 1);
-  --semi-color-secondary-light-default: rgba(var(--semi-blue-0), 1);
-  --semi-color-secondary-light-hover: rgba(var(--semi-blue-1), 1);
-  --semi-color-secondary-light-active: rgba(var(--semi-blue-2), 1);
+  --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
+  --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
+  --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
+  --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
+  --semi-color-secondary-light-default: rgba(var(--semi-light-blue-0), 1);
+  --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-1), 1);
+  --semi-color-secondary-light-active: rgba(var(--semi-light-blue-2), 1);
   --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
   --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
   --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
@@ -433,13 +433,13 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-color-primary-light-default: rgba(var(--semi-blue-5), .2);
   --semi-color-primary-light-hover: rgba(var(--semi-blue-5), .3);
   --semi-color-primary-light-active: rgba(var(--semi-blue-5), .4);
-  --semi-color-secondary: rgba(var(--semi-blue-5), 1);
-  --semi-color-secondary-hover: rgba(var(--semi-blue-6), 1);
-  --semi-color-secondary-active: rgba(var(--semi-blue-7), 1);
-  --semi-color-secondary-disabled: rgba(var(--semi-blue-2), 1);
-  --semi-color-secondary-light-default: rgba(var(--semi-blue-5), .2);
-  --semi-color-secondary-light-hover: rgba(var(--semi-blue-5), .3);
-  --semi-color-secondary-light-active: rgba(var(--semi-blue-5), .4);
+  --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
+  --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
+  --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
+  --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
+  --semi-color-secondary-light-default: rgba(var(--semi-light-blue-5), .2);
+  --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-5), .3);
+  --semi-color-secondary-light-active: rgba(var(--semi-light-blue-5), .4);
   --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
   --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
   --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
@@ -507,4 +507,26 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-border-radius-large: 12px;
   --semi-border-radius-circle: 50%;
   --semi-border-radius-full: 9999px;
+}
+
+.semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.semi-light-scrollbar::-webkit-scrollbar-track, .semi-light-scrollbar *::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0);
+}
+.semi-light-scrollbar::-webkit-scrollbar-corner, .semi-light-scrollbar *::-webkit-scrollbar-corner {
+  background-color: rgba(0, 0, 0, 0);
+}
+.semi-light-scrollbar::-webkit-scrollbar-thumb, .semi-light-scrollbar *::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  background: transparent;
+  transition: all 1s;
+}
+.semi-light-scrollbar:hover::-webkit-scrollbar-thumb, .semi-light-scrollbar *:hover::-webkit-scrollbar-thumb {
+  background: var(--semi-color-fill-2);
+}
+.semi-light-scrollbar::-webkit-scrollbar-thumb:hover, .semi-light-scrollbar *::-webkit-scrollbar-thumb:hover {
+  background: var(--semi-color-fill-1);
 }

package/lib/cjs/avatar/avatarGroup.d.ts

@@ -15,7 +15,7 @@ export default class AvatarGroup extends PureComponent<AvatarGroupProps> {
         renderMore: PropTypes.Requireable<(...args: any[]) => any>;
         overlapFrom: PropTypes.Requireable<string>;
     };
-    getAllAvatars(): any[];
+    getAllAvatars(): (string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[];
     getMergeAvatars(avatars: React.ReactNode[]): React.ReactNode[];
     renderMoreAvatar(restNumber: number, restAvatars: React.ReactNode[]): JSX.Element;
     render(): JSX.Element;

package/lib/cjs/avatar/avatarGroup.js

@@ -22,10 +22,12 @@ var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
 
 var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
@@ -69,7 +71,12 @@ class AvatarGroup extends _react.PureComponent {
     const {
       children
     } = this.props;
-    return (0, _isArray.default)(children) ? children : [children];
+
+    if (children) {
+      return (0, _isArray.default)(children) ? _react.default.Children.toArray(children) : [children];
+    }
+
+    return [];
   }
 
   getMergeAvatars(avatars) {
@@ -91,14 +98,33 @@ class AvatarGroup extends _react.PureComponent {
   }
 
   renderMoreAvatar(restNumber, restAvatars) {
+    var _context2;
+
     const {
       renderMore
     } = this.props;
     const moreCls = (0, _classnames.default)("".concat(prefixCls, "-item-more"));
+    const restAvatarAlt = restAvatars === null || restAvatars === void 0 ? void 0 : (0, _reduce.default)(restAvatars).call(restAvatars, (pre, cur) => {
+      var _context;
+
+      const {
+        children,
+        alt
+      } = cur.props;
+      const avatarInfo = alt !== null && alt !== void 0 ? alt : typeof children === 'string' ? children : '';
+
+      if (avatarInfo.length === 0) {
+        return pre;
+      }
+
+      return pre.length > 0 ? (0, _concat.default)(_context = "".concat(pre, ",")).call(_context, avatarInfo) : avatarInfo;
+    }, '');
+    const finalAlt = (0, _concat.default)(_context2 = " Number of remaining Avatars\uFF1A".concat(restNumber, ",")).call(_context2, restAvatarAlt);
 
     let moreAvatar = /*#__PURE__*/_react.default.createElement(_index.default, {
       className: moreCls,
-      key: "_+n"
+      key: "_+n",
+      alt: finalAlt
     }, "+".concat(restNumber));
 
     if ((0, _isFunction2.default)(renderMore)) {
@@ -129,15 +155,15 @@ class AvatarGroup extends _react.PureComponent {
     });
 
     if (children) {
-      var _context;
+      var _context3;
 
       const avatars = this.getAllAvatars();
-      inner = (0, _map.default)(_context = (0, _isNumber2.default)(maxCount) ? this.getMergeAvatars(avatars) : avatars).call(_context, (itm, index) => {
-        var _context2, _context3;
+      inner = (0, _map.default)(_context3 = (0, _isNumber2.default)(maxCount) ? this.getMergeAvatars(avatars) : avatars).call(_context3, (itm, index) => {
+        var _context4, _context5;
 
         const className = (0, _classnames.default)((0, _get2.default)(itm.props, 'className'), {
-          [(0, _concat.default)(_context2 = "".concat(prefixCls, "-item-start-")).call(_context2, index)]: overlapFrom === 'start',
-          [(0, _concat.default)(_context3 = "".concat(prefixCls, "-item-end-")).call(_context3, index)]: overlapFrom === 'end'
+          [(0, _concat.default)(_context4 = "".concat(prefixCls, "-item-start-")).call(_context4, index)]: overlapFrom === 'start',
+          [(0, _concat.default)(_context5 = "".concat(prefixCls, "-item-end-")).call(_context5, index)]: overlapFrom === 'end'
         });
         return /*#__PURE__*/_react.default.cloneElement(itm, (0, _assign.default)((0, _assign.default)({}, rest), {
           className,
@@ -149,7 +175,8 @@ class AvatarGroup extends _react.PureComponent {
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: groupCls
+      className: groupCls,
+      role: 'list'
     }, inner);
   }
 

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

@@ -9,6 +9,7 @@ export * from './interface';
 export interface AvatarState {
     isImgExist: boolean;
     hoverContent: React.ReactNode;
+    focusVisible: boolean;
 }
 export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
     static defaultProps: {
@@ -45,5 +46,9 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
     onEnter(e: React.MouseEvent): void;
     onLeave(e: React.MouseEvent): void;
     handleError(): void;
+    handleKeyDown(event: any): void;
+    handleFocusVisible: (event: React.FocusEvent) => void;
+    handleBlur: (event: React.FocusEvent) => void;
+    getContent: () => React.ReactNode;
     render(): JSX.Element;
 }