CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

[A11y] Widget fix td-cells being clickable but not focusable (#5106)

Browse Source 
* [A11y] Widget fix td-cells being clickable but not focusable

* improve keyboard nav
This commit is contained in:
Richard Schreiber
2025-05-15 10:27:43 +02:00
committed by GitHub
parent 4dc5014947
commit 9ee50a28a1
1 changed files with 35 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/pretix/static/pretixpresale/js/widget/widget.js
View File

@@ -1400,7 +1400,7 @@ Vue.component('pretix-widget-event-week-cell', {
});
Vue.component('pretix-widget-event-calendar-cell', {
template: ('<td :class="classObject" @click.prevent.stop="selectDay">'
template: ('<td :class="classObject" :role="role" :tabindex="tabindex" v-bind:aria-label="date">'
+ '<div class="pretix-widget-event-calendar-day" v-if="day" v-bind:aria-label="date">'
+ '{{ daynum }}'
+ '</div>'
@@ -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;