[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/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 %}

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 %}

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