@douyinfe/semi-ui 2.2.0 → 2.3.0

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"

package/steps/basicStep.tsx

@@ -21,6 +21,9 @@ export interface BasicStepProps {
     done?: boolean;
     onChange?: () => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    "role"?: React.AriaRole;
+    "aria-label"?: React.AriaAttributes["aria-label"];
 }
 export enum stepSizeMapIconSize {
     small = 'large',
@@ -42,7 +45,7 @@ const BasicStep = (props: BasicStepProps) => {
         stepNumber,
         onClick,
         onChange,
-        ...restProps
+        onKeyDown,
     } = props;
     const renderIcon = () => {
         let inner, progress;
@@ -82,18 +85,26 @@ const BasicStep = (props: BasicStepProps) => {
 
         return inner ? <span className={cls}>{inner}</span> : null;
     };
-    const classString = classnames(prefixCls, className, `${prefixCls}-${status}`, {
+    const classString = classnames(prefixCls, `${prefixCls}-${status}`, {
         [`${prefixCls}-active`]: active,
         [`${prefixCls}-done`]: done
-    });
+    }, className);
     const handleClick = (e: React.MouseEvent) => {
         if (isFunction(onClick)) {
             onClick(e);
         }
         onChange();
     };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            if (isFunction(onKeyDown)) {
+                onKeyDown(e);
+            }
+            onChange();
+        }
+    };
     return (
-        <div {...restProps} className={classString} style={style} onClick={e => handleClick(e)}>
+        <div role={props["role"]} aria-label={props["aria-label"]} tabIndex={0} aria-current="step" className={classString} style={style} onClick={e => handleClick(e)} onKeyDown={handleKeyDown}>
             <div className={`${prefixCls}-container`}>
                 <div className={`${prefixCls}-left`}>{renderIcon()}</div>
                 <div className={`${prefixCls}-content`}>

package/steps/basicSteps.tsx

@@ -18,6 +18,7 @@ export interface BasicStepsProps {
     hasLine?: boolean;
     children?: React.ReactNode;
     onChange?: (current: number) => void;
+    "aria-label"?: string;
 }
 
 const Steps = (props: BasicStepsProps) => {
@@ -70,7 +71,7 @@ const Steps = (props: BasicStepsProps) => {
             return cloneElement(child, { ...childProps });
         });
         return content;
-    }, [children, initial, prefixCls, direction, status, current, size]);
+    }, [children, initial, prefixCls, direction, status, current, size, onChange]);
 
     const wrapperCls = cls(className, {
         [`${prefixCls}-basic`]: true,
@@ -80,7 +81,7 @@ const Steps = (props: BasicStepsProps) => {
     });
 
     return (
-        <div className={wrapperCls} style={style}>
+        <div aria-label={props["aria-label"]} className={wrapperCls} style={style}>
             {inner}
         </div>
     );

package/steps/fillStep.tsx

@@ -18,10 +18,13 @@ export interface FillStepProps {
     stepNumber?: string;
     onChange?: () => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    "role"?: React.AriaRole;
+    "aria-label"?: React.AriaAttributes["aria-label"];
 }
 
 const FillStep = (props: FillStepProps) => {
-    const { prefixCls, className, title, description, status, style, onClick, icon, onChange, stepNumber } = props;
+    const { prefixCls, className, title, description, status, style, onClick, icon, onChange, stepNumber, onKeyDown } = props;
     const renderIcon = () => {
         let inner, progress;
 
@@ -51,10 +54,10 @@ const FillStep = (props: FillStepProps) => {
             }
         }
         const cls = classnames({
-            [`${prefixCls }-left`]: true,
-            [`${prefixCls }-icon`]: 'icon' in props,
-            [`${prefixCls }-plain`]: !('icon' in props),
-            [`${prefixCls }-icon-process`]: progress,
+            [`${prefixCls}-left`]: true,
+            [`${prefixCls}-icon`]: 'icon' in props,
+            [`${prefixCls}-plain`]: !('icon' in props),
+            [`${prefixCls}-icon-process`]: progress,
         });
 
         return inner ? <div className={cls}>{inner}</div> : null;
@@ -65,26 +68,38 @@ const FillStep = (props: FillStepProps) => {
         }
         onChange();
     };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            if (isFunction(onKeyDown)) {
+                onKeyDown(e);
+            }
+            onChange();
+        }
+    };
     return (
         <div
+            role={props["role"]}
+            aria-label={props["aria-label"]}
+            aria-current="step"
+            tabIndex={0} 
             className={classnames({
-                [className]: Boolean(className),
                 [prefixCls]: true,
                 [`${prefixCls}-${status}`]: Boolean(status),
-                [`${prefixCls }-clickable`]: onClick,
-            })}
+                [`${prefixCls}-clickable`]: onClick,
+            }, className)}
             style={style}
             onClick={e => {
                 handleClick(e);
             }}
+            onKeyDown={handleKeyDown}
         >
             {renderIcon()}
-            <div className={`${prefixCls }-content`}>
-                <div className={`${prefixCls }-title`} title={typeof title === 'string' ? title : null}>
-                    <span className={`${prefixCls }-title-text`}>{title}</span>
+            <div className={`${prefixCls}-content`}>
+                <div className={`${prefixCls}-title`} title={typeof title === 'string' ? title : null}>
+                    <span className={`${prefixCls}-title-text`}>{title}</span>
                 </div>
                 <div
-                    className={`${prefixCls }-description`}
+                    className={`${prefixCls}-description`}
                     title={typeof description === 'string' ? description : null}
                 >
                     {description}

package/steps/fillSteps.tsx

@@ -16,6 +16,7 @@ export interface FillStepsProps {
     style?: React.CSSProperties;
     children?: React.ReactNode;
     onChange?: (current: number) => void;
+    "aria-label"?: string;
 }
 
 const Steps = (props: FillStepsProps) => {
@@ -66,6 +67,7 @@ const Steps = (props: FillStepsProps) => {
         <div
             className={wrapperCls}
             style={style}
+            aria-label={props["aria-label"]}
         >
             <Row type="flex" justify="start">
                 {inner}

package/steps/navStep.tsx

@@ -15,21 +15,32 @@ export interface NavStepProps {
     prefixCls?: string;
     onChange?: () => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    "role"?: React.AriaRole;
+    "aria-label"?: React.AriaAttributes["aria-label"];
 }
 
 const NavStep = (props: NavStepProps) => {
-    const { prefixCls, className, title, style, active, index, total, onClick, onChange, ...restProps } = props;
-    const classString = classnames(prefixCls, className, {
+    const { prefixCls, className, title, style, active, index, total, onClick, onKeyDown, onChange } = props;
+    const classString = classnames(prefixCls, {
         [`${prefixCls}-active`]: active
-    });
+    }, className);
     const handleClick = (e: React.MouseEvent) => {
         if (isFunction(onClick)) {
             onClick(e);
         }
         onChange();
     };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            if (isFunction(onKeyDown)) {
+                onKeyDown(e);
+            }
+            onChange();
+        }
+    };
     return (
-        <div {...restProps} className={classString} style={style} onClick={e => handleClick(e)}>
+        <div role={props["role"]} aria-label={props["aria-label"]} aria-current="step" tabIndex={0} className={classString} style={style} onClick={e => handleClick(e)} onKeyDown={handleKeyDown}>
             <div className={`${prefixCls}-container`}>
                 <div className={`${prefixCls}-content`}>
                     <div className={`${prefixCls}-title`}>

package/steps/navSteps.tsx

@@ -13,6 +13,7 @@ export interface NavStepsProps {
     size?: Size;
     children?: React.ReactNode;
     onChange?: (current: number) => void;
+    "aria-label"?: string;
 }
 
 const Steps = (props: NavStepsProps) => {
@@ -38,7 +39,7 @@ const Steps = (props: NavStepsProps) => {
             return cloneElement(child, { ...childProps });
         });
         return content;
-    }, [children, prefixCls, current, size]);
+    }, [children, prefixCls, current, size, initial, onChange]);
 
     const wrapperCls = cls(className, {
         [`${prefixCls}-nav`]: true,
@@ -46,7 +47,7 @@ const Steps = (props: NavStepsProps) => {
     });
 
     return (
-        <div className={wrapperCls} style={style}>
+        <div aria-label={props["aria-label"]} className={wrapperCls} style={style}>
             {inner}
         </div>
     );

package/switch/_story/switch.stories.js

@@ -9,8 +9,8 @@ export default {
 
 export const _Switch = () => (
   <div>
-    <Switch onChange={(v, e) => console.log(v)}></Switch>
-    <Switch defaultChecked={true} onChange={(v, e) => console.log(v)}></Switch>
+    <Switch onChange={(v, e) => console.log(v)} aria-label='power-switch'></Switch>
+    <Switch defaultChecked={true} onChange={(v, e) => console.log(v)} aria-label='mode-switch'></Switch>
   </div>
 );
 
@@ -20,9 +20,9 @@ _Switch.story = {
 
 export const SwitchSize = () => (
   <div>
-    <Switch onChange={(v, e) => console.log(v)}></Switch>
-    <Switch onChange={(v, e) => console.log(v)} size="small"></Switch>
-    <Switch onChange={(v, e) => console.log(v)} size="large"></Switch>
+    <Switch onChange={(v, e) => console.log(v)} aria-label='power-switch'></Switch>
+    <Switch onChange={(v, e) => console.log(v)} size="small" aria-label='power-switch'></Switch>
+    <Switch onChange={(v, e) => console.log(v)} size="large" aria-label='power-switch'></Switch>
   </div>
 );
 
@@ -32,20 +32,20 @@ SwitchSize.story = {
 
 export const SwitchCheckedTextUncheckedText = () => (
   <div>
-    <Switch defaultChecked checkedText="开" uncheckedText="关" />
-    <Switch checkedText={'|'} uncheckedText="〇" />
+    <Switch defaultChecked checkedText="开" uncheckedText="关" aria-label='power-switch'/>
+    <Switch checkedText={'|'} uncheckedText="〇" aria-label='power-switch'/>
     <br />
     <br />
-    <Switch checkedText="开" uncheckedText="关" />
-    <Switch defaultChecked checkedText="｜" uncheckedText="〇" />
+    <Switch checkedText="开" uncheckedText="关" aria-label='power-switch'/>
+    <Switch defaultChecked checkedText="｜" uncheckedText="〇" aria-label='power-switch'/>
     <br />
     <br />
-    <Switch checkedText="开" uncheckedText="关" size="large" />
-    <Switch checkedText="｜" uncheckedText="〇" size="large" />
+    <Switch checkedText="开" uncheckedText="关" size="large" aria-label='power-switch'/>
+    <Switch checkedText="｜" uncheckedText="〇" size="large" aria-label='power-switch'/>
     <br />
     <br />
-    <Switch defaultChecked checkedText="开" uncheckedText="关" size="large" />
-    <Switch defaultChecked checkedText="｜" uncheckedText="〇" size="large" />
+    <Switch defaultChecked checkedText="开" uncheckedText="关" size="large" aria-label='power-switch'/>
+    <Switch defaultChecked checkedText="｜" uncheckedText="〇" size="large" aria-label='power-switch'/>
   </div>
 );
 
@@ -55,9 +55,9 @@ SwitchCheckedTextUncheckedText.story = {
 
 export const SwitchDisabled = () => (
   <>
-    <Switch disabled>disabled</Switch>
+    <Switch disabled aria-label='power-switch'>disabled</Switch>
 
-    <Switch disabled checked={true} onChange={(v, e) => console.log(v)}></Switch>
+    <Switch disabled checked={true} onChange={(v, e) => console.log(v)} aria-label='power-switch'></Switch>
   </>
 );
 
@@ -67,7 +67,7 @@ SwitchDisabled.story = {
 
 const ControledSwitch = () => {
   const [checked, onChange] = useState(true);
-  return <Switch checked={checked} onChange={(v, e) => onChange(v)} />;
+  return <Switch checked={checked} onChange={(v, e) => onChange(v)} aria-label='power-switch'/>;
 };
 export const SwitchCheckedOnChange = () => <ControledSwitch />;
 
@@ -82,7 +82,7 @@ const UnControledSwitch = () => {
   return (
     <>
       {/* <Switch onChange={onChange} defaultChecked={false}/> */}
-      <Switch onChange={onChange} defaultChecked={true} />
+      <Switch onChange={onChange} defaultChecked={true} aria-label='power-switch'/>
     </>
   );
 };
@@ -137,15 +137,16 @@ class LoadingDemo extends React.Component {
         <Switch
           checked={this.state.checked}
           onChange={this.onChange}
+          aria-label='power-switch'
           loading={this.state.loading}
         ></Switch>
         <br />
         <br />
         <hr />
-        <Switch loading disabled />
+        <Switch loading disabled aria-label='power-switch'/>
         <br />
         <br />
-        <Switch loading disabled defaultChecked />
+        <Switch loading disabled defaultChecked aria-label='power-switch'/>
         <br />
         <br />
       </>

package/switch/_story/switch.stories.tsx

@@ -13,9 +13,9 @@ const stories = storiesOf('Switch', module);
 
 stories.add('switch', () => (
     <div>
-        <Switch onChange={(v, e) => console.log(v)}>
+        <Switch onChange={(v, e) => console.log(v)} aria-label='power-switch'>
         </Switch>
-        <Switch defaultChecked={true} onChange={(v, e) => console.log(v)}>
+        <Switch defaultChecked={true} onChange={(v, e) => console.log(v)} aria-label='power-switch'>
         </Switch>
     </div>
 ));
@@ -24,24 +24,24 @@ stories.add('switch', () => (
 stories.add('switch size', () => (
     <div>
         <Switch onChange={(v, e) => console.log(v)}></Switch>
-        <Switch onChange={(v, e) => console.log(v)} size='small'></Switch>
-        <Switch onChange={(v, e) => console.log(v)} size='large'></Switch>
+        <Switch onChange={(v, e) => console.log(v)} size='small' aria-label='power-switch'></Switch>
+        <Switch onChange={(v, e) => console.log(v)} size='large' aria-label='power-switch'></Switch>
     </div>
 ));
 
 stories.add('switch checkedText &  uncheckedText', () => (
     <div>
-        <Switch defaultChecked checkedText='开' uncheckedText='关' />
+        <Switch defaultChecked checkedText='开' uncheckedText='关' aria-label='power-switch'/>
         <Switch checkedText={'|'} uncheckedText='〇' />
         <br/><br/>
         <Switch checkedText='开' uncheckedText='关' />
-        <Switch defaultChecked checkText='｜' uncheckedText='〇' />
+        <Switch defaultChecked checkedText='｜' uncheckedText='〇' aria-label='power-switch'/>
         <br/><br/>
-        <Switch checkedText='开' uncheckedText='关' size='large' />
-        <Switch checedkText='｜' uncheckedText='〇' size='large' />
+        <Switch checkedText='开' uncheckedText='关' size='large' aria-label='power-switch'/>
+        <Switch checkedText='｜' uncheckedText='〇' size='large' aria-label='power-switch'/>
         <br/><br/>
-        <Switch defaultChecked checkedText='开' uncheckedText='关' size='large' />
-        <Switch defaultChecked checkedText='｜' uncheckedText='〇' size='large' />
+        <Switch defaultChecked checkedText='开' uncheckedText='关' size='large' aria-label='power-switch'/>
+        <Switch defaultChecked checkedText='｜' uncheckedText='〇' size='large' aria-label='power-switch'/>
     </div>
 ));
 
@@ -51,7 +51,7 @@ stories.add('switch disabled', () => (
             disabled
         </Switch>
 
-        <Switch disabled checked={true} onChange={(v, e) => console.log(v)}>
+        <Switch disabled checked={true} onChange={(v, e) => console.log(v)} aria-label='power-switch'>
         </Switch>
     </>
 ));
@@ -79,8 +79,8 @@ const UnControledSwitch = () => {
 stories.add('switch defaultChecked + onChange', () => <UnControledSwitch/>);
 
 class LoadingDemo extends React.Component {
-    constructor() {
-        super()
+    constructor(props) {
+        super(props);
         this.state = {
             checked: true,
             loading:false

package/switch/index.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable max-len */
+/* eslint-disable max-len, jsx-a11y/role-supports-aria-props */
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -9,8 +9,12 @@ import '@douyinfe/semi-foundation/switch/switch.scss';
 
 import { noop } from 'lodash';
 import Spin from '../spin';
-
 export interface SwitchProps {
+    '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'];
     defaultChecked?: boolean;
     checked?: boolean;
     disabled?: boolean;
@@ -23,7 +27,8 @@ export interface SwitchProps {
     size?: 'large' | 'default' | 'small';
     checkedText?: React.ReactNode;
     uncheckedText?: React.ReactNode;
-}
+    id?: string;
+} 
 
 export interface SwitchState {
     nativeControlChecked: boolean;
@@ -32,6 +37,11 @@ export interface SwitchState {
 
 class Switch extends BaseComponent<SwitchProps, SwitchState> {
     static propTypes = {
+        'aria-label': PropTypes.string,
+        'aria-labelledby': PropTypes.string,
+        'aria-invalid': PropTypes.bool,
+        'aria-errormessage': PropTypes.string,
+        'aria-describedby': PropTypes.string,
         className: PropTypes.string,
         checked: PropTypes.bool,
         checkedText: PropTypes.node,
@@ -44,6 +54,7 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
         style: PropTypes.object,
         size: PropTypes.oneOf<SwitchProps['size']>(strings.SIZE_MAP),
         uncheckedText: PropTypes.node,
+        id: PropTypes.string,
     };
 
     static defaultProps: Partial<SwitchProps> = {
@@ -102,7 +113,7 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
 
     render() {
         const { nativeControlChecked, nativeControlDisabled } = this.state;
-        const { className, style, onMouseEnter, onMouseLeave, size, checkedText, uncheckedText, loading } = this.props;
+        const { className, style, onMouseEnter, onMouseLeave, size, checkedText, uncheckedText, loading, id } = this.props;
         const wrapperCls = cls(className, {
             [cssClasses.PREFIX]: true,
             [cssClasses.CHECKED]: nativeControlChecked,
@@ -130,7 +141,7 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
                                 size={size === 'default' ? 'middle' : size}
                             />
                         )
-                        : <div className={cssClasses.KNOB} />
+                        : <div className={cssClasses.KNOB} aria-hidden={true} />
                 }
                 {showCheckedText ? (
                     <div className={cssClasses.CHECKED_TEXT}>
@@ -145,6 +156,13 @@ class Switch extends BaseComponent<SwitchProps, SwitchState> {
                 <input
                     {...switchProps}
                     ref={this.switchRef}
+                    id={id}
+                    aria-checked={nativeControlChecked}
+                    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"]}
                     onChange={e => this.foundation.handleChange(e.target.checked, e)}
                 />
             </div>