CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-06 15:24:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

[A11y] make location & time icons role=img with labels (#4955)

Browse Source 
* [A11y] use icon’s title-attribute instead of hidden text for events location and time

* Fix icons with role=img

* simplify css
This commit is contained in:
Richard Schreiber
2025-05-26 15:13:00 +02:00
committed by GitHub
parent 902527f8aa
commit fdbcffd5fd
2 changed files with 20 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/pretix/presale/templates/pretixpresale/event/fragment_event_info.html
View File

@@ -1,17 +1,22 @@
{% load i18n %} {% load i18n %}
{% load icon %}
{% load eventurl %} {% load eventurl %}
{% if ev.location and show_location %} {% if ev.location and show_location %}
<div class="info-row"> <div class="info-row">
<span class="fa fa-map-marker fa-fw" aria-hidden="true" title="{% trans "Where does the event happen?" %}"></span> <div class="info-row-icon" role="img" aria-label="{% trans "Where does the event happen?" %}">
<p><span class="sr-only">{% trans "Where does the event happen?" %}</span> {% icon "map-marker fa-fw" %}
</div>
<p>
{{ ev.location|linebreaksbr }} {{ ev.location|linebreaksbr }}
</p> </p>
</div> </div>
{% endif %} {% endif %}
{% if ev.settings.show_dates_on_frontpage %} {% if ev.settings.show_dates_on_frontpage %}
<div class="info-row"> <div class="info-row">
<span class="fa fa-clock-o fa-fw" aria-hidden="true" title="{% trans "When does the event happen?" %}"></span> <div class="info-row-icon" role="img" aria-label="{% trans "When does the event happen?" %}">
<p><span class="sr-only">{% trans "When does the event happen?" %}</span> {% icon "clock-o fa-fw" %}
</div>
<p>
{{ ev.get_date_range_display_as_html }} {{ ev.get_date_range_display_as_html }}
{% if event.settings.show_times %} {% if event.settings.show_times %}
<br> <br>

23
src/pretix/static/pretixpresale/scss/main.scss
View File

@@ -397,27 +397,26 @@ body.loading .container {
} }
.info-row { .info-row {
& > .fa { position: relative;
min-height: 30px;
margin-bottom: 10px;
.info-row-icon {
position: absolute;
top: -5px;
left: 0;
font-size: 26px; font-size: 26px;
color: $brand-primary; color: $brand-primary;
float: left;
margin-top: 3px; margin-top: 3px;
}
& > img {
width: 26px; width: 26px;
height: auto; height: auto;
float: left; .fa {
margin-top: 3px; vertical-align: top;
position: relative; }
left: 3.71423px; /* Position analog to what fa-fw does */
} }
p { p {
min-height: 30px;
margin-left: 40px; margin-left: 40px;
} }
p:first-child {
margin-top: 0;
}
} }
@media (min-width: $screen-md-min) { @media (min-width: $screen-md-min) {