From 7a47360deb88cdc9fd2a350d5537e4e380dcb2f8 Mon Sep 17 00:00:00 2001
From: Guan Pu <guanpuwcg3@163.com>
Date: Thu, 3 Jan 2019 14:06:05 +0800
Subject: [PATCH] feat(Tab): tab a11y

---
 docs/tab/demo/basic.md    |  6 +++---
 docs/tab/demo/disabled.md |  6 +++---
 src/tab/main.scss         |  7 ++++++-
 src/tab/tabs/nav.jsx      | 18 +++++++++++-------
 4 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/docs/tab/demo/basic.md b/docs/tab/demo/basic.md
index e392877556..148b9bebf1 100644
--- a/docs/tab/demo/basic.md
+++ b/docs/tab/demo/basic.md
@@ -20,9 +20,9 @@ import { Tab } from '@alifd/next';
 
 ReactDOM.render(
     <Tab>
-        <Tab.Item title="Home">Home content</Tab.Item>
-        <Tab.Item title="Documentation">Doc content</Tab.Item>
-        <Tab.Item title="Help">Help Content</Tab.Item>
+        <Tab.Item title="Home" key="1">Home content</Tab.Item>
+        <Tab.Item title="Documentation" key="2">Doc content</Tab.Item>
+        <Tab.Item title="Help" key="3">Help Content</Tab.Item>
     </Tab>
     , mountNode);
 ````
diff --git a/docs/tab/demo/disabled.md b/docs/tab/demo/disabled.md
index a30466f22b..4bfe566b99 100644
--- a/docs/tab/demo/disabled.md
+++ b/docs/tab/demo/disabled.md
@@ -20,9 +20,9 @@ import { Tab } from '@alifd/next';
 
 ReactDOM.render(
     <Tab>
-        <Tab.Item title="Tab 1" disabled>Tab 1 content</Tab.Item>
-        <Tab.Item title="Tab 2">Tab 2 content</Tab.Item>
-        <Tab.Item title="Tab 3">Tab 3 content</Tab.Item>
+        <Tab.Item title="Tab 1" disabled key="1">Tab 1 content</Tab.Item>
+        <Tab.Item title="Tab 2" key="2">Tab 2 content</Tab.Item>
+        <Tab.Item title="Tab 3" key="3">Tab 3 content</Tab.Item>
     </Tab>
     , mountNode);
 ````
diff --git a/src/tab/main.scss b/src/tab/main.scss
index 3b77ae5cd2..c89c448fa0 100644
--- a/src/tab/main.scss
+++ b/src/tab/main.scss
@@ -33,7 +33,9 @@
         display: inline-block;
         position: relative;
         transition: all .4s $ease-out-quint;
-
+        list-style: none;
+        padding: 0;
+        margin: 0;
         &-enter,
         &-appear {
             animation: fadeInLeft .4s cubic-bezier(.78, .14, .15, .86);
@@ -74,6 +76,9 @@
             $tab-close-icon-color-disabled
         );
     }
+    &-tab:focus {
+        outline: none;
+    }
 
     &-tabpane {
         display: none;
diff --git a/src/tab/tabs/nav.jsx b/src/tab/tabs/nav.jsx
index da2966b850..f000aa4031 100644
--- a/src/tab/tabs/nav.jsx
+++ b/src/tab/tabs/nav.jsx
@@ -9,7 +9,7 @@ import Animate from '../../animate';
 import { events } from '../../util';
 import { triggerEvents, getOffsetLT, getOffsetWH, isTransformSupported } from './utils';
 
-const noop = () => {};
+const noop = () => { };
 const floatRight = { float: 'right' };
 const floatLeft = { float: 'left' };
 const { Popup } = Overlay;
@@ -64,6 +64,9 @@ class Nav extends React.Component {
         ctx.slideTimer = setTimeout(() => {
             ctx.setSlideBtn();
         }, 200);
+        if (this.activeTab) {
+            this.activeTab.focus();
+        }
     }
 
     componentWillUnmount() {
@@ -231,16 +234,17 @@ class Nav extends React.Component {
             }
 
             rst.push(
-                <div
+                <li
                     role="tab"
                     key={child.key}
                     ref={active ? this.activeTabRefHandler : null}
-                    aria-disabled={disabled ? 'true' : 'false'}
+                    aria-hidden={disabled ? 'true' : 'false'}
                     aria-selected={active ? 'true' : 'false'}
+                    tabIndex={active ? 0 : -1}
                     className={cls}
                     style={style}
                     {...events}>{tabTemplateFn(child.key, child.props)}
-                </div>
+                </li>
             );
         });
         return rst;
@@ -424,8 +428,8 @@ class Nav extends React.Component {
                     <div className={`${prefix}tabs-nav-scroll`}>
                         {
                             animation ?
-                                <Animate className={navCls} animation={navCls} singleMode={false} ref={this.navRefHandler}>{tabList}</Animate> :
-                                <div className={navCls} ref={this.navRefHandler}>{tabList}</div>
+                                <Animate role="tablist" aria-multiselectable={false} component="ul" className={navCls} animation={navCls} singleMode={false} ref={this.navRefHandler}>{tabList}</Animate> :
+                                <ul className={navCls} ref={this.navRefHandler}>{tabList}</ul>
                         }
                     </div>
                 </div>
@@ -455,7 +459,7 @@ class Nav extends React.Component {
         }, className);
 
         return (
-            <div role="tablist" className={navbarCls} style={style} onKeyDown={onKeyDown} tabIndex="0" ref={this.navbarRefHandler}>
+            <div className={navbarCls} style={style} onKeyDown={onKeyDown} ref={this.navbarRefHandler}>
                 {navChildren}
             </div>
         );