departure board: better keyboard accessibility

2 files changed, 16 insertions, 2 deletions

diff --git a/public/static/js/travelynx-actions.js b/public/static/js/travelynx-actions.js
index 1b6dd8a..52ca482 100644
--- a/public/static/js/travelynx-actions.js
+++ b/public/static/js/travelynx-actions.js
@@ -298,9 +298,19 @@ $(document).ready(function() {
 	$('a[href]').click(function() {
 		$('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) {
 	    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 instances = M.Carousel.init(elems, {
diff --git a/sass/src/common/local.scss b/sass/src/common/local.scss
index 81534dc..ea70552 100644
--- a/sass/src/common/local.scss
+++ b/sass/src/common/local.scss
@@ -74,8 +74,9 @@ ul.suggestions {
 	display: grid;
 	grid-template-columns: 10ch 10ch 1fr;
 	align-items: center;
-	&:hover {
+	&:not(#now):hover, &:focus-within {
 		background-color: $departures-highlight-color;
+		outline: 2px solid $link-color;
 	}
  	&.cancelled {
 		background-color: $departures-cancelled-color;
@@ -103,6 +104,9 @@ ul.suggestions {
 
 .departures .dep-time {
 	color: $off-black;
+	&:focus {
+		outline: none;
+	}
 }
 .departures .dep-dest {
 	margin-left: 0.8rem;