From 722969ddc439310ed612d7adda6b2155389bf64c Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Thu, 18 Jun 2015 03:30:43 -0400
Subject: [PATCH] [added] Accessibility, add tab roles when type "tabs"

add tablist and tab roles when the nav is bsStyle "tabs"
---
 src/Nav.js          |  9 +++++++--
 src/NavItem.js      | 13 +++++++++----
 test/NavItemSpec.js | 36 ++++++++++++++++++++++++++++++++++++
 test/NavSpec.js     | 19 +++++++++++++++++++
 4 files changed, 71 insertions(+), 6 deletions(-)

diff --git a/src/Nav.js b/src/Nav.js
index ed3b0d2ac9..d4873cc2b4 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -52,7 +52,7 @@ const Nav = React.createClass({
 
     return (
       <nav {...this.props} className={classNames(this.props.className, classes)}>
-        {this.renderUl()}
+        { this.renderUl() }
       </nav>
     );
   },
@@ -67,7 +67,11 @@ const Nav = React.createClass({
     classes['navbar-right'] = this.props.right;
 
     return (
-      <ul {...this.props} className={classNames(this.props.className, classes)} ref="ul">
+      <ul {...this.props}
+        role={this.props.bsStyle === 'tabs' ? 'tablist' : null}
+        className={classNames(this.props.className, classes)}
+        ref="ul"
+      >
         {ValidComponentChildren.map(this.props.children, this.renderNavItem)}
       </ul>
     );
@@ -95,6 +99,7 @@ const Nav = React.createClass({
     return cloneElement(
       child,
       {
+        role: this.props.bsStyle === 'tabs' ? 'tab' : null,
         active: this.getChildActiveProp(child),
         activeKey: this.props.activeKey,
         activeHref: this.props.activeHref,
diff --git a/src/NavItem.js b/src/NavItem.js
index 9bc768df48..c17aec0fac 100644
--- a/src/NavItem.js
+++ b/src/NavItem.js
@@ -10,9 +10,11 @@ const NavItem = React.createClass({
     active: React.PropTypes.bool,
     disabled: React.PropTypes.bool,
     href: React.PropTypes.string,
+    role: React.PropTypes.string,
     title: React.PropTypes.node,
     eventKey: React.PropTypes.any,
-    target: React.PropTypes.string
+    target: React.PropTypes.string,
+    'aria-controls': React.PropTypes.string
   },
 
   getDefaultProps() {
@@ -23,18 +25,21 @@ const NavItem = React.createClass({
 
   render() {
     let {
+        role,
         disabled,
         active,
         href,
         title,
         target,
         children,
+        'aria-controls': ariaControls,  // eslint-disable-line react/prop-types
         ...props } = this.props; // eslint-disable-line object-shorthand
     let classes = {
           active,
           disabled
         };
     let linkProps = {
+          role,
           href,
           title,
           target,
@@ -42,13 +47,13 @@ const NavItem = React.createClass({
           ref: 'anchor'
         };
 
-    if (href === '#') {
+    if (!role && href === '#') {
       linkProps.role = 'button';
     }
 
     return (
-      <li {...props} className={classNames(props.className, classes)}>
-        <a {...linkProps}>
+      <li {...props} role='presentation' className={classNames(props.className, classes)}>
+        <a {...linkProps} aria-selected={active} aria-controls={ariaControls}>
           { children }
         </a>
       </li>
diff --git a/test/NavItemSpec.js b/test/NavItemSpec.js
index 3f931ae1c0..a7f6ffb6a1 100644
--- a/test/NavItemSpec.js
+++ b/test/NavItemSpec.js
@@ -106,4 +106,40 @@ describe('NavItem', function () {
     let linkElement = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
     assert.equal(linkElement.outerHTML.match('role="button"'), null);
   });
+
+  describe('Web Accessibility', function(){
+
+    it('Should pass aria-controls to the link', function () {
+      let instance = ReactTestUtils.renderIntoDocument(
+          <NavItem href="/path/to/stuff" target="_blank" aria-controls='hi'>Item content</NavItem>
+        );
+
+      let linkElement = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
+
+      assert.ok(linkElement.hasAttribute('aria-controls'));
+    });
+
+    it('Should add aria-selected to the link', function () {
+      let instance = ReactTestUtils.renderIntoDocument(
+          <NavItem active>Item content</NavItem>
+        );
+
+      let linkElement = React.findDOMNode(
+        ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
+
+      assert.equal(linkElement.getAttribute('aria-selected'), 'true');
+    });
+
+    it('Should pass role down', function () {
+      let instance = ReactTestUtils.renderIntoDocument(
+          <NavItem role='tab'>Item content</NavItem>
+        );
+
+      let linkElement = React.findDOMNode(
+        ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a'));
+
+      assert.equal(linkElement.getAttribute('role'), 'tab');
+    });
+  });
+
 });
diff --git a/test/NavSpec.js b/test/NavSpec.js
index 81a8d09fe4..c53a5bbb55 100644
--- a/test/NavSpec.js
+++ b/test/NavSpec.js
@@ -114,4 +114,23 @@ describe('Nav', function () {
 
     assert.ok(items[0].props.navItem);
   });
+
+
+  describe('Web Accessibility', function(){
+
+    it('Should have tablist and tab roles', function () {
+      let instance = ReactTestUtils.renderIntoDocument(
+          <Nav bsStyle="tabs" activeKey={1}>
+            <NavItem key={1}>Tab 1 content</NavItem>
+            <NavItem key={2}>Tab 2 content</NavItem>
+          </Nav>
+        );
+
+      let ul = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'ul')[0];
+      let navItem = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'a')[0];
+
+      assert.equal(React.findDOMNode(ul).getAttribute('role'), 'tablist');
+      assert.equal(React.findDOMNode(navItem).getAttribute('role'), 'tab');
+    });
+  });
 });