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 d5e45983..81534dc9 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 a10594e9..369f5f41 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 332ef1c9..d075008a 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 9235600c..039ec287 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>
% }
--
GitLab