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