keyboard shortcut for quicklinks on startpage

metager/app/Http/Controllers/StartpageController.php

@@ -55,6 +55,7 @@ class StartpageController extends Controller
             ->with('autocomplete', $autocomplete)
             ->with('pluginmodal', $request->input('plugin-modal', 'off'))
             ->with('css', [mix('css/themes/startpage/light.css')])
+            ->with('js', [mix('js/startpage/app.js')])
             ->with('darkcss', [mix('css/themes/startpage/dark.css')]);
     }
 

metager/resources/js/startpage/app.js

+// Register Keyboard listener for quicklinks on startpage
+(() => {
+    let sidebar_toggle = document.querySelector("#sidebarToggle");
+    document.addEventListener("keyup", e => {
+        if (e.key == "Escape") {
+            // Disable sidebar if opened
+            if (sidebar_toggle.checked) {
+                sidebar_toggle.checked = false;
+            }
+            let skip_links_container = document.querySelector(".skiplinks");
+            if (skip_links_container.contains(document.activeElement)) {
+                document.activeElement.blur();
+            } else {
+                document.querySelector(".skiplinks > a").focus();
+            }
+        }
+    })
+})();
\ No newline at end of file

metager/resources/less/metager/general/base.less

@@ -175,7 +175,7 @@ i.fa {
     margin-bottom: 25px;
   }
 
-  > a.logo {
+  >a.logo {
     .logo;
     display: block;
     width: fit-content;
@@ -187,12 +187,12 @@ i.fa {
       font-size: 2em;
     }
 
-    > img {
+    >img {
       width: 4.6em;
     }
   }
 
-  > a.lang {
+  >a.lang {
     display: block;
     height: min-content;
     align-self: flex-end;
@@ -203,7 +203,7 @@ i.fa {
     bottom: 2px;
     font-weight: normal;
 
-    & > span {
+    &>span {
       font-size: 1rem;
       display: block;
       padding: 0.3rem;
@@ -232,7 +232,7 @@ i.fa {
       line-height: 1;
       padding-bottom: 0;
 
-      > img {
+      >img {
         width: 4.8em;
       }
     }
@@ -248,7 +248,7 @@ i.fa {
     color: @metager-orange;
     font-weight: bold;
 
-    & > span {
+    &>span {
       font-size: 0.7rem;
       display: block;
       padding: 0.1rem;
@@ -259,6 +259,7 @@ i.fa {
 /* Links that look like text */
 
 .mutelink {
+
   &,
   &:hover,
   &:active,
@@ -268,16 +269,6 @@ i.fa {
   }
 }
 
-/* Summary Elements */
-.skip-link {
-  position: absolute;
-  left: -100%;
-
-  &:focus {
-    left: 0;
-  }
-}
-
 summary {
   cursor: pointer;
 
@@ -346,6 +337,7 @@ summary {
   }
 
   &.hide-tooltip-on-resultpage:after {
+
     /* Auf kleinen Bildschirmen wird der Tooltip nicht angezeigt */
     @media (max-width: 700px) {
       display: none;
@@ -370,7 +362,7 @@ summary {
 /* For Containers that are supposed to split their content up into two columns */
 
 .two-col {
-  > * {
+  >* {
     width: 50%;
     margin: 0;
     padding: 0;
@@ -478,7 +470,7 @@ label a {
 
 // Copy button
 .copyLink {
-  > button.success {
+  >button.success {
     background-color: green;
     color: white;
 
@@ -489,7 +481,7 @@ label a {
     }
   }
 
-  > button.failure {
+  >button.failure {
     background-color: #820000;
     color: white;
 
@@ -524,4 +516,4 @@ label a {
 
 main {
   row-gap: 8px;
-}
+}
\ No newline at end of file

metager/resources/less/metager/pages/resultpage/skiplinks.less

 .skiplinks {
   position: fixed;
   z-index: 9;
-  background-color: inherit;
+  background-color: @background-color;
   display: grid;
   padding: 1rem;
   gap: 0.5rem;

metager/resources/views/index.blade.php

 @extends('layouts.staticPages', ['page' => 'startpage'])
-@section('title', $title )
+@section('title', $title)
 
 @section('content')
-  <a href="#eingabe" id="skipto-search" class="skip-link">@lang('index.skip.search')</a>
-  <a href="#sidebarToggle" id="skipto-navigation" class="skip-link">@lang('index.skip.navigation')</a>
-  <a href="#foki-switcher" id="skipto-fokus" class="skip-link">@lang('index.skip.fokus')</a>
+  <div class="skiplinks">
+    <div>@lang('resultPage.skiplinks.heading')</div>
+    <a href="#eingabe" id="skipto-search" class="skip-link">@lang('index.skip.search')</a>
+    <a href="#sidebarToggle" id="skipto-navigation" class="skip-link">@lang('index.skip.navigation')</a>
+    <a href="#foki-switcher" id="skipto-fokus" class="skip-link">@lang('index.skip.fokus')</a>
+    <div>@lang('resultPage.skiplinks.return')</div>
+  </div>
   <div id="search-content">
     <ul id="foki-switcher">
     @foreach(app()->make(\App\Searchengines::class)->available_foki as $fokus)
@@ -29,7 +33,7 @@
         </h1>
         @include('parts.searchbar', ['class' => 'startpage-searchbar'])
         @if(Request::filled('key'))
-        <input type="hidden" name="key" value="{{ Request::input('key','') }}" form="searchForm">
+        <input type="hidden" name="key" value="{{ Request::input('key', '') }}" form="searchForm">
         @endif
         @if(app(\App\SearchSettings::class)->self_advertisements)
         <div id="startpage-quicklinks">
@@ -56,9 +60,6 @@
       </div>
       @endif
     </div>
-    <a href="#eingabe" class="skip-link">@lang('index.skip.search')</a>
-    <a href="#sidebarToggle" class="skip-link">@lang('index.skip.navigation')</a>
-    <a href="#foki-switcher" class="skip-link">@lang('index.skip.fokus')</a>
     <div id="language">
       <a href="{{ route('lang-selector') }}">{{ LaravelLocalization::getCurrentLocaleNative() }}</a>
     </div>

metager/webpack.mix.js

@@ -117,6 +117,7 @@ mix
     "public/css/widget/widget.css"
   )
   .less("resources/less/metager/pages/privacy.less", "public/css/privacy.css")
+  .js(["resources/js/startpage/app.js"], "public/js/startpage/app.js")
   .js(["resources/js/suggest.js"], "public/js/suggest.js")
   .js(["resources/js/scriptSettings.js"], "public/js/scriptSettings.js")
   .js(["resources/js/imagesearch.js"], "public/js/imagesearch.js")