From 37af6edeabf4e42cd28f427d6311562ff898f8f8 Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Fri, 23 May 2025 10:19:03 +0200
Subject: [PATCH] [A11y] move lightbox to native dialog (#5137)

* [A11y] move lightbox to native dialog

* fix width-sizing-issue

* move button label to aria-label

* increase padding for lightbox, so button does not overlay image

* Remove unused JS

* add close on backdrop-click

---------

Co-authored-by: Raphael Michel <michel@rami.io>
---
 .../templates/pretixpresale/fragment_js.html  |  1 -
 .../pretixpresale/fragment_modals.html        | 13 +++++++++++
 src/pretix/static/pretixbase/scss/_theme.scss | 23 +++++++++++++++++++
 src/pretix/static/pretixpresale/js/ui/main.js | 22 +++++++++++++++++-
 4 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/fragment_js.html b/src/pretix/presale/templates/pretixpresale/fragment_js.html
index 304452adc2..75a8478726 100644
--- a/src/pretix/presale/templates/pretixpresale/fragment_js.html
+++ b/src/pretix/presale/templates/pretixpresale/fragment_js.html
@@ -18,7 +18,6 @@
     <script type="text/javascript" src="{% static "pretixpresale/js/ui/cookieconsent.js" %}"></script>
     <script type="text/javascript" src="{% static "pretixbase/js/asynctask.js" %}"></script>
     <script type="text/javascript" src="{% static "pretixpresale/js/ui/cart.js" %}"></script>
-    <script type="text/javascript" src="{% static "lightbox/js/lightbox.js" %}"></script>
     <script type="text/javascript" src="{% static "pretixpresale/js/ui/iframe.js" %}"></script>
     <script type="text/javascript" src="{% static "pretixbase/js/addressform.js" %}"></script>
 {% endcompress %}
diff --git a/src/pretix/presale/templates/pretixpresale/fragment_modals.html b/src/pretix/presale/templates/pretixpresale/fragment_modals.html
index b62906d3eb..de6590c5ce 100644
--- a/src/pretix/presale/templates/pretixpresale/fragment_modals.html
+++ b/src/pretix/presale/templates/pretixpresale/fragment_modals.html
@@ -46,6 +46,19 @@
         </div>
     </div>
 </div>
+
+<dialog id="lightbox-dialog" role="alertdialog" aria-labelledby="lightbox-label">
+    <form method="dialog" class="modal-card">
+        <div class="modal-card-content">
+            <figure class="text-center text-muted">
+                <img />
+                <figcaption id="lightbox-label"></figcaption>
+            </figure>
+            <button id="lightbox-close" class="btn btn-default btn-xs" aria-label="{% trans "Close" %}">{% icon "close" %}</button>
+        </div>
+    </form>
+</dialog>
+
 {% if request.organizer and request.organizer.settings.cookie_consent %}
     <script type="text/plain" id="cookie-consent-storage-key">cookie-consent-{{ request.organizer.slug }}</script>
     {% if cookie_consent_from_widget %}
diff --git a/src/pretix/static/pretixbase/scss/_theme.scss b/src/pretix/static/pretixbase/scss/_theme.scss
index 2fecbd9d63..d64e8a7446 100644
--- a/src/pretix/static/pretixbase/scss/_theme.scss
+++ b/src/pretix/static/pretixbase/scss/_theme.scss
@@ -354,3 +354,26 @@ dialog[open], dialog[open]::backdrop {
   80% { transform: skewX(5deg); }
   100% { transform: skewX(0deg); }
 }
+
+#lightbox-dialog {
+  width: fit-content;
+  max-width: 80%;
+  min-width: 24em;
+  .modal-card-content {
+    padding: 2.5em;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  button {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+  }
+  figcaption {
+    margin-top: 1em;
+  }
+}
+
diff --git a/src/pretix/static/pretixpresale/js/ui/main.js b/src/pretix/static/pretixpresale/js/ui/main.js
index 5290d20f9c..5476d94f8c 100644
--- a/src/pretix/static/pretixpresale/js/ui/main.js
+++ b/src/pretix/static/pretixpresale/js/ui/main.js
@@ -696,7 +696,27 @@ $(function () {
     });
 
     // Lightbox
-    lightbox.init();
+    (function() {
+        var dialog = document.getElementById("lightbox-dialog");
+        var img = dialog.querySelector("img");
+        var caption = dialog.querySelector("figcaption");
+        $(dialog).on("mousedown", function (e) {
+            if (e.target == this) {
+                // dialog has no padding, so click triggers only on backdrop
+                this.close();
+            }
+        });
+        $("a[data-lightbox]").on("click", function (e) {
+            e.preventDefault();
+            var label = this.querySelector("img").alt;
+            img.src = this.href;
+            img.alt = label;
+            caption.textContent = label;
+            dialog.showModal();
+        });
+    })();
+
+
 
     // free-range price input auto-check checkbox/set count-input to 1 if 0
     $("[data-checked-onchange]").each(function() {