Improve a11y by using button with role switch

assets/index.less

@@ -9,6 +9,7 @@
   width: 44px;
   height: 22px;
   line-height: 20px;
+  padding: 0;
   vertical-align: middle;
   border-radius: 20px 20px;
   border: 1px solid #ccc;
@@ -20,7 +21,8 @@
     color:#fff;
     font-size: 12px;
     position: absolute;
-    left:24px;
+    left: 24px;
+    top: 0;
   }
 
   &:after{

src/Switch.jsx

@@ -57,8 +57,6 @@ class Switch extends Component {
       this.setChecked(false);
     } else if (e.keyCode === 39) { // Right
       this.setChecked(true);
-    } else if (e.keyCode === 32 || e.keyCode === 13) { // Space, Enter
-      this.toggle();
     }
   }
 
@@ -86,20 +84,22 @@ class Switch extends Component {
 
   render() {
     const { className, prefixCls, disabled, loadingIcon,
-      checkedChildren, tabIndex, unCheckedChildren, ...restProps } = this.props;
+      checkedChildren, unCheckedChildren, ...restProps } = this.props;
     const checked = this.state.checked;
-    const switchTabIndex = disabled ? -1 : (tabIndex || 0);
     const switchClassName = classNames({
       [className]: !!className,
       [prefixCls]: true,
       [`${prefixCls}-checked`]: checked,
       [`${prefixCls}-disabled`]: disabled,
     });
     return (
-      <span
+      <button
         {...restProps}
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
         className={switchClassName}
-        tabIndex={switchTabIndex}
         ref={this.saveNode}
         onKeyDown={this.handleKeyDown}
         onClick={this.toggle}
@@ -109,7 +109,7 @@ class Switch extends Component {
         <span className={`${prefixCls}-inner`}>
           {checked ? checkedChildren : unCheckedChildren}
         </span>
-      </span>
+      </button>
     );
   }
 }

tests/index.spec.js

@@ -23,14 +23,6 @@ describe('rc-switch', () => {
     expect(switcher.state().checked).toBe(false);
   });
 
-  it('should toggle upon space and enter key', () => {
-    expect(switcher.state().checked).toBe(false);
-    switcher.simulate('keydown', { keyCode: 32 });
-    expect(switcher.state().checked).toBe(true);
-    switcher.simulate('keydown', { keyCode: 13 });
-    expect(switcher.state().checked).toBe(false);
-  });
-
   it('should change from an initial checked state of true to false on click', () => {
     const wrapper = mount(<Switch defaultChecked/>);
     expect(wrapper.state().checked).toBe(true);