[A11y] switch modal dialogs to <dialog> tag (#5128)

* add templatetag {% dialog %} using <dialog> tag
* new dialog style
* show dialog when empty add-to-cart instead of disabling the button
* update cookieconsent-modal to use new template tag

src/pretix/static/pretixbase/scss/_theme.scss

@@ -262,3 +262,95 @@ svg.svg-icon {
 @include table-row-variant('info', var(--pretix-brand-info-success-lighten-30), var(--pretix-brand-info-success-lighten-25));
 @include table-row-variant('warning', var(--pretix-brand-warning-lighten-40), var(--pretix-brand-warning-lighten-35));
 @include table-row-variant('danger', var(--pretix-brand-danger-lighten-30), var(--pretix-brand-danger-lighten-25));
+
+
+
+
+dialog {
+  border: none;
+  width: 80%;
+  max-width: 43em;
+  padding: 0;
+  box-shadow: 0 7px 14px 0 rgba(78, 50, 92, 0.1),0 3px 6px 0 rgba(0,0,0,.07);
+  background: white;
+  border-radius: $border-radius-large;
+
+  opacity: 0;
+  transition: opacity .5s allow-discrete;
+
+  .modal-card {
+    display: flex;
+    flex-direction: column;
+    align-content: stretch;
+  }
+  .modal-card-icon {
+    background: $brand-primary;
+    font-size: 2em;
+    color: white;
+    text-align: center;
+    padding: 3px;
+  }
+  .modal-card-content {
+    padding: 1.5em;
+  }
+  .modal-card-content>*:last-child {
+    margin-bottom: 0;
+  }
+  .modal-card-content>*:first-child {
+    margin-top: 0;
+  }
+
+  .modal-card-confirm {
+    margin-top: 2em;
+    display: flex;
+    justify-content: flex-end;
+    gap: 1em;
+    align-items: center;
+  }
+  .modal-card-confirm-spread {
+    justify-content: space-between;
+  }
+}
+dialog::backdrop {
+  background-color: rgba(255, 255, 255, .5);
+  opacity: 0;
+  transition: opacity .5s allow-discrete;
+}
+dialog[open], dialog[open]::backdrop {
+  opacity: 1;
+}
+@starting-style {
+  dialog[open], dialog[open]::backdrop  {
+    opacity: 0;
+  }
+}
+
+@media screen and (min-width: $screen-sm-min) {
+  dialog {
+    .modal-card:has(.modal-card-icon) {
+      flex-direction: row;
+    }
+    .modal-card-content {
+      padding: 2em;
+    }
+    .modal-card-icon {
+      font-size: 4em;
+      padding: 6px 16px;
+    }
+  }
+}
+
+.shake-once {
+  animation: shake .2s;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+}
+
+@keyframes shake {
+  0% { transform: skewX(0deg); }
+  20% { transform: skewX(-5deg); }
+  40% { transform: skewX(5deg); }
+  60% { transform: skewX(-5deg); }
+  80% { transform: skewX(5deg); }
+  100% { transform: skewX(0deg); }
+}

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

@@ -6,7 +6,7 @@ $(function () {
     var storage_key = $("#cookie-consent-storage-key").text();
     var widget_consent = $("#cookie-consent-from-widget").text();
     var consent_checkboxes = $("#cookie-consent-details input[type=checkbox][name]");
-    var consent_modal = $("#cookie-consent-modal");
+    var consent_modal = document.getElementById("cookie-consent-modal");
 
     function update_consent(consent, sessionOnly) {
         if (storage_key && window.sessionStorage && sessionOnly) {
@@ -108,25 +108,32 @@ $(function () {
 
     _set_button_text();
     if (show_dialog) {
-        // We use .css() instead of .show() because of some weird issue that only occurs in Firefox
-        // and only within the widget.
-        consent_modal.css("display", "block");
+        consent_modal.showModal();
+        consent_modal.addEventListener("cancel", function() {
+            // Dialog was initially shown, interpret Escape as „do not consent to new providers“
+            var consent = {};
+            consent_checkboxes.each(function () {
+                consent[this.name] = storage_val[this.name] || false;
+            });
+            update_consent(consent, false);
+        }, {once : true});
     }
 
-    $("#cookie-consent-button-yes, #cookie-consent-button-no").on("click", function () {
-        consent_modal.hide();
+    consent_modal.addEventListener("close", function () {
+        if (!consent_modal.returnValue) {// ESC, do not save
+            return;
+        }
         var consent = {};
-        var consent_all = this.id == "cookie-consent-button-yes";
+        var consent_all = consent_modal.returnValue == "yes";
         consent_checkboxes.each(function () {
             consent[this.name] = this.checked = consent_all || this.checked;
         });
         if (consent_all) _set_button_text();
-        // Always save explicit consent to permanent storage
         update_consent(consent, false);
     });
     consent_checkboxes.on("change", _set_button_text);
     $("#cookie-consent-reopen").on("click", function (e) {
-        consent_modal.show()
+        consent_modal.showModal()
         e.preventDefault()
         return true
     })

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

@@ -478,33 +478,21 @@ $(function () {
             sessionStorage.setItem('scrollpos', window.scrollY);
         });
     }
-    var update_cart_form = function () {
-        var is_enabled = $(".product-row input[type=checkbox]:checked, .variations input[type=checkbox]:checked, .product-row input[type=radio]:checked, .variations input[type=radio]:checked").length;
-        if (!is_enabled) {
-            $(".input-item-count").each(function () {
-                if ($(this).val() && $(this).val() !== "0") {
-                    is_enabled = true;
-                }
-            });
-            $(".input-seat-selection option").each(function() {
-                if ($(this).val() && $(this).val() !== "" && $(this).prop('selected')) {
-                    is_enabled = true;
-                }
-            });
+    $("form:has(#btn-add-to-cart)").on("submit", function(e) {
+        if (
+            (this.classList.contains("has-seating") && this.querySelector("pretix-seating-checkout-button button")) ||
+            this.querySelector("input[type=checkbox]:checked") || 
+            [...this.querySelectorAll(".input-item-count[type=text]")].some(input => input.value && input.value !== "0") // TODO: seating hat noch einen seating-dummy-item-count, das ist Mist!
+        ) {
+            // okay, let the submit-event bubble to async-task
+            return;
         }
-        if (!is_enabled && (!$(".has-seating").length || $("#seating-dummy-item-count").length)) {
-            $("#btn-add-to-cart").prop("disabled", !is_enabled).popover({
-                'content': function () { return gettext("Please enter a quantity for one of the ticket types.") },
-                'placement': 'top',
-                'trigger': 'hover focus'
-            });
-        } else {
-            $("#btn-add-to-cart").prop("disabled", false).popover("destroy")
-        }
-    };
-    update_cart_form();
-    $(".product-row input[type=checkbox], .variations input[type=checkbox], .product-row input[type=radio], .variations input[type=radio], .input-item-count, .input-seat-selection")
-        .on("change mouseup keyup", update_cart_form);
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        document.querySelector("#dialog-nothing-to-add").showModal();
+    });
 
     $(".table-calendar td.has-events").click(function () {
         var $grid = $(this).closest("[role='grid']");

src/pretix/static/pretixpresale/scss/main.scss

@@ -291,7 +291,7 @@ body.loading .container {
     font-size: 120px;
     color: $brand-primary;
 }
-#loadingmodal, #ajaxerr, #cookie-consent-modal, #popupmodal {
+#loadingmodal, #ajaxerr, #popupmodal {
     position: fixed;
     top: 0;
     left: 0;
@@ -361,7 +361,7 @@ body.loading .container {
     }
 }
 @media (max-width: 700px) {
-    #loadingmodal, #ajaxerr, #cookie-consent-modal, #popupmodal {
+    #loadingmodal, #ajaxerr, #popupmodal {
         .modal-card {
             margin: 25px auto 0;
             max-height: calc(100vh - 50px - 20px);