diff options
author | Cameron Little <cameron@camlittle.com> | 2014-09-09 20:17:56 +0400 |
---|---|---|
committer | Heinrich Fenkart <hnrch02@gmail.com> | 2014-10-26 04:25:47 +0300 |
commit | 0755d529c6ded76a6c04b13b36ce0471e4bb1ee8 (patch) | |
tree | 5cb76c53a93231b85e68bb62bdfa9e3bcdf292b8 /js | |
parent | 38217ee405de65a3fd3e2c217f8d5be8563da327 (diff) |
Tabs plugin accessibility
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.
Diffstat (limited to 'js')
-rw-r--r-- | js/tab.js | 17 | ||||
-rw-r--r-- | js/tests/unit/tab.js | 24 |
2 files changed, 38 insertions, 3 deletions
@@ -71,9 +71,15 @@ $active .removeClass('active') .find('> .dropdown-menu > .active') - .removeClass('active') + .removeClass('active') + .end() + .find('[data-toggle="tab"]') + .attr('aria-expanded', false) - element.addClass('active') + element + .addClass('active') + .find('[data-toggle="tab"]') + .attr('aria-expanded', true) if (transition) { element[0].offsetWidth // reflow for transition @@ -83,7 +89,12 @@ } if (element.parent('.dropdown-menu')) { - element.closest('li.dropdown').addClass('active') + element + .closest('li.dropdown') + .addClass('active') + .end() + .find('[data-toggle="tab"]') + .attr('aria-expanded', true) } callback && callback() diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js index 6fbf36c50b..9b2a18d572 100644 --- a/js/tests/unit/tab.js +++ b/js/tests/unit/tab.js @@ -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') + }) + }) |