diff --git a/resources/js/keyboardNavigation.js b/resources/js/keyboardNavigation.js index e4366bf4432ebc0a9f3ada6ee309d2faabd2e45c..938bddd0065156ab8b220e70cb033f824e797442 100644 --- a/resources/js/keyboardNavigation.js +++ b/resources/js/keyboardNavigation.js @@ -1,21 +1,32 @@ -var ctrlInfo = false; // Flag used for checking if the user was shown the keyboard control information +/** + * Flag ctrlInfo is used for initial display of the navigation box + */ +var ctrlInfo = false; $(document).ready(function () { + // Add entry point for tabbing to the first result $('[data-index="1"').attr("id", "results-entry"); - $('#foki a').first().attr("id", "settings-entry"); + // Initially focus the searchbar $('div.search-input input').focus(); }); +/** + * Simulate a click on enter keypress when focused on labels + */ $('label').on('keydown', function(e) { if(e.keyCode == '13') { $(this).click(); } }); +/** + * Handles tab keypress and escape keypress + */ $(document).on('keydown', function(e) { e = e || window.event; + // On first tab keypress there is special behaviour and the ctrlInfo flag is set if(!ctrlInfo && e.keyCode == '9') { - focusInfoBox(); + focusNavBox(); e.preventDefault(); ctrlInfo = true; } else if(e.keyCode == '27') { @@ -23,24 +34,39 @@ $(document).on('keydown', function(e) { } }); -function escKeyPressed() { - focusInfoBox(); - $('input[type="checkbox"]').removeAttr('checked'); -} - -function focusInfoBox() { +/** + * Shows the navigation box and focuses the first <a> tag + */ +function focusNavBox() { $('#keyboard-nav-info').show(); $('#keyboard-nav-info a').first().focus(); } +/** + * Focuses the navigation box and unchecks all checkboxes + */ +function escKeyPressed() { + focusNavBox(); + $('input[type="checkbox"]').removeAttr('checked'); +} + +/** + * Focuses the first <a> tag of the first result + */ function focusResults() { $('#results-entry .result-title a').focus(); } +/** + * Focuses the first <a> tag of the focus options + */ function focusSettings() { $('#foki a').first().focus(); } +/** + * Focuses the first <tag> of the sidebar + */ function focusNavigation() { $('#sidebarToggle').prop('checked', true); $('.sidebar-list a').first().focus(); diff --git a/resources/less/metager/pages/resultpage/keyboard-nav.less b/resources/less/metager/pages/resultpage/keyboard-nav.less index d0a348bc6d0f00a2a62fd78b43ffc9b923b3a867..b3819b5f2d8f1c70315e0a73bc5c8ead8d370a80 100644 --- a/resources/less/metager/pages/resultpage/keyboard-nav.less +++ b/resources/less/metager/pages/resultpage/keyboard-nav.less @@ -1,6 +1,5 @@ /* Keyboard control styles*/ - #keyboard-nav-info { display: none; position: relative; @@ -10,11 +9,7 @@ border: 1px solid #f00; background-color: #fff; - &:focus { - border: 10px solid yellow; - } - - .keyboard-nav-info-header{ + .keyboard-nav-info-header { text-align: center; h5 { font-weight: bold;