From bf3ee608baeb77694b17ad3cd072f9b6f2a6e644 Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Thu, 15 May 2025 13:21:04 +0200
Subject: [PATCH] [A11y] Fix cookie-consent-form labels + help-text markup
 (#5113)

* [A11y] Fix cookie-consent-form labels + help-text markup

* remove method=dialog for now
---
 .../pretixpresale/fragment_modals.html        | 58 ++++++++++---------
 .../static/pretixpresale/scss/_forms.scss     |  9 +++
 2 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/fragment_modals.html b/src/pretix/presale/templates/pretixpresale/fragment_modals.html
index a060d08665..3565c60427 100644
--- a/src/pretix/presale/templates/pretixpresale/fragment_modals.html
+++ b/src/pretix/presale/templates/pretixpresale/fragment_modals.html
@@ -55,6 +55,7 @@
                 <div class="modal-card-content">
                     <h3 id="cookie-consent-modal-label"></h3>
                     <div id="cookie-consent-modal-description">
+                        <form class="form-horizontal">
                         {% with request.event|default:request.organizer as sh %}
                             <h3>{{ sh.settings.cookie_consent_dialog_title }}</h3>
                             {{ sh.settings.cookie_consent_dialog_text|rich_text }}
@@ -70,40 +71,42 @@
                                 </summary>
                                 <div class="checkbox">
                                     <label>
-                                        <input type="checkbox" disabled checked="">
-                                        {% trans "Required cookies" %}<br>
-                                        <span class="text-muted">
-                                            {% trans "Functional cookies (e.g. shopping cart, login, payment, language preference) and technical cookies (e.g. security purposes)" %}
-                                        </span>
+                                        <input type="checkbox" disabled checked="" aira-describedby="cookie-consent-checkbox-required-description">
+                                        {% trans "Required cookies" %}
                                     </label>
                                 </div>
+                                <div class="help-block" id="cookie-consent-checkbox-required-description">
+                                    <p>{% trans "Functional cookies (e.g. shopping cart, login, payment, language preference) and technical cookies (e.g. security purposes)" %}</p>
+                                </div>
                                 {% for cp in cookie_providers %}
                                     <div class="checkbox">
                                         <label>
-                                            <input type="checkbox" name="{{ cp.identifier }}">
-                                            {{ cp.provider_name }}<br>
-                                            <span class="text-muted">
-                                                {% for c in cp.usage_classes %}
-                                                    {% if forloop.counter0 > 0 %}&middot; {% endif %}
-                                                    {% if c.value == 1 %}
-                                                        {% trans "Functionality" context "cookie_usage" %}
-                                                    {% elif c.value == 2 %}
-                                                        {% trans "Analytics" context "cookie_usage" %}
-                                                    {% elif c.value == 3 %}
-                                                        {% trans "Marketing" context "cookie_usage" %}
-                                                    {% elif c.value == 4 %}
-                                                        {% trans "Social features" context "cookie_usage" %}
-                                                    {% endif %}
-                                                {% endfor %}
-                                                {% if cp.privacy_url %}
-                                                    &middot;
-                                                    <a href="{% safelink cp.privacy_url %}" target="_blank">
-                                                        {% trans "Privacy policy" %}
-                                                    </a>
-                                                {% endif %}
-                                            </span>
+                                            <input type="checkbox" name="{{ cp.identifier }}" aira-describedby="cookie-consent-checkbox-{{ cp.identifier }}-description">
+                                            {{ cp.provider_name }}
                                         </label>
                                     </div>
+                                    <div class="help-block" id="cookie-consent-checkbox-{{ cp.identifier }}-description">
+                                        <p>
+                                        {% for c in cp.usage_classes %}
+                                            {% if forloop.counter0 > 0 %}&middot; {% endif %}
+                                            {% if c.value == 1 %}
+                                                {% trans "Functionality" context "cookie_usage" %}
+                                            {% elif c.value == 2 %}
+                                                {% trans "Analytics" context "cookie_usage" %}
+                                            {% elif c.value == 3 %}
+                                                {% trans "Marketing" context "cookie_usage" %}
+                                            {% elif c.value == 4 %}
+                                                {% trans "Social features" context "cookie_usage" %}
+                                            {% endif %}
+                                        {% endfor %}
+                                        {% if cp.privacy_url %}
+                                            &middot;
+                                            <a href="{% safelink cp.privacy_url %}" target="_blank">
+                                                {% trans "Privacy policy" %}
+                                            </a>
+                                        {% endif %}
+                                        </p>
+                                    </div>
                                 {% endfor %}
                             </details>
                             <div class="row">
@@ -130,6 +133,7 @@
                                 </p>
                             {% endif %}
                         {% endwith %}
+                        <form>
                     </div>
                 </div>
             </div>
diff --git a/src/pretix/static/pretixpresale/scss/_forms.scss b/src/pretix/static/pretixpresale/scss/_forms.scss
index 44ed8f6776..0cff5dca40 100644
--- a/src/pretix/static/pretixpresale/scss/_forms.scss
+++ b/src/pretix/static/pretixpresale/scss/_forms.scss
@@ -53,6 +53,15 @@ a.btn, button.btn {
     }
   }
 }
+.checkbox + .help-block {
+  padding-left: 20px;
+  margin-top: 0;
+  margin-bottom: 0;
+  p {
+    margin-bottom: 0;
+  }
+}
+
 output {
   padding-top: $padding-base-vertical;
 }