fix(Tab): a11y support closeable tab

Author: guanpu

src/tab/tabs/nav.jsx

@@ -6,7 +6,7 @@ import Icon from '../../icon';
 import Overlay from '../../overlay';
 import Menu from '../../menu';
 import Animate from '../../animate';
-import { events } from '../../util';
+import { events, KEYCODE } from '../../util';
 import { triggerEvents, getOffsetLT, getOffsetWH, isTransformSupported } from './utils';
 
 const noop = () => { };
@@ -203,8 +203,16 @@ class Nav extends React.Component {
         this.props.onClose(key);
     }
 
+    onCloseKeyDown = (key, e) => {
+        if (e.keyCode === KEYCODE.ENTER) {
+            e.stopPropagation();
+            e.preventDefault();
+            this.props.onClose(key);
+        }
+    }
+
     defaultTabTemplateRender = (key, { prefix, title, closeable }) => {
-        const tail = closeable ? <Icon type="close" onClick={(e) => this.removeTab(key, e)} className={`${prefix}tabs-tab-close`} /> : null;
+        const tail = closeable ? <Icon type="close" tabIndex="0" onKeyDown={(e) => this.onCloseKeyDown(key, e)} onClick={(e) => this.removeTab(key, e)} className={`${prefix}tabs-tab-close`} /> : null;
         return <div className={`${this.props.prefix}tabs-tab-inner`}>{title}{tail}</div>;
     }
 

test/tab/index-spec.js

@@ -169,6 +169,19 @@ describe('Tab', () => {
             assert(tabKey === '1');
         });
 
+        it('should close tab with keyboard', ()=>{
+            let tabKey;
+            wrapper = mount(<Tab onClose={key => tabKey = key}>
+                <Tab.Item title="foo" />
+                <Tab.Item title="bar" closeable />
+            </Tab>);
+            const closeIcon = wrapper.find('.next-icon-close');
+            assert(closeIcon.length === 1);
+            closeIcon.simulate('focus');
+            closeIcon.simulate('keyDown', { keyCode: KEYCODE.ENTER });
+            assert(tabKey === '1');
+        });
+
         it('should unmountInactiveTabs', () => {
             wrapper = mount(<Tab unmountInactiveTabs>{panes}</Tab>);
             wrapper.find('.next-tabs-tab').at(3).simulate('click');
@@ -221,7 +234,7 @@ describe('Tab', () => {
         it('should scrollToActiveTab', () => {
             wrapper = mount(<div style={boxStyle}><Tab defaultActiveKey="9">{panes}</Tab></div>, { attachTo: target });
             wrapper.find('.next-tabs-tab').at(3).simulate('click');
-            assert(wrapper.find('.next-tabs-tab').at(3).hasClass('active'))
+            assert(wrapper.find('.next-tabs-tab').at(3).hasClass('active'));
         });
     });
 });