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

package/tagInput/index.tsx

@@ -55,8 +55,9 @@ export interface TagInputProps {
     style?: React.CSSProperties;
     suffix?: React.ReactNode;
     validateStatus?: ValidateStatus;
-    value?: string[];
+    value?: string[] | undefined;
     autoFocus?: boolean;
+    'aria-label'?: string;
 }
 
 export interface TagInputState {
@@ -102,7 +103,8 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         size: PropTypes.oneOf(strings.SIZE_SET),
         validateStatus: PropTypes.oneOf(strings.STATUS),
         prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-        suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+        suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+        'aria-label': PropTypes.string,
     };
 
     static defaultProps = {
@@ -140,12 +142,18 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
     }
 
     static getDerivedStateFromProps(nextProps: TagInputProps, prevState: TagInputState) {
-        const {
-            value,
-            inputValue,
-        } = nextProps;
+        const { value, inputValue } = nextProps;
+        const { tagsArray: prevTagsArray } = prevState;
+        let tagsArray: string[];
+        if (isArray(value)) {
+            tagsArray = value;
+        } else if ('value' in nextProps && !value) {
+            tagsArray = [];
+        } else {
+            tagsArray = prevTagsArray;
+        }
         return {
-            tagsArray: isArray(value) ? value : prevState.tagsArray,
+            tagsArray,
             inputValue: isString(inputValue) ? inputValue : prevState.inputValue
         };
     }
@@ -216,6 +224,10 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         this.foundation.handleClearBtn(e);
     };
 
+    handleClearEnterPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+        this.foundation.handleClearEnterPress(e);
+    };
+
     handleTagClose = (idx: number) => {
         this.foundation.handleTagClose(idx);
     };
@@ -236,7 +248,14 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         });
         if (showClear) {
             return (
-                <div className={clearCls} onClick={e => this.handleClearBtn(e)}>
+                <div 
+                    role="button"
+                    tabIndex={0} 
+                    aria-label="Clear TagInput value" 
+                    className={clearCls} 
+                    onClick={e => this.handleClearBtn(e)}
+                    onKeyPress={e => this.handleClearEnterPress(e)}
+                >
                     <IconClear />
                 </div>
             );
@@ -398,6 +417,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             <div
                 style={style}
                 className={tagInputCls}
+                aria-disabled={disabled}
+                aria-label={this.props['aria-label']}
+                aria-invalid={validateStatus === 'error'}
                 onMouseEnter={e => {
                     this.handleInputMouseEnter(e);
                 }}
@@ -409,6 +431,7 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                 <div className={wrapperCls}>
                     {this.renderTags()}
                     <Input
+                        aria-label='input value'
                         ref={this.inputRef as any}
                         className={inputCls}
                         disabled={disabled}

package/timePicker/TimePicker.tsx

@@ -36,6 +36,11 @@ export type BaseValueType = string | number | Date;
 export type Type = 'time' | 'timeRange';
 
 export type TimePickerProps = {
+    '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'];
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean; // TODO: autoFocus did not take effect
     className?: string;
@@ -56,6 +61,7 @@ export type TimePickerProps = {
     inputReadOnly?: boolean;
     inputStyle?: React.CSSProperties;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     locale?: Locale['TimePicker'];
     localeCode?: string;
     minuteStep?: number;
@@ -100,10 +106,14 @@ export interface TimePickerState {
     invalid: boolean;
 }
 
-
 export default class TimePicker extends BaseComponent<TimePickerProps, TimePickerState> {
     static contextType = ConfigContext;
     static propTypes = {
+        'aria-labelledby': PropTypes.string,
+        'aria-invalid': PropTypes.bool,
+        'aria-errormessage': PropTypes.string,
+        'aria-describedby': PropTypes.string,
+        'aria-required': PropTypes.bool,
         prefixCls: PropTypes.string,
         clearText: PropTypes.string,
         value: TimeShape,
@@ -142,6 +152,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         dateFnsLocale: PropTypes.object,
         zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
         insetLabel: PropTypes.node,
+        insetLabelId: PropTypes.string,
         validateStatus: PropTypes.oneOf(strings.STATUS),
         type: PropTypes.oneOf<TimePickerProps['type']>(strings.TYPES),
         rangeSeparator: PropTypes.string,
@@ -429,6 +440,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
             zIndex,
             getPopupContainer,
             insetLabel,
+            insetLabelId,
             inputStyle,
             showClear,
             panelHeader,
@@ -473,6 +485,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
             value: inputValue,
             onFocus: this.handleFocus,
             insetLabel,
+            insetLabelId,
             format,
             locale,
             localeCode,

package/timeline/_story/timeline.stories.js

@@ -10,7 +10,7 @@ export default {
 
 export const DefaultTimeline = () => (
   <div>
-    <Timeline>
+    <Timeline aria-label="xx事故处理过程时间线">
       <Timeline.Item time="2015-09-01">创建服务现场</Timeline.Item>
       <Timeline.Item time="2015-09-01">初步排除网络异常</Timeline.Item>
       <Timeline.Item time="2015-09-01">技术测试异常</Timeline.Item>

package/timeline/index.tsx

@@ -12,7 +12,7 @@ export interface Data extends TimelineItemProps {
     content: React.ReactNode;
 }
 
-export interface TimelineProps {
+export interface TimelineProps extends Pick<React.AriaAttributes, 'aria-label'> {
     mode?: 'left' | 'right' | 'center' | 'alternate';
     className?: string;
     style?: React.CSSProperties;
@@ -86,7 +86,7 @@ class Timeline extends PureComponent<TimelineProps> {
         const items = childrenList || this.addClassName(children);
 
         return (
-            <ul style={style} className={classString}>
+            <ul aria-label={this.props['aria-label']} style={style} className={classString}>
                 {items}
             </ul>
         );

package/timeline/item.tsx

@@ -63,9 +63,10 @@ export default class Item extends PureComponent<TimelineItemProps> {
         const dotStyle = color ? { style: { backgroundColor: color } } : null;
         return (
             <li className={itemCls} style={style} onClick={onClick}>
-                <div className={`${prefixCls}-tail`} />
+                <div className={`${prefixCls}-tail`} aria-hidden />
                 <div
                     className={dotCls}
+                    aria-hidden
                     {...dotStyle}
                 >
                     {dot}

package/toast/toast.tsx

@@ -118,6 +118,8 @@ class Toast extends BaseComponent<ToastReactProps, ToastState> {
         const btnSize = 'small';
         return (
             <div
+                role='alert'
+                aria-label={`${type ? type : 'default'} type`}
                 className={toastCls}
                 style={style}
                 onMouseEnter={this.clearCloseTimer}

package/tooltip/TriangleArrow.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 const TriangleArrow: React.FC<{ [key: string]: any }> = props => {
     const { className, style, ...restProps } = props;
     return (
-        <svg className={className} style={style} {...restProps} width="24" height="7" viewBox="0 0 24 7" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <svg aria-hidden className={className} style={style} {...restProps} width="24" height="7" viewBox="0 0 24 7" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
             <path d="M24 0V1C20 1 18.5 2 16.5 4C14.5 6 14 7 12 7C10 7 9.5 6 7.5 4C5.5 2 4 1 0 1V0H24Z" />
         </svg>
     );

package/tooltip/TriangleArrowVertical.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 const TriangleArrowVertical: React.FC<{ [key: string]: any }> = props => {
     const { className, style, ...restProps } = props;
     return (
-        <svg className={className} style={style} {...restProps} width="7" height="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+        <svg aria-hidden className={className} style={style} {...restProps} width="7" height="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
             <path d="M0 0L1 0C1 4, 2 5.5, 4 7.5S7,10 7,12S6 14.5, 4 16.5S1,20 1,24L0 24L0 0z" />
         </svg>
     );