From 7ea551fffb1727434355c8cca6c9bc181171555a Mon Sep 17 00:00:00 2001
From: Niko <niko@nobigtech.es>
Date: Wed, 23 Feb 2022 09:51:05 +0100
Subject: [PATCH] Remove chrome blue highlight and outline + some accessibility
 improvements

* TODO: test more elements in all UI for better accessibility
---
 web/src/app/css/base.css                     | 14 ++++++++++++++
 web/src/app/js/app.js                        |  1 +
 web/src/app/js/templates/home/quiz_item.html |  4 +++-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/web/src/app/css/base.css b/web/src/app/css/base.css
index 7954d8a..a0def68 100644
--- a/web/src/app/css/base.css
+++ b/web/src/app/css/base.css
@@ -86,3 +86,17 @@ body {
 	from { left: -200px; opacity: .5 }
 	to   { left: 0; opacity: 1 }
 }
+
+*[onclick], *[href] {
+	-webkit-tap-highlight-color: transparent;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+*[onclick]:focus,
+*[href]:focus {
+	outline: none !important;
+}
diff --git a/web/src/app/js/app.js b/web/src/app/js/app.js
index a33e6e1..9cea948 100644
--- a/web/src/app/js/app.js
+++ b/web/src/app/js/app.js
@@ -90,6 +90,7 @@ app.template = {
 					tpl = tpl.replaceAll('{.'+k+'}',v);
 			}
 		}
+		tpl = tpl.replaceAll('onEnter="', 'onkeyup="if (event.key === \'Enter\') ');
 		return tpl;
 	},
 }
diff --git a/web/src/app/js/templates/home/quiz_item.html b/web/src/app/js/templates/home/quiz_item.html
index cda9dd9..f5b300d 100644
--- a/web/src/app/js/templates/home/quiz_item.html
+++ b/web/src/app/js/templates/home/quiz_item.html
@@ -1,5 +1,7 @@
 <div class="item button dark rounder" data-id="{._id}"
-	onclick="app.pages.home.loadQuiz('{.id}')">
+	onclick="app.pages.home.loadQuiz('{.id}')"
+	onEnter="app.pages.home.loadQuiz('{.id}')"
+	tabindex="0">
 	<div class="flex">
 		<div><div class="avatar round">
 			<img class="round" src="{.from.avatar.url}"/>