From 0af94c3712dde0e96bd0dede58fcde9cd7a2e9f9 Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Thu, 15 May 2025 12:30:21 +0200
Subject: [PATCH] [A11y] change customer-pages dl to list of article (#5112)

* [A11y] change customer-pages dl to list of article

* fix small font-size

* change customer memberships as well
---
 .../organizers/customer_memberships.html      | 159 +++++++++---------
 .../organizers/customer_orders.html           | 107 ++++++------
 .../static/pretixpresale/scss/main.scss       |   7 +-
 3 files changed, 134 insertions(+), 139 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/organizers/customer_memberships.html b/src/pretix/presale/templates/pretixpresale/organizers/customer_memberships.html
index 5fc92d355d..010a638493 100644
--- a/src/pretix/presale/templates/pretixpresale/organizers/customer_memberships.html
+++ b/src/pretix/presale/templates/pretixpresale/organizers/customer_memberships.html
@@ -14,94 +14,91 @@
         </div>
         <div class="panel-body">
             {% if memberships %}
-                <ul class="full-width-list alternating-rows">
+                <div class="event-list full-width-list alternating-rows">
                     {% for m in memberships %}
-                    <li class="row">
-                        <dl>
-                            <div class="col-xs-5">
-                                <dt>
-                                    {% if m.canceled %}<del>{% endif %}
-                                    <a href="{% abseventurl request.organizer "presale:organizer.customer.membership" id=m.id %}">
-                                        {{ m.membership_type.name }}
-                                    </a>
-                                    {% if m.canceled %}</del>{% endif %}
-                                    {% if m.membership_type.transferable %}
-                                        <span class="text-muted" data-toggle="tooltip" title="{% trans "Membership is transferable" %}">
-                                            {% icon "users" %}
-                                        </span>
-                                    {% endif %}
-                                </dt>
-                                {% if m.attendee_name %}
-                                <dd class="text-muted">
-                                    {% icon "id-badge" %}
-                                    <span class="sr-only">{% trans "Attendee name" %}:</span>
-                                    {{ m.attendee_name }}
-                                </dd>
+                    <article class="row">
+                        <div class="col-xs-5">
+                            <h4>
+                                {% if m.canceled %}<del>{% endif %}
+                                <a href="{% abseventurl request.organizer "presale:organizer.customer.membership" id=m.id %}">
+                                    {{ m.membership_type.name }}
+                                </a>
+                                {% if m.canceled %}</del>{% endif %}
+                                {% if m.membership_type.transferable %}
+                                    <span class="text-muted" data-toggle="tooltip" title="{% trans "Membership is transferable" %}">
+                                        {% icon "users" %}
+                                    </span>
                                 {% endif %}
-                                <dd class="text-muted">
-                                    <small>
-                                    {% if m.canceled %}
-                                        {% textbubble "danger" icon="times" %}
-                                            {% trans "Canceled" %}
-                                        {% endtextbubble %}
-                                    {% elif m.expired %}
-                                        {% icon "minus-square-o" %}
-                                        {% trans "Expired since" %}
-                                        <time datetime="{{ m.date_end|date:"Y-m-d H:i" }}">
-                                            {{ m.date_end|date:"SHORT_DATETIME_FORMAT" }}
-                                        </time>
-                                    {% elif m.not_yet_valid %}
-                                        {% icon "clock-o" %}
-                                        {% trans "Valid from" %}
-                                        <time datetime="{{ m.date_start|date:"Y-m-d H:i" }}">
-                                            {{ m.date_start|date:"SHORT_DATETIME_FORMAT" }}
-                                        </time>
-                                    {% else %}
-                                        {% icon "check" %}
-                                        {% trans "Valid until" %}
-                                        <time datetime="{{ m.date_end|date:"Y-m-d H:i" }}">
-                                            {{ m.date_end|date:"SHORT_DATETIME_FORMAT" }}
-                                        </time>
-                                    {% endif %}
-                                    </small>
-                                </dd>
-                                {% if m.testmode %}
-                                <dd>
-                                    <small>
-                                    {% textbubble "warning" %}
-                                        {% trans "TEST MODE" %}
+                            </h4>
+                            {% if m.attendee_name %}
+                            <p class="text-muted">
+                                {% icon "id-badge" %}
+                                <span class="sr-only">{% trans "Attendee name" %}:</span>
+                                {{ m.attendee_name }}
+                            </p>
+                            {% endif %}
+                            <p class="text-muted">
+                                <small>
+                                {% if m.canceled %}
+                                    {% textbubble "danger" icon="times" %}
+                                        {% trans "Canceled" %}
                                     {% endtextbubble %}
-                                    </small>
-                                </dd>
+                                {% elif m.expired %}
+                                    {% icon "minus-square-o" %}
+                                    {% trans "Expired since" %}
+                                    <time datetime="{{ m.date_end|date:"Y-m-d H:i" }}">
+                                        {{ m.date_end|date:"SHORT_DATETIME_FORMAT" }}
+                                    </time>
+                                {% elif m.not_yet_valid %}
+                                    {% icon "clock-o" %}
+                                    {% trans "Valid from" %}
+                                    <time datetime="{{ m.date_start|date:"Y-m-d H:i" }}">
+                                        {{ m.date_start|date:"SHORT_DATETIME_FORMAT" }}
+                                    </time>
+                                {% else %}
+                                    {% icon "check" %}
+                                    {% trans "Valid until" %}
+                                    <time datetime="{{ m.date_end|date:"Y-m-d H:i" }}">
+                                        {{ m.date_end|date:"SHORT_DATETIME_FORMAT" }}
+                                    </time>
                                 {% endif %}
-                            </div>
-                            <div class="col-xs-5">
-                                <dd>
-                                    <div class="quotabox full-width">
-                                        <div class="progress">
-                                            <div class="progress-bar progress-bar-success progress-bar-{{ m.percentage_used }}">
-                                            </div>
-                                        </div>
-                                        <div class="numbers">
-                                            {{ m.usages }} /
-                                            {{ m.membership_type.max_usages|default_if_none:"∞" }}
+                                </small>
+                            </p>
+                            {% if m.testmode %}
+                            <p>
+                                <small>
+                                {% textbubble "warning" %}
+                                    {% trans "TEST MODE" %}
+                                {% endtextbubble %}
+                                </small>
+                            </p>
+                            {% endif %}
+                        </div>
+                        <div class="col-xs-5">
+                            <p>
+                                <div class="quotabox full-width">
+                                    <div class="progress">
+                                        <div class="progress-bar progress-bar-success progress-bar-{{ m.percentage_used }}">
                                         </div>
                                     </div>
-                                </dd>
-                            </div>
-                            <div class="col-xs-2">
-                                <dt class="sr-only">{% trans "Actions" %}</dt>
-                                <dd class="text-right">
-                                    <a href="{% abseventurl request.organizer "presale:organizer.customer.membership" id=m.id %}">
-                                        {% icon "list-ul" %}
-                                        {% trans "Details" %}
-                                    </a>
-                                </dd>
-                            </div>
-                        </dl>
-                    </li>
+                                    <div class="numbers">
+                                        {{ m.usages }} /
+                                        {{ m.membership_type.max_usages|default_if_none:"∞" }}
+                                    </div>
+                                </div>
+                            </p>
+                        </div>
+                        <div class="col-xs-2">
+                            <p class="text-right">
+                                <a href="{% abseventurl request.organizer "presale:organizer.customer.membership" id=m.id %}">
+                                    {% icon "list-ul" %}
+                                    {% trans "Details" %}
+                                </a>
+                            </p>
+                        </div>
+                    </article>
                     {% endfor %}
-                </ul>
+                </div>
             {% else %}
                 <p class="text-center">{% trans "You don’t have any memberships in your account yet." %}</p>
             {% endif %}
diff --git a/src/pretix/presale/templates/pretixpresale/organizers/customer_orders.html b/src/pretix/presale/templates/pretixpresale/organizers/customer_orders.html
index 0afd6ad9a5..b297bf7503 100644
--- a/src/pretix/presale/templates/pretixpresale/organizers/customer_orders.html
+++ b/src/pretix/presale/templates/pretixpresale/organizers/customer_orders.html
@@ -15,65 +15,60 @@
         </div>
         <div class="panel-body">
             {% if orders %}
-                <ul class="full-width-list alternating-rows">
+                <div class="event-list full-width-list alternating-rows">
                     {% for o in orders %}
-                    <li class="row">
-                        <dl>
-                            <div class="col-md-4 col-sm-5 col-xs-8">
-                                <dt class="sr-only">{% trans "Order" %}</dt>
-                                <dd><strong>
-                                        <a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}" target="_blank">
-                                            {% icon "shopping-cart" %}
-                                            {{ o.code }}</a>
-                                    </strong>
-                                    {% if o.customer_id != customer.pk %}
-                                        <span class="text-muted" data-toggle="tooltip"
-                                              title="{% trans "Matched to the account based on the email address." %}">
-                                            {% icon "compress" %}
-                                        </span>
-                                    {% endif %}
-                                    <small>{% include "pretixpresale/event/fragment_order_status.html" with order=o event=o.event %}</small>
-                                </dd>
-                                <dd><time datetime="{{ o.datetime|date:"Y-m-d H:i" }}" class="text-muted small">{{ o.datetime|date:"SHORT_DATETIME_FORMAT" }}</time></dd>
-                                {% if o.testmode %}
-                                    <dd>
-                                        <small>
-                                        {% textbubble "warning" %}
-                                            {% trans "TEST MODE" %}
-                                        {% endtextbubble %}
-                                        </small>
-                                    </dd>
+                    <article class="row">
+                        <div class="col-md-4 col-sm-5 col-xs-8">
+                            <h4><strong>
+                                    <a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}" target="_blank">
+                                        {% icon "shopping-cart" %}
+                                        {{ o.code }}</a>
+                                </strong>
+                                {% if o.customer_id != customer.pk %}
+                                    <span class="text-muted" data-toggle="tooltip"
+                                          title="{% trans "Matched to the account based on the email address." %}">
+                                        {% icon "compress" %}
+                                    </span>
                                 {% endif %}
-                            </div>
-                            <div class="col-md-2 col-sm-2 col-xs-4 text-right">
-                                <dt class="sr-only">{% trans "Order total" %}</dt>
-                                <dd>{{ o.total|money:o.event.currency }}</dd>
-                                <dt class="sr-only">{% trans "Positions" %}</dt>
-                                <dd class="text-muted"><small>{% blocktranslate count counter=o.count_positions|default_if_none:0 %}{{ counter }} item{% plural %}{{ counter }} items{% endblocktranslate %}</small>
-                                </dd>
-                            </div>
-                            <div class="col-md-4 col-sm-3 col-xs-8">
-                                <dt class="sr-only">{% trans "Event" %}</dt>
-                                <dd>
-                                    {{ o.event }}
-                                    {% if not o.event.has_subevents and o.event.settings.show_dates_on_frontpage %}
-                                        <br><small class="text-muted">{{ o.event.get_date_range_display }}</small>
-                                    {% endif %}
-                                </dd>
-                            </div>
-                            <div class="col-sm-2 col-xs-4">
-                                <dt class="sr-only">{% trans "Actions" %}</dt>
-                                <dd class="text-right">
-                                    <a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}"
-                                   target="_blank">
-                                    {% icon "list-ul" %}
-                                    {% trans "Details" %}
-                                </a></dd>
-                            </div>
-                        </dl>
-                    </li>
+                                <small>{% include "pretixpresale/event/fragment_order_status.html" with order=o event=o.event %}</small>
+                            </h4>
+                            <p><time datetime="{{ o.datetime|date:"Y-m-d H:i" }}" class="text-muted small">{{ o.datetime|date:"SHORT_DATETIME_FORMAT" }}</time></p>
+                            {% if o.testmode %}
+                                <p>
+                                    <small>
+                                    {% textbubble "warning" %}
+                                        {% trans "TEST MODE" %}
+                                    {% endtextbubble %}
+                                    </small>
+                                </p>
+                            {% endif %}
+                        </div>
+                        <div class="col-md-2 col-sm-2 col-xs-4 text-right">
+                            <p>
+                                {{ o.total|money:o.event.currency }}
+                                <br><span class="text-muted"><small>{% blocktranslate count counter=o.count_positions|default_if_none:0 %}{{ counter }} item{% plural %}{{ counter }} items{% endblocktranslate %}</small>
+                                </span>
+                            </p>
+                        </div>
+                        <div class="col-md-4 col-sm-3 col-xs-8">
+                            <p>
+                                {{ o.event }}
+                                {% if not o.event.has_subevents and o.event.settings.show_dates_on_frontpage %}
+                                    <br><small class="text-muted">{{ o.event.get_date_range_display }}</small>
+                                {% endif %}
+                            </p>
+                        </div>
+                        <div class="col-sm-2 col-xs-4">
+                            <p class="text-right">
+                                <a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}"
+                               target="_blank">
+                                {% icon "list-ul" %}
+                                {% trans "Details" %}
+                            </a></p>
+                        </div>
+                    </article>
                     {% endfor %}
-                </ul>
+                </div>
             {% else %}
                 <p class="text-center">{% trans "You don’t have any orders in your account yet." %}</p>
             {% endif %}
diff --git a/src/pretix/static/pretixpresale/scss/main.scss b/src/pretix/static/pretixpresale/scss/main.scss
index aa153ce20a..937983cb7f 100644
--- a/src/pretix/static/pretixpresale/scss/main.scss
+++ b/src/pretix/static/pretixpresale/scss/main.scss
@@ -594,15 +594,18 @@ h2 .label {
 }
 
 .event-list.full-width-list {
-    h3, p {
+    h3, h4, p {
         margin-top: 0;
         margin-bottom: 0;
     }
-    h3 {
+    h3, h4 {
         font-size: 1em;
         line-height: 1.25rem;
         font-weight: bold;
     }
+    h4 small {
+        font-size: 85%;
+    }
 }
 
 .quotabox {