diff --git a/src/NavItem.js b/src/NavItem.js
index 0ef949fb08..f30243cad4 100644
--- a/src/NavItem.js
+++ b/src/NavItem.js
@@ -55,11 +55,13 @@ const NavItem = React.createClass({
if (!role && href === '#') {
linkProps.role = 'button';
+ } else if (role === 'tab') {
+ linkProps['aria-selected'] = active;
}
return (
-
+
{ children }
diff --git a/test/NavItemSpec.js b/test/NavItemSpec.js
index 62fca77ae0..c7b5eb84fa 100644
--- a/test/NavItemSpec.js
+++ b/test/NavItemSpec.js
@@ -135,14 +135,24 @@ describe('NavItem', () => {
assert.ok(linkElement.hasAttribute('aria-controls'));
});
- it('Should add aria-selected to the link', () => {
+ it('Should add aria-selected to the link when role is "tab"', () => {
let instance = ReactTestUtils.renderIntoDocument(
- Item content
+ Item content
);
let linkElement = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a');
- assert.equal(linkElement.getAttribute('aria-selected'), 'true');
+ expect(linkElement.getAttribute('aria-selected')).to.equal('true');
+ });
+
+ it('Should not add aria-selected to the link when role is not "tab"', () => {
+ let instance = ReactTestUtils.renderIntoDocument(
+ Item content
+ );
+
+ let linkElement = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'a');
+
+ expect(linkElement.getAttribute('aria-selected')).to.not.exist;
});
it('Should pass role down', () => {