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

kyletsang · Mar 5, 2015 · 7cc4747 · 7cc4747
1 parent 851e4d9
commit 7cc4747
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git 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;
+module.exports = NavItem;
diff --git 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);
+  });
 });