From 567bd29fd019fb4d1c42a0045a29dda5746d324e Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 23 Mar 2019 22:56:55 +0100
Subject: [PATCH] make course teasers keyboard-accessible

---
 templates/widgets/course-teaser/course-teaser.hamlet |  2 +-
 templates/widgets/course-teaser/course-teaser.julius | 10 +++++++++-
 templates/widgets/course-teaser/course-teaser.lucius |  3 +--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/templates/widgets/course-teaser/course-teaser.hamlet b/templates/widgets/course-teaser/course-teaser.hamlet
index 2640a8ca4..33baf56ce 100644
--- a/templates/widgets/course-teaser/course-teaser.hamlet
+++ b/templates/widgets/course-teaser/course-teaser.hamlet
@@ -1,4 +1,4 @@
-<div .course :isRegistered:.course--registered #course-#{courseId}>
+<div .course :isRegistered:.course--registered #course-#{courseId} tabindex='1'>
   <div .course-chevron>
   <div .course-shorthand>_{courseShorthand}
   <div .course-title>
diff --git a/templates/widgets/course-teaser/course-teaser.julius b/templates/widgets/course-teaser/course-teaser.julius
index 6350e0743..0d757de09 100644
--- a/templates/widgets/course-teaser/course-teaser.julius
+++ b/templates/widgets/course-teaser/course-teaser.julius
@@ -1,5 +1,5 @@
 var COURSE_TEASER_EXPANDED_CLASS = 'course--expanded';
-var COURSE_TEASER_CHEVRON_CLASS = 'course-teaser';
+var COURSE_TEASER_CHEVRON_CLASS = 'course-chevron';
 
 document.addEventListener('DOMContentLoaded', function() {
   var courseTeaserId = #{String courseId};
@@ -10,4 +10,12 @@ document.addEventListener('DOMContentLoaded', function() {
     event.preventDefault();
     courseTeaser.classList.toggle(COURSE_TEASER_EXPANDED_CLASS);
   });
+
+  courseTeaser.addEventListener('keydown', function(event) {
+    var eventKey = event.key;
+    if (eventKey === ' ' || eventKey === 'Enter') {
+      event.preventDefault();
+      courseTeaser.classList.toggle(COURSE_TEASER_EXPANDED_CLASS);
+    }
+  });
 });
diff --git a/templates/widgets/course-teaser/course-teaser.lucius b/templates/widgets/course-teaser/course-teaser.lucius
index c7e280f25..08eb279cf 100644
--- a/templates/widgets/course-teaser/course-teaser.lucius
+++ b/templates/widgets/course-teaser/course-teaser.lucius
@@ -1,5 +1,4 @@
 :root {
-  --color-fontsec: #5b5861;
   --course-bg-color: var(--color-grey-lighter);
   --course-expanded-bg-color: var(--color-grey-light);
 }
@@ -7,7 +6,7 @@
 .course {
   display: grid;
   grid-gap: 5px 7px;
-  grid-template-columns: 25px 60px 1fr 100px;
+  grid-template-columns: 25px 60px 1fr 40px;
   padding: 10px;
   font-size: 1.4rem;
   background-color: var(--course-bg-color);