[changed] Only add the navigation role to navbar when not using a <…

…nav> fixes react-bootstrap#1489
kyletsang · Nov 14, 2015 · 345f4b4 · 345f4b4
1 parent af93b24
commit 345f4b4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/src/Navbar.js b/src/Navbar.js
@@ -39,7 +39,6 @@ const Navbar = React.createClass({
     return {
       bsClass: 'navbar',
       bsStyle: 'default',
-      role: 'navigation',
       componentClass: 'nav',
       fixedTop: false,
       fixedBottom: false,
@@ -109,6 +108,13 @@ const Navbar = React.createClass({
       (brand || toggleButton || toggleNavKey != null) &&
       !this.hasNavBrandChild();
 
+    // will result in some false positives but that seems better
+    // than false negatives. strict `undefined` check allows explicit
+    // "nulling" of the role if the user really doesn't want one
+    if (props.role === undefined && ComponentClass !== 'nav') {
+      props.role = 'navigation';
+    }
+
     return (
       <ComponentClass {...props} className={classNames(className, classes)}>
         <Grid fluid={fluid}>

diff --git a/test/NavbarSpec.js b/test/NavbarSpec.js
@@ -17,7 +17,16 @@ describe('Navbar', () => {
     let nav = ReactDOM.findDOMNode(instance);
     assert.equal(nav.nodeName, 'NAV');
     assert.ok(nav.className.match(/\bnavbar\b/));
-    assert.ok(nav.getAttribute('role'), 'navigation');
+    assert.ok(!nav.getAttribute('role'));
+  });
+
+  it('Should add "navigation" role when not using a `<nav>`', () => {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Navbar componentClass='div' />
+    );
+    let nav = ReactDOM.findDOMNode(instance);
+    assert.equal(nav.nodeName, 'DIV');
+    assert.ok(nav.getAttribute('role') === 'navigation');
   });
 
   it('Should add fixedTop variation class', () => {