diff --git a/src/pretix/static/pretixpresale/js/widget/widget.js b/src/pretix/static/pretixpresale/js/widget/widget.js index e1edb677c..baacf1c13 100644 --- a/src/pretix/static/pretixpresale/js/widget/widget.js +++ b/src/pretix/static/pretixpresale/js/widget/widget.js @@ -1400,7 +1400,7 @@ Vue.component('pretix-widget-event-week-cell', { }); Vue.component('pretix-widget-event-calendar-cell', { - template: ('' + template: ('' + '
' + '{{ daynum }}' + '
' @@ -1412,10 +1412,12 @@ Vue.component('pretix-widget-event-calendar-cell', { day: Object, }, methods: { - selectDay: function () { + selectDay: function (e) { if (!this.day || !this.day.events.length || !this.$parent.$parent.$parent.mobile) { return; } + e.preventDefault(); + e.stopPropagation(); if (this.day.events.length === 1) { var ev = this.day.events[0]; this.$root.parent_stack.push(this.$root.target_url); @@ -1428,9 +1430,40 @@ Vue.component('pretix-widget-event-calendar-cell', { this.$root.events = this.day.events; this.$root.view = "events"; } + }, + onKeyDown: function (e) { + var keyDown = e.key !== undefined ? e.key : e.keyCode; + if ( (keyDown === 'Enter' || keyDown === 13) || (['Spacebar', ' '].indexOf(keyDown) >= 0 || keyDown === 32)) { + // (prevent default so the page doesn't scroll when pressing space) + e.preventDefault(); + this.selectDay(e); + } + }, + }, + mounted: function () { + if (this.role == 'button') { + this.$el.addEventListener("click", this.selectDay); + this.$el.addEventListener("keydown", this.onKeyDown); + } + }, + watch: { + role: function (newValue) { + if (newValue == 'button') { + this.$el.addEventListener("click", this.selectDay); + this.$el.addEventListener("keydown", this.onKeyDown); + } else { + this.$el.removeEventListener("click", this.selectDay); + this.$el.removeEventListener("keydown", this.onKeyDown); + } } }, computed: { + role: function () { + return (!this.day || !this.day.events.length || !this.$parent.$parent.$parent.mobile) ? 'cell' : 'button'; + }, + tabindex: function () { + return this.role == 'button' ? '0' : '-1'; + }, daynum: function () { if (!this.day) { return;