_{courseShorthand}
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);