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 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 tag of the first result
+ */
function focusResults() {
$('#results-entry .result-title a').focus();
}
+/**
+ * Focuses the first tag of the focus options
+ */
function focusSettings() {
$('#foki a').first().focus();
}
+/**
+ * Focuses the first 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;