[A11y] Improve HTML-output for date-ranges

This commit is contained in:
Richard Schreiber
2025-03-27 13:21:25 +01:00
committed by GitHub
parent f70874b21c
commit 1a1948e3fa
5 changed files with 82 additions and 34 deletions

View File

@@ -33,7 +33,10 @@
# License for the specific language governing permissions and limitations under the License.
from django.utils.html import format_html
from django.utils.translation import get_language, gettext_lazy as _
from django.utils.safestring import mark_safe
from django.utils.translation import (
get_language, gettext_lazy as _, pgettext_lazy,
)
from pretix.helpers.templatetags.date_fast import date_fast as _date
@@ -48,23 +51,28 @@ def daterange(df, dt, as_html=False):
else:
if as_html:
base_format = format_html("<time datetime=\"{}\">{{}}</time>{{}}<time datetime=\"{}\">{{}}</time>", _date(df, "Y-m-d"), _date(dt, "Y-m-d"))
until = format_html(
" <span aria-hidden=\"true\"></span><span class=\"sr-only\"> {until} </span> ",
until=pgettext_lazy("timerange", "until")
)
else:
base_format = "{}{}{}"
until = " "
if lng.startswith("de"):
if df.year == dt.year and df.month == dt.month and df.day == dt.day:
return format_html(base_format, _date(df, "D, j. F Y"))
elif df.year == dt.year and df.month == dt.month:
return format_html(base_format, _date(df, "j."), "", _date(dt, "j. F Y"))
return format_html(base_format, _date(df, "j."), mark_safe(until.strip()), _date(dt, "j. F Y"))
elif df.year == dt.year:
return format_html(base_format, _date(df, "j. F"), " ", _date(dt, "j. F Y"))
return format_html(base_format, _date(df, "j. F"), until, _date(dt, "j. F Y"))
elif lng.startswith("en"):
if df.year == dt.year and df.month == dt.month and df.day == dt.day:
return format_html(base_format, _date(df, "D, N jS, Y"))
elif df.year == dt.year and df.month == dt.month:
return format_html(base_format, _date(df, "N jS"), " ", _date(dt, "jS, Y"))
return format_html(base_format, _date(df, "N jS"), until, _date(dt, "jS, Y"))
elif df.year == dt.year:
return format_html(base_format, _date(df, "N jS"), " ", _date(dt, "N jS, Y"))
return format_html(base_format, _date(df, "N jS"), until, _date(dt, "N jS, Y"))
elif lng.startswith("es"):
if df.year == dt.year and df.month == dt.month and df.day == dt.day:
return format_html(base_format, _date(df, "DATE_FORMAT"))
@@ -72,14 +80,14 @@ def daterange(df, dt, as_html=False):
return format_html(
base_format,
_date(df, "j"),
" - ",
until,
"{} de {} de {}".format(_date(dt, "j"), _date(dt, "F"), _date(dt, "Y"))
)
elif df.year == dt.year:
return format_html(
base_format,
"{} de {}".format(_date(df, "j"), _date(df, "F")),
" - ",
until,
"{} de {} de {}".format(_date(dt, "j"), _date(dt, "F"), _date(dt, "Y"))
)
@@ -89,24 +97,31 @@ def daterange(df, dt, as_html=False):
if as_html:
base_format = "<time datetime=\"{}\">{}</time>"
return format_html(
"{date_from} {date_to}",
"{date_from}{until}{date_to}",
date_from=format_html(base_format, _date(df, "Y-m-d"), _date(df, "DATE_FORMAT")),
date_to=format_html(base_format, _date(dt, "Y-m-d"), _date(dt, "DATE_FORMAT")),
until=until,
)
return _("{date_from} {date_to}").format(
return _("{date_from}{until}{date_to}").format(
date_from=_date(df, "DATE_FORMAT"),
date_to=_date(dt, "DATE_FORMAT"),
until=until,
)
def datetimerange(df, dt, as_html=False):
if as_html:
base_format = format_html("<time datetime=\"{}\">{{}}</time>{{}}<time datetime=\"{}\">{{}}</time>", _date(df, "Y-m-d H:i"), _date(dt, "Y-m-d H:i"))
until = format_html(
" <span aria-hidden=\"true\"></span><span class=\"sr-only\"> {until} </span> ",
until=pgettext_lazy("timerange", "until")
)
else:
base_format = "{}{}{}"
until = " "
if df.year == dt.year and df.month == dt.month and df.day == dt.day:
return format_html(base_format, _date(df, "SHORT_DATE_FORMAT") + " " + _date(df, "TIME_FORMAT"), " ", _date(dt, "TIME_FORMAT"))
return format_html(base_format, _date(df, "SHORT_DATE_FORMAT") + " " + _date(df, "TIME_FORMAT"), until, _date(dt, "TIME_FORMAT"))
else:
return format_html(base_format, _date(df, "SHORT_DATETIME_FORMAT"), " ", _date(dt, "SHORT_DATETIME_FORMAT"))
return format_html(base_format, _date(df, "SHORT_DATETIME_FORMAT"), until, _date(dt, "SHORT_DATETIME_FORMAT"))

View File

@@ -1,5 +1,6 @@
{% extends "pretixpresale/organizers/base.html" %}
{% load i18n %}
{% load date_fast %}
{% load icon %}
{% load rich_text %}
{% load tz %}
@@ -68,9 +69,10 @@
<br>
<span class="text-muted" data-time="{{ e.date_from.isoformat }}" data-timezone="{{ e.tzname }}">
{% icon "clock-o" %}
{{ e.date_from|date:"TIME_FORMAT" }}
<time datetime="{{ e.date_from|date_fast:"H:i" }}">{{ e.date_from|date:"TIME_FORMAT" }}</time>
{% if e.settings.show_date_to and e.date_to and e.date_to.date == e.date_from.date %}
{{ e.date_to|date:"TIME_FORMAT" }}
<span aria-hidden="true"></span><span class="sr-only">{% trans "until" context "timerange" %}</span>
<time datetime="{{ e.date_to|date_fast:"H:i" }}">{{ e.date_to|date:"TIME_FORMAT" }}</time>
{% endif %}
</span>
{% endtimezone %}

View File

@@ -479,7 +479,8 @@ class OrganizerIndex(OrganizerViewMixin, EventListMixin, ListView):
if event.has_subevents:
event.daterange = daterange(
event.min_from.astimezone(event.tzname),
(event.max_fromto or event.max_to or event.max_from).astimezone(event.tzname)
(event.max_fromto or event.max_to or event.max_from).astimezone(event.tzname),
as_html=True,
)
query_data = self.request.GET.copy()

View File

@@ -2476,18 +2476,26 @@ class EventTest(TestCase):
datetime.datetime(2025, 3, 9, 21, 0, 0, tzinfo=tz),
datetime.datetime(2025, 3, 10, 3, 0, 0, tzinfo=tz),
'March 9th 10th, 2025',
'<time datetime="2025-03-09">March 9th</time> <time datetime="2025-03-10">10th, 2025</time>',
'<time datetime="2025-03-09">March 9th</time> '
'<span aria-hidden="true"></span><span class="sr-only"> until </span> '
'<time datetime="2025-03-10">10th, 2025</time>',
'March 9th 10th, 2025 20:0002:00',
'<time datetime="2025-03-09">March 9th</time> <time datetime="2025-03-10">10th, 2025</time> '
'<time datetime="2025-03-09">March 9th</time> '
'<span aria-hidden="true"></span><span class="sr-only"> until </span> '
'<time datetime="2025-03-10">10th, 2025</time> '
'<time datetime="2025-03-09T21:00:00+01:00" data-timezone="UTC" data-time-short>20:0002:00</time>'
),
(
datetime.datetime(2025, 3, 9, 21, 0, 0, tzinfo=tz),
datetime.datetime(2025, 3, 12, 14, 0, 0, tzinfo=tz),
'March 9th 12th, 2025',
'<time datetime="2025-03-09">March 9th</time> <time datetime="2025-03-12">12th, 2025</time>',
'<time datetime="2025-03-09">March 9th</time> '
'<span aria-hidden="true"></span><span class="sr-only"> until </span> '
'<time datetime="2025-03-12">12th, 2025</time>',
'March 9th 12th, 2025',
'<time datetime="2025-03-09">March 9th</time> <time datetime="2025-03-12">12th, 2025</time>',
'<time datetime="2025-03-09">March 9th</time> '
'<span aria-hidden="true"></span><span class="sr-only"> until </span> '
'<time datetime="2025-03-12">12th, 2025</time>',
),
(
datetime.datetime(2025, 3, 9, 21, 0, 0, tzinfo=tz),

View File

@@ -73,7 +73,9 @@ def test_same_month_german():
df = date(2003, 2, 1)
dt = date(2003, 2, 3)
assert daterange(df, dt) == "1.3. Februar 2003"
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">1.</time><time datetime="2003-02-03">3. Februar 2003</time>'
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">1.</time>' \
'<span aria-hidden="true"></span><span class="sr-only"> bis </span>' \
'<time datetime="2003-02-03">3. Februar 2003</time>'
def test_same_month_english():
@@ -81,15 +83,19 @@ def test_same_month_english():
df = date(2003, 2, 1)
dt = date(2003, 2, 3)
assert daterange(df, dt) == "Feb. 1st 3rd, 2003"
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">Feb. 1st</time> <time datetime="2003-02-03">3rd, 2003</time>'
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">Feb. 1st</time> ' \
'<span aria-hidden="true"></span><span class="sr-only"> until </span> ' \
'<time datetime="2003-02-03">3rd, 2003</time>'
def test_same_month_spanish():
with translation.override('es'):
df = date(2003, 2, 1)
dt = date(2003, 2, 3)
assert daterange(df, dt) == "1 - 3 de febrero de 2003"
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">1</time> - <time datetime="2003-02-03">3 de febrero de 2003</time>'
assert daterange(df, dt) == "1 3 de febrero de 2003"
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">1</time> ' \
'<span aria-hidden="true"></span><span class="sr-only"> hasta </span> ' \
'<time datetime="2003-02-03">3 de febrero de 2003</time>'
def test_same_year_german():
@@ -97,7 +103,9 @@ def test_same_year_german():
df = date(2003, 2, 1)
dt = date(2003, 4, 3)
assert daterange(df, dt) == "1. Februar 3. April 2003"
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">1. Februar</time> <time datetime="2003-04-03">3. April 2003</time>'
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">1. Februar</time> ' \
'<span aria-hidden="true"></span><span class="sr-only"> bis </span> ' \
'<time datetime="2003-04-03">3. April 2003</time>'
def test_same_year_english():
@@ -105,15 +113,19 @@ def test_same_year_english():
df = date(2003, 2, 1)
dt = date(2003, 4, 3)
assert daterange(df, dt) == "Feb. 1st April 3rd, 2003"
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">Feb. 1st</time> <time datetime="2003-04-03">April 3rd, 2003</time>'
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">Feb. 1st</time> ' \
'<span aria-hidden="true"></span><span class="sr-only"> until </span> ' \
'<time datetime="2003-04-03">April 3rd, 2003</time>'
def test_same_year_spanish():
with translation.override('es'):
df = date(2003, 2, 1)
dt = date(2003, 4, 3)
assert daterange(df, dt) == "1 de febrero - 3 de abril de 2003"
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">1 de febrero</time> - <time datetime="2003-04-03">3 de abril de 2003</time>'
assert daterange(df, dt) == "1 de febrero 3 de abril de 2003"
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">1 de febrero</time> ' \
'<span aria-hidden="true"></span><span class="sr-only"> hasta </span> ' \
'<time datetime="2003-04-03">3 de abril de 2003</time>'
def test_different_dates_german():
@@ -121,7 +133,9 @@ def test_different_dates_german():
df = date(2003, 2, 1)
dt = date(2005, 4, 3)
assert daterange(df, dt) == "1. Februar 2003 3. April 2005"
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">1. Februar 2003</time> <time datetime="2005-04-03">3. April 2005</time>'
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">1. Februar 2003</time> ' \
'<span aria-hidden="true"></span><span class="sr-only"> bis </span> ' \
'<time datetime="2005-04-03">3. April 2005</time>'
def test_different_dates_english():
@@ -129,7 +143,9 @@ def test_different_dates_english():
df = date(2003, 2, 1)
dt = date(2005, 4, 3)
assert daterange(df, dt) == "Feb. 1, 2003 April 3, 2005"
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">Feb. 1, 2003</time> <time datetime="2005-04-03">April 3, 2005</time>'
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">Feb. 1, 2003</time> ' \
'<span aria-hidden="true"></span><span class="sr-only"> until </span> ' \
'<time datetime="2005-04-03">April 3, 2005</time>'
def test_different_dates_spanish():
@@ -137,7 +153,8 @@ def test_different_dates_spanish():
df = date(2003, 2, 1)
dt = date(2005, 4, 3)
assert daterange(df, dt) == "1 de febrero de 2003 3 de abril de 2005"
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">1 de febrero de 2003</time> ' \
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">1 de febrero de 2003</time> ' \
'<span aria-hidden="true"></span><span class="sr-only"> hasta </span> ' \
'<time datetime="2005-04-03">3 de abril de 2005</time>'
@@ -146,7 +163,8 @@ def test_different_dates_other_lang():
df = date(2003, 2, 1)
dt = date(2005, 4, 3)
assert daterange(df, dt) == "01 Şubat 2003 03 Nisan 2005"
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">01 Şubat 2003</time> ' \
assert daterange(df, dt, as_html=True) == '<time datetime="2003-02-01">01 Şubat 2003</time> ' \
'<span aria-hidden="true"></span><span class="sr-only"> until </span> ' \
'<time datetime="2005-04-03">03 Nisan 2005</time>'
@@ -155,13 +173,15 @@ def test_datetime_same_day():
df = datetime(2003, 2, 1, 9, 0)
dt = datetime(2003, 2, 1, 10, 0)
assert datetimerange(df, dt) == "01.02.2003 09:00 10:00"
assert datetimerange(df, dt, as_html=True) == '<time datetime="2003-02-01 09:00">01.02.2003 09:00</time> ' \
assert datetimerange(df, dt, as_html=True) == '<time datetime="2003-02-01 09:00">01.02.2003 09:00</time> ' \
'<span aria-hidden="true"></span><span class="sr-only"> bis </span> ' \
'<time datetime="2003-02-01 10:00">10:00</time>'
with language('en', 'US'):
df = datetime(2003, 2, 1, 9, 0)
dt = datetime(2003, 2, 1, 10, 0)
assert datetimerange(df, dt) == "02/01/2003 9 a.m. 10 a.m."
assert datetimerange(df, dt, as_html=True) == '<time datetime="2003-02-01 09:00">02/01/2003 9 a.m.</time> ' \
assert datetimerange(df, dt, as_html=True) == '<time datetime="2003-02-01 09:00">02/01/2003 9 a.m.</time> ' \
'<span aria-hidden="true"></span><span class="sr-only"> until </span> ' \
'<time datetime="2003-02-01 10:00">10 a.m.</time>'
@@ -170,11 +190,13 @@ def test_datetime_different_day():
df = datetime(2003, 2, 1, 9, 0)
dt = datetime(2003, 2, 2, 10, 0)
assert datetimerange(df, dt) == "01.02.2003 09:00 02.02.2003 10:00"
assert datetimerange(df, dt, as_html=True) == '<time datetime="2003-02-01 09:00">01.02.2003 09:00</time> ' \
assert datetimerange(df, dt, as_html=True) == '<time datetime="2003-02-01 09:00">01.02.2003 09:00</time> ' \
'<span aria-hidden="true"></span><span class="sr-only"> bis </span> ' \
'<time datetime="2003-02-02 10:00">02.02.2003 10:00</time>'
with language('en', 'US'):
df = datetime(2003, 2, 1, 9, 0)
dt = datetime(2003, 2, 2, 10, 0)
assert datetimerange(df, dt) == "02/01/2003 9 a.m. 02/02/2003 10 a.m."
assert datetimerange(df, dt, as_html=True) == '<time datetime="2003-02-01 09:00">02/01/2003 9 a.m.</time> ' \
assert datetimerange(df, dt, as_html=True) == '<time datetime="2003-02-01 09:00">02/01/2003 9 a.m.</time> ' \
'<span aria-hidden="true"></span><span class="sr-only"> until </span> ' \
'<time datetime="2003-02-02 10:00">02/02/2003 10 a.m.</time>'