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

package/table/CustomExpandIcon.tsx

@@ -5,6 +5,7 @@ import { noop } from 'lodash';
 
 import { IconChevronRight, IconChevronDown, IconTreeTriangleDown, IconTreeTriangleRight } from '@douyinfe/semi-icons';
 import { cssClasses } from '@douyinfe/semi-foundation/table/constants';
+import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
 
 import Rotate from '../motions/Rotate';
 
@@ -65,10 +66,14 @@ export default function CustomExpandIcon(props: CustomExpandIconProps) {
 
     return (
         <span
+            role="button"
+            aria-label="Expand this row"
+            tabIndex={-1}
             onClick={handleClick}
             onMouseEnter={onMouseEnter}
             onMouseLeave={onMouseLeave}
             className={`${prefixCls}-expand-icon`}
+            onKeyPress={e => isEnterPress(e) && handleClick(e as any)}
         >
             {icon}
         </span>

package/table/Table.tsx

@@ -95,6 +95,7 @@ export interface NormalTableState<RecordType extends Record<string, any> = Data>
     bodyHasScrollBar?: boolean;
     prePropRowSelection?: TableStateRowSelection<RecordType>;
     tableWidth?: number;
+    prePagination?: Pagination;
 }
 
 export type TableStateRowSelection<RecordType extends Record<string, any> = Data> = (RowSelectionProps<RecordType> & { selectedRowKeysSet?: Set<(string | number)> }) | boolean;
@@ -390,6 +391,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             headWidths: [], // header cell width
             bodyHasScrollBar: false,
             prePropRowSelection: undefined,
+            prePagination: undefined
         };
 
         this.rootWrapRef = createRef();
@@ -412,7 +414,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
 
     static getDerivedStateFromProps(props: NormalTableProps, state: NormalTableState) {
         const willUpdateStates: Partial<NormalTableState> = {};
-        const { rowSelection, dataSource, childrenRecordName, rowKey } = props;
+        const { rowSelection, dataSource, childrenRecordName, rowKey, pagination } = props;
         props.columns && props.children && logger.warn('columns should not given by object and children at the same time');
 
         if (props.columns && props.columns !== state.cachedColumns) {
@@ -453,6 +455,17 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             willUpdateStates.rowSelection = newSelectionStates;
             willUpdateStates.prePropRowSelection = rowSelection;
         }
+        if (pagination !== state.prePagination) {
+            let newPagination: Pagination = {};
+            if (isObject(state.pagination)) {
+                newPagination = { ...newPagination, ...state.pagination };
+            }
+            if (isObject(pagination)) {
+                newPagination = { ...newPagination, ...pagination };
+            }
+            willUpdateStates.pagination = newPagination;
+            willUpdateStates.prePagination = pagination;
+        }
         return willUpdateStates;
     }
 
@@ -468,16 +481,17 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
     // TODO: Extract the setState operation to the adapter or getDerivedStateFromProps function
     componentDidUpdate(prevProps: NormalTableProps<RecordType>, prevState: NormalTableState<RecordType>) {
         const {
-            pagination,
             dataSource,
             expandedRowKeys,
             expandAllRows,
             expandAllGroupRows,
             virtualized,
             components,
+            pagination: propsPagination
         } = this.props;
 
         const {
+            pagination: statePagination,
             queries: stateQueries,
             cachedColumns: stateCachedColumns,
             cachedChildren: stateCachedChildren,
@@ -520,12 +534,6 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             this.foundation.initExpandedRowKeys({ groups: stateGroups });
         }
 
-
-        // Update pagination
-        if (pagination !== prevProps.pagination) {
-            states.pagination = isObject(pagination) ? { ...pagination } : pagination;
-        }
-
         /**
          * After dataSource is updated || (cachedColumns || cachedChildren updated)
          * 1. Cache filtered sorted data and a collection of data rows, stored in this
@@ -539,23 +547,27 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             this.foundation.setCachedFilteredSortedDataSource(filteredSortedDataSource);
             states.dataSource = filteredSortedDataSource;
 
-            if (pagination === prevProps.pagination) {
-                states.pagination = isObject(pagination) ? { ...pagination } : pagination;
-            }
-
             if (this.props.groupBy) {
                 states.groups = null;
             }
         }
 
+        // when dataSource has change, should reset currentPage
+        if (dataSource !== prevProps.dataSource) {
+            states.pagination = isObject(statePagination) ? {
+                ...statePagination,
+                currentPage: isObject(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1,
+            } : statePagination;
+        }
+
         if (Object.keys(states).length) {
             const {
                 // eslint-disable-next-line @typescript-eslint/no-shadow
+                pagination: mergedStatePagination = null,
                 queries: stateQueries = null,
-                pagination: statePagination = null,
                 dataSource: stateDataSource = null,
             } = states;
-            const handledProps: Partial<NormalTableState<RecordType>> = this.foundation.getCurrentPageData(stateDataSource, statePagination as TablePaginationProps, stateQueries);
+            const handledProps: Partial<NormalTableState<RecordType>> = this.foundation.getCurrentPageData(stateDataSource, mergedStatePagination as TablePaginationProps, stateQueries);
 
             // After the pager is updated, reset allRowKeys of the current page
             this.adapter.setAllRowKeys(handledProps.allRowKeys);
@@ -790,6 +802,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                 const hasRowSelected = this.foundation.hasRowSelected(selectedRowKeys, allRowKeysSet);
                 return (
                     <ColumnSelection
+                        aria-label={`${allIsSelected ? 'Deselect' : 'Select'} all rows`}
                         disabled={disabled}
                         key={columnKey}
                         selected={allIsSelected}
@@ -806,6 +819,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
 
                 return (
                     <ColumnSelection
+                        aria-label={`${selected ? 'Deselect' : 'Select'} this row`}
                         getCheckboxProps={checkboxPropsFn}
                         selected={selected}
                         onChange={(status, e) => this.toggleSelectRow(status, key, e)}
@@ -966,6 +980,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
     /**
      * render pagination
      * @param {object} pagination
+     * @param {object} propRenderPagination
      */
     renderPagination = (pagination: TablePaginationProps, propRenderPagination: RenderPagination) => {
         if (!pagination) {
@@ -1359,6 +1374,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             <div
                 ref={this.rootWrapRef}
                 className={classnames(className, `${prefixCls}-wrapper`)}
+                data-column-fixed={anyColumnFixed}
                 style={wrapStyle}
                 id={id}
             >

package/table/TableCell.tsx

@@ -42,6 +42,7 @@ export interface TableCellProps extends BaseProps {
     selected?: boolean; // Whether the current row is selected
     expanded?: boolean; // Whether the current line is expanded
     disabled?: boolean;
+    colIndex?: number;
 }
 
 function isInvalidRenderCellText(text: any) {
@@ -82,6 +83,7 @@ export default class TableCell extends BaseComponent<TableCellProps, Record<stri
         height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         selected: PropTypes.bool,
         expanded: PropTypes.bool,
+        colIndex: PropTypes.number,
     };
 
     get adapter(): TableCellAdapter {
@@ -314,6 +316,7 @@ export default class TableCell extends BaseComponent<TableCellProps, Record<stri
             fixedRight,
             lastFixedLeft,
             firstFixedRight,
+            colIndex
         } = this.props;
         const { className } = column;
         const fixedLeftFlag = fixedLeft || typeof fixedLeft === 'number';
@@ -347,7 +350,14 @@ export default class TableCell extends BaseComponent<TableCellProps, Record<stri
         );
 
         return (
-            <BodyCell className={columnCls} onClick={this.handleClick} {...newTdProps} ref={this.setRef}>
+            <BodyCell
+                role="gridcell"
+                aria-colindex={colIndex + 1}
+                className={columnCls}
+                onClick={this.handleClick}
+                {...newTdProps}
+                ref={this.setRef}
+            >
                 {inner}
             </BodyCell>
         );

package/table/TableHeaderRow.tsx

@@ -168,11 +168,25 @@ export default class TableHeaderRow extends BaseComponent<TableHeaderRowProps, R
                 return null;
             }
 
-            return <HeaderCell {...props} style={cellStyle} key={column.key || column.dataIndex || cellIndex} />;
+            return (
+                <HeaderCell
+                    role="columnheader"
+                    aria-colindex={cellIndex + 1}
+                    {...props}
+                    style={cellStyle} 
+                    key={column.key || column.dataIndex || cellIndex} 
+                />
+            );
         });
 
         return (
-            <HeaderRow {...rowProps} style={style} ref={this.cacheRef}>
+            <HeaderRow
+                role="row"
+                aria-rowindex={index + 1}
+                {...rowProps}
+                style={style}
+                ref={this.cacheRef}
+            >
                 {cells}
             </HeaderRow>
         );

package/table/__test__/table.test.js

@@ -1452,6 +1452,52 @@ describe(`Table`, () => {
         });
         expect(demo.find(BaseTable).state('disabledRowKeys').length).toEqual(2);
     });
+    /**
+     * 分页受控场景，更新数据后查看分页器是否保持当前页
+     */
+    it('test controlled pagination reset when dataSource change', async () => {
+        const total = 100;
+        const pagination = {
+            pageSize: 10,
+            currentPage: 2,
+        };
+        const columns = getColumns();
+        const demo = mount(<Table dataSource={getData(total)} columns={columns} pagination={pagination}/>);
+
+        const dataNum = getRandomNumber(100, 40);
+        const newData = getData(dataNum);
+        demo.setProps({
+            dataSource: newData,
+        });
+        await sleep(2000);
+        expect(
+          demo
+            .find(`.${BASE_CLASS_PREFIX}-page .${BASE_CLASS_PREFIX}-page-item-active`)
+            .getDOMNode().innerHTML
+        ).toBe('2');
+    });
+
+    /**
+     * 分页非受控场景，更新数据后查看分页器是否重置
+     */
+    it('test uncontrolled pagination reset when dataSource change', async () => {
+        const total = 100;
+        const columns = getColumns();
+        const demo = mount(<Table dataSource={getData(total)} columns={columns}/>);
+        demo.find(`.${BASE_CLASS_PREFIX}-page .${BASE_CLASS_PREFIX}-page-item`)
+          .at(2)
+          .simulate('click');
+        const dataNum = getRandomNumber(100, 40);
+        const newData = getData(dataNum);
+        demo.setProps({
+            dataSource: newData,
+        });
+        await sleep(2000);
+        demo.update();
+        expect(demo.find(`.semi-page .semi-page-item-active`).getDOMNode().innerHTML).toBe('1');
+        expect(demo.find(BaseTable).state('pagination')).toHaveProperty('currentPage', 1);
+    });
+
     it('test pagination changed', async () => {
         const total = 100;
         const pagination = {

package/table/_story/table.stories.js

@@ -76,6 +76,8 @@ export { default as ScrollBar } from './ScrollBar';
 export { default as TableSpan } from './TableSpan';
 export { default as FixRenderReturnProps } from './FixRenderReturnProps';
 export { default as WarnColumnWithoutDataIndex } from './WarnColumnWithoutDataIndex';
+export { default as FixedColumnsChange } from './v2/FixedColumnsChange';
+export { default as FixedZIndex } from './v2/FixedZIndex';
 
 // empty table
 

package/table/_story/v2/FixedColumnsChange/index.jsx

@@ -0,0 +1,104 @@
+import React, { useState, useMemo } from 'react';
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import * as dateFns from 'date-fns';
+
+const DAY = 24 * 60 * 60 * 1000;
+const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
+
+const getData = () => {
+    const data = [];
+    for (let i = 0; i < 46; i++) {
+        const isSemiDesign = i % 2 === 0;
+        const randomNumber = (i * 1000) % 199;
+        data.push({
+            key: '' + i,
+            name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`,
+            owner: isSemiDesign ? '姜鹏志' : '郝宣',
+            size: randomNumber,
+            updateTime: new Date().valueOf() + randomNumber * DAY,
+            avatarBg: isSemiDesign ? 'grey' : 'red'
+        });
+    }
+    return data;
+};
+
+const data = getData();
+
+/**
+ * fix https://github.com/DouyinFE/semi-design/issues/381
+ */
+App.storyName = 'fixed columns change';
+function App() {
+    const [dataSource, setData] = useState(data);
+    const [rowKeys, setRowKeys] = useState([]);
+
+    const columns = [
+        {
+            title: '标题',
+            dataIndex: 'name',
+            width: 400,
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
+                        {text}
+                    </div>
+                );
+            },
+            filters: [
+                {
+                    text: 'Semi Design 设计稿',
+                    value: 'Semi Design 设计稿',
+                },
+                {
+                    text: 'Semi Pro 设计稿',
+                    value: 'Semi Pro 设计稿',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+            sorter: (a, b) => a.size - b.size > 0 ? 1 : -1,
+            render: (text) => `${text} KB`
+        },
+        {
+            title: '所有者',
+            dataIndex: 'owner',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>{typeof text === 'string' && text.slice(0, 1)}</Avatar>
+                        {text}
+                    </div>
+                );
+            }
+        },
+        {
+            title: '更新日期',
+            dataIndex: 'updateTime',
+            sorter: (a, b) => a.updateTime - b.updateTime > 0 ? 1 : -1,
+            render: (value) => {
+                return dateFns.format(new Date(value), 'yyyy-MM-dd');
+            }
+        }
+    ];
+
+    return (
+        <Table
+            columns={columns}
+            dataSource={dataSource}
+            pagination={{
+                pageSize: 5,
+            }}
+            rowSelection={{
+                onChange: rowKeys => setRowKeys(rowKeys),
+                selectedRowKeys: rowKeys,
+            }}
+            scroll={{ y: 300 }}
+        />
+    );
+}
+
+export default App;

package/table/_story/v2/FixedZIndex/index.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Table, Tooltip, Tag } from '@douyinfe/semi-ui';
+
+App.storyName = 'fixed z-index bug';
+export default function App() {
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            width: 150,
+            fixed: true,
+            filters: [
+                {
+                    text: 'King 3',
+                    value: 'King 3',
+                },
+                {
+                    text: 'King 4',
+                    value: 'King 4',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+        {
+            title: 'Age',
+            dataIndex: 'age',
+            width: 150,
+            sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+        },
+        {
+            title: 'Address',
+            width: 200,
+            dataIndex: 'address',
+        },
+        {
+            title: 'Description',
+            // width: 400,
+            dataIndex: 'description',
+        },
+        {
+            fixed: 'right',
+            width: 250,
+            render: (text, record) => <Tooltip content={record.description}><Tag color="green">Show Info</Tag></Tooltip>
+        }
+    ];
+
+    let data = [];
+
+    const rowSelection = {
+        onChange: (selectedRowKeys, selectedRows) => {
+            // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+        },
+        getCheckboxProps: record => ({
+            disabled: record.name === 'Michael James', // Column configuration not to be checked
+            name: record.name,
+        }),
+        // fixed: true,
+    };
+
+    for (let i = 0; i < 46; i++) {
+        let age = 40 + (Math.random() > 0.5 ? 1 : -1) * Math.ceil(i / 3);
+        let name = `Edward King ${i}`;
+        data.push({
+            key: `${ i}`,
+            name,
+            age,
+            address: `London, Park Lane no. ${i}`,
+            description: `My name is ${name}, I am ${age} years old, living in New York No. ${i + 1} Lake Park.`,
+        });
+    }
+
+    const scroll = { y: 300, x: 1500 };
+
+    return (
+        <div style={{ position: 'relative', height: '100vh' }}>
+            <div style={{ height: 60, background: 'red', position: 'absolute', top: 0, left: 0, right: 0, zIndex: 2 }}>
+                Fixed Header
+            </div>
+            <Table
+                columns={columns}
+                dataSource={data}
+                scroll={scroll}
+                rowSelection={rowSelection}
+            />
+        </div>
+    );
+}

package/tabs/TabBar.tsx

@@ -91,7 +91,7 @@ class TabBar extends React.Component<TabBarProps, TabBarState> {
     renderTabItem = (panel: PlainTab): ReactNode => {
         const { size, type, deleteTabItem } = this.props;
         const panelIcon = panel.icon ? this.renderIcon(panel.icon) : null;
-        const closableIcon = (type === 'card' && panel.closable) ? <IconClose className={`${cssClasses.TABS_TAB}-icon-close`} onClick={(e: React.MouseEvent<HTMLSpanElement>) => deleteTabItem(panel.itemKey, e)} /> : null;
+        const closableIcon = (type === 'card' && panel.closable) ? <IconClose aria-label="Close" role="button" className={`${cssClasses.TABS_TAB}-icon-close`} onClick={(e: React.MouseEvent<HTMLSpanElement>) => deleteTabItem(panel.itemKey, e)} /> : null;
         let events = {};
         const key = panel.itemKey;
         if (!panel.disabled) {
@@ -99,8 +99,9 @@ class TabBar extends React.Component<TabBarProps, TabBarState> {
                 onClick: (e: MouseEvent<HTMLDivElement>): void => this.handleItemClick(key, e),
             };
         }
+        const isSelected = this._isActive(key);
         const className = cls(cssClasses.TABS_TAB, {
-            [cssClasses.TABS_TAB_ACTIVE]: this._isActive(key),
+            [cssClasses.TABS_TAB_ACTIVE]: isSelected,
             [cssClasses.TABS_TAB_DISABLED]: panel.disabled,
             [`${cssClasses.TABS_TAB}-small`]: size === 'small',
             [`${cssClasses.TABS_TAB}-medium`]: size === 'medium',
@@ -108,8 +109,10 @@ class TabBar extends React.Component<TabBarProps, TabBarState> {
         return (
             <div
                 role="tab"
+                id={`semiTab${key}`}
+                aria-controls={`semiTabPanel${key}`}
                 aria-disabled={panel.disabled ? 'true' : 'false'}
-                aria-selected={this._isActive(key) ? 'true' : 'false'}
+                aria-selected={isSelected ? 'true' : 'false'}
                 {...events}
                 className={className}
                 key={this._getItemKey(key)}
@@ -182,7 +185,7 @@ class TabBar extends React.Component<TabBarProps, TabBarState> {
                 style={dropdownStyle}
                 trigger={'hover'}
             >
-                <div className={arrowCls} onClick={(e): void => this.handleArrowClick(items, pos)}>
+                <div role="presentation" className={arrowCls} onClick={(e): void => this.handleArrowClick(items, pos)}>
                     <Button
                         disabled={disabled}
                         icon={icon}
@@ -233,7 +236,7 @@ class TabBar extends React.Component<TabBarProps, TabBarState> {
         const contents = collapsible ? this.renderCollapsedTab() : this.renderTabComponents(list);
 
         return (
-            <div role="tab-list" className={classNames} style={style} {...getDataAttr(restProps)} data-uuid={this.uuid}>
+            <div role="tablist" aria-orientation={tabPosition === "left" ? "vertical" : "horizontal"} className={classNames} style={style} {...getDataAttr(restProps)} data-uuid={this.uuid}>
                 {contents}
                 {extra}
             </div>

package/tabs/TabPane.tsx

@@ -86,7 +86,9 @@ class TabPane extends PureComponent<TabPaneProps> {
         return (
             <div
                 ref={this.ref}
-                role="tab-panel"
+                role="tabpanel"
+                id={`semiTabPanel${itemKey}`}
+                aria-labelledby={`semiTab${itemKey}`}
                 className={classNames}
                 style={style}
                 aria-hidden={active ? 'false' : 'true'}

package/tabs/index.tsx

@@ -285,7 +285,6 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
                 >
                     <div
                         ref={this.setContentRef}
-                        role="tab-content"
                         className={tabContentCls}
                         style={{ ...contentStyle }}
                     >

package/tagInput/__test__/tagInput.test.js

@@ -76,6 +76,28 @@ describe('TagInput', () => {
         tagInput.unmount();
     });
 
+    it('TagInput with defaultValue and value is undefined', () => {
+        const props = {
+            defaultValue: ['tiktok', 'hotsoon'],
+            value: undefined,
+        };
+        const tagInput = getTagInput(props);
+        const tags = tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);
+        expect(tags.length).toEqual(0);
+        tagInput.unmount();
+    });
+
+    it('TagInput with defaultValue and value is null', () => {
+        const props = {
+            defaultValue: ['tiktok', 'hotsoon'],
+            value: null,
+        };
+        const tagInput = getTagInput(props);
+        const tags = tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);
+        expect(tags.length).toEqual(0);
+        tagInput.unmount();
+    });
+
     it('TagInput with disabled', () => {
         const disabledTagInput = mount(<TagInput disabled />);
         expect(disabledTagInput.exists(`.${BASE_CLASS_PREFIX}-tagInput-disabled`)).toEqual(true);
@@ -328,6 +350,30 @@ describe('TagInput', () => {
         expect(tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`).getDOMNode().textContent).toEqual('hotsoon');
     });
 
+    it('tagInput with set value to null  ', () => {
+        const props = {
+            value: ['tiktok']
+        };
+        const tagInput = getTagInput(props);
+        expect(tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`).getDOMNode().textContent).toEqual('tiktok');
+        tagInput.setProps({ value: null });
+        tagInput.update();
+        const tags = tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);
+        expect(tags.length).toEqual(0);
+    });
+
+    it('tagInput with set value to null  ', () => {
+        const props = {
+            value: ['tiktok']
+        };
+        const tagInput = getTagInput(props);
+        expect(tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`).getDOMNode().textContent).toEqual('tiktok');
+        tagInput.setProps({ value: undefined });
+        tagInput.update();
+        const tags = tagInput.find(`.${BASE_CLASS_PREFIX}-tagInput-wrapper .${BASE_CLASS_PREFIX}-tag-content`);
+        expect(tags.length).toEqual(0);
+    });
+
     it('tagInput with inputValue controlled mode ', () => {
         const props = {
             inputValue: 'abc'

package/tagInput/_story/tagInput.stories.js

@@ -13,7 +13,7 @@ export default {
 
 export const Default = () => (
   <>
-    <TagInput defaultValue={['抖音', '火山', '西瓜视频']} placeholder="请输入..." style={style} />
+    <TagInput aria-label='input tag' defaultValue={['抖音', '火山', '西瓜视频']} placeholder="请输入..." style={style} />
     <TagInput
       maxTagCount={2}
       showRestTagsPopover={true}
@@ -348,7 +348,7 @@ class CustomRender extends React.Component {
           marginRight: 10,
         }}
       >
-        <Avatar src={node.avatar} size="extra-small">
+        <Avatar alt="avatar" src={node.avatar} size="extra-small">
           {node.abbr}
         </Avatar>
         <span