From 81029205cc4fe439193e6cbad79e9efd4e71c7d1 Mon Sep 17 00:00:00 2001
From: CristianAUnisa <c.alfano35@studenti.unisa.it>
Date: Sun, 27 Jun 2021 02:21:11 +0200
Subject: [PATCH] Added focus style and menu keyboard toggle

---
 _includes/nav.html    |  2 +-
 assets/css/dark.scss  | 15 +++++++++++++++
 assets/css/style.scss | 27 +++++++++++++++++++++++++++
 assets/js/main.js     | 24 +++++++++++++-----------
 4 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/_includes/nav.html b/_includes/nav.html
index 9a121255..2336875a 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -6,7 +6,7 @@
       </a>
     </div>
     <input type="checkbox" id="nav-toggle" checked />
-    <label for="nav-toggle" id="nav-toggle-label" class="fas fa-bars fa-lg">
+    <label for="nav-toggle" id="nav-toggle-label" tabindex="0" class="fas fa-bars fa-lg">
       <span hidden>Menu Button</span>
     </label>
 
diff --git a/assets/css/dark.scss b/assets/css/dark.scss
index 2ad5b036..09a30c62 100644
--- a/assets/css/dark.scss
+++ b/assets/css/dark.scss
@@ -213,6 +213,21 @@ div.alert.alert-success a {
   content: "\f185";
 }
 
+*:focus:not(.dropdown-item) {
+  outline: 2px solid yellow;
+  outline-offset: 0.1em;
+}
+
+button:focus {
+  outline: 2px solid yellow !important;
+  outline-offset: 0.1em !important;
+}
+
+div.alert.alert-warning a {
+  outline: 2px solid #000289 !important;
+  outline-offset: 0.1em !important;
+}
+
 .twitter { background: desaturate($twitter, 25%); }
 .mastodon { background: desaturate($mastodon, 25%); }
 .facebook { background: desaturate($facebook, 25%); }
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 802aaa62..dc1b539c 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -479,3 +479,30 @@ input#nav-toggle,
 [data-toggle="tooltip"]:hover:after {
   opacity: .9;
 }
+
+// Focus style
+
+nav *:focus:not(.dropdown-item) {
+  outline: 2px solid yellow;
+  outline-offset: 0.1em;
+}
+
+footer div > a:focus {
+  outline: 4px solid #0100ff !important;
+  z-index: 3000;
+}
+
+*:focus:not(.dropdown-item) {
+  outline: 2px solid #0100ff;
+  outline-offset: 0.1em;
+}
+
+button:focus {
+  outline: 2px solid #0100ff !important;
+  outline-offset: 0.1em !important;
+}
+
+div.alert.alert-warning a {
+  outline: 2px solid #0100ff !important;
+  outline-offset: 0.1em !important;
+}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index 10b884aa..33caf0bb 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -36,7 +36,18 @@ function navSectionsClose(event) {
 // Dark/Light color scheme switch button
 document.querySelector("#nav-switch-theme").style.display = "inline";
 document.querySelector("#nav-switch-theme").addEventListener("click", changeColorScheme);
-document.querySelector("#nav-switch-theme").addEventListener("keydown", handleBtnKeyDown);
+document.querySelector("#nav-switch-theme").addEventListener("keydown", e => {
+  if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
+    e.preventDefault();
+    changeColorScheme();
+  }
+});
+document.querySelector("#nav-toggle-label").addEventListener("keydown", e => {
+  if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
+    e.preventDefault();
+    document.getElementById('nav-toggle').checked = !document.getElementById('nav-toggle').checked;
+  }
+});
 
 function changeColorScheme() {
   // Use whatever users want
@@ -91,13 +102,4 @@ if (
     localStorage.getItem("colorScheme") === "light")
 ) {
   fixThemeImages();
-}
-
-function handleBtnKeyDown(event) {
-  // Check to see if space or enter were pressed
-  if (event.key === " " || event.key === "Enter" || event.key === "Spacebar") { // "Spacebar" for IE11 support
-    // Prevent the default action to stop scrolling when space is pressed
-    event.preventDefault();
-    changeColorScheme();
-  }
-}
+}
\ No newline at end of file