From 7cc4747e57b3df2730db3e4cf0a2857add159dc4 Mon Sep 17 00:00:00 2001
From: Dave Thompson <dthomp325@gmail.com>
Date: Thu, 5 Mar 2015 12:08:40 -0700
Subject: [PATCH] [fixed] Added role="button" to NavItem for aria compliance.

---
 src/NavItem.jsx      | 22 ++++++++++++++--------
 test/NavItemSpec.jsx | 18 ++++++++++++++++++
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/NavItem.jsx b/src/NavItem.jsx
index 86fb3040a9..72c4f31db2 100644
--- a/src/NavItem.jsx
+++ b/src/NavItem.jsx
@@ -23,7 +23,7 @@ var NavItem = React.createClass({
   },
 
   render: function () {
-    var { 
+    var {
         disabled,
         active,
         href,
@@ -34,16 +34,22 @@ var NavItem = React.createClass({
         classes = {
           'active': active,
           'disabled': disabled
+        },
+        linkProps = {
+          href,
+          title,
+          target,
+          onClick: this.handleClick,
+          ref: 'anchor'
         };
 
+    if (href === '#') {
+      linkProps.role = 'button';
+    }
+
     return (
       <li {...props} className={joinClasses(props.className, classSet(classes))}>
-        <a
-          href={href}
-          title={title}
-          target={target}
-          onClick={this.handleClick}
-          ref="anchor">
+        <a {...linkProps}>
           { children }
         </a>
       </li>
@@ -61,4 +67,4 @@ var NavItem = React.createClass({
   }
 });
 
-module.exports = NavItem;
\ No newline at end of file
+module.exports = NavItem;
diff --git a/test/NavItemSpec.jsx b/test/NavItemSpec.jsx
index 5888a597ba..f8af6bb40d 100644
--- a/test/NavItemSpec.jsx
+++ b/test/NavItemSpec.jsx
@@ -90,4 +90,22 @@ describe('NavItem', function () {
     );
     ReactTestUtils.Simulate.click(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'span'));
   });
+
+  it('Should set role="button" when href=="#"', function () {
+    var instance = ReactTestUtils.renderIntoDocument(
+          <NavItem href="#" target="_blank">Item content</NavItem>
+        );
+
+    var linkElement = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a').getDOMNode();
+    assert(linkElement.outerHTML.match('role="button"'), true);
+  });
+
+  it('Should not set role when href!="#"', function () {
+    var instance = ReactTestUtils.renderIntoDocument(
+          <NavItem href="/path/to/stuff" target="_blank">Item content</NavItem>
+        );
+
+    var linkElement = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a').getDOMNode();
+    assert.equal(linkElement.outerHTML.match('role="button"'), null);
+  });
 });