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

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;
+  }
+}
+

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