Merge pull request #250 from Wandmalfarbe/feature/better-accessibility

Better Accessibility (adjusted colors and HTML elements)

webpage/i18n.js

@@ -25,18 +25,40 @@ i18next.init({
 		console.error("error while initializing i18next", error);
 	}
 	initLanguageDropdown(i18next.resolvedLanguage);
-	applyLanguageToHtml();
+	applyLanguageToAnnotatedElements();
+	applyLanguageSpecialCases();
 });
 
-i18next.on("languageChanged", applyLanguageToHtml);
+i18next.on("languageChanged", () => {
+	applyLanguageToAnnotatedElements();
+	applyLanguageSpecialCases();
+});
 
-function applyLanguageToHtml() {
+/**
+ * Searches for all annotated HTML elements (with the attribute `data-i18next`) and writes translated text to the
+ * innerHTML of this element. The translation key is the value of the attribute `data-i18next`.
+ */
+function applyLanguageToAnnotatedElements() {
 	document.querySelectorAll("[data-i18next]")
 		.forEach((element) => {
 			element.innerHTML = i18next.t(element.dataset.i18next);
 		});
 }
 
+/**
+ * There are some translation that are not applied via the general method above (`data-i18next`). This function
+ * applies the translation manually in some special cases.
+ */
+function applyLanguageSpecialCases() {
+	// Translate the `aria-label` attribute of the menu link depending on the menu state
+	const menuLink = document.getElementsByClassName("hamburger")[0];
+	if (menuLink.getAttribute("aria-expanded") === "true") {
+		menuLink.setAttribute("aria-label", i18next.t("menu.aria-hide-menu"));
+	} else {
+		menuLink.setAttribute("aria-label", i18next.t("menu.aria-show-menu"));
+	}
+}
+
 function initLanguageDropdown(language) {
 
 	let languageSelect = document.getElementById("language");

webpage/language/de.js

@@ -2,6 +2,8 @@ let TRANSLATION_DE_DE = {
 	"title": "Wortuhr",
 
 	"menu": {
+		"aria-show-menu": "Menü anzeigen",
+		"aria-hide-menu": "Menü ausblenden",
 		"language": {
 			"label": "Sprache",
 			"de": "🇩🇪 Deutsch",

webpage/language/en.js

@@ -2,6 +2,8 @@ let TRANSLATION_EN_US = {
 	"title": "Word Clock",
 
 	"menu": {
+		"aria-show-menu": "Show Menu",
+		"aria-hide-menu": "Hide Menu",
 		"language": {
 			"label": "Language",
 			"de": "🇩🇪 German",

webpage/language/nl.js

@@ -2,6 +2,8 @@ let TRANSLATION_NL = {
 	"title": "Woordklok",
 
 	"menu": {
+		"aria-show-menu": "Menu tonen",
+		"aria-hide-menu": "Menu verbergen",
 		"language": {
 			"label": "Taal",
 			"de": "🇩🇪 Duits",

webpage/script.js

@@ -6,18 +6,31 @@ const iro = window.iro; // require("@jaames/iro");
 	let menu = document.getElementsByClassName("menu")[0];
 	let menuLink = document.getElementsByClassName("hamburger")[0];
 
-	function toggleAll(element) {
-		let active = "active";
-		element.preventDefault();
-		layout.classList.toggle(active);
-		menu.classList.toggle(active);
-	}
-
-	function handleEvent(element) {
-		toggleAll(element);
+	function toggleMenuEventHandler(event) {
+		// It's a link, so don't activate the link but do some JS instead
+		event.preventDefault();
+
+		const active = "active";
+		const menuIsOpen = menuLink.getAttribute("aria-expanded") === "true";
+
+		if (menuIsOpen) {
+			// Close menu
+			console.log("is open, closing");
+			menuLink.setAttribute("aria-expanded", "false");
+			menuLink.setAttribute("aria-label", i18next.t("menu.aria-show-menu"));
+			layout.classList.remove(active);
+			menu.classList.remove(active);
+		} else {
+			console.log("is closed, opening");
+			// Open menu
+			menuLink.setAttribute("aria-expanded", "true");
+			menuLink.setAttribute("aria-label", i18next.t("menu.aria-hide-menu"));
+			layout.classList.add(active);
+			menu.classList.add(active);
+		}
 	}
 
-	menuLink.addEventListener("click", handleEvent);
+	menuLink.addEventListener("click", toggleMenuEventHandler);
 
 }(this, this.document));
 
@@ -672,12 +685,18 @@ $.ready(function() {
 	/**
 	 * A menu item has been clicked.
 	 */
-	$("a[class~='pure-menu-link']").on("click", function() {
+	$("a[data-navigation]").on("click", function() {
 		var navigation = $(this)[0].dataset.navigation;
 
-		// add/remove active class
+		// Remove classes and attributes
 		$(".pure-menu-link").set("-pure-menu-selected");
+		Array.from(document.getElementsByClassName("pure-menu-link")).forEach(elem => {
+			elem.removeAttribute("aria-current");
+		});
+
+		// Add classes and Attributes
 		$(this).set("+pure-menu-selected");
+		document.getElementsByClassName("pure-menu-selected")[0].setAttribute("aria-current", "page");
 
 		if (navigation === "functions") {
 			setAnimation();

webpage/style.css

@@ -20,8 +20,28 @@ p {
     margin-bottom: 0;
 }
 
-a {
-    text-decoration: none;
+/**
+ * Links
+ */
+a:link {
+    color: rgb(0, 0, 238);
+    text-decoration-color: #bbbbff;
+}
+a:link:hover {
+    text-decoration-color: rgb(0, 0, 238);;
+}
+
+a:visited {
+    color: rgb(78, 33, 134);
+    text-decoration-color: #d0b8ee;
+}
+a:visited:hover {
+    text-decoration-color: rgb(78, 33, 134);
+}
+
+a:active, a:active:hover{
+    color: rgb(238, 0, 0);
+    text-decoration-color: #ffbbbb;
 }
 
 /*
@@ -65,7 +85,7 @@ a {
     margin-right: 0.6em;
     height: 1.9em;
     width: 1.9em;
-    fill: #1f8dd6;
+    fill: #1A7CBD;
 }
 .header svg use {
     height: 1.9em;
@@ -135,25 +155,32 @@ a {
 }
 .menu .pure-menu li a:hover,
 .menu .pure-menu li a:focus {
+    background: #424242;
+}
+.menu .pure-menu li a:active {
     background: #383838;
+    color: white;
 }
 .menu .pure-menu-selected {
-    background: #898989;
+    background: #757575;
 }
 .menu .pure-menu-selected a {
     color: #fff;
 }
 .pure-menu-heading {
-    color: rgba(255, 255, 255, 0.6);
+    color: rgba(255, 255, 255, 0.8);
     font-size: smaller;
 }
 .menu .title {
-    background: #1f8dd6;
+    background: #1A7CBD;
     font-size: 120%;
     color: #fff;
     margin: 0;
     text-transform: none;
 }
+.menu .title:active {
+    color: #d3d3d3;
+}
 
 .menu .language {
     margin: 0.6em 0 0.6em 0.6em;
@@ -374,11 +401,19 @@ input[type=range]::-moz-range-thumb {
 }
 
 .pure-button {
-    background-color: #1f8dd6;
+    background-color: #1A7CBD;
     border-radius: 2em;
     color: white;
 }
 
+.pure-form input[readonly],
+.pure-form select[readonly],
+.pure-form textarea[readonly] {
+    background-color: #E8E8E8;
+    color: #666666;
+    border-color: #ccc;
+}
+
 .pure-control-group-switch label {
     text-align: right;
     display: inline-block;
@@ -390,7 +425,6 @@ input[type=range]::-moz-range-thumb {
     white-space: nowrap;
 }
 
-
 /*
  * Switch
  */