Mirrors/travelynx
2
0
Fork 0
mirror of https://github.com/derf/travelynx synced 2024-12-04 10:19:09 +00:00
Code Issues Projects Releases Packages Wiki Activity

departure board: better keyboard accessibility

Browse source
This commit is contained in:
Cassidy Dingenskirchen 2023-10-22 19:05:28 +02:00
parent 326c23084c
commit f1bb21cc7a
No known key found for this signature in database
GPG key ID: 14FE9712CC42FE8B
2 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
public/static/js/travelynx-actions.js
View file

@ -298,9 +298,19 @@ $(document).ready(function() {
$('a[href]').click(function() { $('a[href]').click(function() {
$('nav .preloader-wrapper').addClass('active'); $('nav .preloader-wrapper').addClass('active');
}); });
$('a[href="#now"]').keydown(function(event) {
// also trigger click handler on keyboard enter
if (event.keyCode == 13) {
event.preventDefault();
event.target.click();
}
});
$('a[href="#now"]').click(function(event) { $('a[href="#now"]').click(function(event) {
event.preventDefault(); event.preventDefault();
$('#now')[0].scrollIntoView({behavior: "smooth", block: "center"}); $('nav .preloader-wrapper').removeClass('active');
now_el = $('#now')[0];
now_el.previousElementSibling.querySelector(".dep-time").focus();
now_el.scrollIntoView({behavior: "smooth", block: "center"});
}); });
const elems = document.querySelectorAll('.carousel'); const elems = document.querySelectorAll('.carousel');
const instances = M.Carousel.init(elems, { const instances = M.Carousel.init(elems, {

6
sass/src/common/local.scss
View file

@ -74,8 +74,9 @@ ul.suggestions {
display: grid; display: grid;
grid-template-columns: 10ch 10ch 1fr; grid-template-columns: 10ch 10ch 1fr;
align-items: center; align-items: center;
&:hover { &:not(#now):hover, &:focus-within {
background-color: $departures-highlight-color; background-color: $departures-highlight-color;
outline: 2px solid $link-color;
} }
&.cancelled { &.cancelled {
background-color: $departures-cancelled-color; background-color: $departures-cancelled-color;
@ -103,6 +104,9 @@ ul.suggestions {
.departures .dep-time { .departures .dep-time {
color: $off-black; color: $off-black;
&:focus {
outline: none;
}
} }
.departures .dep-dest { .departures .dep-dest {
margin-left: 0.8rem; margin-left: 0.8rem;