[fixed] Added role="button" to NavItem for aria compliance.

Author: limscoder

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;
+module.exports = NavItem;

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