privacyguides
/
privacytools.io
Archived
1
0
Fork 0
Code Issues 304 Pull Requests 47 Activity

Added focus style and menu keyboard toggle

This commit is contained in:
CristianAUnisa 2021-06-27 02:21:11 +02:00
parent 91a1111182
commit 81029205cc
4 changed files with 56 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/nav.html
View File

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

15
assets/css/dark.scss
View File

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

27
assets/css/style.scss
View File

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

24
assets/js/main.js
View File

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