From db9d3783af1380f3d6d10dc5ef51a2ef653ec516 Mon Sep 17 00:00:00 2001
From: Michael Telgkamp <michael.telgkamp@mindscreen.de>
Date: Fri, 7 Feb 2020 09:14:13 +0100
Subject: [PATCH] TASK improve accessibility of cards and tableview

To enable keyboard users to show server details the links are added as
HTML `a` Tags not only for <noscript> variant.
This also improves accessibility as screen reader users usually are not
able to perform click events on div elements. The do not even know there
is a click event handler. Click event handlers only work on buttons by
default as browsers forward the keyboard activity on buttons to the
onclick handler.
---
 .../module/server/status/index.tpl.html       | 20 +++++++------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/templates/default/module/server/status/index.tpl.html b/src/templates/default/module/server/status/index.tpl.html
index 38abc58a..7a564127 100644
--- a/src/templates/default/module/server/status/index.tpl.html
+++ b/src/templates/default/module/server/status/index.tpl.html
@@ -5,9 +5,8 @@
 		<div class="row">
 			{% for server in servers_offline %}
 			<div class="col-sm-4 col-md-3">
-				<noscript><a href="{{ server.url_view|raw }}"></noscript>
 				<div class="card text-white bg-danger mb-3" onclick="window.location.href='{{ server.url_view|raw }}'">
-					<div class="card-header">{{ server.label }}<span class="sr-only"> ({{ label_offline }})</span></div>
+					<div class="card-header"><a href="{{ server.url_view|raw }}" class="text-white">{{ server.label }}<span class="sr-only"> ({{ label_offline }})</span></a></div>
 					<div class="card-body">
 						<p class="card-text">
 							{{ label_last_online }}: {{ server.last_online_nice }}<br>
@@ -15,14 +14,12 @@
 						</p>
 					</div>
 				</div>
-				<noscript></a></noscript>
 			</div>
 			{% endfor %}
 			{% for server in servers_warning %}
 			<div class="col-sm-4 col-md-3">
-				<noscript><a href="{{ server.url_view|raw }}"></noscript>
 				<div class="card text-white bg-warning mb-3" onclick="window.location.href='{{ server.url_view|raw }}'">
-					<div class="card-header">{{ server.label }}<span class="sr-only"> ({{ label_warning }})</span></div>
+					<div class="card-header"><a href="{{ server.url_view|raw }}" class="text-white">{{ server.label }}<span class="sr-only"> ({{ label_warning }})</span></a></div>
 					<div class="card-body">
 						<p class="card-text">
 							{{ label_last_online }}: {{ server.last_online_nice }}<br>
@@ -30,14 +27,12 @@
 						</p>
 					</div>
 				</div>
-				<noscript></a></noscript>
 			</div>
 			{% endfor %}
 			{% for server in servers_online %}
 			<div class="col-sm-4 col-md-3">
-				<noscript><a href="{{ server.url_view|raw }}"></noscript>
 				<div class="card text-white bg-success mb-3" onclick="window.location.href='{{ server.url_view|raw }}'">
-					<div class="card-header">{{ server.label }}<span class="sr-only"> ({{ label_online }})</span></div>
+					<div class="card-header"><a href="{{ server.url_view|raw }}" class="text-white">{{ server.label }}<span class="sr-only"> ({{ label_online }})</span></a></div>
 					<div class="card-body">
 						<p class="card-text">
 							{{ label_last_online }}: {{ server.last_online_nice }}<br>
@@ -46,7 +41,6 @@
 						</p>
 					</div>
 				</div>
-				<noscript></a></noscript>
 			</div>
 			{% endfor %}
 			{% if not servers_offline and not servers_warning and not servers_online %}
@@ -72,7 +66,7 @@
 				<tbody>
 					{% for server in servers_offline %}
 						<tr class="bg-danger text-white" onclick="window.location.href='{{ server.url_view|raw }}'">
-							<th class="full">{{ server.label }}<span class="sr-only"> ({{ label_offline }})</span></th>
+							<th class="full"><a href="{{ server.url_view|raw }}" class="text-white">{{ server.label }}<span class="sr-only"> ({{ label_offline }})</span></a></th>
 							<td>{{ server.last_online_nice }}</td>
 							<td>{{ server.last_checked_nice }}</td>
 							<td></td>
@@ -80,7 +74,7 @@
 					{% endfor %}
 					{% for server in servers_warning %}
 						<tr class="bg-warning text-white" onclick="window.location.href='{{ server.url_view|raw }}'">
-							<th class="full">{{ server.label }}<span class="sr-only"> ({{ label_warning }})</span></th>
+							<th class="full"><a href="{{ server.url_view|raw }}" class="text-white">{{ server.label }}<span class="sr-only"> ({{ label_warning }})</span></a></th>
 							<td>{{ server.last_online_nice }}</td>
 							<td>{{ server.last_checked_nice }}</td>
 							<td></td>
@@ -100,7 +94,7 @@
 				<tbody>
 					{% for server in servers_online %}
 						<tr class="bg-success text-white" onclick="window.location.href='{{ server.url_view|raw }}'">
-							<th class="full">{{ server.label }}<span class="sr-only"> ({{ label_online }})</span></th>
+							<th class="full"><a href="{{ server.url_view|raw }}" class="text-white">{{ server.label }}<span class="sr-only"> ({{ label_online }})</span></a></th>
 							<td>{{ server.last_online_nice }}</td>
 							<td>{{ server.last_offline_nice }} {{ server.last_offline_duration_nice }}</td>
 							<td>{{ server.rtime }}s</td>
@@ -130,4 +124,4 @@ setInterval(function() {
 	});
 }, {{ auto_refresh_seconds }} * 1000);
 </script>
-{% endif %}
\ No newline at end of file
+{% endif %}