[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 eventurl %}
<dl class="full-width-list alternating-rows">
<div class="event-list full-width-list alternating-rows">
{% for subev in subevent_list.subevent_list %}
<div class="row">
<dt 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 %}">
<article class="row" aria-labelledby="subevent-{{ subev.pk }}-label" aria-describedby="subevent-{{ subev.pk }}-desc">
<h3 class="col-md-4 col-xs-12">
<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 }}
</a>
</dt>
<dd class="col-md-3 col-xs-12">
</h3>
<p class="col-md-3 col-xs-12" id="subevent-{{ subev.pk }}-desc">
{{ subev.get_date_range_display_as_html }}
{% if event.settings.show_times %}
<br>
@@ -20,13 +20,13 @@
<time datetime="{{ subev.date_from.isoformat }}">{{ subev.date_from|date:"TIME_FORMAT" }}</time>
</span>
{% endif %}
</dd>
<dd class="col-md-3 col-xs-6">
</p>
<p class="col-md-3 col-xs-6">
<small>
{% include "pretixpresale/fragment_event_list_status.html" with event=subev %}
</small>
</dd>
<dd class="col-md-2 col-xs-6 text-right flip">
</p>
<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 %}">
{% if subev.presale_is_running and subev.best_availability_state == 100 %}
{% icon "ticket" %} {% trans "Tickets" %}
@@ -34,7 +34,7 @@
{% icon "info" %} {% trans "More info" %}
{% endif %}
</a>
</dd>
</div>
</p>
</article>
{% endfor %}
</dl>
</div>

View File

@@ -46,11 +46,11 @@
{% endif %}
{% if events %}
<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 %}
<div class="row">
<dt class="col-md-4 col-xs-12"><a href="{{ url }}">{{ e.name }}</a></dt>
<dd class="col-md-3 col-xs-12">
<article class="row" aria-labelledby="event-{{ e.pk }}-label" aria-describedby="event-{{ e.pk }}-desc">
<h3 class="col-md-4 col-xs-12"><a href="{{ url }}" id="event-{{ e.pk }}-label">{{ e.name }}</a></h3>
<p class="col-md-3 col-xs-12" id="event-{{ e.pk }}-desc">
{% if e.settings.show_dates_on_frontpage %}
{% if e.has_subevents %}
{% icon "calendar" %} {% trans "Multiple dates" context "subevent" %}
@@ -78,13 +78,13 @@
{% else %}
&nbsp;
{% endif %}
</dd>
<dd class="col-md-3 col-xs-6">
</p>
<p class="col-md-3 col-xs-6">
<small>
{% include "pretixpresale/fragment_event_list_status.html" with event=e %}
</small>
</dd>
<dd class="col-md-2 col-xs-6 text-right flip">
</p>
<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 %}">
{% if e.has_subevents %}{% icon "ticket" %} {% trans "Tickets" %}
{% elif e.presale_is_running and e.best_availability_state == 100 %}
@@ -93,10 +93,10 @@
{% icon "info" %} {% trans "More info" %}
{% endif %}
</a>
</dd>
</div>
</p>
</article>
{% endfor %}
</dl>
</div>
</div>
<hr>
{% endif %}

View File

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