use a instead of h6 in navigation

this makes focusing and selecting in assistive technologies easier

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

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();
         });
     };
 

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 ?>