focus arrow keys for scrolling

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>

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)

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 -->

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;