From 23489f50f87096576f119aa6a217f2d2d4f31a42 Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Tue, 10 Jun 2025 20:40:33 +0200
Subject: [PATCH] [A11y] Widget: change calendar table aria-label to labelledby
 (#5217)

---
 src/pretix/static/pretixpresale/js/widget/widget.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/pretix/static/pretixpresale/js/widget/widget.js b/src/pretix/static/pretixpresale/js/widget/widget.js
index e98d61e615..33797af689 100644
--- a/src/pretix/static/pretixpresale/js/widget/widget.js
+++ b/src/pretix/static/pretixpresale/js/widget/widget.js
@@ -1571,14 +1571,14 @@ Vue.component('pretix-widget-event-calendar', {
         + '<a class="pretix-widget-event-calendar-previous-month" href="#" @click.prevent.stop="prevmonth">&laquo; '
         + strings['previous_month']
         + '</a> '
-        + '<strong>{{ monthname }}</strong> '
+        + '<strong :id="aria_labelledby">{{ monthname }}</strong> '
         + '<a class="pretix-widget-event-calendar-next-month" href="#" @click.prevent.stop="nextmonth">'
         + strings['next_month']
         + ' &raquo;</a>'
         + '</div>'
 
         // Calendar
-        + '<table class="pretix-widget-event-calendar-table" :id="id" tabindex="0" v-bind:aria-label="monthname">'
+        + '<table class="pretix-widget-event-calendar-table" :id="id" tabindex="0" v-bind:aria-labelledby="aria_labelledby">'
         + '<thead>'
         + '<tr>'
         + '<th aria-label="' + strings['days']['MONDAY'] + '">' + strings['days']['MO'] + '</th>'
@@ -1605,6 +1605,9 @@ Vue.component('pretix-widget-event-calendar', {
         id: function () {
             return this.$root.html_id + "-event-calendar-table";
         },
+        aria_labelledby: function () {
+            return this.$root.html_id + "-event-calendar-table-label";
+        },
     },
     methods: {
         back_to_list: function () {