From 6f940299994be1987979c9e53bffaf74cf6056b2 Mon Sep 17 00:00:00 2001
From: cupcakearmy <nicco.borgioli@gmail.com>
Date: Fri, 6 Sep 2019 22:45:56 +0200
Subject: [PATCH] focus arrow keys for scrolling

---
 liquet/index.php                 | 2 +-
 liquet/js/{lights.js => main.js} | 8 ++++++++
 liquet/singular.php              | 2 +-
 liquet/style.css                 | 4 ++++
 4 files changed, 14 insertions(+), 2 deletions(-)
 rename liquet/js/{lights.js => main.js} (73%)

diff --git a/liquet/index.php b/liquet/index.php
index 0f31e80..6c16714 100644
--- a/liquet/index.php
+++ b/liquet/index.php
@@ -6,7 +6,7 @@ get_header();
 
 $tags = get_tags( [ 'orderby' => 'count', 'order' => 'desc' ] );
 ?>
-    <div id="home">
+    <div id="home" data-focusme>
         <a id="lights" href="javascript:void(0);" onclick="window.toggleLights();">
             <img src="<?= get_template_directory_uri() . '/vendor/icons/contrast.svg' ?>" alt="lights"/>
         </a>
diff --git a/liquet/js/lights.js b/liquet/js/main.js
similarity index 73%
rename from liquet/js/lights.js
rename to liquet/js/main.js
index 5756ba2..c9c24cf 100644
--- a/liquet/js/lights.js
+++ b/liquet/js/main.js
@@ -1,4 +1,5 @@
 ;((window) => {
+    // Lights
     const key = 'nicco.io:blog:lights'
     const CSS = 'body, .wp-block-image img, .thumbnail img {filter: invert(1);} '
     const style = window.document.createElement('style')
@@ -19,4 +20,11 @@
     if (isDark()) off()
 
     window.toggleLights = () => isDark() ? on() : off()
+
+    // Focus scrolling
+    document.addEventListener('DOMContentLoaded', ()=> {
+        const toFocus = document.querySelector('[data-focusme]')
+        toFocus.tabIndex = '1'
+        toFocus.focus({preventScroll: true})
+    })
 })(window)
\ No newline at end of file
diff --git a/liquet/singular.php b/liquet/singular.php
index 8e6fa43..45af635 100644
--- a/liquet/singular.php
+++ b/liquet/singular.php
@@ -43,7 +43,7 @@ $dates = getDates();
                     <div class="alt-font">previous</div>
                 </a>
 
-                <div class="flex item grow" id="main">
+                <div class="flex item grow" id="main" data-focusme>
                     <div class="flex container vertical middle">
 
                         <!-- Title -->
diff --git a/liquet/style.css b/liquet/style.css
index 0299d50..7bafc4c 100644
--- a/liquet/style.css
+++ b/liquet/style.css
@@ -25,6 +25,10 @@ Theme URI: https://github.com/cupcakearmy/liquet
     scroll-behavior: smooth;
 }
 
+*[tabindex]:focus {
+    outline: none;
+}
+
 html, body {
     padding: 0;
     margin: 0;