From fdbcffd5fdeca101cf9e71ff98ed5df31605e36b Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Mon, 26 May 2025 15:13:00 +0200
Subject: [PATCH] [A11y] make location & time icons role=img with labels
 (#4955)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* Fix icons with role=img

* simplify css
---
 .../event/fragment_event_info.html            | 13 +++++++----
 .../static/pretixpresale/scss/main.scss       | 23 +++++++++----------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_event_info.html b/src/pretix/presale/templates/pretixpresale/event/fragment_event_info.html
index a617c6a75e..46142798e0 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_event_info.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_event_info.html
@@ -1,17 +1,22 @@
 {% load i18n %}
+{% load icon %}
 {% load eventurl %}
 {% if ev.location and show_location %}
     <div class="info-row">
-        <span class="fa fa-map-marker fa-fw" aria-hidden="true" title="{% trans "Where does the event happen?" %}"></span>
-        <p><span class="sr-only">{% trans "Where does the event happen?" %}</span>
+        <div class="info-row-icon" role="img" aria-label="{% trans "Where does the event happen?" %}">
+            {% icon "map-marker fa-fw" %}
+        </div>
+        <p>
             {{ ev.location|linebreaksbr }}
         </p>
     </div>
 {% endif %}
 {% if ev.settings.show_dates_on_frontpage %}
     <div class="info-row">
-        <span class="fa fa-clock-o fa-fw" aria-hidden="true" title="{% trans "When does the event happen?" %}"></span>
-        <p><span class="sr-only">{% trans "When does the event happen?" %}</span>
+        <div class="info-row-icon" role="img" aria-label="{% trans "When does the event happen?" %}">
+            {% icon "clock-o fa-fw" %}
+        </div>
+        <p>
             {{ ev.get_date_range_display_as_html }}
             {% if event.settings.show_times %}
                 <br>
diff --git a/src/pretix/static/pretixpresale/scss/main.scss b/src/pretix/static/pretixpresale/scss/main.scss
index ded92fe9e2..c648922e3c 100644
--- a/src/pretix/static/pretixpresale/scss/main.scss
+++ b/src/pretix/static/pretixpresale/scss/main.scss
@@ -397,27 +397,26 @@ body.loading .container {
 }
 
 .info-row {
-    & > .fa {
+    position: relative;
+    min-height: 30px;
+    margin-bottom: 10px;
+
+    .info-row-icon {
+        position: absolute;
+        top: -5px;
+        left: 0;
         font-size: 26px;
         color: $brand-primary;
-        float: left;
         margin-top: 3px;
-    }
-    & > img {
         width: 26px;
         height: auto;
-        float: left;
-        margin-top: 3px;
-        position: relative;
-        left: 3.71423px;  /* Position analog to what fa-fw does */
+        .fa {
+            vertical-align: top;
+        }
     }
     p {
-        min-height: 30px;
         margin-left: 40px;
     }
-    p:first-child {
-        margin-top: 0;
-    }
 }
 
 @media (min-width: $screen-md-min) {