Skip to content

Commit

Permalink
[added] aria role "tablist" to the Nav on Tabs
Browse files Browse the repository at this point in the history
Also backfilled tests for aria-selected on tabs.

Signed-off-by: Dominick Reinhold <dreinhold@pivotal.io>
  • Loading branch information
Caroline Taymor authored and matt-royal committed Aug 13, 2015
1 parent b0b1b14 commit d0ff625
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 21 deletions.
2 changes: 1 addition & 1 deletion src/Tabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const Tabs = React.createClass({
}

let nav = (
<Nav {...props} activeKey={this.getActiveKey()} onSelect={this.handleSelect} ref="tabs">
<Nav {...props} activeKey={this.getActiveKey()} onSelect={this.handleSelect} ref="tabs" role="tablist">
{ValidComponentChildren.map(this.props.children, renderTabIfSet, this)}
</Nav>
);
Expand Down
43 changes: 23 additions & 20 deletions test/TabsSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import ReactTestUtils from 'react/lib/ReactTestUtils';
import Tabs from '../src/Tabs';
import Tab from '../src/Tab';
import NavItem from '../src/NavItem';
import Nav from '../src/Nav';
import ValidComponentChildren from '../src/utils/ValidComponentChildren';
import { render } from './helpers';

Expand All @@ -25,7 +26,7 @@ describe('Tabs', function () {
assert.equal(tabs.refs.tabs.props.activeKey, 1);
});

it('Should only show the tabs with `Tab.props.tab` set', function () {
it('Should only show the tabs with `Tab.props.title` set', function () {
let instance = ReactTestUtils.renderIntoDocument(
<Tabs activeKey={3}>
<Tab title="Tab 1" eventKey={1}>Tab 1 content</Tab>
Expand Down Expand Up @@ -260,49 +261,51 @@ describe('Tabs', function () {
});

describe('Web Accessibility', function(){

it('Should generate ids from parent id', function () {
let instance = ReactTestUtils.renderIntoDocument(
let instance;
beforeEach(function(){
instance = ReactTestUtils.renderIntoDocument(
<Tabs defaultActiveKey={2} id='tabs'>
<Tab title="Tab 1" eventKey={1}>Tab 1 content</Tab>
<Tab title="Tab 2" eventKey={2}>Tab 2 content</Tab>
<Tab id='pane-1' title="Tab 1" eventKey={1}>Tab 1 content</Tab>
<Tab id='pane-2' title="Tab 2" eventKey={2}>Tab 2 content</Tab>
</Tabs>
);
});

it('Should generate ids from parent id', function () {
let tabs = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);

tabs.every(tab =>
assert.ok(tab.props['aria-controls'] && tab.props.linkId));
});

it('Should add aria-controls', function () {
let instance = ReactTestUtils.renderIntoDocument(
<Tabs defaultActiveKey={2} id='tabs'>
<Tab id='pane-1' title="Tab 1" eventKey={1}>Tab 1 content</Tab>
<Tab id='pane-2' title="Tab 2" eventKey={2}>Tab 2 content</Tab>
</Tabs>
);

let panes = ReactTestUtils.scryRenderedComponentsWithType(instance, Tab);

assert.equal(panes[0].props['aria-labelledby'], 'pane-1___tab');
assert.equal(panes[1].props['aria-labelledby'], 'pane-2___tab');
});

it('Should add aria-controls', function () {
let instance = ReactTestUtils.renderIntoDocument(
<Tabs defaultActiveKey={2} id='tabs'>
<Tab id='pane-1' title="Tab 1" eventKey={1}>Tab 1 content</Tab>
<Tab id='pane-2' title="Tab 2" eventKey={2}>Tab 2 content</Tab>
</Tabs>
);

let tabs = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);

assert.equal(tabs[0].props['aria-controls'], 'pane-1');
assert.equal(tabs[1].props['aria-controls'], 'pane-2');
});

it('Should add role=tablist to the nav', function () {
let nav = ReactTestUtils.findRenderedComponentWithType(instance, Nav);

assert.equal(nav.props.role, 'tablist');
});

it('Should add aria-selected to the nav item for the selected tab', function() {
let tabs = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
let link1 = ReactTestUtils.findRenderedDOMComponentWithTag(tabs[0], 'a');
let link2 = ReactTestUtils.findRenderedDOMComponentWithTag(tabs[1], 'a');

assert.equal(link1.props['aria-selected'], undefined);
assert.equal(link2.props['aria-selected'], true);
});
});

it('Should not pass className to Nav', function () {
Expand Down

0 comments on commit d0ff625

Please sign in to comment.