From bed1717f373c6e3a610f30a3c5f090d401b05b74 Mon Sep 17 00:00:00 2001
From: Andreas Gohr <gohr@cosmocode.de>
Date: Wed, 22 Feb 2017 11:48:17 +0100
Subject: [PATCH 1/2] make sidebar headers toggable via keyboard

---
 js/sidebar.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/js/sidebar.js b/js/sidebar.js
index fd2c9b2..8248b98 100644
--- a/js/sidebar.js
+++ b/js/sidebar.js
@@ -77,6 +77,7 @@ jQuery(function () {
             const $toggler = jQuery('<h6>')
                     .attr('role', 'heading')
                     .attr('aria-level', '2')
+                    .attr('tabindex', '0')
                     .text(text)
                     .wrapInner('<span class="lbl">')
                     .prepend($icon)
@@ -102,7 +103,7 @@ jQuery(function () {
      * Initialize the open/close toggling of menu entries
      */
     const initMenuHandling = function () {
-        $nav.on('click', 'h6', function () {
+        $nav.on('click keypress', 'h6', function () {
             toggleNav(jQuery(this));
         });
     };

From 06938c6d7cfdb2afaaaf1c0f28f4dfc02822f817 Mon Sep 17 00:00:00 2001
From: Andreas Gohr <gohr@cosmocode.de>
Date: Wed, 22 Feb 2017 12:12:04 +0100
Subject: [PATCH 2/2] use a instead of h6 in navigation

this makes focusing and selecting in assistive technologies easier
---
 css/area_main-sidebar-nav.less |  5 +++-
 js/sidebar.js                  |  8 +++---
 tpl/main-sidebar-nav.php       | 47 ++++++++++++++++------------------
 3 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/css/area_main-sidebar-nav.less b/css/area_main-sidebar-nav.less
index 6565b61..43e1c53 100755
--- a/css/area_main-sidebar-nav.less
+++ b/css/area_main-sidebar-nav.less
@@ -11,7 +11,10 @@
     margin-left: @menu-margin; // moves *all* sidebar content to the right
 
     // the toggle element
-    h6 {
+    a.nav {
+        font-size: @font-size-head6;
+        margin: 0 0 @font-size-head6;
+
         cursor: pointer;
         font-weight: normal;
         margin-left: (@menu-margin * -1); // moves the toggles back to the left
diff --git a/js/sidebar.js b/js/sidebar.js
index 8248b98..60245bd 100644
--- a/js/sidebar.js
+++ b/js/sidebar.js
@@ -74,10 +74,11 @@ jQuery(function () {
             }
 
             // make the new toggler
-            const $toggler = jQuery('<h6>')
+            const $toggler = jQuery('<a>')
+                    .addClass('nav')
+                    .attr('href', '#')
                     .attr('role', 'heading')
                     .attr('aria-level', '2')
-                    .attr('tabindex', '0')
                     .text(text)
                     .wrapInner('<span class="lbl">')
                     .prepend($icon)
@@ -103,8 +104,9 @@ jQuery(function () {
      * Initialize the open/close toggling of menu entries
      */
     const initMenuHandling = function () {
-        $nav.on('click keypress', 'h6', function () {
+        $nav.on('click', 'a', function (e) {
             toggleNav(jQuery(this));
+            e.preventDefault();
         });
     };
 
diff --git a/tpl/main-sidebar-nav.php b/tpl/main-sidebar-nav.php
index dad01bb..4c179b5 100644
--- a/tpl/main-sidebar-nav.php
+++ b/tpl/main-sidebar-nav.php
@@ -4,12 +4,11 @@
     ?>
 </nav>
 
-
 <nav class="nav-sitetools">
-    <h6 role="heading" aria-level="2">
+    <a class="nav" role="heading" aria-level="2">
         <span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/sitemap.svg') ?></span>
         <span class="lbl"><?php echo $lang['site_tools']; ?></span>
-    </h6>
+    </a>
     <div class="nav-panel level1">
         <ul>
             <?php
@@ -28,10 +27,10 @@
 
 
 <nav class="nav-usermenu">
-    <h6 role="heading" aria-level="2">
+    <a class="nav" role="heading" aria-level="2">
         <span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/account-settings.svg') ?></span>
         <span class="lbl"><?php echo $lang['user_tools']; ?></span>
-    </h6>
+    </>
     <div class="nav-panel level1">
         <ul>
             <?php /* dokuwiki user tools */
@@ -51,24 +50,22 @@
 
 
 <?php if($conf['breadcrumbs']): ?>
-    <nav class="nav-trace">
-        <h6 role="heading" aria-level="2">
-            <span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg') ?></span>
-            <span class="lbl"><?php echo tpl_getLang('head_menu_trace'); ?></span>
-        </h6>
-        <div class="nav-panel level1">
-            <ul>
-                <?php /* trace breadcrumbs as list */
-                // FIXME move to helper class
-                $crumbs = breadcrumbs();
-                $crumbs = array_reverse($crumbs, true);
-                foreach($crumbs as $id => $name) {
-                    echo '<li>';
-                    tpl_link(wl($id), hsc($name), 'title="' . $id . '"');
-                    echo '</li>';
-                }
-                ?>
-            </ul>
-        </div>
-    </nav>
+    <a class="nav" role="heading" aria-level="2">
+        <span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg') ?></span>
+        <span class="lbl"><?php echo tpl_getLang('head_menu_trace'); ?></span>
+    </a>
+    <div class="nav-panel level1">
+        <ul>
+            <?php /* trace breadcrumbs as list */
+            // FIXME move to helper class
+            $crumbs = breadcrumbs();
+            $crumbs = array_reverse($crumbs, true);
+            foreach($crumbs as $id => $name) {
+                echo '<li>';
+                tpl_link(wl($id), hsc($name), 'title="' . $id . '"');
+                echo '</li>';
+            }
+            ?>
+        </ul>
+    </div>
 <?php endif ?>