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

package/treeSelect/index.tsx

@@ -99,6 +99,11 @@ export type OverrideCommonProps =
 */
 // eslint-disable-next-line max-len
 export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideCommonProps | 'validateStatus' | 'searchRender'>, Pick<TreeProps, OverrideCommonProps>{
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     motion?: Motion;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
@@ -110,6 +115,7 @@ export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideComm
     dropdownMatchSelectWidth?: boolean;
     dropdownStyle?: React.CSSProperties;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     maxTagCount?: number;
     motionExpand?: boolean;
     optionListStyle?: React.CSSProperties;
@@ -164,6 +170,11 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     static contextType = ConfigContext;
 
     static propTypes = {
+        'aria-describedby': PropTypes.string,
+        'aria-errormessage': PropTypes.string,
+        'aria-invalid': PropTypes.bool,
+        'aria-labelledby': PropTypes.string,
+        'aria-required': PropTypes.bool,
         loadedKeys: PropTypes.arrayOf(PropTypes.string),
         loadData: PropTypes.func,
         onLoad: PropTypes.func,
@@ -218,6 +229,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         suffix: PropTypes.node,
         prefix: PropTypes.node,
         insetLabel: PropTypes.node,
+        insetLabelId: PropTypes.string,
         zIndex: PropTypes.number,
         getPopupContainer: PropTypes.func,
         dropdownMatchSelectWidth: PropTypes.bool,
@@ -238,6 +250,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         optionListStyle: PropTypes.object,
         searchRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
         renderSelectedItem: PropTypes.func,
+        'aria-label': PropTypes.string,
     };
 
     static defaultProps: Partial<TreeSelectProps> = {
@@ -266,6 +279,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         expandAction: false,
         clickToHide: true,
         searchAutoFocus: false,
+        'aria-label': 'TreeSelect'
     };
     inputRef: React.RefObject<typeof Input>;
     tagInputRef: React.RefObject<TagInput>;
@@ -276,6 +290,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     onNodeClick: any;
     onNodeDoubleClick: any;
     onMotionEnd: any;
+    treeSelectID: string;
 
     constructor(props: TreeSelectProps) {
         super(props);
@@ -311,6 +326,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         this.optionsRef = React.createRef();
         this.clickOutsideHandler = null;
         this.foundation = new TreeSelectFoundation(this.adapter);
+        this.treeSelectID = Math.random().toString(36).slice(2);
     }
 
     // eslint-disable-next-line max-lines-per-function
@@ -614,7 +630,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     };
 
     renderPrefix = () => {
-        const { prefix, insetLabel }: any = this.props;
+        const { prefix, insetLabel, insetLabelId }: any = this.props;
         const labelNode = prefix || insetLabel;
         const prefixWrapperCls = cls({
             [`${prefixcls}-prefix`]: true,
@@ -624,7 +640,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             [`${prefixcls}-prefix-icon`]: isSemiIcon(labelNode),
         });
 
-        return <div className={prefixWrapperCls}>{labelNode}</div>;
+        return <div className={prefixWrapperCls} id={insetLabelId}>{labelNode}</div>;
     };
 
     renderContent = () => {
@@ -633,7 +649,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         const style = { minWidth: dropdownMinWidth, ...dropdownStyle };
         const popoverCls = cls(dropdownClassName, `${prefixcls}-popover`);
         return (
-            <div className={popoverCls} role="list-box" style={style}>
+            <div className={popoverCls} style={style}>
                 {this.renderTree()}
             </div>
         );
@@ -647,6 +663,10 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         this.foundation.handleClick(e);
     };
 
+    handleSelectionEnterPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+        this.foundation.handleSelectionEnterPress(e);
+    };
+
     showClearBtn = () => {
         const { searchPosition } = this.props;
         const { inputValue } = this.state;
@@ -782,6 +802,11 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         this.foundation.handleClear(e);
     };
 
+    handleClearEnterPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+        e && e.stopPropagation();
+        this.foundation.handleClearEnterPress(e);
+    };
+
     handleMouseOver = (e: React.MouseEvent) => {
         this.foundation.toggleHoverState(true);
     };
@@ -812,7 +837,14 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         const clearCls = cls(`${prefixcls}-clearbtn`);
         if (showClearBtn) {
             return (
-                <div className={clearCls} onClick={this.handleClear}>
+                <div 
+                    role='button'
+                    tabIndex={0} 
+                    aria-label="Clear TreeSelect value" 
+                    className={clearCls} 
+                    onClick={this.handleClear}
+                    onKeyPress={this.handleClearEnterPress}
+                >
                     <IconClear />
                 </div>
             );
@@ -902,13 +934,29 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                 <Fragment key={'arrow'}>{this.renderArrow()}</Fragment>,
             ]
         );
-
+        const tabIndex = disabled ? null : 0;
+        /**
+         * Reasons for disabling the a11y eslint rule:
+         * The following attributes(aria-controls,aria-expanded) will be automatically added by Tooltip, no need to declare here
+         */
         return (
             <div
+                // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+                role='combobox'
+                aria-disabled={disabled}
+                aria-haspopup="tree"
+                tabIndex={tabIndex}
                 className={classNames}
                 style={style}
                 ref={this.triggerRef}
                 onClick={this.handleClick}
+                onKeyPress={this.handleSelectionEnterPress}
+                aria-invalid={this.props['aria-invalid']}
+                aria-errormessage={this.props['aria-errormessage']}
+                aria-label={this.props['aria-label']} 
+                aria-labelledby={this.props['aria-labelledby']}
+                aria-describedby={this.props['aria-describedby']}
+                aria-required={this.props['aria-required']}
                 {...mouseEvent}
             >
                 {inner}
@@ -979,6 +1027,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             size,
             searchAutoFocus,
             placeholder,
+            maxTagCount,
         } = this.props;
         const {
             keyEntities,
@@ -988,6 +1037,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         const keyList = normalizeKeyList(checkedKeys, keyEntities, leafOnly);
         return (
             <TagInput
+                maxTagCount={maxTagCount}
                 disabled={disabled}
                 onInputChange={v => this.search(v)}
                 ref={this.tagInputRef}
@@ -1054,6 +1104,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                         }
                         return (
                             <Input
+                                aria-label='Filter TreeSelect item'
                                 ref={this.inputRef as any}
                                 autofocus={searchAutoFocus}
                                 placeholder={placeholder}
@@ -1232,7 +1283,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                     labelEllipsis: typeof labelEllipsis === 'undefined' ? virtualize : labelEllipsis,
                 }}
             >
-                <div className={wrapperCls} role="list-box">
+                <div className={wrapperCls}>
                     {outerTopSlot}
                     {
                         !outerTopSlot &&
@@ -1240,7 +1291,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                         isDropdownPositionSearch &&
                         this.renderInput()
                     }
-                    <div className={listCls} role="tree" style={optionListStyle}>
+                    <div className={listCls} role="tree" aria-multiselectable={multiple ? true : false} style={optionListStyle}>
                         {noData ? this.renderEmpty() : this.renderNodeList()}
                     </div>
                     {outerBottomSlot}

package/typography/base.tsx

@@ -11,6 +11,7 @@ import Tooltip from '../tooltip/index';
 import Popover from '../popover/index';
 import getRenderText from './util';
 import warning from '@douyinfe/semi-foundation/utils/warning';
+import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
 import LocaleConsumer from '../locale/localeConsumer';
 import { Locale } from '../locale/interface';
 import { Ellipsis, EllipsisPos, ShowTooltip, TypographyBaseSize, TypographyBaseType } from './interface';
@@ -372,13 +373,18 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
         }
         if (!noExpandText || !noCollapseText) {
             return (
+                // TODO: replace `a` tag with `span` in next major version
+                // NOTE: may have effect on style
+                // eslint-disable-next-line jsx-a11y/anchor-is-valid
                 <a
+                    role="button"
+                    tabIndex={0}
                     className={`${prefixCls}-ellipsis-expand`}
                     key="expand"
                     ref={this.expandRef}
                     aria-label={text}
                     onClick={this.toggleOverflow}
-                    // style={{ marginLeft: '8px' }}
+                    onKeyPress={e => isEnterPress(e) && this.toggleOverflow(e as any)}
                 >
                     {text}
                 </a>

package/typography/copyable.tsx

@@ -9,6 +9,7 @@ import LocaleConsumer from '../locale/localeConsumer';
 import { IconCopy, IconTick } from '@douyinfe/semi-icons';
 import { BaseProps } from '../_base/baseComponent';
 import { Locale } from '../locale/interface';
+import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
 
 const prefixCls = cssClasses.PREFIX;
 export interface CopyableProps extends BaseProps {
@@ -120,8 +121,16 @@ export class Copyable extends React.PureComponent<CopyableProps, CopyableState>
                             this.renderSuccessTip()
                         ) : (
                             <Tooltip content={typeof copyTip !== 'undefined' ? copyTip : locale.copy}>
+                                {/* TODO: replace `a` tag with `span` in next major version
+                                NOTE: may have effect on style */}
+                                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                                 <a className={`${prefixCls}-action-copy-icon`}>
-                                    <IconCopy onClick={this.copy} />
+                                    <IconCopy
+                                        role="button"
+                                        tabIndex={0}
+                                        onClick={this.copy}
+                                        onKeyPress={e => isEnterPress(e) && this.copy(e as any)}
+                                    />
                                 </a>
                             </Tooltip>
                         )}

package/upload/fileCard.tsx

@@ -17,7 +17,7 @@ import { RenderFileItemProps } from './interface';
 const prefixCls = cssClasses.PREFIX;
 
 const ErrorSvg: FC<SVGProps<SVGSVGElement>> = (props = {}) => (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg focusable={false} aria-hidden width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
         <circle cx="7.99992" cy="7.99992" r="6.66667" fill="white" />
         <path
             fillRule="evenodd"
@@ -28,7 +28,7 @@ const ErrorSvg: FC<SVGProps<SVGSVGElement>> = (props = {}) => (
 );
 
 const ReplaceSvg: FC<SVGProps<SVGSVGElement>> = (props = {}) => (
-    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg focusable={false} aria-hidden width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
         <circle cx="14" cy="14" r="14" fill="#16161A" fillOpacity="0.6" />
         <path d="M9 10.25V18.25L10.25 13.25H17.875V11.75C17.875 11.4739 17.6511 11.25 17.375 11.25H14L12.75 9.75H9.5C9.22386 9.75 9 9.97386 9 10.25Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
         <path d="M18 18.25L19 13.25H10.2031L9 18.25H18Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
@@ -36,7 +36,7 @@ const ReplaceSvg: FC<SVGProps<SVGSVGElement>> = (props = {}) => (
 );
 
 const DirectorySvg: FC<SVGProps<SVGSVGElement>> = (props = {}) => (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg focusable={false} aria-hidden width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
         <path d="M6 17V7.58824C6 7.26336 6.26863 7 6.6 7H10.5L12 8.76471H16.05C16.3814 8.76471 16.65 9.02806 16.65 9.35294V11.1176H7.5L6 17ZM6 17L7.44375 11.1176H18L16.8 17L6 17Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
 
@@ -136,15 +136,13 @@ class FileCard extends PureComponent<FileCardProps> {
         });
         const closeCls = `${prefixCls}-picture-file-card-close`;
         const retry = (
-            <div
-                className={`${prefixCls}-picture-file-card-retry`} onClick={e => this.onRetry(e)}>
+            <div role="button" tabIndex={0} className={`${prefixCls}-picture-file-card-retry`} onClick={e => this.onRetry(e)}>
                 <IconRefresh className={`${prefixCls}-picture-file-card-icon-retry`} />
             </div>
         );
         const replace = (
             <Tooltip trigger="hover" position="top" content={locale.replace} showArrow={false} spacing={4}>
-                <div
-                    className={`${prefixCls}-picture-file-card-replace`} onClick={(e): void => this.onReplace(e)}>
+                <div role="button" tabIndex={0} className={`${prefixCls}-picture-file-card-replace`} onClick={(e): void => this.onReplace(e)}>
                     <ReplaceSvg className={`${prefixCls}-picture-file-card-icon-replace`} />
                 </div>
             </Tooltip>
@@ -155,18 +153,18 @@ class FileCard extends PureComponent<FileCardProps> {
             <div className={`${prefixCls }-picture-file-card-pic-info`}>{index + 1}</div>
         );
 
-        const thumbnail = typeof renderThumbnail === 'function' ? renderThumbnail(this.props) : <img src={url} alt={`picture of ${name}`} />;
+        const thumbnail = typeof renderThumbnail === 'function' ? renderThumbnail(this.props) : <img src={url} alt={name} />;
 
         return (
-            <div className={filePicCardCls} style={style} onClick={onPreviewClick}>
+            <div role="listitem" className={filePicCardCls} style={style} onClick={onPreviewClick}>
                 {thumbnail}
-                {showProgress ? <Progress percent={percent} type="circle" size="small" orbitStroke={'#FFF'} /> : null}
+                {showProgress ? <Progress percent={percent} type="circle" size="small" orbitStroke={'#FFF'} aria-label="uploading file progress" /> : null}
                 {showRetry ? retry : null}
                 {showReplace && replace}
                 {showPicInfo && picInfo}
                 {!disabled && (
-                    <div className={closeCls}>
-                        <IconClose 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()}
@@ -193,12 +191,12 @@ class FileCard extends PureComponent<FileCardProps> {
         const showRetry = status === strings.FILE_STATUS_UPLOAD_FAIL && propsShowRetry;
         const showReplace = status === strings.FILE_STATUS_SUCCESS && propsShowReplace;
         const fileSize = this.transSize(size);
-        let previewContent: ReactNode = preview ? (<img src={url} />) : (<IconFile size="large" />);
+        let previewContent: ReactNode = preview ? (<img src={url} alt={name} />) : (<IconFile size="large" />);
         if (previewFile) {
             previewContent = previewFile(this.props);
         }
         return (
-            <div className={fileCardCls} style={style} onClick={onPreviewClick}>
+            <div role="listitem" className={fileCardCls} style={style} onClick={onPreviewClick}>
                 <div className={previewCls}>
                     {previewContent}
                 </div>
@@ -225,12 +223,12 @@ class FileCard extends PureComponent<FileCardProps> {
                         </span>
 
                     </div>
-                    {showProgress ? (<Progress percent={percent} style={{ width: '100%' }} />) : null}
+                    {showProgress ? (<Progress percent={percent} style={{ width: '100%' }} aria-label="uploading file progress" />) : null}
                     <div className={`${infoCls}-main-control`}>
                         <span className={`${infoCls}-validate-message`}>
                             {this.renderValidateMessage()}
                         </span>
-                        {showRetry ? <span className={`${infoCls}-retry`} onClick={e => this.onRetry(e)}>{locale.retry}</span> : null}
+                        {showRetry ? <span role="button" tabIndex={0} className={`${infoCls}-retry`} onClick={e => this.onRetry(e)}>{locale.retry}</span> : null}
                     </div>
                 </div>
                 <IconButton

package/upload/index.tsx

@@ -400,6 +400,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
         });
         const mainCls = `${prefixCls}-file-list-main`;
         const addContentProps = {
+            role: 'button',
             className: uploadAddCls,
             onClick: this.onClick,
         };
@@ -432,7 +433,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
             <LocaleConsumer componentName="Upload">
                 {(locale: Locale['Upload']) => (
                     <div {...containerProps}>
-                        <div className={mainCls}>
+                        <div className={mainCls} role="list" aria-label="picture list">
                             {fileList.map((file, index) => this.renderFile(file, index, locale))}
                             {showAddTriggerInList ? addContent : null}
                         </div>
@@ -467,14 +468,14 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
                             <div className={titleCls}>
                                 <span className={`${titleCls}-choosen`}>{locale.selectedFiles}</span>
                                 {showClear ? (
-                                    <span onClick={this.clear} className={`${titleCls}-clear`}>
+                                    <span role="button" tabIndex={0} onClick={this.clear} className={`${titleCls}-clear`}>
                                         {locale.clear}
                                     </span>
                                 ) : null}
                             </div>
                         ) : null}
 
-                        <div className={mainCls}>
+                        <div className={mainCls} role="list" aria-label="file list">
                             {fileList.map((file, index) => this.renderFile(file, index, locale))}
                         </div>
                     </div>
@@ -501,7 +502,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
     };
 
     renderAddContent = () => {
-        const { draggable, children, listType } = this.props;
+        const { draggable, children, listType, disabled } = this.props;
         const uploadAddCls = cls(`${prefixCls}-add`);
         if (listType === strings.FILE_LIST_PIC) {
             return null;
@@ -510,7 +511,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
             return this.renderDragArea();
         }
         return (
-            <div className={uploadAddCls} onClick={this.onClick}>
+            <div role="button" tabIndex={0} aria-disabled={disabled} className={uploadAddCls} onClick={this.onClick}>
                 {children}
             </div>
         );
@@ -518,7 +519,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
 
     renderDragArea = (): ReactNode => {
         const { dragAreaStatus } = this.state;
-        const { children, dragIcon, dragMainText, dragSubText } = this.props;
+        const { children, dragIcon, dragMainText, dragSubText, disabled } = this.props;
         const dragAreaBaseCls = `${prefixCls}-drag-area`;
         const dragAreaCls = cls(dragAreaBaseCls, {
             [`${dragAreaBaseCls}-legal`]: dragAreaStatus === strings.DRAG_AREA_LEGAL,
@@ -530,6 +531,9 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
             <LocaleConsumer componentName="Upload">
                 {(locale: Locale['Upload']): ReactNode => (
                     <div
+                        role="button"
+                        tabIndex={0}
+                        aria-disabled={disabled}
                         className={dragAreaCls}
                         onDrop={this.onDrop}
                         onDragOver={this.onDragOver}