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

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

* Fix icons with role=img

* simplify css

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>

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) {