From 82246f10eb9ae3debeadf5913232105aa2694cec Mon Sep 17 00:00:00 2001
From: Andreas Gohr <andi@splitbrain.org>
Date: Wed, 15 Jul 2015 21:44:22 +0200
Subject: improve aria attribute handling. closes #1142

adds aria handling to makeToggle and allows to supress it in dw_toggle
---
 lib/scripts/page.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

(limited to 'lib/scripts/page.js')

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
-- 
cgit v1.2.3