From d55411fb8b8937a3ffd394a7673896998347a5b7 Mon Sep 17 00:00:00 2001
From: Mira Weller <weller@rami.io>
Date: Wed, 4 Dec 2024 14:35:45 +0100
Subject: [PATCH] Use <fieldset> in checkout_customer

---
 .../event/checkout_customer.html              | 178 ++++++++----------
 1 file changed, 81 insertions(+), 97 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/event/checkout_customer.html b/src/pretix/presale/templates/pretixpresale/event/checkout_customer.html
index 5398eb5885..99c38ddc24 100644
--- a/src/pretix/presale/templates/pretixpresale/event/checkout_customer.html
+++ b/src/pretix/presale/templates/pretixpresale/event/checkout_customer.html
@@ -8,134 +8,118 @@
     <form method="post">
         {% csrf_token %}
         <div class="panel-group" id="customer">
-            <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">
                             <input type="radio" name="customer_mode" value="login"
-                                    data-parent="#customer"
                                     {% if selected == "login" or not signup_allowed %}checked="checked"{% endif %}
-                                    id="input_customer_login"
-                                    data-toggle="radiocollapse" data-target="#customer_login"/>
+                                    id="input_customer_login" aria-controls="customer_login" />
                             <label for="input_customer_login"><strong>{% trans "Log in with a customer account" %}</strong></label>
                         </p>
                     </div>
-                </div>
-                <div id="customer_login"
-                        class="panel-collapse collapsed {% if selected == "login" or not signup_allowed %}in{% endif %}">
-                    <div class="panel-body form-horizontal">
-                        {% if customer %}
-                            <p>
-                                {% blocktrans trimmed with org=request.organizer.name %}
-                                    You are currently logged in with the following credentials.
-                                {% endblocktrans %}
-                            </p>
-                            <dl class="dl-horizontal">
-                                <dt>{% trans "Email" %}</dt>
-                                <dd>
-                                    {{ customer.email }}
-                                </dd>
-                                <dt>{% trans "Name" %}</dt>
-                                <dd>{{ customer.name }}</dd>
-                                <dt>{% trans "Customer ID" %}</dt>
-                                <dd>
-                                    #{{ customer.identifier }}
-                                </dd>
-                            </dl>
-                        {% else %}
-                            <p>
-                                {% blocktrans trimmed with org=request.organizer.name %}
-                                    If you created a customer account at {{ org }} before, you can log in now and connect
-                                    your order to your account. This will allow you to see all your orders in one place
-                                    and access them at any time.
-                                {% endblocktrans %}
-                            </p>
-                            {% if request.organizer.settings.customer_accounts_native %}
-                                {% bootstrap_form login_form layout="checkout" %}
-                                <div class="row">
-                                    <div class="col-md-offset-3 col-md-9">
-                                        <a
-                                                href="{% abseventurl request.organizer "presale:organizer.customer.resetpw" %}"
-                                                target="_blank">
-                                            {% trans "Reset password" %}
-                                        </a>
-                                    </div>
-                                </div>
-                            {% endif %}
+                </legend>
+                <div id="customer_login" class="panel-body form-horizontal">
+                    {% if customer %}
+                        <p>
+                            {% blocktrans trimmed with org=request.organizer.name %}
+                                You are currently logged in with the following credentials.
+                            {% endblocktrans %}
+                        </p>
+                        <dl class="dl-horizontal">
+                            <dt>{% trans "Email" %}</dt>
+                            <dd>
+                                {{ customer.email }}
+                            </dd>
+                            <dt>{% trans "Name" %}</dt>
+                            <dd>{{ customer.name }}</dd>
+                            <dt>{% trans "Customer ID" %}</dt>
+                            <dd>
+                                #{{ customer.identifier }}
+                            </dd>
+                        </dl>
+                    {% else %}
+                        <p>
+                            {% blocktrans trimmed with org=request.organizer.name %}
+                                If you created a customer account at {{ org }} before, you can log in now and connect
+                                your order to your account. This will allow you to see all your orders in one place
+                                and access them at any time.
+                            {% endblocktrans %}
+                        </p>
+                        {% if request.organizer.settings.customer_accounts_native %}
+                            {% bootstrap_form login_form layout="checkout" %}
                             <div class="row">
-                                <div class="col-md-6 col-md-offset-3">
-                                    {% for provider in request.organizer.sso_providers.all %}
-                                        {% if provider.is_active %}
-                                            <a href="{% eventurl request.organizer "presale:organizer.customer.login" provider=provider.pk %}?next={% if request.event_domain %}{{ request.scheme }}://{{ request.get_host }}{% endif %}{{ request.get_full_path|urlencode }}"
-                                               class="btn btn-primary btn-lg btn-block" data-open-in-popup-window>
-                                                {{ provider.button_label }}
-                                            </a>
-                                        {% endif %}
-                                    {% endfor %}
+                                <div class="col-md-offset-3 col-md-9">
+                                    <a
+                                            href="{% abseventurl request.organizer "presale:organizer.customer.resetpw" %}"
+                                            target="_blank">
+                                        {% trans "Reset password" %}
+                                    </a>
                                 </div>
                             </div>
-                            <input type="hidden" name="login-sso-data" id="login_sso_data">
                         {% endif %}
-                    </div>
+                        <div class="row">
+                            <div class="col-md-6 col-md-offset-3">
+                                {% for provider in request.organizer.sso_providers.all %}
+                                    {% if provider.is_active %}
+                                        <a href="{% eventurl request.organizer "presale:organizer.customer.login" provider=provider.pk %}?next={% if request.event_domain %}{{ request.scheme }}://{{ request.get_host }}{% endif %}{{ request.get_full_path|urlencode }}"
+                                           class="btn btn-primary btn-lg btn-block" data-open-in-popup-window>
+                                            {{ provider.button_label }}
+                                        </a>
+                                    {% endif %}
+                                {% endfor %}
+                            </div>
+                        </div>
+                        <input type="hidden" name="login-sso-data" id="login_sso_data">
+                    {% endif %}
                 </div>
-            </div>
+            </fieldset>
             {% if signup_allowed %}
-                <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">
                                 <input type="radio" name="customer_mode" value="register"
-                                        data-parent="#customer"
                                         {% if selected == "register" %}checked="checked"{% endif %}
-                                        id="input_customer_register"
-                                        data-toggle="radiocollapse" data-target="#customer_register"/>
+                                        id="input_customer_register" aria-controls="customer_register" />
                                 <label for="input_customer_register"><strong>{% trans "Create a new customer account" %}</strong></label>
                             </p>
                         </div>
+                    </legend>
+                    <div id="customer_register" class="panel-body form-horizontal">
+                        {% bootstrap_form register_form layout="checkout" %}
+                        <p>
+                            {% blocktrans trimmed with org=request.organizer.name %}
+                                We will send you an email with a link to activate your account and set a password, so
+                                you can use the account for future orders at {{ org }}. You can still go ahead with this
+                                purchase before you received the email.
+                            {% endblocktrans %}
+                        </p>
                     </div>
-                    <div id="customer_register"
-                            class="panel-collapse collapsed {% if selected == "register" %}in{% endif %}">
-                        <div class="panel-body form-horizontal">
-                            {% bootstrap_form register_form layout="checkout" %}
-                            <p>
-                                {% blocktrans trimmed with org=request.organizer.name %}
-                                    We will send you an email with a link to activate your account and set a password, so
-                                    you can use the account for future orders at {{ org }}. You can still go ahead with this
-                                    purchase before you received the email.
-                                {% endblocktrans %}
-                            </p>
-                        </div>
-                    </div>
-                </div>
+                </fieldset>
             {% endif %}
             {% if guest_allowed %}
-                <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">
                                 <input type="radio" name="customer_mode" value="guest"
-                                        data-parent="#customer"
                                         {% if selected == "guest" %}checked="checked"{% endif %}
-                                        id="input_customer_guest"
-                                        aria-describedby="customer_guest"
-                                        data-toggle="radiocollapse" data-target="#customer_guest"/>
+                                        id="input_customer_guest" aria-controls="customer_guest" />
                                 <label for="input_customer_guest"><strong>{% trans "Continue as a guest" %}</strong></label>
                             </p>
                         </div>
+                    </legend>
+                    <div id="customer_guest" class="panel-body form-horizontal">
+                        <p>
+                            {% blocktrans trimmed %}
+                                You are not required to create an account. If you proceed as a guest, you will be able
+                                to access the details and status of your order any time through the secret link we will
+                                send you via email once the order is complete.
+                            {% endblocktrans %}
+                        </p>
                     </div>
-                    <div id="customer_guest"
-                            class="panel-collapse collapsed {% if selected == "guest" %}in{% endif %}">
-                        <div class="panel-body form-horizontal">
-                            <p>
-                                {% blocktrans trimmed %}
-                                    You are not required to create an account. If you proceed as a guest, you will be able
-                                    to access the details and status of your order any time through the secret link we will
-                                    send you via email once the order is complete.
-                                {% endblocktrans %}
-                            </p>
-                        </div>
-                    </div>
-                </div>
+                </fieldset>
             {% endif %}
         </div>
         <div class="row checkout-button-row">