Added focus style and menu keyboard toggle

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

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%); }

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;
+}

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();
-  }
-}