Merge branch '883-make-result-page-keyboard-maneuverable' into 'development'

Resolve "Make result page keyboard maneuverable"

Closes #883

See merge request !1447

.gitignore

@@ -8,6 +8,7 @@ Homestead.yaml
 .orig
 .vscode
 langfiles.zip
+npm-debug.log
 # The Files created by Webpack in the build process
 /public/**/*.css
 !/public/fonts/arimo/stylesheet.css
@@ -19,4 +20,4 @@ langfiles.zip
 /.buildpath
 /.project
 
-composer.lock
+composer.lock
\ No newline at end of file

package.json

@@ -10,9 +10,9 @@
     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "devDependencies": {
-    "cross-env": "^5.1",
-    "laravel-mix": "^2.0",
-    "less": "^3.8.1",
+    "cross-env": "^5.2.0",
+    "laravel-mix": "^2.1.14",
+    "less": "^3.9.0",
     "less-loader": "^4.1.0"
   }
 }

resources/js/keyboardNavigation.js

+/**
+ * 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
+    $('.result, .ad').first().attr("id", "results-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();
+        $('a', this)
+    }
+}); 
+
+/**
+ * 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') {
+        focusNavBox();
+        e.preventDefault();
+        ctrlInfo = true;
+    } else if(e.keyCode == '27') {
+        escKeyPressed();
+    }
+});
+
+/**
+ * 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 focusFoki() {
+    $('#foki a').first().focus();
+}
+
+/**
+ * Focuses the search settings
+ */
+function focusSettings() {
+    $('#settings a').focus();
+}
+
+/**
+ * Focuses the first <tag> of the sidebar
+ */
+function focusNavigation() {
+    $('#sidebarToggle').prop('checked', true);
+    $('.sidebar-list a').first().focus();
+}
\ No newline at end of file

resources/js/utility.js

 $(document).ready(function () {
   $('.js-only').removeClass('js-only');
   $('.no-js').addClass('hide');
-});
+});
\ No newline at end of file

resources/lang/de/keyboard-navigation.php

+<?php
+
+return [
+    'keyboard-nav-title' => 'Tastatur-Navigation',
+    'focus-results'      => 'Zu den Ergebnissen springen',
+    'focus-foki'         => 'Zur Fokus-Auswahl springen',
+    'focus-settings'     => 'Zu den Sucheinstellungen springen',
+    'focus-navigation'   => 'Zu der Seitennavigation springen',
+    'keyboard-nav-hint'  => 'Tipp: Drücken Sie die Escape-Taste um in diese Box zurückzugelangen und zum Schließen aller ausklappbaren Menüs.'
+];

resources/lang/en/keyboard-navigation.php

+<?php
+
+return [
+    'keyboard-nav-title' => 'Keyboard navigation',
+    'focus-results'      => 'Jump to results',
+    'focus-foki'         => 'Jump to focus selection',
+    'focus-settings'     => 'Jump to search settings',
+    'focus-navigation'   => 'Jump to page navigation',
+    'keyboard-nav-hint'  => 'Hint: Press the escape key to return to this box and to collapse all menus.'
+];
\ No newline at end of file

resources/less/metager/pages/resultpage.less

@@ -2,4 +2,5 @@
 @import "./resultpage/result.less";
 @import "./resultpage/product.less";
 @import "./resultpage/quicktips.less";
-@import "./resultpage/result-saver.less";
+@import "./resultpage/result-saver.less";
\ No newline at end of file
+@import "./resultpage/keyboard-nav.less";
\ No newline at end of file

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

+/* Keyboard control styles*/
+
+#keyboard-nav-info {
+    display: none;
+    position: relative;
+    margin: 10px 0;
+    padding: 10px;
+    width: 70%;
+    border: 1px solid #f00;
+    background-color: #fff;
+
+    .keyboard-nav-info-header {
+        text-align: center;
+        h5 {
+            font-weight: bold;
+        }
+    }
+
+    ul {
+        text-align: left;
+        list-style: none;
+        padding:0 0 0 40px;
+    }
+}
\ No newline at end of file

resources/less/metager/pages/resultpage/result.less

@@ -233,6 +233,7 @@
             max-height: 150px;
             overflow: initial;
             opacity: 1;
+            display: initial;
         }
     }
 
@@ -262,6 +263,7 @@
             width: 100%;
             text-align: right;
             overflow: hidden;
+            display: none;
             max-height: 0px;
             transition: all 1s;
             -webkit-transition: all 1s;

resources/less/metager/parts/sidebar.less

@@ -47,7 +47,7 @@
                 line-height: 20px;
                 display: inline-block;
                 width: 100%;
-                &:hover {
+                &:hover, &:focus {
                     color: red;
                 }
             }
@@ -89,7 +89,7 @@
         display: inline-block;
         width: 100%;
         color: black;
-        &:hover {
+        &:hover, &:focus {
             color: red;
         }
     }

resources/views/layouts/ad.blade.php

@@ -11,7 +11,7 @@
 				<a class="ad-label" href="{{ $ad->gefVonLink }}" target="_blank" rel="noopener">{!! $ad->gefVon !!}</a>
 			</div>
 			<div class="result-subheadline">
-				<a class="result-link" href="{{ $ad->link }}" target="{{ $metager->getNewtab() }}">
+				<a class="result-link" href="{{ $ad->link }}" target="{{ $metager->getNewtab() }}" tabindex="-1">
 					<span class="advertisement-mark">Anzeige</span>
 					<span>{{ $ad->anzeigeLink }}</span>
 				</a>

resources/views/layouts/keyboardNavBox.blade.php

+<div id="keyboard-nav-info">
+    <div class="keyboard-nav-info-content">
+        <div class="keyboard-nav-info-header">
+            <h5 class="keyboard-nav-info-title">{{ trans('keyboard-navigation.keyboard-nav-title') }}</h5>
+            <div class="keyboard-nav-info-body">
+                <ul>
+                    <li><a href="#" onclick="focusResults()" tabindex="1">{{ trans('keyboard-navigation.focus-results') }}</a></li>
+                    <li><a href="#" onclick="focusFoki()" tabindex="2">{{ trans('keyboard-navigation.focus-foki') }}</a></li>
+                    <li><a href="#" onclick="focusSettings()" tabindex="2">{{ trans('keyboard-navigation.focus-settings') }}</a></li>
+                    <li><a href="#" onclick="focusNavigation()" tabindex="3">{{ trans('keyboard-navigation.focus-navigation') }}</a></li>
+                </ul>
+                <p>{{ trans('keyboard-navigation.keyboard-nav-hint') }}</p>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

resources/views/layouts/researchandtabs.blade.php

@@ -3,7 +3,7 @@
 	<div id="research-bar-container">
 		<div id="research-bar">
 			<div id="header-logo">
-				<a class="screen-large" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
+				<a class="screen-large" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}" tabindex="4">
 					<h1>MetaGer</h1>
 				</a>
 				<a class="screen-small" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
@@ -31,6 +31,7 @@
 		@yield('results')
 	</div>
 	<div id="additions-container">
+		@include('layouts.keyboardNavBox')
 		@if( $metager->showQuicktips() )
 			<div id="quicktips">
 				@include('quicktips', ['quicktips', $quicktips])

resources/views/layouts/result.blade.php

-<div class="result" data-count="{{ $result->hash }}">
+<div class="result" data-count="{{ $result->hash }}" data-index="{{$index}}">
 	<div class="result-header">
 		<div class="result-headline">
 			<h2 class="result-title" title="{{ $result->titel }}">
@@ -9,10 +9,10 @@
 					{!! $result->titel !!}
 				</a>
 			</h2>
-			<a class="result-hoster" href="{{ $result->gefVonLink }}" target="{{ $metager->getNewtab() }}" rel="noopener">{{ trans('result.gefVon') . " " . $result->gefVon }}</a>
+			<a class="result-hoster" href="{{ $result->gefVonLink }}" target="{{ $metager->getNewtab() }}" rel="noopener" tabindex="-1">{{ trans('result.gefVon') . " " . $result->gefVon }} </a>
 		</div>
 		<div class="result-subheadline">
-			<a class="result-link" href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" title="{{ $result->anzeigeLink }}" rel="noopener">
+			<a class="result-link" href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" title="{{ $result->anzeigeLink }}" rel="noopener" tabindex="-1">
 				{{ $result->anzeigeLink }}
 			</a>
 			@if( isset($result->partnershop) && $result->partnershop === TRUE)
@@ -58,10 +58,10 @@
 		<a class="result-open-proxy" onmouseover="$(this).popover('show');" onmouseout="$(this).popover('hide');" data-toggle="popover" data-placement="auto right" data-container="body" data-content="@lang('result.proxytext')" href="{{ $result->proxyLink }}" target="{{ $metager->getNewtab() }}" rel="noopener">
 			{!! trans('result.options.5') !!}
 		</a>
-		<label class="open-result-options navigation-element" for="result-toggle-{{$result->hash}}">
+		<label class="open-result-options navigation-element" for="result-toggle-{{$result->hash}}" tabindex='0'>
 			{{ trans('result.options.more')}}
 		</label>
-		<label class="close-result-options navigation-element" for="result-toggle-{{$result->hash}}">
+		<label class="close-result-options navigation-element" for="result-toggle-{{$result->hash}}" tabindex='0'>
 			{{ trans('result.options.less')}}
 		</label>
 	</div>

resources/views/parts/filter.blade.php

 	<div id="options">
 		<div id="toggle-box">
+			<div id="settings">
+				<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('settings', ["fokus" => $metager->getFokus(), "url" => url()->full()])) }}">
+					<i class="fas fa-cogs"></i>
+					@if($metager->getSavedSettingCount() > 0) <span class="badge badge-primary">{{ $metager->getSavedSettingCount() }}@endif</span>
+					@lang('metaGer.settings')&hellip;
+				</a>
+			</div>
 			<div id="filter-toggle">
 				@if(sizeof($metager->getAvailableParameterFilter()) > 0)
 				<div class="option-toggle">
-					<label class="navigation-element" for="options-toggle">
+					<label class="navigation-element" for="options-toggle" tabindex="0">
 						<i class="fas fa-filter"></i> Filter&hellip;
 					</label>
 				</div>
@@ -14,13 +21,6 @@
 				</div>
 				@endif
 			</div>
-			<div id="settings">
-				<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('settings', ["fokus" => $metager->getFokus(), "url" => url()->full()])) }}">
-					<i class="fas fa-cogs"></i>
-					@if($metager->getSavedSettingCount() > 0) <span class="badge badge-primary">{{ $metager->getSavedSettingCount() }}@endif</span>
-					@lang('metaGer.settings')&hellip;
-				</a>
-			</div>
 			@if($metager->getTotalResultCount() > 0)
 			<div id="result-count">
 				<nobr>~ {{$metager->getTotalResultCount()}}</nobr> {{ trans('metaGer.results') }}

resources/views/parts/searchbar.blade.php

@@ -3,18 +3,18 @@
 		<div class="searchbar {{$class ?? ''}}">
 			<div class="search-input-submit">
 				<div id="search-key">
-					<a id="key-link" @if(isset($apiAuthorized) && $apiAuthorized)class="authorized" @else class="unauthorized"@endif href="{{ action('KeyController@index', ['redirUrl' => url()->full() ]) }}" data-tooltip="{{ trans ('index.key.tooltip') }}">
+					<a id="key-link" @if(isset($apiAuthorized) && $apiAuthorized)class="authorized" @else class="unauthorized"@endif href="{{ action('KeyController@index', ['redirUrl' => url()->full() ]) }}" data-tooltip="{{ trans ('index.key.tooltip') }}" tabindex="0">
 						<i class="fa fa-key" aria-hidden="true"></i>
 					</a>
 				</div>
 				<div class="search-input">
-					<input type="search" name="eingabe" value="@if(isset($eingabe)){{$eingabe}}@endif" required=""  @if(\Request::is('/')) autofocus @endif autocomplete="off" class="form-control" placeholder="{{ trans('index.placeholder') }}" tabindex="2">
-					<button id="search-delete-btn" type="button">
+					<input type="search" name="eingabe" value="@if(isset($eingabe)){{$eingabe}}@endif" required=""  @if(\Request::is('/')) autofocus @endif autocomplete="off" class="form-control" placeholder="{{ trans('index.placeholder') }}" tabindex="0">
+					<button id="search-delete-btn" type="button" tabindex="-1">
 						&#xd7;
 					</button>
 				</div>
 				<div class="search-submit" id="submit-inputgroup">
-					<button type="submit">
+					<button type="submit" tabindex="-1">
 						<i class="fa fa-search" aria-hidden="true"></i>
 					</button>
 				</div>

resources/views/parts/sidebar.blade.php

@@ -52,7 +52,7 @@
     <hr>
     <li class="metager-dropdown">
       <input id="contactToggle" class="sidebarCheckbox" type="checkbox">
-      <label for="contactToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationKontakt" >
+      <label for="contactToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationKontakt" tabindex=0>
         <i class="fa fa-comments" aria-hidden="true"></i>
         <span>{{ trans('sidebar.nav18') }}</span>
         <span class="caret"></span>
@@ -74,7 +74,7 @@
     </li>
     <li class="metager-dropdown">
       <input id="servicesToggle" class="sidebarCheckbox" type="checkbox">
-        <label for="servicesToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" >
+        <label for="servicesToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" tabindex=0>
           <i class="fa fa-wrench" aria-hidden="true"></i>
           <span>{{ trans('sidebar.nav15') }}</span>
           <span class="caret"></span>
@@ -113,7 +113,7 @@
     </li>
     <li class="metager-dropdown">
       <input id="languagesToggle" class="sidebarCheckbox" type="checkbox">
-      <label for="languagesToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationSprache" >
+      <label for="languagesToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationSprache" tabindex=0>
         <i class="fa fa-globe" aria-hidden="true"></i>
         <span>{{ trans('sidebar.nav19') }} ({{ LaravelLocalization::getSupportedLocales()[LaravelLocalization::getCurrentLocale()]['native'] }})</span>
         <span class="caret"></span>

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

@@ -60,7 +60,8 @@ mix
     [
       "resources/js/scriptResultPage.js",
       "resources/js/result-saver.js",
-      "resources/js/translations.js"
+      "resources/js/translations.js",
+      "resources/js/keyboardNavigation.js"
     ],
     "public/js/scriptResultPage.js"
   )