[A11y] change event-list from dl to articles with h3 (#5085)

This commit is contained in:
Richard Schreiber
2025-05-14 21:51:54 +02:00
committed by GitHub
parent c17a090244
commit 6766d649f5
3 changed files with 32 additions and 39 deletions

View File

@@ -2,15 +2,15 @@
{% load icon %} {% load icon %}
{% load eventurl %} {% load eventurl %}
<dl class="full-width-list alternating-rows"> <div class="event-list full-width-list alternating-rows">
{% for subev in subevent_list.subevent_list %} {% for subev in subevent_list.subevent_list %}
<div class="row"> <article class="row" aria-labelledby="subevent-{{ subev.pk }}-label" aria-describedby="subevent-{{ subev.pk }}-desc">
<dt class="col-md-4 col-xs-12"> <h3 class="col-md-4 col-xs-12">
<a href="{% if request.GET.voucher %}{% eventurl event "presale:event.redeem" cart_namespace=cart_namespace %}?voucher={{ request.GET.voucher|urlencode }}&amp;subevent={{ subev.pk }}{% else %}{% eventurl event "presale:event.index" subevent=subev.id cart_namespace=cart_namespace %}{% endif %}"> <a id="subevent-{{ subev.pk }}-label" href="{% if request.GET.voucher %}{% eventurl event "presale:event.redeem" cart_namespace=cart_namespace %}?voucher={{ request.GET.voucher|urlencode }}&amp;subevent={{ subev.pk }}{% else %}{% eventurl event "presale:event.index" subevent=subev.id cart_namespace=cart_namespace %}{% endif %}">
{{ subev.name }} {{ subev.name }}
</a> </a>
</dt> </h3>
<dd class="col-md-3 col-xs-12"> <p class="col-md-3 col-xs-12" id="subevent-{{ subev.pk }}-desc">
{{ subev.get_date_range_display_as_html }} {{ subev.get_date_range_display_as_html }}
{% if event.settings.show_times %} {% if event.settings.show_times %}
<br> <br>
@@ -20,13 +20,13 @@
<time datetime="{{ subev.date_from.isoformat }}">{{ subev.date_from|date:"TIME_FORMAT" }}</time> <time datetime="{{ subev.date_from.isoformat }}">{{ subev.date_from|date:"TIME_FORMAT" }}</time>
</span> </span>
{% endif %} {% endif %}
</dd> </p>
<dd class="col-md-3 col-xs-6"> <p class="col-md-3 col-xs-6">
<small> <small>
{% include "pretixpresale/fragment_event_list_status.html" with event=subev %} {% include "pretixpresale/fragment_event_list_status.html" with event=subev %}
</small> </small>
</dd> </p>
<dd class="col-md-2 col-xs-6 text-right flip"> <p class="col-md-2 col-xs-6 text-right flip">
<a class="btn btn-primary btn-block" href="{% if request.GET.voucher %}{% eventurl event "presale:event.redeem" cart_namespace=cart_namespace %}?voucher={{ request.GET.voucher|urlencode }}&amp;subevent={{ subev.pk }}{% else %}{% eventurl event "presale:event.index" subevent=subev.id cart_namespace=cart_namespace %}{% endif %}"> <a class="btn btn-primary btn-block" href="{% if request.GET.voucher %}{% eventurl event "presale:event.redeem" cart_namespace=cart_namespace %}?voucher={{ request.GET.voucher|urlencode }}&amp;subevent={{ subev.pk }}{% else %}{% eventurl event "presale:event.index" subevent=subev.id cart_namespace=cart_namespace %}{% endif %}">
{% if subev.presale_is_running and subev.best_availability_state == 100 %} {% if subev.presale_is_running and subev.best_availability_state == 100 %}
{% icon "ticket" %} {% trans "Tickets" %} {% icon "ticket" %} {% trans "Tickets" %}
@@ -34,7 +34,7 @@
{% icon "info" %} {% trans "More info" %} {% icon "info" %} {% trans "More info" %}
{% endif %} {% endif %}
</a> </a>
</dd> </p>
</div> </article>
{% endfor %} {% endfor %}
</dl> </div>

View File

@@ -46,11 +46,11 @@
{% endif %} {% endif %}
{% if events %} {% if events %}
<div class="panel-body"> <div class="panel-body">
<dl class="full-width-list alternating-rows"> <div class="event-list full-width-list alternating-rows">
{% for e in events %}{% eventurl e "presale:event.index" as url %} {% for e in events %}{% eventurl e "presale:event.index" as url %}
<div class="row"> <article class="row" aria-labelledby="event-{{ e.pk }}-label" aria-describedby="event-{{ e.pk }}-desc">
<dt class="col-md-4 col-xs-12"><a href="{{ url }}">{{ e.name }}</a></dt> <h3 class="col-md-4 col-xs-12"><a href="{{ url }}" id="event-{{ e.pk }}-label">{{ e.name }}</a></h3>
<dd class="col-md-3 col-xs-12"> <p class="col-md-3 col-xs-12" id="event-{{ e.pk }}-desc">
{% if e.settings.show_dates_on_frontpage %} {% if e.settings.show_dates_on_frontpage %}
{% if e.has_subevents %} {% if e.has_subevents %}
{% icon "calendar" %} {% trans "Multiple dates" context "subevent" %} {% icon "calendar" %} {% trans "Multiple dates" context "subevent" %}
@@ -78,13 +78,13 @@
{% else %} {% else %}
&nbsp; &nbsp;
{% endif %} {% endif %}
</dd> </p>
<dd class="col-md-3 col-xs-6"> <p class="col-md-3 col-xs-6">
<small> <small>
{% include "pretixpresale/fragment_event_list_status.html" with event=e %} {% include "pretixpresale/fragment_event_list_status.html" with event=e %}
</small> </small>
</dd> </p>
<dd class="col-md-2 col-xs-6 text-right flip"> <p class="col-md-2 col-xs-6 text-right flip">
<a class="btn btn-primary btn-block" href="{{ url }}{% if e.has_subevents and e.match_by_subevents %}{{ filterquery }}{% endif %}"> <a class="btn btn-primary btn-block" href="{{ url }}{% if e.has_subevents and e.match_by_subevents %}{{ filterquery }}{% endif %}">
{% if e.has_subevents %}{% icon "ticket" %} {% trans "Tickets" %} {% if e.has_subevents %}{% icon "ticket" %} {% trans "Tickets" %}
{% elif e.presale_is_running and e.best_availability_state == 100 %} {% elif e.presale_is_running and e.best_availability_state == 100 %}
@@ -93,10 +93,10 @@
{% icon "info" %} {% trans "More info" %} {% icon "info" %} {% trans "More info" %}
{% endif %} {% endif %}
</a> </a>
</dd> </p>
</div> </article>
{% endfor %} {% endfor %}
</dl> </div>
</div> </div>
<hr> <hr>
{% endif %} {% endif %}

View File

@@ -593,22 +593,15 @@ h2 .label {
display: none !important; display: none !important;
} }
.event-list { .event-list.full-width-list {
margin-bottom: 15px; h3, p {
border-top: 1px solid $table-border-color; margin-top: 0;
margin-bottom: 0;
.row {
margin-left: 0;
margin-right: 0;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid $table-border-color;
border-left: 1px solid $table-border-color;
border-right: 1px solid $table-border-color;
} }
.row > div { h3 {
padding-top: 5px; font-size: 1em;
padding-bottom: 5px; line-height: 1.25rem;
font-weight: bold;
} }
} }