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: [PATCH] improve aria attribute handling. closes #1142
adds aria handling to makeToggle and allows to supress it in dw_toggle
---
lib/scripts/behaviour.js | 26 +++++++++++++++-----------
lib/scripts/page.js | 13 ++++++++++---
lib/tpl/dokuwiki/main.php | 4 ++--
3 files changed, 27 insertions(+), 16 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
diff --git a/lib/tpl/dokuwiki/main.php b/lib/tpl/dokuwiki/main.php
index 165230e8a..eea1df71a 100644
--- a/lib/tpl/dokuwiki/main.php
+++ b/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; ?>
--
GitLab