added jump links for different navigation entry points, functionality not 100% existant yet

resources/js/keyboardNavigation.js

 var ctrlInfo = false;       // Flag used for checking if the user was shown the keyboard control information
 var currentResultIndex = 1; // stores index of result which was focused last
 var currentFocusedElement = {      // Object used for storing currently focused element and element type (e.g. anchor tag or result div)
-    element: $("div.result").first(), 
-    type: "result"
+    element: $("div.search-input input"), 
+    type: "input",
+    mode: "results"
 };
 
+$(document).ready(function () {
+    $('[data-index="1"').attr("id", "results-entry");
+    focusElement($("div.search-input input"), "input");
+});
+
+
 $(document).on('keydown', function(e) {
     e = e || window.event;
     // Check for TAB keypress
     if (e.keyCode == '9') {
-        e.preventDefault();
-        tabKeyPressed();
-    // Check for ENTER keypress
+        if(e.shiftKey) {
+            // Add logic for reverse tabbing
+        } else {
+            tabKeyPressed();
+            e.preventDefault();
+        }
+        // Check for ENTER keypress
     } else if (e.keyCode == '13') {
-        e.preventDefault();
         enterKeyPressed();
+        e.preventDefault();
+    // Check for ESC keypress
+    } else if(e.keyCode == '27') {
+        escKeyPressed();
     }
 });
 
 function focusElement(e, type) {
     currentFocusedElement.element = e;
-    currentFocusedElement.type = type;
+    currentFocusedElement.type = (type !== undefined ?  type : currentFocusedElement.type);
     currentFocusedElement.element.focus();
 }
 
@@ -34,22 +48,48 @@ function tabKeyPressed() {
 }
 
 function enterKeyPressed() {
-    if(currentFocusedElement.type === "result") {
-        console.log($(":focus").find("a").first());
+    if(currentFocusedElement.type === "infobox") {
+        focusElement($(currentFocusedElement.element.attr('href')), "result");
+        /* switch(currentFocusedElement.element.attr('id')) {
+            case 'results-nav':
+                console.log(currentFocusedElement.element.attr('id'));
+                break;
+            case 'settings-nav':
+                console.log(currentFocusedElement.element.attr('id'));
+                break;
+            case 'site-nav':
+                console.log(currentFocusedElement.element.attr('id'));
+                break;
+            default:
+                console.log(currentFocusedElement.element.attr('id'));
+        } */
+    } else if(currentFocusedElement.type === "result") {
         focusElement($(":focus").find("a").first(), "link")
-    } else if(currentFocusedElement.type === "link") {
+    } else if(currentFocusedElement.type === "link" || "infobox") {
         window.location = currentFocusedElement.element.attr('href');
+    } else if(currentFocusedElement.type === "input") {
+        $("#searchForm").submit();
+    }
+}
+
+function escKeyPressed() {
+    if(currentFocusedElement.type === "link") {
+        focusElement(currentFocusedElement.element.parents(".result"), "result");
     }
 }
 
 function showInfoBox() {
     $("#keyboard-nav-info").show();
-    focusElement($("#keyboard-nav-info"), "infobox");
+    focusElement($("#keyboard-nav-info a").first(), "infobox");
 }
 
 function focusNextElement() {
-    if(currentFocusedElement.type === "result") {
+    if(currentFocusedElement.type === "infobox") {
+        rotateInfoBoxLinks();
+    } else if(currentFocusedElement.type === "result") {
         focusNextResult();
+    } else if (currentFocusedElement.type === "link") { 
+        focusNextLink();
     } else {
        focusElement($("div.result").not('.ad').first(), "result");
     }
@@ -59,6 +99,26 @@ function focusNextResult() {
    if(currentFocusedElement.element.next().length > 0) {
         focusElement(currentFocusedElement.element.next(), "result");
     } else {
-       focusElement($("div.result").not('.ad').first(), "result");
+       focusElement($("div.search-input input"), "input");
     }
 }
+
+function focusNextLink() {
+    console.log(currentFocusedElement.element.closest('a'));
+}
+
+function rotateInfoBoxLinks() {
+    switch(currentFocusedElement.element.attr('id')) {
+        case 'results-nav':
+            focusElement($('#settings-nav'), 'infobox');
+            break;
+        case 'settings-nav':
+                focusElement($('#site-nav'), 'infobox');
+            break;
+        case 'site-nav':
+                focusElement($('#results-nav'), 'infobox');
+            break;
+        default:
+            focusElement($('#results-nav'), 'infobox');
+    }
+}
\ No newline at end of file

resources/less/metager/pages/resultpage/keyboard-nav.less

@@ -6,7 +6,7 @@
     position: relative;
     margin: 10px 0;
     padding: 10px;
-    width: 100%;
+    width: 70%;
     border: 1px solid #f00;
     background-color: #fff;
 
@@ -23,5 +23,7 @@
 
     ul {
         text-align: left;
+        list-style: none;
+        padding:0 0 0 40px;
     }
 }
\ No newline at end of file

resources/views/layouts/keyboardNavBox.blade.php

 <div id="keyboard-nav-info" tabindex="0">
     <div class="keyboard-nav-info-content">
         <div class="keyboard-nav-info-header">
-            <h5 class="keyboard-nav-info-title">Tastatur-Navigationsanleitung</h5>
+            <h5 class="keyboard-nav-info-title">Tastatur-Navigation</h5>
             <div class="keyboard-nav-info-body">
-                <p>Die Navigation durch die Ergebnisseite ist hierarchisch aufgebaut.</p>
                 <ul>
-                    <li>TAB-Taste: Innerhalb der aktuellen Ebene zum nächsten Element springen.</li>
-                    <li>Enter-Taste: Aktuelles Element auswählen und eine Stufe tiefer gehen.</li>
-                    <li>Escape-Taste: Eine Ebene nach oben springen.</li>
+                    <li><a href="#results-entry" id="results-nav">Zu den Ergebnissen springen</a></li>
+                    <li><a href="#settings-entry" id="settings-nav">Zu den Sucheinstellungen springen</a></li>
+                    <li><a href="#nav-entry" id="site-nav">Zu der Seitennavigation springen</a></li>
                 <ul>
             </div>
         </div>