keyboard access + direct link scrolling

detail.php

@@ -232,7 +232,7 @@ include('tpl/favicon_tiles.php');
                             <div class="breadcrumbs" data-do="<?php echo tpl_getLang('image_detail') ?>">
 
                                 <div class="togglelink page_main-content">
-                                    <a href="#"><span class="sr-out"><?php echo tpl_getLang('a11y_sidebartoggle') ?></span></a>
+                                    <a id="spr__toggle-content" href="#"><span class="sr-out"><?php echo tpl_getLang('a11y_sidebartoggle') ?></span></a>
                                 </div>
 
                                 <h6 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_menu_status') ?></h6>

js/base/spc.js

@@ -103,7 +103,6 @@
         try{
             var focusobj = document.getElementById(fid);
             if(focusobj) focusobj.focus();
-            if(focusobj) console.log(focusobj);
         }catch(err){
             this._debug('exception: '+err);
         }

js/direct.js

@@ -0,0 +1,130 @@
+
+/**
+ * Sets up the behaviour of direct menu links
+ *
+ * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
+ */
+(function($) {
+
+
+    var $body,
+
+        /**
+         * Register the click handler for the direct links
+         * should scroll to the page area whether there is a fixed magic matcher bar or not
+         *
+         * @param $directMenu
+         */
+        scrollingForDirectNav = function($directMenu) {
+            $body = $('body');
+            checkAnchorsOnLoad($directMenu);
+            registerClickForDirectLinks($directMenu);
+
+        },
+
+        /**
+         * register click event listener for direct links
+         * @param $menu
+         */
+        registerClickForDirectLinks = function($menu) {
+            $menu.find('a').on('click', function (e) {
+                e.stopPropagation();
+                var target = $(this).attr('href');
+                tasksBeforeScrolling(target);
+                scrollToTarget(target);
+            });
+        },
+
+        /**
+         * scroll to / set focus to target of direct link if value of location hash equals direct link
+         * @param $menu
+         */
+        checkAnchorsOnLoad = function($menu) {
+            var hash = window.location.hash;
+            if (hash) {
+                $menu.find('a').each(function() {
+                    var target = $(this).attr('href');
+                    if(hash === target) {
+                        tasksBeforeScrolling(target);
+                        scrollToTarget(target);
+                        setFocusOnLoad(target);
+                    }
+                });
+            }
+        },
+
+        /**
+         * todos that needs to be done before the scrolling can start
+         * @param target
+         */
+        tasksBeforeScrolling = function(target) {
+            switch (target) {
+                case '#qsearch__in':
+                    showSearchField(target);
+                    break;
+
+                case '#dokuwiki__usertools':
+                    $(target).find('li:first-child').find('a').focus();
+                    break;
+
+            }
+        },
+
+        /**
+         * set focus on target or first link found in target
+         * @param target
+         */
+        setFocusOnLoad = function(target) {
+            var $target = $(target);
+            switch (target) {
+
+                case '#qsearch__in':
+                case '#spr__toggle-content':
+                    $target.focus();
+                    break;
+
+                case '#dokuwiki__usertools':
+                    break;
+
+                default:
+                    $target.attr('tabindex',0);
+                    $target.focus();
+
+            }
+        },
+
+        /**
+         * trigger content toggle link to make the search field visible otherwise it neither be used for scrolling nor
+         * for focus setting
+         * @param target
+         */
+        showSearchField = function(target) {
+            if($body.hasClass('wide-content')) {
+                $('#spr__toggle-content').trigger('click');
+            }
+        },
+
+        /**
+         * scrolls to the target with an offset of 60px
+         * @param target
+         */
+        scrollToTarget = function(target) {
+            // scroll to each target
+            $(target).velocity('scroll', {
+                duration: 400,
+                offset: -60,
+                easing: 'ease-in-out'
+            });
+        };
+
+
+    $(function(){
+
+        var $directMenu = $('#spr__direct');
+        if (!$directMenu.length) return;
+
+        scrollingForDirectNav($directMenu);
+    });
+
+
+})(jQuery);

js/meta-box.js

@@ -1,5 +1,10 @@
 
-
+/**
+ * Sets up the behaviour of the meta box
+ *
+ * @author Andreas Gohr <gohr@cosmocode.de>
+ * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
+ */
 (function($) {
 
 

js/plugins/bookcreator.js

@@ -1,6 +1,8 @@
 /**
  * prevents Uncaught TypeError in detail template if bookcreator plug-in is installed
  *
+ * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
+ *
  */
 (function($) {
 

js/plugins/folded.js

@@ -1,6 +1,8 @@
 /**
  * prevents Uncaught TypeError in detail template if folded plug-in is installed
  *
+ * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
+ *
  */
 (function($) {
 

js/plugins/qc.js

@@ -1,5 +1,8 @@
 /**
  * Add custom QC functionality instead of using the plugin's mechanism
+ *
+ * @author Andreas Gohr <gohr@cosmocode.de>
+ * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 jQuery(function () {
     var $panel = jQuery('div.qc-output').hide();

js/sidebar.js

@@ -1,5 +1,9 @@
 /**
  * Sets up the sidebar behaviour
+ *
+ *  @author Andreas Gohr <gohr@cosmocode.de>
+ *  @author Michael Große <gohr@cosmocode.de>
+ *  @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 jQuery(function () {
     var $nav = jQuery('#dokuwiki__aside');
@@ -266,7 +270,7 @@ jQuery(function () {
             setActive(stModes,$siteTools);
             setActive(utModes,$userTools);
 
-            if(jQuery('body').is('.wide-content')) {
+            if($body.is('.wide-content')) {
                 window.sessionStorage.setItem('wide-content', true);
                 isWideContent = true;
             }

lang/de/lang.php

@@ -8,11 +8,11 @@
 
 $lang['direct_prefix']              = 'Direkt';
 $lang['direct_content_main']        = 'Hauptinhalt dieser Seite';
-$lang['direct_menu_main']           = 'Hauptmenü';
+$lang['direct_quick_search']        = 'Schnellsuche';
+$lang['direct_content_toggle']      = 'Breite des Contents ändern';
 
 $lang['adjunct_start_logo_text']    = 'Logo: ';
 $lang['adjunct_linked_logo_text']   = '. Link zur Startseite';
-$lang['a11y_search']                = 'geh zur Suche';
 $lang['a11y_sidebartoggle']         = 'Sidebar öffnen/schliessen';
 
 $lang['nav-area-head']              = 'Navigationsmenüs und Suche';

lang/en/lang.php

@@ -7,12 +7,12 @@
 
 
 $lang['direct_prefix']              = 'jump to';
-$lang['direct_content_main']        = 'main content';
+$lang['direct_content_main']        = 'Main Content';
-$lang['direct_menu_main']           = 'main menu';
+$lang['direct_quick_search']        = 'Search';
+$lang['direct_content_toggle']      = 'Toggle Content Width';
 
 $lang['adjunct_start_logo_text']    = 'Logo: ';
 $lang['adjunct_linked_logo_text']   = '. homepage link';
-$lang['a11y_search']                = 'Jump to the search';
 $lang['a11y_sidebartoggle']         = 'Open/Close Sidebar';
 
 $lang['nav-area-head']              = 'menus and quick search';
@@ -94,4 +94,4 @@ $lang['__background_alt__']         = 'table head, table cell (hover), struct La
 $lang['__text_alt__']               = 'table head (unlinked), table cell (hover), struct Label (hover) - font color (alternative)';
 
 $lang['__border__']                 = 'tables, form fields, blockquotes - border color';
-$lang['__default_border_radius__']  = 'wiki icons, content (top right) - border radius';
+$lang['__default_border_radius__']  = 'wiki icons, content (top right) - border radius';

main.php

@@ -278,7 +278,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
                         <div class="breadcrumbs" data-do="<?php echo $ACT?>">
 
                             <div class="togglelink page_main-content">
-                                <a href="#"><span class="sr-out"><?php echo tpl_getLang('a11y_sidebartoggle')?></span></a>
+                                <a id="spr__toggle-content" href="#"><span class="sr-out"><?php echo tpl_getLang('a11y_sidebartoggle')?></span></a>
                             </div>
 
                             <h6 class="sr-only" role="heading" aria-level="2"><?php echo  tpl_getLang('head_menu_status')  ?></h6>

script.js

@@ -1,5 +1,6 @@
 /* DOKUWIKI:include js/base/helper.js */
 /* DOKUWIKI:include js/base/spc.js */
+/* DOKUWIKI:include js/base/velocity.min.js */
 
 /* DOKUWIKI:include js/plugins/do_tasks.js */
 /* DOKUWIKI:include js/plugins/qc.js */
@@ -8,3 +9,5 @@
 
 /* DOKUWIKI:include js/meta-box.js */
 /* DOKUWIKI:include js/sidebar.js */
+/* DOKUWIKI:include js/direct.js */
+

tpl/main-sidebar-search.php

@@ -2,5 +2,5 @@
 if(!defined('DOKU_INC')) die();
 
 echo '<h6 class="sr-only" role="heading" aria-level="2">' . tpl_getLang('head_quick_search') . '</h6>';
-echo '<p class="toggleSearch"><a href="#qsearch__out"><span class="prefix">' . tpl_getLang('a11y_search') . '</span></a></p>';
+echo '<p class="toggleSearch"><a href="#qsearch__out"><span class="prefix">' . tpl_getLang('jump_to_quicksearch') . '</span></a></p>';
 tpl_searchform(true, false);

tpl/nav-direct.php

@@ -10,9 +10,10 @@
                         <p>
                             <span class="sr-out"><?php echo tpl_getLang('direct_prefix'); ?>: </span>
                             <span class="skip">
-                                <a rel="nofollow" href="#content"><?php echo tpl_getLang('direct_content_main'); ?></a><span class="sr-out"> /</span>
+                                <a rel="nofollow" href="#qsearch__in"><?php echo tpl_getLang('direct_quick_search'); ?></a><span class="sr-out"> /</span>
                                 <a rel="nofollow" href="#dokuwiki__usertools"><?php echo $lang['user_tools']; ?></a><span class="sr-out"> /</span>
-                                <a rel="nofollow" href="#nav-main"><?php echo tpl_getLang('direct_menu_main');  ?></a>
+                                <a rel="nofollow" href="#dokuwiki__content"><?php echo tpl_getLang('direct_content_main'); ?></a><span class="sr-out"> /</span>
+                                <a rel="nofollow" href="#spr__toggle-content"><?php echo tpl_getLang('direct_content_toggle');  ?></a>
                             </span>
                         </p>