[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
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

View File

@@ -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>