it('sets up aria relationships between tab and panel', function () {
var testEl = document.createElement('div');
var tabList = new TabList({
el: testEl
});
// check tablist role
var navEl = testEl.querySelector('nav');
expect(navEl.getAttribute('role')).to.equal('tablist');
// add a tab
var tab1Ref = tabList.addTab({
title: 'title1',
content: 'content1'
});
var tabEl = tab1Ref.tabEl;
var panelEl = tab1Ref.panelEl;
// check tab role and aria-controls attribute
expect(tabEl.getAttribute('role')).to.equal('tab');
expect(tabEl.getAttribute('aria-controls')).to.equal(panelEl.id);
// check panel role and aria-labelledby attribute
expect(panelEl.getAttribute('role')).to.equal('tabpanel');
expect(panelEl.getAttribute('aria-labelledby')).to.equal(tabEl.id);
});
function () {
var tl,
tabOptions,
contentSpy,
onSelectSpy,
tabRef;
// create tablist with a tab, which will be selected
tl = new TabList({
tabs: [
{
title: 'tab1',
content: 'content1'
}
]
});
// add a tab with callback spies
tabOptions = {
title: 'my title',
content: function () {
return 'my content';
},
onSelect: function () {}
};
contentSpy = sinon.spy(tabOptions, 'content');
onSelectSpy = sinon.spy(tabOptions, 'onSelect');
tabRef = tl.addTab(tabOptions);
// not selected
expect(tabRef.contentReady).to.equal(false);
expect(contentSpy.callCount).to.equal(0);
expect(onSelectSpy.callCount).to.equal(0);
// select first time
tabRef.select();
expect(tabRef.contentReady).to.equal(true);
expect(contentSpy.callCount).to.equal(1);
expect(onSelectSpy.callCount).to.equal(1);
// select second time
tabRef.select();
expect(contentSpy.callCount).to.equal(1);
expect(onSelectSpy.callCount).to.equal(2);
});