[A11y] move timezone info inline instead of tooltip (#5130)

* [A11y] move timezone info inline instead of tooltip

* Update text as suggested from code review

Co-authored-by: Raphael Michel <michel@rami.io>

* Rebase migration

* Delete src/pretix/base/migrations/0280_event_is_remote.py

---------

Co-authored-by: Raphael Michel <michel@rami.io>

src/pretix/base/migrations/0281_event_is_remote.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.16 on 2025-05-20 11:12
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("pretixbase", "0280_cartposition_max_extend"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="event",
+            name="is_remote",
+            field=models.BooleanField(default=False),
+        ),
+    ]

src/pretix/base/models/event.py

@@ -616,6 +616,11 @@ class Event(EventMixin, LoggedModel):
         max_length=200,
         verbose_name=_("Location"),
     )
+    is_remote = models.BooleanField(
+        default=False,
+        verbose_name=_("This event is remote or partially remote."),
+        help_text=_("This will be used to let users know if the event is in a different timezone and let’s us calculate users’ local times."),
+    )
     geo_lat = models.FloatField(
         verbose_name=_("Latitude"),
         null=True, blank=True,

src/pretix/control/forms/event.py

@@ -175,6 +175,7 @@ class EventWizardBasicsForm(I18nModelForm):
             'presale_start',
             'presale_end',
             'location',
+            'is_remote',
             'geo_lat',
             'geo_lon',
         ]
@@ -448,6 +449,7 @@ class EventUpdateForm(I18nModelForm):
             'presale_start',
             'presale_end',
             'location',
+            'is_remote',
             'geo_lat',
             'geo_lon',
             'all_sales_channels',

src/pretix/control/templates/pretixcontrol/event/settings.html

@@ -61,6 +61,7 @@
                 {% bootstrap_field sform.locale layout="control" %}
                 {% bootstrap_field sform.timezone layout="control" %}
                 {% bootstrap_field sform.region layout="control" %}
+                {% bootstrap_field form.is_remote layout="control" %}
             </fieldset>
             <fieldset>
                 <legend>{% trans "Customer and attendee data" %}</legend>

src/pretix/presale/templates/pretixpresale/event/index.html

@@ -175,7 +175,7 @@
             </div>
         {% endif %}
         {% if not cart_namespace or subevent %}
-            <div>
+            <div{% if request.event.is_remote%} class="event-is-remote"{% endif %}>
                 {% include "pretixpresale/event/fragment_event_info.html" with event=request.event subevent=subevent ev=ev show_location=True %}
             </div>
             {% eventsignal event "pretix.presale.signals.front_page_top" request=request subevent=subevent %}

src/pretix/presale/templates/pretixpresale/organizers/index.html

@@ -50,7 +50,7 @@
                 {% for e in events %}{% eventurl e "presale:event.index" as url %}
                     <article class="row" aria-labelledby="event-{{ e.pk }}-label" aria-describedby="event-{{ e.pk }}-desc">
                         <h3 class="col-md-4 col-xs-12"><a href="{{ url }}" id="event-{{ e.pk }}-label" class="no-underline">{{ e.name }}</a></h3>
-                        <p class="col-md-3 col-xs-12" id="event-{{ e.pk }}-desc">
+                        <p class="col-md-3 col-xs-12{% if e.is_remote%} event-is-remote{% endif %}" id="event-{{ e.pk }}-desc">
                         {% if e.settings.show_dates_on_frontpage %}
                             {% if e.has_subevents %}
                                 {% icon "calendar" %} {% trans "Multiple dates" context "subevent" %}

src/pretix/static/pretixpresale/js/ui/main.js

@@ -572,35 +572,17 @@ $(function () {
     form_handlers($("body"));
 
     var local_tz = moment.tz.guess()
-    $("span[data-timezone], small[data-timezone], time[data-timezone]").each(function() {
+    $(".event-is-remote span[data-timezone]").each(function() {
         var t = moment.tz($(this).attr("datetime") || $(this).attr("data-time"), $(this).attr("data-timezone"))
         var tz = moment.tz.zone($(this).attr("data-timezone"))
-        var tpl = '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner text-nowrap"></div></div>';
 
-        $(this).tooltip({
-            "title": gettext("Time zone:") + " " + tz.abbr(t),
-            "template": tpl
-        });
         if (t.tz(tz.name).format() !== t.tz(local_tz).format()) {
-            var $add = $("<span>")
-            $add.append(" ")
-            $add.append($("<span>").addClass("fa fa-globe"))
-            if ($(this).is("[data-time-short]")) {
-                $add.append($("<em>").text(" " + t.tz(local_tz).format($("body").attr("data-timeformat"))))
-            } else {
-                $add.addClass("text-muted")
-                $add.append(" " + gettext("Your local time:") + " ")
-                if (t.tz(tz.name).format("YYYY-MM-DD") != t.tz(local_tz).format("YYYY-MM-DD")) {
-                    $add.append(t.tz(local_tz).format($("body").attr("data-datetimeformat")))
-                } else {
-                    $add.append(t.tz(local_tz).format($("body").attr("data-timeformat")))
-                }
-            }
+            var format = t.tz(tz.name).format("YYYY-MM-DD") != t.tz(local_tz).format("YYYY-MM-DD") ? "datetimeformat" : "timeformat";
+            var time_str = t.tz(local_tz).format($("body").data(format));
+            var $add = $("<small>").addClass("text-muted").append(" (" + gettext("Your local time:") + " ")
+            $add.append($('<time>').attr("datetime", time_str).text(time_str))
+            $add.append(" " + moment.tz.zone(local_tz).abbr(t) + ")");
             $add.insertAfter($(this));
-            $add.tooltip({
-                "title": gettext("Time zone:") + " " + moment.tz.zone(local_tz).abbr(t),
-                "template": tpl
-            });
         }
     });