From d0ff625e083e351294dda1bd47542b3be4488b1b Mon Sep 17 00:00:00 2001
From: Caroline Taymor <ctaymor@pivotal.io>
Date: Wed, 12 Aug 2015 16:42:41 -0700
Subject: [PATCH] [added] aria role "tablist" to the Nav on Tabs

Also backfilled tests for aria-selected on tabs.

Signed-off-by: Dominick Reinhold <dreinhold@pivotal.io>
---
 src/Tabs.js      |  2 +-
 test/TabsSpec.js | 43 +++++++++++++++++++++++--------------------
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/Tabs.js b/src/Tabs.js
index 3b28bd081f..49f19af5ff 100644
--- a/src/Tabs.js
+++ b/src/Tabs.js
@@ -85,7 +85,7 @@ const Tabs = React.createClass({
     }
 
     let nav = (
-      <Nav {...props} activeKey={this.getActiveKey()} onSelect={this.handleSelect} ref="tabs">
+      <Nav {...props} activeKey={this.getActiveKey()} onSelect={this.handleSelect} ref="tabs" role="tablist">
         {ValidComponentChildren.map(this.props.children, renderTabIfSet, this)}
       </Nav>
     );
diff --git a/test/TabsSpec.js b/test/TabsSpec.js
index 08cb82c1f9..d866887cb7 100644
--- a/test/TabsSpec.js
+++ b/test/TabsSpec.js
@@ -3,6 +3,7 @@ import ReactTestUtils from 'react/lib/ReactTestUtils';
 import Tabs from '../src/Tabs';
 import Tab from '../src/Tab';
 import NavItem from '../src/NavItem';
+import Nav from '../src/Nav';
 import ValidComponentChildren from '../src/utils/ValidComponentChildren';
 import { render } from './helpers';
 
@@ -25,7 +26,7 @@ describe('Tabs', function () {
     assert.equal(tabs.refs.tabs.props.activeKey, 1);
   });
 
-  it('Should only show the tabs with `Tab.props.tab` set', function () {
+  it('Should only show the tabs with `Tab.props.title` set', function () {
     let instance = ReactTestUtils.renderIntoDocument(
       <Tabs activeKey={3}>
         <Tab title="Tab 1" eventKey={1}>Tab 1 content</Tab>
@@ -260,15 +261,17 @@ describe('Tabs', function () {
   });
 
   describe('Web Accessibility', function(){
-
-    it('Should generate ids from parent id', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
+    let instance;
+    beforeEach(function(){
+      instance = ReactTestUtils.renderIntoDocument(
         <Tabs defaultActiveKey={2} id='tabs'>
-          <Tab title="Tab 1" eventKey={1}>Tab 1 content</Tab>
-          <Tab title="Tab 2" eventKey={2}>Tab 2 content</Tab>
+          <Tab id='pane-1' title="Tab 1" eventKey={1}>Tab 1 content</Tab>
+          <Tab id='pane-2' title="Tab 2" eventKey={2}>Tab 2 content</Tab>
         </Tabs>
       );
+    });
 
+    it('Should generate ids from parent id', function () {
       let tabs = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
 
       tabs.every(tab =>
@@ -276,13 +279,6 @@ describe('Tabs', function () {
     });
 
     it('Should add aria-controls', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Tabs defaultActiveKey={2} id='tabs'>
-          <Tab id='pane-1' title="Tab 1" eventKey={1}>Tab 1 content</Tab>
-          <Tab id='pane-2' title="Tab 2" eventKey={2}>Tab 2 content</Tab>
-        </Tabs>
-      );
-
       let panes = ReactTestUtils.scryRenderedComponentsWithType(instance, Tab);
 
       assert.equal(panes[0].props['aria-labelledby'], 'pane-1___tab');
@@ -290,19 +286,26 @@ describe('Tabs', function () {
     });
 
     it('Should add aria-controls', function () {
-      let instance = ReactTestUtils.renderIntoDocument(
-        <Tabs defaultActiveKey={2} id='tabs'>
-          <Tab id='pane-1' title="Tab 1" eventKey={1}>Tab 1 content</Tab>
-          <Tab id='pane-2' title="Tab 2" eventKey={2}>Tab 2 content</Tab>
-        </Tabs>
-      );
-
       let tabs = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
 
       assert.equal(tabs[0].props['aria-controls'], 'pane-1');
       assert.equal(tabs[1].props['aria-controls'], 'pane-2');
     });
 
+    it('Should add role=tablist to the nav', function () {
+      let nav = ReactTestUtils.findRenderedComponentWithType(instance, Nav);
+
+      assert.equal(nav.props.role, 'tablist');
+    });
+
+    it('Should add aria-selected to the nav item for the selected tab', function() {
+      let tabs = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
+      let link1 = ReactTestUtils.findRenderedDOMComponentWithTag(tabs[0], 'a');
+      let link2 = ReactTestUtils.findRenderedDOMComponentWithTag(tabs[1], 'a');
+
+      assert.equal(link1.props['aria-selected'], undefined);
+      assert.equal(link2.props['aria-selected'], true);
+    });
   });
 
   it('Should not pass className to Nav', function () {