From e8abe5cad8fbbfee0e71b80ebc8895854d993a7e Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Wed, 11 Jun 2025 10:46:53 +0200
Subject: [PATCH] [A11y] fix variations toggle-button missing aria-controls
 (#5237)

---
 .../pretixpresale/event/fragment_addon_choice.html          | 6 +++---
 .../pretixpresale/event/fragment_product_list.html          | 6 +++---
 src/pretix/static/pretixbase/js/details.js                  | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html b/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html
index fd9c11b61..8906379ac 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html
@@ -96,8 +96,8 @@
                             {% if not event.settings.show_variations_expanded %}
                                 <button type="button" data-toggle="variations" class="btn btn-default btn-block js-only"
                                         data-label-alt="{% trans "Hide variants" %}"
-                                        aria-expanded="false"
-                                        aria-label="{% blocktrans trimmed with item=item.name count=item.available_variations|length %}Show {{count}} variants of {{item}}{% endblocktrans %}">
+                                        aria-expanded="false" aria-controls="cp-{{ form.pos.pk }}-item-{{ item.pk }}-variations"
+                                        aria-describedby="cp-{{ form.pos.pk }}-item-{{ item.pk }}-legend">
                                     <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
                                     <span>{% trans "Show variants" %}</span>
                                 </button>
@@ -105,7 +105,7 @@
                         </div>
                         <div class="clearfix"></div>
                     </div>
-                    <div class="variations {% if not event.settings.show_variations_expanded %}variations-collapsed{% endif %}">
+                    <div class="variations {% if not event.settings.show_variations_expanded %}variations-collapsed{% endif %}" id="cp-{{ form.pos.pk }}-item-{{ item.pk }}-variations">
                         {% for var in item.available_variations %}
                             <article aria-labelledby="cp-{{ form.pos.pk }}-item-{{ item.pk }}-{{ var.pk }}-legend"{% if var.description %} aria-describedby="cp-{{ form.pos.pk }}-item-{{ item.pk }}-{{ var.pk }}-description"{% endif %} class="row-fluid product-row variation"
                             {% if not item.free_price %}
diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html b/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
index 7a8a7900f..976868360 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
@@ -101,8 +101,8 @@
                                 {% endif %}
                                 <button type="button" data-toggle="variations" class="btn btn-default btn-block js-only"
                                     data-label-alt="{% trans "Hide variants" %}"
-                                    aria-expanded="false"
-                                    aria-label="{% blocktrans trimmed with item=item.name count=item.available_variations|length %}Show {{count}} variants of {{ item }}{% endblocktrans %}">
+                                    aria-expanded="false" aria-controls="{{ form_prefix }}item-{{ item.pk }}-variations"
+                                    aria-describedby="{{ form_prefix }}item-{{ item.pk }}-legend">
                                     <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
                                     <span>{% trans "Show variants" %}</span>
                                 </button>
@@ -110,7 +110,7 @@
                         </div>
                         <div class="clearfix"></div>
                     </div>
-                    <div class="variations {% if not event.settings.show_variations_expanded %}variations-collapsed{% endif %}">
+                    <div class="variations {% if not event.settings.show_variations_expanded %}variations-collapsed{% endif %}" id="{{ form_prefix }}item-{{ item.pk }}-variations">
                         {% for var in item.available_variations %}
                             <article aria-labelledby="{{ form_prefix }}item-{{ item.pk }}-{{ var.pk }}-legend"{% if var.description %} aria-describedby="{{ form_prefix }}item-{{ item.pk }}-{{ var.pk }}-description"{% endif %} class="row product-row variation" id="{{ form_prefix }}item-{{ item.pk }}-{{ var.pk }}"
                             {% if not item.free_price %}
diff --git a/src/pretix/static/pretixbase/js/details.js b/src/pretix/static/pretixbase/js/details.js
index a6fc54ebb..8cd520dae 100644
--- a/src/pretix/static/pretixbase/js/details.js
+++ b/src/pretix/static/pretixbase/js/details.js
@@ -117,7 +117,7 @@ setup_collapsible_details = function (el) {
     el.find("article button[data-toggle=variations]").click(function (e) {
         var $button = $(this);
         var $details = $button.closest("article");
-        var $detailsNotSummary = $(".variations", $details);
+        var $detailsNotSummary = $button.attr("aria-controls") ? $('#' + $button.attr("aria-controls")) : $(".variations", $details);
         var isOpen = !$detailsNotSummary.prop("hidden");
         if ($detailsNotSummary.is(':animated')) {
             e.preventDefault();
@@ -125,7 +125,7 @@ setup_collapsible_details = function (el) {
         }
 
         var altLabel = $button.attr("data-label-alt");
-        $button.attr("data-label-alt", $button.text());
+        $button.attr("data-label-alt", $button.text().trim());
         $button.find("span").text(altLabel);
         $button.attr("aria-expanded", !isOpen);