From 644ab3e660aa1cf0fce21ef8300997b3c85ef049 Mon Sep 17 00:00:00 2001
From: Cassidy Dingenskirchen <admin@15318.de>
Date: Sun, 22 Oct 2023 18:32:41 +0200
Subject: [PATCH] departure board: aria-label and contrast fix

---
 sass/src/common/local.scss          | 59 ++++++++++++++++-------------
 templates/_departures_hafas.html.ep |  2 +-
 templates/_departures_iris.html.ep  |  2 +-
 templates/departures.html.ep        | 14 ++++---
 4 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss
index d5e4598..81534dc 100644
--- a/sass/src/common/local.scss
+++ b/sass/src/common/local.scss
@@ -68,6 +68,7 @@ ul.suggestions {
 	}
 }
 
+
 .departures li {
 	transition: background .3s;
 	display: grid;
@@ -89,35 +90,17 @@ ul.suggestions {
 		  font-style: normal;
 		}
 	}
-}
-
-.departures.connections {
-	li {
-		grid-template-columns: 15ch 10ch 1fr;
-	}
-	.connect-platform-wrapper {
-		text-align: center;
-		span {
-			display: block;
+	&#now {
+		background-color: $departures-highlight-color;
+		padding: 2rem 20px;
+		grid-template-columns: 10ch 1fr;
+		strong {
+			font-weight: bold;
 		}
 	}
 }
 
-.followee-checkin {
-	font-size: 0.9rem;
-	display: block;
-	i.material-icons {
-		vertical-align: middle;
-	}
-}
-.departures #now {
-	background-color: $departures-highlight-color;
-	padding: 2rem 20px;
-	grid-template-columns: 10ch 1fr;
-	strong {
-		font-weight: bold;
-	}
-}
+
 .departures .dep-time {
 	color: $off-black;
 }
@@ -138,6 +121,14 @@ ul.suggestions {
 	min-width: 6ch;
 	margin: 0 auto;
 	
+	.followee-checkin {
+		font-size: 0.9rem;
+		display: block;
+		i.material-icons {
+			vertical-align: middle;
+		}
+	}
+	
 	&.Bus, &.RUF, &.AST {
 		background-color: #a3167e;
 		border-radius: 5rem;
@@ -158,10 +149,10 @@ ul.suggestions {
 		border-radius: 5rem;
 		padding: .2rem .5rem;
 	}
-	&.RE, &.IRE {
+	&.RE, &.IRE, &.REX {
 		background-color: #ff4f00;
 	}
-	&.RB, &.MEX, &.TER {
+	&.RB, &.MEX, &.TER, &.R {
 		background-color: #1f4a87;
 	}
 	// DE
@@ -188,9 +179,23 @@ ul.suggestions {
 	}
 	&.FLX {
 		background-color: #71d800;
+		color: black;
 	}
 }
 
+.departures.connections {
+	li {
+		grid-template-columns: 15ch 10ch 1fr;
+	}
+	.connect-platform-wrapper {
+		text-align: center;
+		span {
+			display: block;
+		}
+	}
+}
+
+
 @media screen and (max-width: 600px) {
 	.departures li {
 		grid-template-columns: 10ch 1fr;
diff --git a/templates/_departures_hafas.html.ep b/templates/_departures_hafas.html.ep
index a10594e..369f5f4 100644
--- a/templates/_departures_hafas.html.ep
+++ b/templates/_departures_hafas.html.ep
@@ -42,7 +42,7 @@
 				%= $result->destination
 				% for my $checkin (@{$checkin_by_train->{$result->id} // []}) {
 					<span class="followee-checkin">
-						<i class="material-icons tiny">people</i>
+						<i class="material-icons tiny" aria-label="Eine Person, der du folgst, ist hier eingecheckt">people</i>
 						<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>
 					</span>
 				% }
diff --git a/templates/_departures_iris.html.ep b/templates/_departures_iris.html.ep
index 332ef1c..d075008 100644
--- a/templates/_departures_iris.html.ep
+++ b/templates/_departures_iris.html.ep
@@ -47,7 +47,7 @@
 					%= $result->destination
 					% for my $checkin (@{$checkin_by_train->{$result->train_id} // []}) {
 						<span class="followee-checkin">
-							<i class="material-icons tiny">people</i>
+							<i class="material-icons tiny" aria-label="Eine Person, der du folgst, ist hier eingecheckt">people</i>
 							<%= $checkin->{followee_name} %> → <%= $checkin->{arr_name} // '???' %>
 						</span>
 					% }
diff --git a/templates/departures.html.ep b/templates/departures.html.ep
index 9235600..039ec28 100644
--- a/templates/departures.html.ep
+++ b/templates/departures.html.ep
@@ -1,7 +1,9 @@
 <div class="row">
 	<div class="col s12">
-		<h2><i class="material-icons "><%= param('hafas') ? 'directions' : 'train' %></i>
-		<%= $station %></h2>
+		<h2>
+			<i class="material-icons "  aria-hidden="true"><%= param('hafas') ? 'directions' : 'train' %></i>
+			<%= $station %>
+		</h2>
 		% for my $related_station (sort { $a->{name} cmp $b->{name} } @{$related_stations}) {
 			+ <%= $related_station->{name} %> <br/>
 		% }
@@ -11,13 +13,13 @@
 	<div class="col s12">
 	% if ($api_link) {
 	% if (param('hafas')) {
-		<a href="<%= $api_link %>" class="btn-small"><i class="material-icons left">train</i>zum Schienenverkehr</a>
+		<a href="<%= $api_link %>" class="btn-small"><i class="material-icons left"  aria-hidden="true">train</i>zum Schienenverkehr</a>
 	% }
 	% else {
-		<a href="<%= $api_link %>" class="btn-small"><i class="material-icons left">directions</i>zum Nahverkehr</a>
+		<a href="<%= $api_link %>" class="btn-small"><i class="material-icons left"  aria-hidden="true">directions</i>zum Nahverkehr</a>
 	% }
 	% }
-	<a class="btn-small" href="#now"><i class="material-icons left">vertical_align_center</i>Jetzt</a>
+	<a class="btn-small" href="#now"><i class="material-icons left" aria-hidden="true">vertical_align_center</i>Jetzt</a>
 	</div>
 </div>
 
@@ -51,7 +53,7 @@
 							<i class="material-icons left" aria-hidden="true">undo</i> Rückgängig
 						</a>
 						<a class="action-checkout right" data-station="<%= $eva %>" data-force="1">
-							<i class="material-icons left">gps_off</i>
+							<i class="material-icons left" aria-hidden="true">gps_off</i>
 							Hier auschecken
 						</a>
 					% }