improve aria attribute handling. closes #1142

adds aria handling to makeToggle and allows to supress it in dw_toggle

2 files changed, 25 insertions, 14 deletions

diff --git a/lib/scripts/behaviour.js b/lib/scripts/behaviour.js
index 97955dad9..b05949a90 100644
--- a/lib/scripts/behaviour.js
+++ b/lib/scripts/behaviour.js
@@ -1,37 +1,41 @@
 /**
  * Hides elements with a slide animation
  *
- * @param fn optional callback to run after hiding
+ * @param {function} fn optional callback to run after hiding
+ * @param {bool} noaria supress aria-expanded state setting
  * @author Adrian Lang <mail@adrianlang.de>
  */
-jQuery.fn.dw_hide = function(fn) {
-    this.attr('aria-expanded', 'false');
+jQuery.fn.dw_hide = function(fn, noaria) {
+    if(!noaria) this.attr('aria-expanded', 'false');
     return this.slideUp('fast', fn);
 };
 
 /**
  * Unhides elements with a slide animation
  *
- * @param fn optional callback to run after hiding
+ * @param {function} fn optional callback to run after hiding
+ * @param {bool} noaria supress aria-expanded state setting
  * @author Adrian Lang <mail@adrianlang.de>
  */
-jQuery.fn.dw_show = function(fn) {
-    this.attr('aria-expanded', 'true');
+jQuery.fn.dw_show = function(fn, noaria) {
+    if(!noaria) this.attr('aria-expanded', 'true');
     return this.slideDown('fast', fn);
 };
 
 /**
  * Toggles visibility of an element using a slide element
  *
- * @param bool the current state of the element (optional)
+ * @param {bool} state the current state of the element (optional)
+ * @param {function} fn callback after the state has been toggled
+ * @param {bool} noaria supress aria-expanded state setting
  */
-jQuery.fn.dw_toggle = function(bool, fn) {
+jQuery.fn.dw_toggle = function(state, fn, noaria) {
     return this.each(function() {
         var $this = jQuery(this);
-        if (typeof bool === 'undefined') {
-            bool = $this.is(':hidden');
+        if (typeof state === 'undefined') {
+            state = $this.is(':hidden');
         }
-        $this[bool ? "dw_show" : "dw_hide" ](fn);
+        $this[state ? "dw_show" : "dw_hide" ](fn, noaria);
     });
 };
 
diff --git a/lib/scripts/page.js b/lib/scripts/page.js
index 7b4958d82..a179ae2a8 100644
--- a/lib/scripts/page.js
+++ b/lib/scripts/page.js
@@ -109,8 +109,14 @@ dw_page = {
      * as well. A state indicator is inserted into the handle and can be styled
      * by CSS.
      *
-     * @param selector handle What should be clicked to toggle
-     * @param selector content This element will be toggled
+     * To properly reserve space for the expanded element, the sliding animation is
+     * done on the children of the content. To make that look good and to make sure aria
+     * attributes are assigned correctly, it's recommended to make sure that the content
+     * element contains a single child element only.
+     *
+     * @param {selector} handle What should be clicked to toggle
+     * @param {selector} content This element will be toggled
+     * @param {int} state initial state (-1 = open, 1 = closed)
      */
     makeToggle: function(handle, content, state){
         var $handle, $content, $clicky, $child, setClicky;
@@ -160,8 +166,9 @@ dw_page = {
             // Start animation and assure that $toc is hidden/visible
             $child.dw_toggle(hidden, function () {
                 $content.toggle(hidden);
+                $content.attr('aria-expanded', hidden);
                 $content.css('min-height',''); // remove min-height again
-            });
+            }, true);
         };
 
         // the state indicator