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

package/dropdown/dropdownItem.tsx

@@ -92,7 +92,7 @@ class DropdownItem extends BaseComponent<DropdownItemProps> {
             );
         }
         return (
-            <li {...events} ref={ref => forwardRef(ref)} className={itemclass} style={style}>
+            <li role="menuitem" {...events} ref={ref => forwardRef(ref)} className={itemclass} style={style}>
                 {tick}
                 {iconContent}
                 {children}

package/dropdown/dropdownMenu.tsx

@@ -18,7 +18,7 @@ class DropdownMenu extends BaseComponent<DropdownMenuProps> {
     render() {
         const { children, className, style, ...rest } = this.props;
         return (
-            <ul {...rest} className={classnames(`${prefixCls}-menu`, className)} style={style}>
+            <ul role="menu" aria-orientation="vertical" {...rest} className={classnames(`${prefixCls}-menu`, className)} style={style}>
                 {children}
             </ul>
         );

package/empty/index.tsx

@@ -108,17 +108,17 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
                 style: { fontWeight: 400 },
             };
         return (
-            <div className={wrapperCls} style={style}>
-                <div className={`${prefixCls}-image`} style={imageStyle}>
+            <div className={wrapperCls} style={style} aria-label="empty placeholder image">
+                <div className={`${prefixCls}-image`} style={imageStyle} >
                     {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`} >
                             {title}
                         </Typography.Title>
                     ) : null}
-                    {description ? <div className={`${prefixCls}-description`}>{description}</div> : null}
+                    {description ? <div className={`${prefixCls}-description`} >{description}</div> : null}
                     {children ? <div className={`${prefixCls}-footer`}>{children}</div> : null}
                 </div>
             </div>

package/form/_story/FormApi/formApiDemo.jsx

@@ -17,6 +17,7 @@ import {
 } from '../../../index';
 const { Input, Select, DatePicker, Switch, Slider, CheckboxGroup, Checkbox, RadioGroup, Radio, TimePicker, InputNumber, InputGroup } = Form;
 
+import { IconPlusCircle, IconMinusCircle } from '@douyinfe/semi-icons';
 
 const SetValueUsingParentPath = () => {
     const { Option } = Form.Select;
@@ -51,7 +52,7 @@ const SetValueUsingParentPath = () => {
                     <React.Fragment>
                         <Button onClick={add} icon="plus_circle" theme="light">新增空白行</Button>
                         <Button
-                            icon="plus_circle" onClick={() => {
+                            icon={<IconPlusCircle></IconPlusCircle>} onClick={() => {
                                 addWithInitValue({ name: '自定义贴纸', type: '2D' });
                             }} style={{ marginLeft: 8 }}>新增带有初始值的行
                         </Button>
@@ -68,7 +69,7 @@ const SetValueUsingParentPath = () => {
                                         label={`素材类型：（${field}.type）`}
                                         style={{ width: 90 }}
                                     />
-                                    <Button type="danger" theme="borderless" icon="minus_circle" onClick={remove} style={{ margin: 12 }} />
+                                    <Button type="danger" theme="borderless" icon={<IconMinusCircle></IconMinusCircle>} onClick={remove} style={{ margin: 12 }} />
                                 </div>
                             ))
                         }

package/form/_story/Validate/validateDemo.jsx

@@ -201,7 +201,7 @@ class PartValidAndResetDemo extends Component {
     }
 
     render() {
-        let options = ['a', 'b', 'c', 'd'].map(item => ({ label: item, value: item }));
+        let options = ['a', 'b', 'c', 'd', 'b.name'].map(item => ({ label: item, value: item }));
         return (
             <Form getFormApi={this.getFormApi} autoScrollToError>
                 <Input field="a[1]" validate={this.validate} trigger="blur" />

package/form/_story/demo.jsx

@@ -196,6 +196,8 @@ class BasicDemoWithInit extends Component {
                 onValueChange={(v)=>console.log(v)}
                 style={{ padding: '10px', width: 600 }}
                 autoScrollToError
+                aria-label='Demo Form'
+                id='demo-form-id'
                 >
                 <Form.Section text={'基本信息'}>
                     <Row>
@@ -265,13 +267,20 @@ class BasicDemoWithInit extends Component {
                     <Row>
                         <Col span={12}>
                             <Form.TimePicker
-                                treeData={treeData}
                                 field='time'
+                                helpText='原则上应当在 9:00 - 18:00 之间'
                                 label='时间选择'
                             >
-                            </Form.TimePicker>    
+                            </Form.TimePicker>
+                        </Col>
+                        <Col span={12}>
+                            <Form.AutoComplete
+                                field='typeData'
+                                label='类型选择'
+                                data={['1', '2' , '3']}
+                            >
+                            </Form.AutoComplete>
                         </Col>
-               
                     </Row>
                 </Form.Section>
                 <Form.Section text='资源详情'>

package/form/_story/form.stories.js

@@ -54,7 +54,6 @@ import { AssistComponent } from './Layout/slotDemo';
 import { ModalFormDemo } from './Layout/modalFormDemo';
 
 import { WithFieldDemo, CustomFieldDemo, NumberRange } from './HOC/withFieldDemo';
-import { WithDisplayName } from './HOC/displayName';
 import {
   CustomValidateDemo,
   ValidateFieldsDemo,
@@ -426,12 +425,6 @@ DebugRerenderTwice.story = {
   name: 'Debug-RerenderTwice',
 };
 
-export const FieldDisplayName = () => <WithDisplayName attr="form" />;
-
-FieldDisplayName.story = {
-  name: 'Field displayName',
-};
-
 export const _ChildDidMount = () => <ChildDidMount />;
 
 _ChildDidMount.story = {

package/form/baseForm.tsx

@@ -49,6 +49,7 @@ interface BaseFormState {
 }
 class Form extends BaseComponent<BaseFormProps, BaseFormState> {
     static propTypes = {
+        'aria-label': PropTypes.string,
         onSubmit: PropTypes.func,
         onSubmitFail: PropTypes.func,
         /* Triggered from update, including field mount/unmount/value change/blur/verification status change/error prompt change, input parameter is formState, currentField */
@@ -74,6 +75,7 @@ class Form extends BaseComponent<BaseFormProps, BaseFormState> {
         disabled: PropTypes.bool,
         showValidateIcon: PropTypes.bool,
         extraTextPosition: PropTypes.oneOf(strings.EXTRA_POS),
+        id: PropTypes.string,
     };
 
     static defaultProps = {

package/form/errorMessage.tsx

@@ -17,6 +17,8 @@ export interface ErrorMessageProps {
     validateStatus?: string;
     helpText?: React.ReactNode;
     isInInputGroup?: boolean;
+    errorMessageId?: string;
+    helpTextId?: string;
 }
 
 export default class ErrorMessage extends PureComponent<ErrorMessageProps> {
@@ -28,14 +30,23 @@ export default class ErrorMessage extends PureComponent<ErrorMessageProps> {
         showValidateIcon: PropTypes.bool,
         helpText: PropTypes.node,
         isInInputGroup: PropTypes.bool,
+        // internal props
+        errorMessageId: PropTypes.string,
+        helpTextId: PropTypes.string,
     };
 
     generatorText(error: ReactFieldError) {
+        const { helpTextId, errorMessageId } = this.props;
+        const propsError = this.props.error;
+        let id = errorMessageId;
+        if (!propsError) {
+            id = helpTextId;
+        }
         if (typeof error === 'string') {
-            return <span>{error}</span>;
+            return <span id={id}>{error}</span>;
         } else if (Array.isArray(error)) {
             const err = error.filter(e => e);
-            return err.length ? <span>{err.join(', ')}</span> : null;
+            return err.length ? <span id={id}>{err.join(', ')}</span> : null;
         } else if (React.isValidElement(error)) {
             return error;
         }

package/form/hoc/withField.tsx

@@ -63,6 +63,7 @@ function withField<
             extraText,
             extraTextPosition,
             pure,
+            id,
             rest,
         } = mergeProps(props);
         let { options, shouldInject } = mergeOptions(opts, props);
@@ -406,11 +407,27 @@ function withField<
         let mergeWrapperCol = wrapperCol || formProps.wrapperCol;
         let mergeExtraPos = extraTextPosition || formProps.extraTextPosition || 'bottom';
 
+        // id attribute to improve a11y
+        const a11yId = id ? id : field;
+        const labelId = `${a11yId}-label`;
+        const helpTextId = `${a11yId}-helpText`;
+        const extraTextId = `${a11yId}-extraText`;
+        const errorMessageId = `${a11yId}-errormessage`;
+
         let FieldComponent = (() => {
             // prefer to use validateStatus which pass by user throught props
             let blockStatus = validateStatus ? validateStatus : status;
 
+            const extraCls = classNames(`${prefix}-field-extra`, {
+                [`${prefix}-field-extra-string`]: typeof extraText === 'string',
+                [`${prefix}-field-extra-middle`]: mergeExtraPos === 'middle',
+                [`${prefix}-field-extra-botttom`]: mergeExtraPos === 'bottom',
+            });
+
+            const extraContent = extraText ? <div className={extraCls} id={extraTextId}>{extraText}</div> : null;
+
             let newProps: Record<string, any> = {
+                id: a11yId,
                 disabled: formProps.disabled,
                 ...rest,
                 ref,
@@ -418,8 +435,23 @@ function withField<
                 [options.onKeyChangeFnName]: handleChange,
                 [options.valueKey]: value,
                 validateStatus: blockStatus,
+                'aria-required': required,
+                'aria-labelledby': labelId,
             };
 
+            if (helpText) {
+                newProps['aria-describedby'] = extraText ? `${helpTextId} ${extraTextId}` : helpTextId;
+            }
+            
+            if (extraText) {
+                newProps['aria-describedby'] = helpText ? `${helpTextId} ${extraTextId}` : extraTextId;
+            }
+            
+            if (status === 'error') {
+                newProps['aria-errormessage'] = errorMessageId;
+                newProps['aria-invalid'] = true;
+            }
+
             const fieldCls = classNames({
                 [`${prefix}-field`]: true,
                 [`${prefix}-field-${name}`]: Boolean(name),
@@ -431,8 +463,10 @@ function withField<
 
             if (mergeLabelPos === 'inset' && !noLabel) {
                 newProps.insetLabel = label || field;
+                newProps.insetLabelId = labelId;
                 if (typeof label === 'object' && !isElement(label)) {
                     newProps.insetLabel = label.text;
+                    newProps.insetLabelId = labelId;
                 }
             }
 
@@ -463,6 +497,7 @@ function withField<
                 labelContent = (
                     <Label
                         text={label || field}
+                        id={labelId}
                         required={required}
                         name={name || field}
                         width={mergeLabelWidth}
@@ -472,14 +507,6 @@ function withField<
                 );
             }
 
-            const extraCls = classNames(`${prefix}-field-extra`, {
-                [`${prefix}-field-extra-string`]: typeof extraText === 'string',
-                [`${prefix}-field-extra-middle`]: mergeExtraPos === 'middle',
-                [`${prefix}-field-extra-botttom`]: mergeExtraPos === 'bottom',
-            });
-
-            const extraContent = extraText ? <div className={extraCls}>{extraText}</div> : null;
-
             const fieldMainContent = (
                 <div className={fieldMaincls}>
                     {mergeExtraPos === 'middle' ? extraContent : null}
@@ -489,6 +516,8 @@ function withField<
                             error={error}
                             validateStatus={blockStatus}
                             helpText={helpText}
+                            helpTextId={helpTextId}
+                            errorMessageId={errorMessageId}
                             showValidateIcon={formProps.showValidateIcon}
                         />
                     ) : null}

package/form/index.tsx

@@ -19,8 +19,6 @@ import withField from './hoc/withField';
 import withFormState from './hoc/withFormState';
 import withFormApi from './hoc/withFormApi';
 
-export * from './interface';
-
 export {
     Form,
     ArrayField,

package/form/interface.ts

@@ -103,6 +103,7 @@ interface setValuesConfig {
 }
 
 export interface BaseFormProps {
+    'aria-label'?: React.AriaAttributes['aria-label'];
     onSubmit?: (values: Record<string, any>) => void;
     onSubmitFail?: (errors: Record<string, FieldError>, values: any) => void;
     onReset?: () => void;
@@ -111,6 +112,7 @@ export interface BaseFormProps {
     validateFields?: (values: Record<string, any>) => string | Record<string, any>;
     /** Use this if you want to populate the form with initial values. */
     initValues?: Record<string, any>;
+    id?: string;
     /** getFormApi will be call once when Form mounted, u can save formApi reference in your component  */
     getFormApi?: (formApi: FormApi) => void;
     style?: React.CSSProperties;

package/form/label.tsx

@@ -6,6 +6,7 @@ import { cssClasses } from '@douyinfe/semi-foundation/form/constants';
 const prefixCls = cssClasses.PREFIX;
 
 export interface LabelProps {
+    id?: string;
     /** Whether to display the required * symbol */
     required?: boolean;
     /** Content of label */
@@ -31,6 +32,7 @@ export default class Label extends PureComponent<LabelProps> {
     };
 
     static propTypes = {
+        id: PropTypes.string,
         children: PropTypes.node,
         required: PropTypes.bool,
         text: PropTypes.node,
@@ -44,7 +46,7 @@ export default class Label extends PureComponent<LabelProps> {
     };
 
     render() {
-        const { children, required, text, disabled, name, width, align, style, className, extra } = this.props;
+        const { children, required, text, disabled, name, width, align, style, className, extra, id } = this.props;
 
         const labelCls = classNames(className, {
             [`${prefixCls}-field-label`]: true,
@@ -71,7 +73,7 @@ export default class Label extends PureComponent<LabelProps> {
         );
 
         return (
-            <label className={labelCls} htmlFor={name} style={labelStyle}>
+            <label className={labelCls} htmlFor={name} style={labelStyle} id={id}>
                 {extra ? contentWithExtra : textContent}
             </label>
         );

package/input/index.tsx

@@ -26,6 +26,12 @@ export type ValidateStatus = "default" | "error" | "warning" | "success";
 
 export interface InputProps extends
     Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'prefix' | 'size' | 'autoFocus' | 'placeholder' | 'onFocus' | 'onBlur'> {
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    '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'];
     addonBefore?: React.ReactNode;
     addonAfter?: React.ReactNode;
     prefix?: React.ReactNode;
@@ -41,6 +47,7 @@ export interface InputProps extends
     hideSuffix?: boolean;
     placeholder?: React.ReactText;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     size?: InputSize;
     className?: string;
     style?: React.CSSProperties;
@@ -73,6 +80,12 @@ export interface InputState {
 
 class Input extends BaseComponent<InputProps, InputState> {
     static propTypes = {
+        'aria-label': PropTypes.string,
+        'aria-labelledby': PropTypes.string,
+        'aria-invalid': PropTypes.bool,
+        'aria-errormessage': PropTypes.string,
+        'aria-describedby': PropTypes.string,
+        'aria-required': PropTypes.bool,
         addonBefore: PropTypes.node,
         addonAfter: PropTypes.node,
         prefix: PropTypes.node,
@@ -101,6 +114,7 @@ class Input extends BaseComponent<InputProps, InputState> {
         onKeyPress: PropTypes.func,
         onEnterPress: PropTypes.func,
         insetLabel: PropTypes.node,
+        insetLabelId: PropTypes.string,
         inputStyle: PropTypes.object,
         getValueLength: PropTypes.func,
     };
@@ -207,6 +221,10 @@ 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);
     };
@@ -235,6 +253,10 @@ class Input extends BaseComponent<InputProps, InputState> {
         this.foundation.handleMouseUp(e);
     };
 
+    handleModeEnterPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+        this.foundation.handleModeEnterPress(e);
+    }
+
     handleClickPrefixOrSuffix = (e: React.MouseEvent<HTMLInputElement>) => {
         this.foundation.handleClickPrefixOrSuffix(e);
     };
@@ -275,7 +297,14 @@ class Input extends BaseComponent<InputProps, InputState> {
         // use onMouseDown to fix issue 1203
         if (allowClear) {
             return (
-                <div className={clearCls} onMouseDown={this.handleClear}>
+                <div
+                    role="button"
+                    tabIndex={0}
+                    aria-label="Clear input value"
+                    className={clearCls}
+                    onMouseDown={this.handleClear}
+                    onKeyPress={this.handleClearEnterPress}
+                >
                     <IconClear />
                 </div>
             );
@@ -289,9 +318,19 @@ class Input extends BaseComponent<InputProps, InputState> {
         const modeCls = cls(`${prefixCls}-modebtn`);
         const modeIcon = eyeClosed ? <IconEyeClosedSolid /> : <IconEyeOpened />;
         const showModeBtn = mode === 'password' && value && !disabled && (isFocus || isHovering);
+        const ariaLabel = eyeClosed ? 'Show password' : 'Hidden password';
         if (showModeBtn) {
             return (
-                <div className={modeCls} onClick={this.handleClickEye} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
+                <div
+                    role="button"
+                    tabIndex={0}
+                    aria-label={ariaLabel}
+                    className={modeCls}
+                    onClick={this.handleClickEye}
+                    onMouseDown={this.handleMouseDown}
+                    onMouseUp={this.handleMouseUp}
+                    onKeyPress={this.handleModeEnterPress}
+                >
                     {modeIcon}
                 </div>
             );
@@ -300,7 +339,7 @@ class Input extends BaseComponent<InputProps, InputState> {
     }
 
     renderPrefix() {
-        const { prefix, insetLabel } = this.props;
+        const { prefix, insetLabel, insetLabelId } = this.props;
         const labelNode = prefix || insetLabel;
         if (!labelNode) {
             return null;
@@ -312,7 +351,8 @@ class Input extends BaseComponent<InputProps, InputState> {
             [`${prefixCls}-prefix-icon`]: isSemiIcon(labelNode),
         });
 
-        return <div className={prefixWrapperCls} onMouseDown={this.handlePreventMouseDown} onClick={this.handleClickPrefixOrSuffix}>{labelNode}</div>;
+        // 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>;
     }
 
     showClearBtn() {
@@ -332,6 +372,7 @@ class Input extends BaseComponent<InputProps, InputState> {
             [`${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>;
     }
 
@@ -417,7 +458,11 @@ class Input extends BaseComponent<InputProps, InputState> {
         if (stateMinLength) {
             inputProps.minLength = stateMinLength;
         }
+        if (validateStatus === 'error') {
+            inputProps['aria-invalid'] = "true";
+        }
         return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
             <div
                 className={wrapperCls}
                 style={style}

package/input/inputGroup.tsx

@@ -4,7 +4,7 @@ import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/input/constants';
 import BaseComponent from '../_base/baseComponent';
-import Label from '../form/label';
+import Label, { LabelProps } from '../form/label';
 
 import { noop } from '@douyinfe/semi-foundation/utils/function';
 import { isFunction } from 'lodash';
@@ -21,7 +21,7 @@ export interface InputGroupProps {
     style?: Record<string, any>;
     onBlur?: (e: React.FocusEvent<HTMLSpanElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLSpanElement>) => void;
-    label?: Record<string, any>;
+    label?: LabelProps;
     labelPosition?: string;
     disabled?: boolean;
 }
@@ -64,10 +64,12 @@ export default class inputGroup extends BaseComponent<InputGroupProps, InputGrou
             }
         );
         // const labelCls = cls(label.className, '');
+        const defaultName = 'input-group';
         return (
-            <div className={groupWrapperCls}>
-                {label && label.text ? <Label {...label} /> : null}
+            <div role="group" aria-label="Input group" aria-disabled={this.props.disabled} className={groupWrapperCls}>
+                {label && label.text ? <Label name={defaultName} {...label} /> : null}
                 <span
+                    id={label && label.name || defaultName}
                     className={groupCls}
                     style={this.props.style}
                     onFocus={this.props.onFocus}
@@ -107,6 +109,9 @@ export default class inputGroup extends BaseComponent<InputGroupProps, InputGrou
 
         return (
             <span
+                role="group"
+                aria-label="Input group"
+                aria-disabled={this.props.disabled}
                 className={groupCls}
                 style={style}
                 onFocus={this.props.onFocus}

package/input/textarea.tsx

@@ -101,6 +101,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
     libRef: React.RefObject<React.ReactNode>;
     _resizeLock: boolean;
     _resizeListener: any;
+    foundation: TextAreaFoundation;
 
     constructor(props: TextAreaProps) {
         super(props);
@@ -197,6 +198,10 @@ 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();
@@ -205,7 +210,14 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
         });
         if (showClear) {
             return (
-                <div className={clearCls} onClick={this.handleClear}>
+                <div
+                    role="button"
+                    tabIndex={0}
+                    aria-label="Clear textarea value"
+                    className={clearCls}
+                    onClick={this.handleClear}
+                    onKeyPress={this.handleClearEnterPress}
+                >
                     <IconClear />
                 </div>
             );
@@ -214,10 +226,10 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
     }
 
     renderCounter() {
-        let counter,
-            current,
-            total,
-            countCls;
+        let counter: React.ReactNode,
+            current: number,
+            total: number,
+            countCls: string;
         const { showCounter, maxCount, getValueLength } = this.props;
         if (showCounter || maxCount) {
             const { value } = this.state;
@@ -231,7 +243,14 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
                 }
             );
             counter = (
-                <div className={countCls}>{current}{total ? '/' : null}{total}</div>
+                <div
+                    aria-label="Textarea value length counter"
+                    aria-valuemax={maxCount}
+                    aria-valuenow={current}
+                    className={countCls}
+                >
+                    {current}{total ? '/' : null}{total}
+                </div>
             );
         } else {
             counter = null;