mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 02:24:19 +02:00
Code Issues Releases Wiki Activity

Tabs plugin accessibility

Browse Source 
Added support for `aria-expanded` toggling via JavaScript. Added
`aria-controls`, `aria-expanded`, `aria-labelledby` to tabs docs.

Added `aria-expanded` unit test for the tabs plugin.

See also #13554.

Closes #14154 by merging it.
This commit is contained in:
Cameron Little
2014-09-09 18:17:56 +02:00
committed by Heinrich Fenkart
parent 38217ee405
commit 0755d529c6
3 changed files with 48 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
js/tests/unit/tab.js
View File

@@ -178,4 +178,28 @@ $(function () {
.bootstrapTab('show')
})
test('selected tab should have aria-expanded', function () {
var tabsHTML = '<ul class="nav nav-tabs">'
+ '<li class="active"><a href="#home" toggle="tab" aria-expanded="true">Home</a></li>'
+ '<li><a href="#profile" toggle="tab" aria-expanded="false">Profile</a></li>'
+ '</ul>'
var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
$tabs.find('li:first a').bootstrapTab('show')
equal($tabs.find('.active a').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true')
equal($tabs.find('li:not(.active) a').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false')
$tabs.find('li:last a').click()
equal($tabs.find('.active a').attr('aria-expanded'), 'true', 'after click, shown tab has aria-expanded = true')
equal($tabs.find('li:not(.active) a').attr('aria-expanded'), 'false', 'after click, hidden tab has aria-expanded = false')
$tabs.find('li:first a').bootstrapTab('show')
equal($tabs.find('.active a').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true')
equal($tabs.find('li:not(.active) a').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false')
$tabs.find('li:first a').click()
equal($tabs.find('.active a').attr('aria-expanded'), 'true', 'after second show event, shown tab still has aria-expanded = true')
equal($tabs.find('li:not(.active) a').attr('aria-expanded'), 'false', 'after second show event, hidden tab has aria-expanded = false')
})
})