feat(Tab): tab a11y

STLighter · Jan 24, 2019 · 7a47360 · 7a47360
1 parent c68bb3e
commit 7a47360
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
         );