fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make course teasers keyboard-accessible

Browse Source
This commit is contained in:
Felix Hamann 2019-03-23 22:56:55 +01:00
parent 16e5e8ea6f
commit 567bd29fd0
3 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/widgets/course-teaser/course-teaser.hamlet
View File

@ -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>

10
templates/widgets/course-teaser/course-teaser.julius
View File

@ -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);
}
});
});

3
templates/widgets/course-teaser/course-teaser.lucius
View File

@ -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);