Commit 33639bf4 authored by Kyle Keating's avatar Kyle Keating

Fix `aria-selected` prop on <Tab> component

Render `aria-selected=“false”` rather than omit the prop when tab is not selected
parent fd998f4f
...@@ -30,7 +30,7 @@ function Tab({ ...@@ -30,7 +30,7 @@ function Tab({
onTouchStart={onChangeTab.bind(this, type)} onTouchStart={onChangeTab.bind(this, type)}
role="tab" role="tab"
tabIndex="0" tabIndex="0"
aria-selected={selected} aria-selected={selected.toString()}
> >
{children} {children}
{count > 0 && !isWaitingToAnchor && ( {count > 0 && !isWaitingToAnchor && (
......
...@@ -81,6 +81,8 @@ describe('SelectionTabs', function() { ...@@ -81,6 +81,8 @@ describe('SelectionTabs', function() {
const wrapper = createComponent(); const wrapper = createComponent();
const tabs = wrapper.find('button'); const tabs = wrapper.find('button');
assert.isTrue(tabs.at(0).hasClass('is-selected')); assert.isTrue(tabs.at(0).hasClass('is-selected'));
assert.equal(tabs.at(0).prop('aria-selected'), 'true');
assert.equal(tabs.at(1).prop('aria-selected'), 'false');
}); });
it('should display notes tab as selected', function() { it('should display notes tab as selected', function() {
...@@ -90,6 +92,8 @@ describe('SelectionTabs', function() { ...@@ -90,6 +92,8 @@ describe('SelectionTabs', function() {
const wrapper = createComponent({}); const wrapper = createComponent({});
const tabs = wrapper.find('button'); const tabs = wrapper.find('button');
assert.isTrue(tabs.at(1).hasClass('is-selected')); assert.isTrue(tabs.at(1).hasClass('is-selected'));
assert.equal(tabs.at(1).prop('aria-selected'), 'true');
assert.equal(tabs.at(0).prop('aria-selected'), 'false');
}); });
it('should display orphans tab as selected if there is 1 or more orphans', function() { it('should display orphans tab as selected if there is 1 or more orphans', function() {
...@@ -100,6 +104,9 @@ describe('SelectionTabs', function() { ...@@ -100,6 +104,9 @@ describe('SelectionTabs', function() {
const wrapper = createComponent({}); const wrapper = createComponent({});
const tabs = wrapper.find('button'); const tabs = wrapper.find('button');
assert.isTrue(tabs.at(2).hasClass('is-selected')); assert.isTrue(tabs.at(2).hasClass('is-selected'));
assert.equal(tabs.at(2).prop('aria-selected'), 'true');
assert.equal(tabs.at(1).prop('aria-selected'), 'false');
assert.equal(tabs.at(0).prop('aria-selected'), 'false');
}); });
it('should not display orphans tab if there are 0 orphans', function() { it('should not display orphans tab if there are 0 orphans', function() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment