[added] Accessibility, add tab roles when type "tabs"

add tablist and tab roles when the nav is bsStyle "tabs"
AndreasKlein · Jun 18, 2015 · 722969d · 722969d
1 parent 4adaa70
commit 722969d
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 6 deletions.
diff --git 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
@@ -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,32 +25,35 @@ 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,
           onClick: this.handleClick,
           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
@@ -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
@@ -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');
+    });
+  });
 });