improve aria attribute handling. closes #1142

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

lib/scripts/behaviour.js

 /**
  * 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);
     });
 };
 

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

lib/tpl/dokuwiki/main.php

@@ -38,12 +38,12 @@ $showSidebar = $hasSidebar && ($ACT=='show');
                 <!-- ********** ASIDE ********** -->
                 <div id="dokuwiki__aside"><div class="pad aside include group">
                     <h3 class="toggle"><?php echo $lang['sidebar'] ?></h3>
-                    <div class="content">
+                    <div class="content"><div class="group">
                         <?php tpl_flush() ?>
                         <?php tpl_includeFile('sidebarheader.html') ?>
                         <?php tpl_include_page($conf['sidebar'], true, true) ?>
                         <?php tpl_includeFile('sidebarfooter.html') ?>
-                    </div>
+                    </div></div>
                 </div></div><!-- /aside -->
             <?php endif; ?>