[added] aria role "tablist" to the Nav on Tabs

Also backfilled tests for aria-selected on tabs.

Signed-off-by: Dominick Reinhold <[email protected]>

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>
  );

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,49 +261,51 @@ 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 =>
  assert.ok(tab.props['aria-controls'] && tab.props.linkId));
  });
 
  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');
  assert.equal(panes[1].props['aria-labelledby'], 'pane-2___tab');
  });
 
  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 () {