outsourced javascript, made result tabbing a bit more dynamic

resources/js/keyboardNavigation.js

+var ctrlInfo = false;       // Flag used for checking if the user was shown the keyboard control information
+var currentResultIndex = 1; // stores result which was focused last
+
+document.onkeydown = checkKey;
+function checkKey(e) {
+    e = e || window.event;
+// Check for TAB keypress
+    if (e.keyCode == '9') {
+        e.preventDefault();
+        tabKeyPressed($(document.activeElement));
+    }
+}
+
+function tabKeyPressed() {
+    if(!ctrlInfo) {
+        ctrlInfo = true;
+        showInfoBox();
+    } else {
+        focusNextElement($(":focus"));
+    }
+}
+
+function showInfoBox() {
+    $("#keyboard-ctrl-info").show();
+    $("#keyboard-ctrl-info").focus();
+}
+
+function focusNextElement(currentFocus) {
+    if(currentFocus.hasClass("result")) {
+        focusNextResult(currentFocus);
+    } else if(false) {
+
+    } else {
+        focusResult();
+    }
+}
+function focusResult() {
+    $("div[data-index='"+ currentResultIndex + "'").focus();
+    n = $(".result").length;
+    currentResultIndex = 1 + currentResultIndex % n;
+    console.log(currentResultIndex + " - " + n);
+}
+
+function focusNextResult(currentFocus) {
+   if(!currentFocus.next().focus()) {
+        alert("test");
+    }
+    console.log(currentFocus);
+}
\ No newline at end of file

resources/js/utility.js

 $(document).ready(function () {
   $('.js-only').removeClass('js-only');
   $('.no-js').addClass('hide');
-});
-
-// Flag used for checking if the user was shown the keyboard control information
-ctrlInfo = false;
-currentResultIndex = 1;
-
-document.onkeydown = checkKey;
-function checkKey(e) {
-
-    e = e || window.event;
-
-    if (e.keyCode == '9') {
-        e.preventDefault();
-        guideThroughMenu($(document.activeElement));
-    }
-
-}
-
-function guideThroughMenu(focused) {
-    if(!ctrlInfo) {
-        ctrlInfo = true;
-        showInfoBox();
-    } else {
-        focusNextResult();
-    }
-}
-
-function showInfoBox() {
-    $("#keyboard-ctrl-info").show();
-    $("#keyboard-ctrl-info").focus();
-}
-
-function focusNextResult() {
-    $("div[data-index='"+ currentResultIndex + "'").focus();
-    n = $(".result").length;
-    currentResultIndex = 1 + currentResultIndex % n;
-    console.log(currentResultIndex + " - " + n);
-}
\ No newline at end of file
+});
\ No newline at end of file

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

@@ -16,5 +16,12 @@
 
     .keyboard-ctrl-info-header{
         text-align: center;
+        h5 {
+            font-weight: bold;
+        }
+    }
+
+    ul {
+        text-align: left;
     }
 }
\ No newline at end of file

resources/views/layouts/ad.blade.php

 @if(isset($ad)  && !$apiAuthorized)
-	<div class="result ad">
+	<div class="result ad" tabindex="0">
 		</span>
 		<div class="result-header">
 			<div class="result-headline">

resources/views/layouts/keyboardNavBox.blade.php

-<!-- Modal HTML 
-<div id="myModal" class="modal fade" tabindex="-1">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">Confirmation</h5>
-                    <button type="button" class="close" data-dismiss="modal">&times;</button>
-                </div>
-                <div class="modal-body">
-                    <p>Do you want to save changes to this document before closing?</p>
-                    <p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-                    <button type="button" class="btn btn-primary">Save changes</button>
-                </div>
+<div id="keyboard-ctrl-info" tabindex="0">
+    <div class="keyboard-ctrl-info-content">
+        <div class="keyboard-ctrl-info-header">
+            <h5 class="keyboard-ctrl-info-title">Tastatur-Navigationsanleitung</h5>
+            <div class="keyboard-ctrl-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>
+                <ul>
             </div>
         </div>
     </div>
-
-    -->
-    <div id="keyboard-ctrl-info" tabindex="0">
-        <div class="keyboard-ctrl-info-content">
-            <div class="keyboard-ctrl-info-header">
-                <h5 class="keyboard-ctrl-info-title">Tastatur-Navigationsanleitung</h5>
-                <div class="keyboard-ctrl-info-body">
-                </div>
-            </div>
-        </div>
-    </div>
\ No newline at end of file
+</div>
\ No newline at end of file

resources/views/layouts/result.blade.php

-<div class="result" data-count="{{ $result->hash }}">
+<div class="result" data-count="{{ $result->hash }}" data-index="{{$index}}" tabindex="0">
 	<div class="result-header">
 		<div class="result-headline">
 			<h2 class="result-title" title="{{ $result->titel }}">

resources/views/resultpages/results.blade.php

@@ -18,7 +18,7 @@
 				@include('layouts.ad', ['ad' => $metager->popAd()])
 			@endif
 		@endif
-		@include('layouts.result', ['result' => $result])
+		@include('layouts.result', ['result' => $result, 'index' => $index + 1])
 	@endforeach
 	@include('parts.pager')
 </div>

webpack.mix.js

@@ -68,7 +68,7 @@ mix
   .babel("resources/js/bitpay.js", "public/js/bitpay.js")
   // utility
   .babel(
-    ["resources/js/utility.js", "resources/js/translations.js"],
+    ["resources/js/utility.js", "resources/js/keyboardNavigation.js", "resources/js/translations.js"],
     "public/js/utility.js"
   )
   .babel("resources/js/widgets.js", "public/js/widgets.js")