From 7f9942ebbe5006c48afbeaa59a2f1fa84bce635a Mon Sep 17 00:00:00 2001
From: Mira Weller <weller@rami.io>
Date: Thu, 5 Dec 2024 14:41:08 +0100
Subject: [PATCH] Use <fieldset> in checkout_payment

---
 .../pretixpresale/event/checkout_payment.html | 57 +++++++++----------
 1 file changed, 26 insertions(+), 31 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/event/checkout_payment.html b/src/pretix/presale/templates/pretixpresale/event/checkout_payment.html
index b17a711ff..9c7e20eaa 100644
--- a/src/pretix/presale/templates/pretixpresale/event/checkout_payment.html
+++ b/src/pretix/presale/templates/pretixpresale/event/checkout_payment.html
@@ -62,8 +62,8 @@
             {% endif %}
             <div class="panel-group" id="payment_accordion">
                 {% for p in providers %}
-                    <div class="panel panel-default">
-                        <div class="accordion-radio">
+                    <fieldset class="panel panel-default accordion-panel">
+                        <legend class="accordion-radio">
                             <div class="panel-heading">
                                 <p class="panel-title">
                                     {% if show_fees %}
@@ -71,49 +71,44 @@
                                     {% endif %}
                                     <input type="radio" name="payment" value="{{ p.provider.identifier }}"
                                            title="{{ p.provider.public_name }}"
-                                           data-parent="#payment_accordion"
                                            {% if selected == p.provider.identifier %}checked="checked"{% endif %}
                                            id="input_payment_{{ p.provider.identifier }}"
-                                           aria-describedby="payment_{{ p.provider.identifier }}"
-                                           data-toggle="radiocollapse" data-target="#payment_{{ p.provider.identifier }}"
+                                           aria-controls="payment_{{ p.provider.identifier }}"
                                            data-wallets="{{ p.provider.walletqueries|join:"|" }}" />
                                     <label for="input_payment_{{ p.provider.identifier }}"><strong>{{ p.provider.public_name }}</strong></label>
                                 </p>
                             </div>
-                        </div>
-                        <div id="payment_{{ p.provider.identifier }}"
-                             class="panel-collapse collapsed {% if selected == p.provider.identifier %}in{% endif %}">
-                            <div class="panel-body form-horizontal">
-                                {% if request.event.testmode %}
-                                    {% if p.provider.test_mode_message %}
-                                        <div class="alert alert-info">
-                                            <p>{{ p.provider.test_mode_message }}</p>
-                                        </div>
-                                        {% if not request.sales_channel.type_instance.testmode_supported %}
-                                            <div class="alert alert-danger">
-                                                <p>
-                                                {% trans "This sales channel does not provide support for test mode." %}
-                                                <strong>
-                                                    {% trans "If you continue, you might pay an actual order with non-existing money!" %}
-                                                </strong>
-                                                </p>
-                                            </div>
-                                        {% endif %}
-                                    {% else %}
-                                        <div class="alert alert-warning">
+                        </legend>
+                        <div id="payment_{{ p.provider.identifier }}" class="panel-body form-horizontal">
+                            {% if request.event.testmode %}
+                                {% if p.provider.test_mode_message %}
+                                    <div class="alert alert-info">
+                                        <p>{{ p.provider.test_mode_message }}</p>
+                                    </div>
+                                    {% if not request.sales_channel.type_instance.testmode_supported %}
+                                        <div class="alert alert-danger">
                                             <p>
-                                            {% trans "This payment provider does not provide support for test mode." %}
+                                            {% trans "This sales channel does not provide support for test mode." %}
                                             <strong>
-                                                {% trans "If you continue, actual money might be transferred." %}
+                                                {% trans "If you continue, you might pay an actual order with non-existing money!" %}
                                             </strong>
                                             </p>
                                         </div>
                                     {% endif %}
+                                {% else %}
+                                    <div class="alert alert-warning">
+                                        <p>
+                                        {% trans "This payment provider does not provide support for test mode." %}
+                                        <strong>
+                                            {% trans "If you continue, actual money might be transferred." %}
+                                        </strong>
+                                        </p>
+                                    </div>
                                 {% endif %}
-                                {{ p.form }}
-                            </div>
+                            {% endif %}
+                            {{ p.form }}
                         </div>
-                    </div>
+                    </fieldset>
                 {% endfor %}
                 {% if not providers %}
                     <p><em>{% trans "There are no payment providers enabled." %}</em></p>