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

Also backfilled tests for aria-selected on tabs. Signed-off-by: Dominick Reinhold <[email protected]>
viktorrusakov · Aug 13, 2015 · d0ff625 · d0ff625
1 parent b0b1b14
commit d0ff625
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 21 deletions.
diff --git 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
@@ -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 () {