From 0755d529c6ded76a6c04b13b36ce0471e4bb1ee8 Mon Sep 17 00:00:00 2001 From: Cameron Little Date: Tue, 9 Sep 2014 18:17:56 +0200 Subject: 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. --- js/tests/unit/tab.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) (limited to 'js/tests/unit/tab.js') 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 = '' + 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') + }) + }) -- cgit v1.2.3