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 @@ - + Menu Button 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