diff --git a/package.json b/package.json
index 0f09efb2..f8dd184b 100644
--- a/package.json
+++ b/package.json
@@ -97,14 +97,11 @@
     "lint"
   ],
   "dependencies": {
-    "@ant-design/create-react-context": "^0.2.4",
     "babel-runtime": "6.x",
     "classnames": "2.x",
     "lodash": "^4.17.5",
     "prop-types": "15.x",
-    "raf": "^3.4.1",
     "rc-hammerjs": "~0.6.0",
-    "rc-util": "^4.0.4",
     "react-lifecycles-compat": "^3.0.4",
     "resize-observer-polyfill": "^1.5.1",
     "warning": "^4.0.3"
diff --git a/src/InkTabBar.js b/src/InkTabBar.js
index 978c420e..605484b7 100755
--- a/src/InkTabBar.js
+++ b/src/InkTabBar.js
@@ -11,7 +11,7 @@ export default class InkTabBar extends React.Component {
     return (
       <SaveRef>
         {(saveRef, getRef) => (
-          <TabBarRootNode saveRef={saveRef} {...this.props}>
+          <TabBarRootNode saveRef={saveRef} getRef={getRef} {...this.props}>
             <TabBarTabsNode onTabClick={this.props.onTabClick} saveRef={saveRef} {...this.props} />
             <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
           </TabBarRootNode>
diff --git a/src/ScrollableInkTabBar.js b/src/ScrollableInkTabBar.js
index 2347ddce..68169c72 100755
--- a/src/ScrollableInkTabBar.js
+++ b/src/ScrollableInkTabBar.js
@@ -14,7 +14,7 @@ export default class ScrollableInkTabBar extends React.Component {
     return (
       <SaveRef>
         {(saveRef, getRef) => (
-          <TabBarRootNode saveRef={saveRef} {...restProps}>
+          <TabBarRootNode saveRef={saveRef} getRef={getRef} {...restProps}>
             <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...restProps}>
               <TabBarTabsNode saveRef={saveRef} renderTabBarNode={renderTabBarNode} {...restProps} />
               <InkTabBarNode saveRef={saveRef} getRef={getRef} {...restProps} />
diff --git a/src/ScrollableTabBar.js b/src/ScrollableTabBar.js
index dc509430..fd5e1372 100755
--- a/src/ScrollableTabBar.js
+++ b/src/ScrollableTabBar.js
@@ -10,7 +10,7 @@ export default class ScrollableTabBar extends React.Component {
     return (
       <SaveRef>
         {(saveRef, getRef) => (
-          <TabBarRootNode saveRef={saveRef} {...this.props}>
+          <TabBarRootNode saveRef={saveRef} getRef={getRef} {...this.props}>
             <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...this.props}>
               <TabBarTabsNode saveRef={saveRef} {...this.props} />
             </ScrollableTabBarNode>
diff --git a/src/Sentinel.jsx b/src/Sentinel.jsx
deleted file mode 100644
index 8c4d4e04..00000000
--- a/src/Sentinel.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-import React from 'react';
-import PropTypes from 'prop-types';
-import KeyCode from 'rc-util/lib/KeyCode';
-import createReactContext from '@ant-design/create-react-context';
-
-const SentinelContext = createReactContext({});
-export const SentinelProvider = SentinelContext.Provider;
-export const SentinelConsumer = SentinelContext.Consumer;
-
-const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', position: 'absolute' };
-export default class Sentinel extends React.Component {
-  static propTypes = {
-    setRef: PropTypes.func,
-    prevElement: PropTypes.object,
-    nextElement: PropTypes.object,
-  };
-
-  onKeyDown = ({ target, which, shiftKey }) => {
-    const { nextElement, prevElement } = this.props;
-    if (which !== KeyCode.TAB || document.activeElement !== target) return;
-
-    // Tab next
-    if (!shiftKey && nextElement) {
-      nextElement.focus();
-    }
-
-    // Tab prev
-    if (shiftKey && prevElement) {
-      prevElement.focus();
-    }
-  };
-
-  render() {
-    const { setRef } = this.props;
-
-    return (
-      <div
-        tabIndex={0}
-        ref={setRef}
-        style={sentinelStyle}
-        onKeyDown={this.onKeyDown}
-        role="presentation"
-      />
-    );
-  }
-}
diff --git a/src/SwipeableInkTabBar.js b/src/SwipeableInkTabBar.js
index 12d71399..0b7f53eb 100755
--- a/src/SwipeableInkTabBar.js
+++ b/src/SwipeableInkTabBar.js
@@ -11,7 +11,7 @@ export default class SwipeableInkTabBar extends React.Component {
     return (
       <SaveRef>
         {(saveRef, getRef) => (
-          <TabBarRootNode saveRef={saveRef} {...this.props}>
+          <TabBarRootNode saveRef={saveRef} getRef={getRef} {...this.props}>
             <SwipeableTabBarNode saveRef={saveRef} getRef={getRef} {...this.props}>
               <TabBarSwipeableTabs saveRef={saveRef} {...this.props} />
               <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
diff --git a/src/TabBar.js b/src/TabBar.js
index 76d48554..1bb65335 100644
--- a/src/TabBar.js
+++ b/src/TabBar.js
@@ -8,8 +8,8 @@ export default class TabBar extends React.Component {
   render() {
     return (
       <SaveRef>
-        {(saveRef) => (
-          <TabBarRootNode saveRef={saveRef} {...this.props}>
+        {(saveRef, getRef) => (
+          <TabBarRootNode saveRef={saveRef} getRef={getRef} {...this.props}>
             <TabBarTabsNode saveRef={saveRef} {...this.props} />
           </TabBarRootNode>
         )}
diff --git a/src/TabBarRootNode.js b/src/TabBarRootNode.js
index c4330f47..09df8705 100644
--- a/src/TabBarRootNode.js
+++ b/src/TabBarRootNode.js
@@ -4,6 +4,14 @@ import classnames from 'classnames';
 import { getDataAttr } from './utils';
 
 export default class TabBarRootNode extends React.Component {
+
+  componentDidUpdate() { 
+    const activeTab = this.props.getRef('activeTab');
+    if (activeTab) {
+      activeTab.focus();
+    }
+  }
+
   render() {
     const {
       prefixCls, onKeyDown, className, extraContent, style, tabBarPosition, children,
@@ -32,8 +40,8 @@ export default class TabBarRootNode extends React.Component {
     return (
       <div
         role="tablist"
+        tabIndex={-1}
         className={cls}
-        tabIndex="0"
         ref={this.props.saveRef('root')}
         onKeyDown={onKeyDown}
         style={style}
@@ -54,6 +62,7 @@ TabBarRootNode.propTypes = {
   extraContent: PropTypes.node,
   onKeyDown: PropTypes.func,
   saveRef: PropTypes.func,
+  getRef: PropTypes.func,
 };
 
 TabBarRootNode.defaultProps = {
@@ -65,4 +74,5 @@ TabBarRootNode.defaultProps = {
   children: null,
   onKeyDown: () => {},
   saveRef: () => {},
+  getRef: () => {},
 };
diff --git a/src/TabBarSwipeableTabs.js b/src/TabBarSwipeableTabs.js
index 8b9bf64e..a52b561e 100644
--- a/src/TabBarSwipeableTabs.js
+++ b/src/TabBarSwipeableTabs.js
@@ -35,14 +35,18 @@ export default class TabBarSwipeableTabs extends React.Component {
       if (activeKey === key) {
         refProps.ref = this.props.saveRef('activeTab');
       }
+      const id = this.props.id ? `${key}-${this.props.id}` : key;
       rst.push(<div
         role="tab"
         style={tabStyle}
         aria-disabled={child.props.disabled ? 'true' : 'false'}
         aria-selected={activeKey === key ? 'true' : 'false'}
+        tabIndex={activeKey === key ? 0 : -1}
         {...events}
         className={cls}
         key={key}
+        id={`tab-${id}`}
+        aria-controls={`tabpane-${id}`}
         {...refProps}
       >
         {child.props.tab}
@@ -61,6 +65,7 @@ TabBarSwipeableTabs.propTypes = {
   prefixCls: PropTypes.string,
   activeKey: PropTypes.string,
   panels: PropTypes.node,
+  id: PropTypes.string
 };
 
 TabBarSwipeableTabs.defaultProps = {
diff --git a/src/TabBarTabsNode.js b/src/TabBarTabsNode.js
index e7cb58e9..4a5ab47b 100644
--- a/src/TabBarTabsNode.js
+++ b/src/TabBarTabsNode.js
@@ -42,15 +42,20 @@ export default class TabBarTabsNode extends React.Component {
       };
       warning('tab' in child.props, 'There must be `tab` property on children of Tabs.');
 
+      const id = this.props.id ? `${key}-${this.props.id}` : key;
+
       let node = (
         <div
           role="tab"
           aria-disabled={child.props.disabled ? 'true' : 'false'}
           aria-selected={activeKey === key ? 'true' : 'false'}
+          tabIndex={activeKey === key ? 0 : -1}
           {...events}
           className={cls}
           key={key}
           style={ style }
+          id={`tab-${id}`}
+          aria-controls={`tabpane-${id}`}
           {...ref}
         >
           {child.props.tab}
@@ -81,6 +86,7 @@ TabBarTabsNode.propTypes = {
   saveRef: PropTypes.func,
   renderTabBarNode: PropTypes.func,
   tabBarPosition: PropTypes.string,
+  id: PropTypes.string
 };
 
 TabBarTabsNode.defaultProps = {
diff --git a/src/TabContent.js b/src/TabContent.js
index 11f5d3fa..8b5e6cdc 100755
--- a/src/TabContent.js
+++ b/src/TabContent.js
@@ -25,6 +25,7 @@ export default class TabContent extends React.Component {
         active,
         destroyInactiveTabPane: props.destroyInactiveTabPane,
         rootPrefixCls: props.prefixCls,
+        id: props.id
       }));
     });
 
@@ -82,6 +83,7 @@ TabContent.propTypes = {
   tabBarPosition: PropTypes.string,
   className: PropTypes.string,
   destroyInactiveTabPane: PropTypes.bool,
+  id: PropTypes.string
 };
 
 TabContent.defaultProps = {
diff --git a/src/TabPane.js b/src/TabPane.js
index b08dbb1a..9acb2436 100755
--- a/src/TabPane.js
+++ b/src/TabPane.js
@@ -2,13 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { getDataAttr } from './utils';
-import Sentinel, { SentinelConsumer } from './Sentinel';
 
 export default class TabPane extends React.Component {
   render() {
     const {
       id, className, destroyInactiveTabPane, active, forceRender,
-      rootPrefixCls, style, children, placeholder,
+      rootPrefixCls, style, children, placeholder, tabKey,
       ...restProps
     } = this.props;
     this._isActived = this._isActived || active;
@@ -21,44 +20,22 @@ export default class TabPane extends React.Component {
     });
     const isRender = destroyInactiveTabPane ? active : this._isActived;
     const shouldRender = isRender || forceRender;
-
+    
+    const tabKeyExists = tabKey && String(tabKey).length > 0;
+    const uuid = tabKeyExists && (id ? `${tabKey}-${id}` : `${tabKey}`);
     return (
-      <SentinelConsumer>
-        {({ sentinelStart, sentinelEnd, setPanelSentinelStart, setPanelSentinelEnd }) => {
-          // Create sentinel
-          let panelSentinelStart;
-          let panelSentinelEnd;
-          if (active && shouldRender) {
-            panelSentinelStart = (
-              <Sentinel
-                setRef={setPanelSentinelStart}
-                prevElement={sentinelStart}
-              />
-            );
-            panelSentinelEnd = (
-              <Sentinel
-                setRef={setPanelSentinelEnd}
-                nextElement={sentinelEnd}
-              />
-            );
-          }
-
-          return (
-            <div
-              style={style}
-              role="tabpanel"
-              aria-hidden={active ? 'false' : 'true'}
-              className={cls}
-              id={id}
-              {...getDataAttr(restProps)}
-            >
-              {panelSentinelStart}
-              {shouldRender ? children : placeholder}
-              {panelSentinelEnd}
-            </div>
-          );
-        }}
-      </SentinelConsumer>
+      <div
+        style={{ ...style, visibility: active ? 'visible' : 'hidden' }}
+        role="tabpanel"
+        aria-hidden={active ? 'false' : 'true'}
+        tabIndex={active ? 0 : -1}
+        className={cls}
+        id={uuid && `tabpane-${uuid}`}
+        aria-labelledby={uuid && `tab-${uuid}`}
+        {...getDataAttr(restProps)}
+      >
+        {shouldRender ? children : placeholder}
+      </div>
     );
   }
 }
@@ -73,6 +50,7 @@ TabPane.propTypes = {
   rootPrefixCls: PropTypes.string,
   children: PropTypes.node,
   id: PropTypes.string,
+  tabKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 
 TabPane.defaultProps = {
diff --git a/src/Tabs.js b/src/Tabs.js
index f2ffbf42..c6a6b580 100755
--- a/src/Tabs.js
+++ b/src/Tabs.js
@@ -1,12 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import raf from 'raf';
 import { polyfill } from 'react-lifecycles-compat';
 import KeyCode from './KeyCode';
 import TabPane from './TabPane';
 import { getDataAttr } from './utils';
-import Sentinel, { SentinelProvider } from './Sentinel';
 
 function noop() {
 }
@@ -59,7 +57,6 @@ class Tabs extends React.Component {
 
   componentWillUnmount() {
     this.destroy = true;
-    raf.cancel(this.sentinelId);
   }
 
   onTabClick = (activeKey, e) => {
@@ -88,29 +85,6 @@ class Tabs extends React.Component {
     }
   };
 
-  // Sentinel for tab index
-  setSentinelStart = (node) => {
-    this.sentinelStart = node;
-  };
-
-  setSentinelEnd = (node) => {
-    this.sentinelEnd = node;
-  };
-
-  setPanelSentinelStart = (node) => {
-    if (node !== this.panelSentinelStart) {
-      this.updateSentinelContext();
-    }
-    this.panelSentinelStart = node;
-  };
-
-  setPanelSentinelEnd = (node) => {
-    if (node !== this.panelSentinelEnd) {
-      this.updateSentinelContext();
-    }
-    this.panelSentinelEnd = node;
-  };
-
   setActiveKey = (activeKey) => {
     if (this.state.activeKey !== activeKey) {
       if (!('activeKey' in this.props)) {
@@ -148,16 +122,6 @@ class Tabs extends React.Component {
     return ret;
   }
 
-  updateSentinelContext() {
-    if (this.destroy) return;
-
-    raf.cancel(this.sentinelId);
-    this.sentinelId = raf(() => {
-      if (this.destroy) return;
-      this.forceUpdate();
-    });
-  }
-
   render() {
     const props = this.props;
     const {
@@ -167,6 +131,7 @@ class Tabs extends React.Component {
       renderTabContent,
       renderTabBar,
       destroyInactiveTabPane,
+      id,
       ...restProps
     } = props;
     const cls = classnames({
@@ -186,6 +151,7 @@ class Tabs extends React.Component {
       onTabClick: this.onTabClick,
       panels: props.children,
       activeKey: this.state.activeKey,
+      id
     });
 
     const tabContent = React.cloneElement(renderTabContent(), {
@@ -196,48 +162,26 @@ class Tabs extends React.Component {
       children: props.children,
       onChange: this.setActiveKey,
       key: 'tabContent',
+      id
     });
 
-    const sentinelStart = (
-      <Sentinel
-        key="sentinelStart"
-        setRef={this.setSentinelStart}
-        nextElement={this.panelSentinelStart}
-      />
-    );
-    const sentinelEnd = (
-      <Sentinel
-        key="sentinelEnd"
-        setRef={this.setSentinelEnd}
-        prevElement={this.panelSentinelEnd}
-      />
-    );
-
     const contents = [];
     if (tabBarPosition === 'bottom') {
-      contents.push(sentinelStart, tabContent, sentinelEnd, tabBar);
+      contents.push(tabContent, tabBar);
     } else {
-      contents.push(tabBar, sentinelStart, tabContent, sentinelEnd);
+      contents.push(tabBar, tabContent);
     }
 
     return (
-      <SentinelProvider
-        value={{
-          sentinelStart: this.sentinelStart,
-          sentinelEnd: this.sentinelEnd,
-          setPanelSentinelStart: this.setPanelSentinelStart,
-          setPanelSentinelEnd: this.setPanelSentinelEnd,
-        }}
+      <div
+        className={cls}
+        style={props.style}
+        {...getDataAttr(restProps)}
+        onScroll={this.onScroll}
+        id={id}
       >
-        <div
-          className={cls}
-          style={props.style}
-          {...getDataAttr(restProps)}
-          onScroll={this.onScroll}
-        >
-          {contents}
-        </div>
-      </SentinelProvider>
+        {contents}
+      </div>
     );
   }
 }
@@ -255,6 +199,7 @@ Tabs.propTypes = {
   style: PropTypes.object,
   activeKey: PropTypes.string,
   defaultActiveKey: PropTypes.string,
+  id: PropTypes.string
 };
 
 Tabs.defaultProps = {
diff --git a/tests/__snapshots__/a11y.spec.js.snap b/tests/__snapshots__/a11y.spec.js.snap
new file mode 100644
index 00000000..2b1d84fe
--- /dev/null
+++ b/tests/__snapshots__/a11y.spec.js.snap
@@ -0,0 +1,496 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TabsComponent /> should render correctly 1`] = `
+<div
+  style="width:500px;height:500px"
+>
+  <div
+    class="rc-tabs rc-tabs-top"
+  >
+    <div
+      class="rc-tabs-bar"
+      role="tablist"
+      tabindex="-1"
+    >
+      <div
+        class="rc-tabs-nav-container"
+      >
+        <span
+          class="rc-tabs-tab-prev rc-tabs-tab-btn-disabled"
+          unselectable="unselectable"
+        >
+          <span
+            class="rc-tabs-tab-prev-icon"
+          />
+        </span>
+        <span
+          class="rc-tabs-tab-next rc-tabs-tab-btn-disabled"
+          unselectable="unselectable"
+        >
+          <span
+            class="rc-tabs-tab-next-icon"
+          />
+        </span>
+        <div
+          class="rc-tabs-nav-wrap"
+        >
+          <div
+            class="rc-tabs-nav-scroll"
+          >
+            <div
+              class="rc-tabs-nav rc-tabs-nav-animated"
+            >
+              <div>
+                <div
+                  aria-controls="tabpane-1"
+                  aria-disabled="false"
+                  aria-selected="true"
+                  class="rc-tabs-tab-active rc-tabs-tab"
+                  id="tab-1"
+                  role="tab"
+                  tabindex="0"
+                >
+                  Tab 1
+                </div>
+                <div
+                  aria-controls="tabpane-2"
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" rc-tabs-tab"
+                  id="tab-2"
+                  role="tab"
+                  tabindex="-1"
+                >
+                  Tab 2
+                </div>
+                <div
+                  aria-controls="tabpane-3"
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" rc-tabs-tab"
+                  id="tab-3"
+                  role="tab"
+                  tabindex="-1"
+                >
+                  Tab 3
+                </div>
+                <div
+                  aria-controls="tabpane-4"
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" rc-tabs-tab"
+                  id="tab-4"
+                  role="tab"
+                  tabindex="-1"
+                >
+                  Tab 4
+                </div>
+                <div
+                  aria-controls="tabpane-5"
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" rc-tabs-tab"
+                  id="tab-5"
+                  role="tab"
+                  tabindex="-1"
+                >
+                  Tab 5
+                </div>
+              </div>
+              <div
+                class="rc-tabs-ink-bar rc-tabs-ink-bar-animated"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="rc-tabs-content rc-tabs-content-animated"
+      style="transform:translateX(0%) translateZ(0);-webkit-transform:translateX(0%) translateZ(0);-moz-transform:translateX(0%) translateZ(0)"
+    >
+      <div
+        aria-hidden="false"
+        class="rc-tabs-tabpane rc-tabs-tabpane-active"
+        role="tabpanel"
+        style="visibility:visible"
+        tabindex="0"
+      >
+        <div>
+          <input
+            id="input-1"
+          />
+          <button>
+            Button 1
+          </button>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
+        role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
+        role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
+        role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
+        role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<TabsComponent withTabKey /> should render correctly 1`] = `
+<div
+  style="width:500px;height:500px"
+>
+  <div
+    class="rc-tabs rc-tabs-top"
+  >
+    <div
+      class="rc-tabs-bar"
+      role="tablist"
+      tabindex="-1"
+    >
+      <div
+        class="rc-tabs-nav-container"
+      >
+        <span
+          class="rc-tabs-tab-prev rc-tabs-tab-btn-disabled"
+          unselectable="unselectable"
+        >
+          <span
+            class="rc-tabs-tab-prev-icon"
+          />
+        </span>
+        <span
+          class="rc-tabs-tab-next rc-tabs-tab-btn-disabled"
+          unselectable="unselectable"
+        >
+          <span
+            class="rc-tabs-tab-next-icon"
+          />
+        </span>
+        <div
+          class="rc-tabs-nav-wrap"
+        >
+          <div
+            class="rc-tabs-nav-scroll"
+          >
+            <div
+              class="rc-tabs-nav rc-tabs-nav-animated"
+            >
+              <div>
+                <div
+                  aria-controls="tabpane-1"
+                  aria-disabled="false"
+                  aria-selected="true"
+                  class="rc-tabs-tab-active rc-tabs-tab"
+                  id="tab-1"
+                  role="tab"
+                  tabindex="0"
+                >
+                  Tab 1
+                </div>
+                <div
+                  aria-controls="tabpane-2"
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" rc-tabs-tab"
+                  id="tab-2"
+                  role="tab"
+                  tabindex="-1"
+                >
+                  Tab 2
+                </div>
+                <div
+                  aria-controls="tabpane-3"
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" rc-tabs-tab"
+                  id="tab-3"
+                  role="tab"
+                  tabindex="-1"
+                >
+                  Tab 3
+                </div>
+                <div
+                  aria-controls="tabpane-4"
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" rc-tabs-tab"
+                  id="tab-4"
+                  role="tab"
+                  tabindex="-1"
+                >
+                  Tab 4
+                </div>
+                <div
+                  aria-controls="tabpane-5"
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" rc-tabs-tab"
+                  id="tab-5"
+                  role="tab"
+                  tabindex="-1"
+                >
+                  Tab 5
+                </div>
+              </div>
+              <div
+                class="rc-tabs-ink-bar rc-tabs-ink-bar-animated"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="rc-tabs-content rc-tabs-content-animated"
+      style="transform:translateX(0%) translateZ(0);-webkit-transform:translateX(0%) translateZ(0);-moz-transform:translateX(0%) translateZ(0)"
+    >
+      <div
+        aria-hidden="false"
+        aria-labelledby="tab-1"
+        class="rc-tabs-tabpane rc-tabs-tabpane-active"
+        id="tabpane-1"
+        role="tabpanel"
+        style="visibility:visible"
+        tabindex="0"
+      >
+        <div>
+          <input
+            id="input-1"
+          />
+          <button>
+            Button 1
+          </button>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        aria-labelledby="tab-2"
+        class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
+        id="tabpane-2"
+        role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        aria-labelledby="tab-3"
+        class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
+        id="tabpane-3"
+        role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        aria-labelledby="tab-4"
+        class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
+        id="tabpane-4"
+        role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        aria-labelledby="tab-5"
+        class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
+        id="tabpane-5"
+        role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<TabsComponent withTabKey withCustomId /> should render correctly 1`] = `
+<div
+  style="width:500px;height:500px"
+>
+  <div
+    class="rc-tabs rc-tabs-top"
+    id="CUSTOM_ID"
+  >
+    <div
+      class="rc-tabs-bar"
+      role="tablist"
+      tabindex="-1"
+    >
+      <div
+        class="rc-tabs-nav-container"
+      >
+        <span
+          class="rc-tabs-tab-prev rc-tabs-tab-btn-disabled"
+          unselectable="unselectable"
+        >
+          <span
+            class="rc-tabs-tab-prev-icon"
+          />
+        </span>
+        <span
+          class="rc-tabs-tab-next rc-tabs-tab-btn-disabled"
+          unselectable="unselectable"
+        >
+          <span
+            class="rc-tabs-tab-next-icon"
+          />
+        </span>
+        <div
+          class="rc-tabs-nav-wrap"
+        >
+          <div
+            class="rc-tabs-nav-scroll"
+          >
+            <div
+              class="rc-tabs-nav rc-tabs-nav-animated"
+            >
+              <div>
+                <div
+                  aria-controls="tabpane-1-CUSTOM_ID"
+                  aria-disabled="false"
+                  aria-selected="true"
+                  class="rc-tabs-tab-active rc-tabs-tab"
+                  id="tab-1-CUSTOM_ID"
+                  role="tab"
+                  tabindex="0"
+                >
+                  Tab 1
+                </div>
+                <div
+                  aria-controls="tabpane-2-CUSTOM_ID"
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" rc-tabs-tab"
+                  id="tab-2-CUSTOM_ID"
+                  role="tab"
+                  tabindex="-1"
+                >
+                  Tab 2
+                </div>
+                <div
+                  aria-controls="tabpane-3-CUSTOM_ID"
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" rc-tabs-tab"
+                  id="tab-3-CUSTOM_ID"
+                  role="tab"
+                  tabindex="-1"
+                >
+                  Tab 3
+                </div>
+                <div
+                  aria-controls="tabpane-4-CUSTOM_ID"
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" rc-tabs-tab"
+                  id="tab-4-CUSTOM_ID"
+                  role="tab"
+                  tabindex="-1"
+                >
+                  Tab 4
+                </div>
+                <div
+                  aria-controls="tabpane-5-CUSTOM_ID"
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" rc-tabs-tab"
+                  id="tab-5-CUSTOM_ID"
+                  role="tab"
+                  tabindex="-1"
+                >
+                  Tab 5
+                </div>
+              </div>
+              <div
+                class="rc-tabs-ink-bar rc-tabs-ink-bar-animated"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="rc-tabs-content rc-tabs-content-animated"
+      style="transform:translateX(0%) translateZ(0);-webkit-transform:translateX(0%) translateZ(0);-moz-transform:translateX(0%) translateZ(0)"
+    >
+      <div
+        aria-hidden="false"
+        aria-labelledby="tab-1-CUSTOM_ID"
+        class="rc-tabs-tabpane rc-tabs-tabpane-active"
+        id="tabpane-1-CUSTOM_ID"
+        role="tabpanel"
+        style="visibility:visible"
+        tabindex="0"
+      >
+        <div>
+          <input
+            id="input-1"
+          />
+          <button>
+            Button 1
+          </button>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        aria-labelledby="tab-2-CUSTOM_ID"
+        class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
+        id="tabpane-2-CUSTOM_ID"
+        role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        aria-labelledby="tab-3-CUSTOM_ID"
+        class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
+        id="tabpane-3-CUSTOM_ID"
+        role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        aria-labelledby="tab-4-CUSTOM_ID"
+        class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
+        id="tabpane-4-CUSTOM_ID"
+        role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        aria-labelledby="tab-5-CUSTOM_ID"
+        class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
+        id="tabpane-5-CUSTOM_ID"
+        role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/tests/__snapshots__/index.spec.js.snap b/tests/__snapshots__/index.spec.js.snap
index 81425c4b..9e1c79e1 100644
--- a/tests/__snapshots__/index.spec.js.snap
+++ b/tests/__snapshots__/index.spec.js.snap
@@ -7,7 +7,7 @@ exports[`rc-tabs should render Tabs with correct DOM structure 1`] = `
   <div
     class="rc-tabs-bar"
     role="tablist"
-    tabindex="0"
+    tabindex="-1"
   >
     <div
       class="rc-tabs-nav-container"
@@ -39,26 +39,35 @@ exports[`rc-tabs should render Tabs with correct DOM structure 1`] = `
           >
             <div>
               <div
+                aria-controls="tabpane-1"
                 aria-disabled="false"
                 aria-selected="false"
                 class=" rc-tabs-tab"
+                id="tab-1"
                 role="tab"
+                tabindex="-1"
               >
                 tab 1
               </div>
               <div
+                aria-controls="tabpane-2"
                 aria-disabled="false"
                 aria-selected="true"
                 class="rc-tabs-tab-active rc-tabs-tab"
+                id="tab-2"
                 role="tab"
+                tabindex="0"
               >
                 tab 2
               </div>
               <div
+                aria-controls="tabpane-3"
                 aria-disabled="false"
                 aria-selected="false"
                 class=" rc-tabs-tab"
+                id="tab-3"
                 role="tab"
+                tabindex="-1"
               >
                 tab 3
               </div>
@@ -71,11 +80,6 @@ exports[`rc-tabs should render Tabs with correct DOM structure 1`] = `
       </div>
     </div>
   </div>
-  <div
-    role="presentation"
-    style="width:0;height:0;overflow:hidden;position:absolute"
-    tabindex="0"
-  />
   <div
     class="rc-tabs-content rc-tabs-content-animated"
     style="transform:translateX(-100%) translateZ(0);-webkit-transform:translateX(-100%) translateZ(0);-moz-transform:translateX(-100%) translateZ(0)"
@@ -84,34 +88,25 @@ exports[`rc-tabs should render Tabs with correct DOM structure 1`] = `
       aria-hidden="true"
       class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
       role="tabpanel"
+      style="visibility:hidden"
+      tabindex="-1"
     />
     <div
       aria-hidden="false"
       class="rc-tabs-tabpane rc-tabs-tabpane-active"
       role="tabpanel"
+      style="visibility:visible"
+      tabindex="0"
     >
-      <div
-        role="presentation"
-        style="width:0;height:0;overflow:hidden;position:absolute"
-        tabindex="0"
-      />
       second
-      <div
-        role="presentation"
-        style="width:0;height:0;overflow:hidden;position:absolute"
-        tabindex="0"
-      />
     </div>
     <div
       aria-hidden="true"
       class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
       role="tabpanel"
+      style="visibility:hidden"
+      tabindex="-1"
     />
   </div>
-  <div
-    role="presentation"
-    style="width:0;height:0;overflow:hidden;position:absolute"
-    tabindex="0"
-  />
 </div>
 `;
diff --git a/tests/__snapshots__/swipe.spec.js.snap b/tests/__snapshots__/swipe.spec.js.snap
index 262130b8..072f72d0 100644
--- a/tests/__snapshots__/swipe.spec.js.snap
+++ b/tests/__snapshots__/swipe.spec.js.snap
@@ -10,7 +10,7 @@ exports[`rc-swipeable-tabs should render Slider with correct DOM structure 1`] =
     <div
       class="rc-tabs-bar"
       role="tablist"
-      tabindex="0"
+      tabindex="-1"
     >
       <div
         class="rc-tabs-nav-container rc-tabs-nav-swipe-container rc-tabs-prevpage rc-tabs-nextpage"
@@ -25,101 +25,134 @@ exports[`rc-swipeable-tabs should render Slider with correct DOM structure 1`] =
               class="rc-tabs-nav"
             >
               <div
+                aria-controls="tabpane-0"
                 aria-disabled="false"
                 aria-selected="false"
                 class="rc-tabs-tab"
+                id="tab-0"
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%"
+                tabindex="-1"
               >
                 选项0
               </div>
               <div
+                aria-controls="tabpane-1"
                 aria-disabled="false"
                 aria-selected="false"
                 class="rc-tabs-tab"
+                id="tab-1"
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%"
+                tabindex="-1"
               >
                 选项1
               </div>
               <div
+                aria-controls="tabpane-2"
                 aria-disabled="false"
                 aria-selected="false"
                 class="rc-tabs-tab"
+                id="tab-2"
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%"
+                tabindex="-1"
               >
                 选项2
               </div>
               <div
+                aria-controls="tabpane-3"
                 aria-disabled="false"
                 aria-selected="false"
                 class="rc-tabs-tab"
+                id="tab-3"
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%"
+                tabindex="-1"
               >
                 选项3
               </div>
               <div
+                aria-controls="tabpane-4"
                 aria-disabled="false"
                 aria-selected="false"
                 class="rc-tabs-tab"
+                id="tab-4"
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%"
+                tabindex="-1"
               >
                 选项4
               </div>
               <div
+                aria-controls="tabpane-5"
                 aria-disabled="false"
                 aria-selected="false"
                 class="rc-tabs-tab"
+                id="tab-5"
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%"
+                tabindex="-1"
               >
                 选项5
               </div>
               <div
+                aria-controls="tabpane-6"
                 aria-disabled="false"
                 aria-selected="false"
                 class="rc-tabs-tab"
+                id="tab-6"
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%"
+                tabindex="-1"
               >
                 选项6
               </div>
               <div
+                aria-controls="tabpane-7"
                 aria-disabled="false"
                 aria-selected="false"
                 class="rc-tabs-tab"
+                id="tab-7"
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%"
+                tabindex="-1"
               >
                 选项7
               </div>
               <div
+                aria-controls="tabpane-8"
                 aria-disabled="false"
                 aria-selected="true"
                 class="rc-tabs-tab rc-tabs-tab-active"
+                id="tab-8"
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%"
+                tabindex="0"
               >
                 选项8
               </div>
               <div
+                aria-controls="tabpane-9"
                 aria-disabled="false"
                 aria-selected="false"
                 class="rc-tabs-tab"
+                id="tab-9"
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%"
+                tabindex="-1"
               >
                 选项9
               </div>
               <div
+                aria-controls="tabpane-10"
                 aria-disabled="false"
                 aria-selected="false"
                 class="rc-tabs-tab"
+                id="tab-10"
                 role="tab"
                 style="-webkit-flex-basis:20%;flex-basis:20%"
+                tabindex="-1"
               >
                 选项10
               </div>
@@ -131,11 +164,6 @@ exports[`rc-swipeable-tabs should render Slider with correct DOM structure 1`] =
         </div>
       </div>
     </div>
-    <div
-      role="presentation"
-      style="width:0;height:0;overflow:hidden;position:absolute"
-      tabindex="0"
-    />
     <div
       class="rc-tabs-content rc-tabs-content-animated"
       style="transform:translateX(-800%) translateZ(0);-webkit-transform:translateX(-800%) translateZ(0);-moz-transform:translateX(-800%) translateZ(0)"
@@ -144,79 +172,86 @@ exports[`rc-swipeable-tabs should render Slider with correct DOM structure 1`] =
         aria-hidden="true"
         class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
         role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
       />
       <div
         aria-hidden="true"
         class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
         role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
       />
       <div
         aria-hidden="true"
         class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
         role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
       />
       <div
         aria-hidden="true"
         class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
         role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
       />
       <div
         aria-hidden="true"
         class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
         role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
       />
       <div
         aria-hidden="true"
         class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
         role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
       />
       <div
         aria-hidden="true"
         class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
         role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
       />
       <div
         aria-hidden="true"
         class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
         role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
       />
       <div
         aria-hidden="false"
         class="rc-tabs-tabpane rc-tabs-tabpane-active"
         role="tabpanel"
+        style="visibility:visible"
+        tabindex="0"
       >
-        <div
-          role="presentation"
-          style="width:0;height:0;overflow:hidden;position:absolute"
-          tabindex="0"
-        />
         <div
           style="display:flex;align-items:center;justify-content:center;height:5rem;background-color:#fff"
         >
           选项8内容
         </div>
-        <div
-          role="presentation"
-          style="width:0;height:0;overflow:hidden;position:absolute"
-          tabindex="0"
-        />
       </div>
       <div
         aria-hidden="true"
         class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
         role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
       />
       <div
         aria-hidden="true"
         class="rc-tabs-tabpane rc-tabs-tabpane-inactive"
         role="tabpanel"
+        style="visibility:hidden"
+        tabindex="-1"
       />
     </div>
-    <div
-      role="presentation"
-      style="width:0;height:0;overflow:hidden;position:absolute"
-      tabindex="0"
-    />
   </div>
 </div>
 `;
diff --git a/tests/a11y.spec.js b/tests/a11y.spec.js
new file mode 100644
index 00000000..6a4bd113
--- /dev/null
+++ b/tests/a11y.spec.js
@@ -0,0 +1,109 @@
+import React from 'react';
+import TestUtils from 'react-dom/test-utils';
+import { mount, render } from 'enzyme';
+import { renderToJson } from 'enzyme-to-json';
+import PropTypes from 'prop-types';
+import KeyCode from 'rc-util/lib/KeyCode';
+import Tabs, { TabPane } from '../src/';
+import TabContent from '../src/TabContent';
+import ScrollableInkTabBar from '../src/ScrollableInkTabBar';
+
+const customId = 'CUSTOM_ID';
+
+const makeTabPane = (key, withTabKey) => (
+  <TabPane 
+    tab={`Tab ${key}`} 
+    key={key} 
+    tabKey={withTabKey && key}
+  >
+    <div>
+      <input id={`input-${key}`} />
+      <button>Button {key}</button>
+    </div>
+  </TabPane>
+);
+
+const makeMultiTabPane = (count, withTabKey) => {
+  const result = [];
+  for (let i = 1; i <= count; i++) {
+    result.push(makeTabPane(i, withTabKey));
+  }
+  return result;
+};
+
+const TabsComponent = ({ withCustomId, withTabKey }) => (
+  <div style={{ width: 500, height: 500 }}>
+    <Tabs
+      renderTabBar={() => <ScrollableInkTabBar />}
+      renderTabContent={() => <TabContent />}
+      id={withCustomId && customId}
+    >
+      {makeMultiTabPane(5, withTabKey)}
+    </Tabs>
+  </div>
+);
+
+TabsComponent.propTypes = {
+  withCustomId: PropTypes.bool,
+  withTabKey: PropTypes.bool
+}
+
+TabsComponent.defaults = {
+  withCustomId: false,
+  withTabKey: false
+}
+
+const simulateKeyDown = (DOMNode, keyCode) => {
+  TestUtils.Simulate.keyDown(DOMNode, { 
+    keyCode, 
+    which: keyCode
+  });
+};
+
+describe('<TabsComponent />', () => {
+  const component = <TabsComponent />;
+  const wrapper = mount(component);
+  const tabList = wrapper.find('[role="tablist"]').first();
+  const tabs = wrapper.find('[role="tab"]');
+
+  it('should render correctly', () => {
+    expect(renderToJson(render(component))).toMatchSnapshot();
+  });
+
+  it ('first tab should be selected by default', () => {
+    const firstTab = tabs.first();
+    const selectedTab = tabs.find('[aria-selected="true"]');
+    expect(selectedTab.getDOMNode()).toBe(firstTab.getDOMNode());
+  });
+
+  it ('switching tab via keyboard arrow navigation should move focus to new active tab', () => { 
+    simulateKeyDown(tabList.getDOMNode(), KeyCode.RIGHT);
+    const secondTab = tabs.at(1);
+    expect(document.activeElement).toBe(secondTab.getDOMNode());
+  });
+  
+  it ('clicking a tab should move focus to this tab', () => { 
+    const thirdTab = tabs.at(2);
+    thirdTab.simulate('click');
+    expect(document.activeElement).toBe(thirdTab.getDOMNode());
+  });
+
+});
+
+describe('<TabsComponent withTabKey />', () => {
+  const component = <TabsComponent withTabKey />;
+
+  it('should render correctly', () => {
+    expect(renderToJson(render(component))).toMatchSnapshot();
+  });
+
+});
+
+describe('<TabsComponent withTabKey withCustomId />', () => {
+  const component = <TabsComponent withTabKey withCustomId id="MY_ID" />;
+
+  it('should render correctly', () => {
+    expect(renderToJson(render(component))).toMatchSnapshot();
+  });
+
+});
\ No newline at end of file
diff --git a/tests/index.spec.js b/tests/index.spec.js
index 7e37ba15..9145009b 100755
--- a/tests/index.spec.js
+++ b/tests/index.spec.js
@@ -112,6 +112,9 @@ describe('rc-tabs', () => {
         <TabPane tab="tab 1" key="1">first</TabPane>
         <TabPane tab="tab 2" key="2">second</TabPane>
         <TabPane tab="tab 3" key="3">third</TabPane>
+        <TabPane tab="tab 4" key="4">fourth</TabPane>
+        <TabPane tab="tab 5" key="5">fifth</TabPane>
+        <TabPane tab="tab 6" key="6">sixth</TabPane>
       </Tabs>
     );
 
@@ -126,13 +129,17 @@ describe('rc-tabs', () => {
         return 100;
       }
       if (node.className.indexOf('rc-tabs-nav-wrap') !== -1) {
-        return 100;
+        return 0;
       }
       return 0;
     });
     wrapper.update();
 
     setTimeout(() => {
+      // Selects a tab from the middle so that prev/next buttons are not disabled. 
+      // Otherwise click event cannot be simulated.
+      wrapper.find('.rc-tabs-tab').at(3).simulate('click');
+
       wrapper.find('.rc-tabs-tab-next').simulate('click');
       expect(onNextClick).toHaveBeenCalled();
 
diff --git a/tests/tab.spec.js b/tests/tab.spec.js
deleted file mode 100644
index 55124b40..00000000
--- a/tests/tab.spec.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/* eslint-disable no-undef, jsx-a11y/no-autofocus */
-import React from 'react';
-import { mount } from 'enzyme';
-import KeyCode from 'rc-util/lib/KeyCode';
-import Tabs, { TabPane } from '../src/';
-import TabContent from '../src/TabContent';
-import ScrollableInkTabBar from '../src/ScrollableInkTabBar';
-
-const makeTabPane = key => (
-  <TabPane tab={`选项${key}`} key={key}>
-    <div>
-      <input autoFocus />
-      <input />
-    </div>
-  </TabPane>
-);
-
-const makeMultiTabPane = (count) => {
-  const result = [];
-  for (let i = 0; i < count; i++) {
-    result.push(makeTabPane(i));
-  }
-  return result;
-};
-
-
-const NormalTabs = () => (
-  <div style={{ width: 500, height: 500 }}>
-    <Tabs
-      renderTabBar={() => <ScrollableInkTabBar />}
-      renderTabContent={() => <TabContent />}
-    >
-      {makeMultiTabPane(2)}
-    </Tabs>
-  </div>
-);
-
-describe('tabs with tab key', () => {
-  function testTab(name, from, to, shiftKey) {
-    it(name, (done) => {
-      const wrapper = mount(<NormalTabs />);
-
-      setTimeout(() => {
-        const src = wrapper.find('div[role="presentation"]').at(from);
-        src.instance().focus();
-        src.simulate('keyDown', {
-          shiftKey,
-          which: KeyCode.TAB,
-        });
-
-        const tgt = wrapper.find('div[role="presentation"]').at(to);
-        expect(document.activeElement).toBe(tgt.getDOMNode());
-
-        done();
-      }, 50);
-    });
-  }
-
-  testTab('up tab to up panel', 0, 1, false);
-  testTab('down panel to down tab', 2, 3, false);
-  testTab('up panel to up tab', 1, 0, true);
-  testTab('down tab to down panel', 3, 2, true);
-});