From 0755d529c6ded76a6c04b13b36ce0471e4bb1ee8 Mon Sep 17 00:00:00 2001
From: Cameron Little <cameron@camlittle.com>
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/tab.js            | 17 ++++++++++++++---
 js/tests/unit/tab.js | 24 ++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 3 deletions(-)

(limited to 'js')

diff --git a/js/tab.js b/js/tab.js
index c597d7ab6..dd307a424 100644
--- a/js/tab.js
+++ b/js/tab.js
@@ -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 6fbf36c50..9b2a18d57 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')
+  })
+
 })
-- 
cgit v1.2.3