feat(tabs): Set correct aria-controls value for Tab nav items

Signed-off-by: Dominick Reinhold <dreinhold@pivotal.io>
pivotal-cf · Aug 17, 2015 · 75fd100 · 75fd100
1 parent 2ad8ed7
commit 75fd100
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
     "lodash.findindex": "^3.2.1",
     "lodash.sortby": "^3.1.1",
     "lodash.throttle": "^3.0.2",
+    "lodash.uniqueid": "^3.0.0",
     "merge-stream": "^0.1.7",
     "mkdirp": "^0.5.0",
     "node-event-emitter": "0.0.1",

diff --git a/spec/pivotal-ui-react/tab/tab_spec.js b/spec/pivotal-ui-react/tab/tab_spec.js
@@ -6,8 +6,9 @@ describe('Tabs', function() {
   });
 
   describe('SimpleTabs', function() {
+    let SimpleTabs = require('../../../src/pivotal-ui-react/tabs/tabs').SimpleTabs;
+
     beforeEach(function() {
-      var SimpleTabs = require('../../../src/pivotal-ui-react/tabs/tabs').SimpleTabs;
       React.render(
         (
           <SimpleTabs defaultActiveKey={1}>
@@ -27,12 +28,58 @@ describe('Tabs', function() {
       expect('.tab-simple nav ul.nav.nav-tabs li.active').toContainText('Tab1');
       expect('.tab-simple .tab-content .tab-pane.fade.active.in').toContainText('Content1');
     });
+
+    describe('when no ID is given to the Tabs component', function() {
+      beforeEach(function() {
+        React.render(
+          (
+            <SimpleTabs defaultActiveKey={1}>
+              <Tab eventKey={1} title="Tab1">Content1</Tab>
+              <Tab eventKey={2} title="Tab2"/>
+            </SimpleTabs>
+          ),
+          root
+        );
+      });
+
+      it('sets up the correct aria-controls relationship', function() {
+        let pane1 = $(root).find('.tab-simple .tab-pane:first');
+        expect(pane1.length).toEqual(1);
+        expect(pane1.attr('id')).toBeTruthy();
+        expect('.tab-simple nav ul.nav.nav-tabs li:first a').toHaveAttr('aria-controls', pane1.attr('id'));
+      });
+    });
+
+    describe('when an ID is given to the Tabs component', function() {
+      beforeEach(function() {
+        React.render(
+          (
+            <SimpleTabs defaultActiveKey={1} id="tabs-id" >
+              <Tab eventKey={1} title="Tab1">Content1</Tab>
+              <Tab eventKey={2} title="Tab2"/>
+            </SimpleTabs>
+          ),
+          root
+        );
+      });
+
+      it('uses the given id for the tabs element in the DOM', function() {
+        expect('.tab-simple > #tabs-id').toExist();
+      });
+
+      it('sets up the correct aria-controls relationship', function() {
+        let pane1 = $(root).find('.tab-simple .tab-pane:first');
+        expect(pane1.length).toEqual(1);
+        expect(pane1.attr('id')).toBeTruthy();
+        expect('.tab-simple nav ul.nav.nav-tabs li:first a').toHaveAttr('aria-controls', pane1.attr('id'));
+      });
+    });
   });
 
   describe('SimpleAltTabs', function() {
-    beforeEach(function() {
-      var SimpleAltTabs = require('../../../src/pivotal-ui-react/tabs/tabs').SimpleAltTabs;
+    let SimpleAltTabs = require('../../../src/pivotal-ui-react/tabs/tabs').SimpleAltTabs;
 
+    beforeEach(function() {
       React.render((
           <SimpleAltTabs defaultActiveKey={1}>,
             <Tab eventKey={1} title="Tab1">Content1</Tab>
@@ -51,5 +98,51 @@ describe('Tabs', function() {
       expect('.tab-simple-alt nav ul.nav.nav-tabs li.active').toContainText('Tab1');
       expect('.tab-simple-alt .tab-content .tab-pane.fade.active.in').toContainText('Content1');
     });
+
+    describe('when no ID is given to the Tabs component', function() {
+      beforeEach(function() {
+        React.render(
+          (
+            <SimpleAltTabs defaultActiveKey={1}>
+              <Tab eventKey={1} title="Tab1">Content1</Tab>
+              <Tab eventKey={2} title="Tab2"/>
+            </SimpleAltTabs>
+          ),
+          root
+        );
+      });
+
+      it('sets up the correct aria-controls relationship', function() {
+        let pane1 = $(root).find('.tab-simple-alt .tab-pane:first');
+        expect(pane1.length).toEqual(1);
+        expect(pane1.attr('id')).toBeTruthy();
+        expect('.tab-simple-alt nav ul.nav.nav-tabs li:first a').toHaveAttr('aria-controls', pane1.attr('id'));
+      });
+    });
+
+    describe('when an ID is given to the Tabs component', function() {
+      beforeEach(function() {
+        React.render(
+          (
+            <SimpleAltTabs defaultActiveKey={1} id="tabs-id" >
+              <Tab eventKey={1} title="Tab1">Content1</Tab>
+              <Tab eventKey={2} title="Tab2"/>
+            </SimpleAltTabs>
+          ),
+          root
+        );
+      });
+
+      it('uses the given id for the tabs element in the DOM', function() {
+        expect('.tab-simple-alt > #tabs-id').toExist();
+      });
+
+      it('sets up the correct aria-controls relationship', function() {
+        let pane1 = $(root).find('.tab-simple-alt .tab-pane:first');
+        expect(pane1.length).toEqual(1);
+        expect(pane1.attr('id')).toBeTruthy();
+        expect('.tab-simple-alt nav ul.nav.nav-tabs li:first a').toHaveAttr('aria-controls', pane1.attr('id'));
+      });
+    });
   });
 });
diff --git a/src/pivotal-ui-react/tabs/package.json b/src/pivotal-ui-react/tabs/package.json
@@ -4,6 +4,7 @@
   "homepage": "http://styleguide.pivotal.io/react.html#tabs_react",
   "dependencies": {
     "react-bootstrap": "pivotal-cf/react-bootstrap#distv0.25-rc",
-    "pui-css-tabs": "1.10.0"
+    "pui-css-tabs": "1.10.0",
+    "lodash.uniqueid": "^3.0.0"
   }
 }
diff --git a/src/pivotal-ui-react/tabs/tabs.js b/src/pivotal-ui-react/tabs/tabs.js
@@ -1,5 +1,7 @@
-var React = require('react');
-var Tabs = require('react-bootstrap').Tabs;
+import React from 'react';
+import Tabs from 'react-bootstrap/lib/tabs';
+import BsTab from 'react-bootstrap/lib/tab';
+import uniqueid from 'lodash.uniqueid';
 
 /**
  * @component SimpleTabs
@@ -26,9 +28,9 @@ var Tabs = require('react-bootstrap').Tabs;
  * @see [Pivotal UI React](http://styleguide.pivotal.io/react.html#tabs_react)
  * @see [Pivotal UI CSS](http://styleguide.pivotal.io/objects.html#tab)
  */
-var SimpleTabs = React.createClass({
+let SimpleTabs = React.createClass({
   render() {
-    return <div className="tab-simple"><Tabs {...this.props}/></div>;
+    return <div className="tab-simple"><Tabs id={uniqueid('pui-react-tabs-')} {...this.props}/></div>;
   }
 });
 
@@ -57,9 +59,9 @@ var SimpleTabs = React.createClass({
  * @see [Pivotal UI React](http://styleguide.pivotal.io/react.html#tabs_react)
  * @see [Pivotal UI CSS](http://styleguide.pivotal.io/objects.html#tab)
  */
-var SimpleAltTabs = React.createClass({
+let SimpleAltTabs = React.createClass({
   render() {
-    return <div className="tab-simple-alt"><Tabs {...this.props}/></div>;
+    return <div className="tab-simple-alt"><Tabs id={uniqueid('pui-react-tabs-')} {...this.props}/></div>;
   }
 });
 
@@ -72,7 +74,7 @@ var SimpleAltTabs = React.createClass({
  * @see [Pivotal UI React](http://styleguide.pivotal.io/react.html#tabs_react)
  * @see [Pivotal UI CSS](http://styleguide.pivotal.io/objects.html#tab)
  */
-var Tab = require('react-bootstrap').Tab;
+let Tab = BsTab;
 
 module.exports = {
   SimpleTabs,