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

package/radio/radioInner.tsx

@@ -20,6 +20,9 @@ export interface RadioInnerProps extends BaseProps {
     prefixCls?: string;
     ref?: React.MutableRefObject<RadioInner> | ((instance: RadioInner) => void);
     isPureCardRadioGroup?: boolean;
+    addonId?: string;
+    extraId?: string;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 
 interface RadioInnerState {
@@ -35,6 +38,7 @@ class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
         isButtonRadio: PropTypes.bool,
         onChange: PropTypes.func,
         mode: PropTypes.oneOf(['advanced', '']),
+        'aria-label': PropTypes.string,
     };
 
     static defaultProps = {
@@ -44,6 +48,7 @@ class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
 
 
     inputEntity!: HTMLInputElement;
+    foundation: RadioInnerFoundation;
     constructor(props: RadioInnerProps) {
         super(props);
         this.state = {
@@ -92,7 +97,7 @@ class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
     }
 
     render() {
-        const { disabled, mode, autoFocus, name, isButtonRadio, isPureCardRadioGroup } = this.props;
+        const { disabled, mode, autoFocus, name, isButtonRadio, isPureCardRadioGroup, addonId, extraId, 'aria-label': ariaLabel } = this.props;
         const { checked } = this.state;
 
         const prefix = this.props.prefixCls || css.PREFIX;
@@ -114,12 +119,16 @@ class RadioInner extends BaseComponent<RadioInnerProps, RadioInnerState> {
                     ref={ref => {
                         this.inputEntity = ref;
                     }}
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
                     autoFocus={autoFocus}
                     type={mode === 'advanced' ? 'checkbox' : 'radio'}
                     checked={Boolean(checked)}
                     disabled={disabled}
                     onChange={this.onChange}
                     name={name}
+                    aria-label={ariaLabel}
+                    aria-labelledby={addonId}
+                    aria-describedby={extraId}
                 />
                 <span className={inner}>{checked ? <IconRadio /> : null}</span>
             </span>

package/rating/index.tsx

@@ -14,6 +14,12 @@ import '@douyinfe/semi-foundation/rating/rating.scss';
 
 export { RatingItemProps } from './item';
 export interface RatingProps {
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'aria-invalid'?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-required'?: boolean;
     disabled?: boolean;
     value?: number;
     defaultValue?: number;
@@ -34,6 +40,7 @@ export interface RatingProps {
     autoFocus?: boolean;
     size?: 'small' | 'default' | number;
     tooltips?: string[];
+    id?: string;
 }
 
 export interface RatingState {
@@ -46,6 +53,12 @@ export interface RatingState {
 export default class Rating extends BaseComponent<RatingProps, RatingState> {
     static contextType = ConfigContext;
     static propTypes = {
+        'aria-describedby': PropTypes.string,
+        'aria-errormessage': PropTypes.string,
+        'aria-invalid': PropTypes.bool,
+        'aria-label': PropTypes.string,
+        'aria-labelledby': PropTypes.string,
+        'aria-required': PropTypes.bool,
         disabled: PropTypes.bool,
         value: PropTypes.number,
         defaultValue: PropTypes.number,
@@ -65,6 +78,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
         autoFocus: PropTypes.bool,
         size: PropTypes.oneOfType([PropTypes.oneOf(strings.SIZE_SET), PropTypes.number]),
         tooltips: PropTypes.arrayOf(PropTypes.string),
+        id: PropTypes.string,
     };
 
     static defaultProps = {
@@ -225,7 +239,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
     };
 
     render() {
-        const { count, allowHalf, style, prefixCls, disabled, className, character, tabIndex, size, tooltips } =
+        const { count, allowHalf, style, prefixCls, disabled, className, character, tabIndex, size, tooltips, id } =
             this.props;
         const { value, hoverValue, focused } = this.state;
         const itemList = [...Array(count).keys()].map(ind => {
@@ -266,6 +280,9 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
         );
         return (
             <ul
+                aria-label={this.props['aria-label']}
+                aria-labelledby={this.props['aria-labelledby']}
+                aria-describedby={this.props['aria-describedby']}
                 className={listCls}
                 style={style}
                 onMouseLeave={disabled ? null : this.onMouseLeave}
@@ -274,7 +291,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
                 onBlur={disabled ? null : this.onBlur}
                 onKeyDown={disabled ? null : this.onKeyDown}
                 ref={this.saveRate as any}
-                role="radiogroup"
+                id={id}
             >
                 {itemList}
             </ul>

package/rating/item.tsx

@@ -20,6 +20,7 @@ export interface RatingItemProps {
     disabled: boolean;
     count: number;
     size: number | ArrayElement<typeof strings.SIZE_SET>;
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
 }
 
 export default class Item extends PureComponent<RatingItemProps> {
@@ -38,6 +39,7 @@ export default class Item extends PureComponent<RatingItemProps> {
             PropTypes.oneOf(strings.SIZE_SET),
             PropTypes.number,
         ]),
+        'aria-describedby': PropTypes.string,
     };
 
     onHover: React.MouseEventHandler = e => {
@@ -100,6 +102,10 @@ export default class Item extends PureComponent<RatingItemProps> {
                     aria-checked={value > index ? 'true' : 'false'}
                     aria-posinset={index + 1}
                     aria-setsize={count}
+                    aria-disabled={disabled}
+                    aria-label={`Rating ${index + (isHalf ? 0.5 : 1)}`}
+                    aria-labelledby={this.props['aria-describedby']} // screen reader will read labelledby instead of describedby
+                    aria-describedby={this.props['aria-describedby']}
                     tabIndex={0}
                     className={`${prefixCls}-wrapper`}
                 >

package/select/__test__/select.test.js

@@ -1239,6 +1239,51 @@ describe('Select', () => {
         expect(spyOnChange.calledWith(['hotsoon']));
     });
 
+    it('autoClearSearchValue', () => {
+        // default usage
+        let optionList = Array.from({ length: 100 }, (v, i) => ({ label: `option-${i}`, value: i }));
+
+        let props = {
+            multiple: true,
+            optionList: optionList,
+            defaultOpen: true,
+            filter: true,
+        };
+        let select = getSelect(props);
+        select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
+        let keyword = 'option';
+        let event = { target: { value: keyword } };
+        select.find('input').simulate('change', event);
+
+        let options = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
+        const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
+        options.at(0).simulate('click', nativeEvent);
+        let inputValue = select.find('input').getDOMNode().value;
+        expect(inputValue).toEqual('');
+    });
+
+    it('autoClearSearchValue = false', () => {
+        let optionList = Array.from({ length: 100 }, (v, i) => ({ label: `option-${i}`, value: i }));
+
+        let props = {
+            multiple: true,
+            optionList: optionList,
+            defaultOpen: true,
+            autoClearSearchValue: false,
+            filter: true,
+        };
+        let select = getSelect(props);
+        select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
+        let keyword = 'option';
+        let event = { target: { value: keyword } };
+        select.find('input').simulate('change', event);
+
+        let options = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
+        const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
+        options.at(0).simulate('click', nativeEvent);
+        let inputValue = select.find('input').getDOMNode().value;
+        expect(inputValue).toEqual(keyword);
+    });
     // TODO ref selectAll \deselectAll when onChangeWithObject is true
     // TODO when loading is true, do not response any keyborard event
     // TODO can't remove tag when option is diabled

package/select/_story/select.stories.js

@@ -2875,3 +2875,32 @@ SelectInputPropsDemo.story = {
   name: 'inputProps',
 };
 
+
+export const AutoClearSearchValue = () => {
+    const [val, setVal] = useState(['semi1']);
+    const optionList = [
+        { label: 'semi1', value: 'semi1' },
+        { label: 'semi2', value: 'semi2' },
+        { label: 'semi3', value: 'semi3' },
+        { label: 'semi4', value: 'semi4' },
+        { label: 'semi5', value: 'semi5' },
+        { label: 'semi6', value: 'semi6' },
+    ];
+
+    return (
+        <>
+            <h4>Controlled mode + multiple</h4>
+            <Select style={{ width: 400 }} multiple optionList={optionList} filter value={val} onChange={value => setVal(value)} autoClearSearchValue={false}></Select>
+            <br />
+            <br />
+            <h4>Uncontrolled mode + multiple</h4>
+            <Select style={{ width: 400 }} multiple optionList={optionList} filter autoClearSearchValue={false}></Select>
+            <h4>Uncontrolled mode + multiple + defaultValue</h4>
+            <Select style={{ width: 400 }}  multiple optionList={optionList} filter defaultValue={['semi2']} autoClearSearchValue={false}></Select>
+        </>
+    )
+}
+
+SelectInputPropsDemo.story = {
+  name: 'AutoClearSearchValue',
+};

package/select/index.tsx

@@ -85,8 +85,14 @@ export type RenderMultipleSelectedItemFn = (optionNode: Record<string, any>, mul
 export type RenderSelectedItemFn = RenderSingleSelectedItemFn | RenderMultipleSelectedItemFn;
 
 export type SelectProps = {
+    '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'];
     id?: string;
     autoFocus?: boolean;
+    autoClearSearchValue?: boolean;
     arrowIcon?: React.ReactNode;
     defaultValue?: string | number | any[] | Record<string, any>;
     value?: string | number | any[] | Record<string, any>;
@@ -122,6 +128,7 @@ export type SelectProps = {
     suffix?: React.ReactNode;
     prefix?: React.ReactNode;
     insetLabel?: React.ReactNode;
+    insetLabelId?: string;
     inputProps?: Subtract<InputProps, ExcludeInputType>;
     showClear?: boolean;
     showArrow?: boolean;
@@ -180,7 +187,13 @@ class Select extends BaseComponent<SelectProps, SelectState> {
     static OptGroup = OptionGroup;
 
     static propTypes = {
+        'aria-describedby': PropTypes.string,
+        'aria-errormessage': PropTypes.string,
+        'aria-invalid': PropTypes.bool,
+        'aria-labelledby': PropTypes.string,
+        'aria-required': PropTypes.bool,
         autoFocus: PropTypes.bool,
+        autoClearSearchValue: PropTypes.bool,
         children: PropTypes.node,
         defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array, PropTypes.object]),
         value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array, PropTypes.object]),
@@ -227,6 +240,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         suffix: PropTypes.node,
         prefix: PropTypes.node,
         insetLabel: PropTypes.node,
+        insetLabelId: PropTypes.string,
         showClear: PropTypes.bool,
         showArrow: PropTypes.bool,
 
@@ -292,6 +306,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         showClear: false,
         remote: false,
         autoAdjustOverflow: true,
+        autoClearSearchValue: true,
         arrowIcon: <IconChevronDown />
         // Radio selection is different from the default renderSelectedItem for multiple selection, so it is not declared here
         // renderSelectedItem: (optionNode) => optionNode.label,
@@ -335,6 +350,8 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         this.onMouseEnter = this.onMouseEnter.bind(this);
         this.onMouseLeave = this.onMouseLeave.bind(this);
         this.renderOption = this.renderOption.bind(this);
+        this.onKeyPress = this.onKeyPress.bind(this);
+        this.onClearBtnEnterPress = this.onClearBtnEnterPress.bind(this);
 
         this.foundation = new SelectFoundation(this.adapter);
 
@@ -638,6 +655,10 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         this.foundation.handleClearClick(e as any);
     }
 
+    onClearBtnEnterPress(e: React.KeyboardEvent) {
+        this.foundation.handleClearBtnEnterPress(e as any);
+    }
+
     renderEmpty() {
         return <Option empty={true} emptyContent={this.props.emptyContent} />;
     }
@@ -717,7 +738,13 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         const customCreateItem = renderCreateItem(option.value, isFocused);
 
         return (
-            <div onClick={e => this.onSelect(option, optionIndex, e)} key={new Date().valueOf()}>
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus
+            <div
+                role="button"
+                aria-label="Use the input box to create an optional item"
+                onClick={e => this.onSelect(option, optionIndex, e)}
+                key={option.key || option.label}
+            >
                 {customCreateItem}
             </div>
         );
@@ -783,6 +810,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             innerBottomSlot,
             loading,
             virtualize,
+            multiple,
         } = this.props;
 
         // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
@@ -808,6 +836,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                     style={{ maxHeight: `${maxHeight}px` }}
                     className={optionListCls}
                     role="listbox"
+                    aria-multiselectable={multiple}
                     onScroll={e => this.foundation.handleListScroll(e)}
                 >
                     {innerTopSlot}
@@ -935,6 +964,10 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         this.foundation.handleMouseLeave(e as any);
     }
 
+    onKeyPress(e: React.KeyboardEvent) {
+        this.foundation.handleKeyPress(e as any);
+    }
+
     /* Processing logic when popover visible changes */
     handlePopoverVisibleChange(status) {
         const { virtualize } = this.props;
@@ -974,7 +1007,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
     }
 
     renderPrefix() {
-        const { prefix, insetLabel } = this.props;
+        const { prefix, insetLabel, insetLabelId } = this.props;
         const labelNode = (prefix || insetLabel) as React.ReactElement<any, any>;
 
         const prefixWrapperCls = cls({
@@ -984,7 +1017,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             [`${prefixcls}-prefix-icon`]: isSemiIcon(labelNode),
         });
 
-        return <div className={prefixWrapperCls}>{labelNode}</div>;
+        return <div className={prefixWrapperCls} id={insetLabelId}>{labelNode}</div>;
     }
 
     renderSelection() {
@@ -1005,6 +1038,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             triggerRender,
             arrowIcon,
         } = this.props;
+
         const { selections, isOpen, keyboardEventSet, inputValue, isHovering, isFocus } = this.state;
         const useCustomTrigger = typeof triggerRender === 'function';
         const filterable = Boolean(filter); // filter（boolean || function）
@@ -1060,7 +1094,14 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 </Fragment>,
                 <Fragment key="clearicon">
                     {showClear ? (
-                        <div className={cls(`${prefixcls}-clear`)} onClick={this.onClear}>
+                        <div
+                            role="button"
+                            aria-label="Clear selected value"
+                            tabIndex={0}
+                            className={cls(`${prefixcls}-clear`)}
+                            onClick={this.onClear}
+                            onKeyPress={this.onClearBtnEnterPress}
+                        >
                             <IconClear />
                         </div>
                     ) : arrowContent}
@@ -1072,6 +1113,17 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         const tabIndex = disabled ? null : 0;
         return (
             <div
+                role="combobox"
+                aria-disabled={disabled}
+                aria-expanded={isOpen}
+                aria-controls={`${prefixcls}-${this.selectOptionListID}`}
+                aria-haspopup="listbox"
+                aria-label="select value"
+                aria-invalid={this.props['aria-invalid']}
+                aria-errormessage={this.props['aria-errormessage']}
+                aria-labelledby={this.props['aria-labelledby']}
+                aria-describedby={this.props['aria-describedby']}
+                aria-required={this.props['aria-required']}
                 className={selectionCls}
                 ref={ref => ((this.triggerRef as any).current = ref)}
                 onClick={e => this.foundation.handleClick(e)}
@@ -1082,6 +1134,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 onMouseLeave={this.onMouseLeave}
                 // onFocus={e => this.foundation.handleTriggerFocus(e)}
                 onBlur={e => this.foundation.handleTriggerBlur(e as any)}
+                onKeyPress={this.onKeyPress}
                 {...keyboardEventSet}
             >
                 {inner}

package/select/option.tsx

@@ -134,6 +134,7 @@ class Option extends PureComponent<OptionProps> {
             }
         };
         return (
+            // eslint-disable-next-line jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events
             <div
                 className={optionClassName}
                 onClick={e => {
@@ -141,6 +142,8 @@ class Option extends PureComponent<OptionProps> {
                 }}
                 onMouseEnter={e => onMouseEnter && onMouseEnter(e)}
                 role="option"
+                aria-selected={selected ? "true" : "false"}
+                aria-disabled={disabled ? "true" : "false"}
                 style={style}
             >
                 {showTick ? (

package/sideSheet/SideSheetContent.tsx

@@ -10,7 +10,7 @@ let uuid = 0;
 const prefixCls = cssClasses.PREFIX;
 
 
-export interface SideSheetContentProps{
+export interface SideSheetContentProps {
     onClose?: (e: React.MouseEvent) => void;
     mask?: boolean;
     maskStyle?: CSSProperties;
@@ -24,6 +24,7 @@ export interface SideSheetContentProps{
     bodyStyle?: CSSProperties;
     className: string;
     footer?: React.ReactNode;
+    'aria-label'?: string;
 }
 
 export default class SideSheetContent extends React.PureComponent<SideSheetContentProps> {
@@ -66,6 +67,7 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
         if (mask) {
             return (
                 <div
+                    aria-hidden={true}
                     key="mask"
                     className={`${prefixCls}-mask`}
                     style={maskStyle}
@@ -97,14 +99,14 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
                     key="close-btn"
                     onClick={this.close}
                     type="tertiary"
-                    icon={<IconClose />}
+                    icon={<IconClose/>}
                     theme="borderless"
                     size="small"
                 />
             );
         }
         return (
-            <div className={`${prefixCls}-header`} style={{ ...headerStyle }}>
+            <div className={`${prefixCls}-header`} role={'heading'} aria-level={1} style={{ ...headerStyle }}>
                 {header}
                 {closer}
             </div>
@@ -128,7 +130,7 @@ export default class SideSheetContent extends React.PureComponent<SideSheetConte
         const dialogElement = (
             <div
                 key="dialog-element"
-                role="sidesheet"
+                role="dialog"
                 tabIndex={-1}
                 className={`${prefixCls}-inner ${prefixCls}-inner-wrap`}
                 // onMouseDown={this.onDialogMouseDown}

package/sideSheet/index.tsx

@@ -23,7 +23,7 @@ const defaultHeight = strings.HEIGHT;
 export { SideSheetContentProps } from './SideSheetContent';
 export { SideSheetTransitionProps } from './SideSheetTransition';
 
-export interface SideSheetReactProps extends SideSheetProps{
+export interface SideSheetReactProps extends SideSheetProps {
     bodyStyle?: CSSProperties;
     headerStyle?: CSSProperties;
     maskStyle?: CSSProperties;
@@ -65,7 +65,8 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
         afterVisibleChange: PropTypes.func,
         closeOnEsc: PropTypes.bool,
         footer: PropTypes.node,
-        keepDOM: PropTypes.bool
+        keepDOM: PropTypes.bool,
+        'aria-label': PropTypes.string,
     };
 
     static defaultProps: SideSheetReactProps = {

package/slider/__test__/slider.test.js

@@ -137,6 +137,15 @@ describe('Slider', () => {
         expect(wrapper.exists(`.${BASE_CLASS_PREFIX}-slider-dot`)).toBe(true);
     });
 
+    it('marks clickable', () => {
+        const STYLE = { width: 100, height: 32 }; // it is really hack to mock slider wrapper getBoundingClientRect data
+        let slider = mount(<Slider style={STYLE} marks={{ 20: '20c', 40: '40c' }} defaultValue={[0, 100]} range />);
+        expect(slider.exists(`.${BASE_CLASS_PREFIX}-slider-dot`)).toBe(true);
+        expect(slider.state('currentValue')).toEqual([0, 100])
+        slider.find(`.${BASE_CLASS_PREFIX}-slider-dot`).at(0).simulate('click', {pageX: 20 })
+        expect(slider.state('currentValue')).toEqual([20, 100])
+    });
+
     it('when tooltipVisible is true, tooltip should show always, or should never show', () => {
         let wrapper = mount(<Slider defaultValue={30} tooltipVisible />);
         expect(wrapper.exists(`.${BASE_CLASS_PREFIX}-tooltip-wrapper`)).toBe(true);

package/slider/_story/slider.stories.js

@@ -173,7 +173,7 @@ let divStyle1 = {
 export const VerticalSlider = () => (
   <div>
     <div style={divStyle1}>
-      <Slider vertical range defaultValue={[20, 60]}></Slider>
+      <Slider vertical range defaultValue={[20, 60]} aria-label="slider test"></Slider>
     </div>
   </div>
 );

package/slider/index.tsx

@@ -78,6 +78,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
     private dragging: boolean[];
     private eventListenerSet: Set<() => void>;
     private chooseMovePos: 'min' | 'max';
+    foundation: SliderFoundation;
 
     constructor(props: SliderProps) {
         super(props);
@@ -281,7 +282,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
     }
 
     renderHandle = () => {
-        const { vertical, range, tooltipVisible, tipFormatter } = this.props;
+        const { vertical, range, tooltipVisible, tipFormatter, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-valuetext': ariaValueText, getAriaValueText, disabled } = this.props;
         const { chooseMovePos, isDrag, isInRenderTree } = this.state;
         const stylePos = vertical ? 'top' : 'left';
         const percentInfo = this.foundation.getMinAndMaxPercent(this.state.currentValue);
@@ -299,6 +300,15 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
         const maxClass = cls(cssClasses.HANDLE, {
             [`${cssClasses.HANDLE}-clicked`]: chooseMovePos === 'max' && isDrag,
         });
+        const {min, max, currentValue} = this.state;
+
+        const commonAria = {
+            'aria-label': ariaLabel,
+            'aria-labelledby': ariaLabelledby,
+            'aria-disabled': disabled
+        };
+        vertical && Object.assign(commonAria, {'aria-orientation': 'vertical'});
+
         const handleContents = !range ? (
             <Tooltip
                 content={tipChildren.min}
@@ -338,6 +348,14 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                     onTouchEnd={e => {
                         this.foundation.onHandleUp(e);
                     }}
+                    onFocus={e => this.foundation.onFocus(e, 'min')}
+                    role="slider"
+                    tabIndex={0}
+                    {...commonAria}
+                    aria-valuenow={currentValue as number}
+                    aria-valuemax={max}
+                    aria-valuemin={min}
+                    aria-valuetext={getAriaValueText ? getAriaValueText(currentValue as number) : ariaValueText}
                 />
             </Tooltip>
         ) : (
@@ -379,6 +397,14 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         onTouchEnd={e => {
                             this.foundation.onHandleUp(e);
                         }}
+                        onFocus={e => this.foundation.onFocus(e, 'min')}
+                        role="slider"
+                        tabIndex={0}
+                        {...commonAria}
+                        aria-valuenow={currentValue[0]}
+                        aria-valuetext={getAriaValueText ? getAriaValueText(currentValue[0]) : ariaValueText}
+                        aria-valuemax={currentValue[1]}
+                        aria-valuemin={min}
                     />
                 </Tooltip>
                 <Tooltip
@@ -418,6 +444,14 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         onTouchEnd={e => {
                             this.foundation.onHandleUp(e);
                         }}
+                        onFocus={e => this.foundation.onFocus(e, 'min')}
+                        role="slider"
+                        tabIndex={0}
+                        {...commonAria}
+                        aria-valuenow={currentValue[1]}
+                        aria-valuetext={getAriaValueText ? getAriaValueText(currentValue[1]) : ariaValueText}
+                        aria-valuemax={max}
+                        aria-valuemin={currentValue[0]}
                     />
                 </Tooltip>
             </React.Fragment>
@@ -440,7 +474,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                 top: range ? `${minPercent * 100}%` : 0,
             };
         trackStyle = included ? trackStyle : {};
-        return (
+        return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             <div className={cssClasses.TRACK} style={trackStyle} onClick={e => this.foundation.handleWrapClick(e)}>
                 {/* {this.renderTrack} */}
             </div>
@@ -462,6 +496,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         return activeResult ? (
                             <span
                                 key={mark}
+                                onClick={e => this.foundation.handleWrapClick(e)}
                                 className={markClass}
                                 style={{ [stylePos]: `calc(${markPercent * 100}% - 2px)` }}
                             />
@@ -522,11 +557,13 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                 onMouseEnter={() => this.foundation.handleWrapperEnter()}
                 onMouseLeave={() => this.foundation.handleWrapperLeave()}
             >
-                <div
-                    className={`${prefixCls}-rail`}
-                    onClick={e => this.foundation.handleWrapClick(e)}
-                    style={this.props.railStyle}
-                />
+                {// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+                    <div
+                        className={`${prefixCls}-rail`}
+                        onClick={e => this.foundation.handleWrapClick(e)}
+                        style={this.props.railStyle}
+                    />
+                }
                 {this.renderTrack()}
                 {this.renderStepDot()}
                 <div>{this.renderHandle()}</div>

package/spin/icon.tsx

@@ -29,6 +29,8 @@ function Icon(props: IconProps = {}) {
             viewBox="0 0 36 36"
             version="1.1"
             xmlns="http://www.w3.org/2000/svg"
+            aria-hidden
+            data-icon="spin"
         >
             <defs>
                 <linearGradient x1="0%" y1="100%" x2="100%" y2="100%" id={id}>
@@ -37,11 +39,10 @@ function Icon(props: IconProps = {}) {
                     <stop stopColor="currentColor" offset="100%" />
                 </linearGradient>
             </defs>
-            <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-                <rect id="Rectangle" fillOpacity="0.01" fill="#FFFFFF" x="0" y="0" width="36" height="36" />
+            <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <rect fillOpacity="0.01" fill="#FFFFFF" x="0" y="0" width="36" height="36" />
                 <path
                     d="M34,18 C34,9.163444 26.836556,2 18,2 C11.6597233,2 6.18078805,5.68784135 3.59122325,11.0354951"
-                    id="Path"
                     stroke={`url(#${id})`}
                     strokeWidth="4"
                     strokeLinecap="round"