open closed cart (either details or sneak-peek) onsubmit

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

@@ -1,4 +1,5 @@
 {% load i18n %}
+{% load icon %}
 {% load eventurl %}
 {% load daterange %}
 {% load safelink %}
@@ -506,10 +507,22 @@
             </p>
             <p>
                 <button class="btn btn-default" type="submit" id="cart-extend-button" aria-describedby="cart-deadline">
-                    <i class="fa fa-refresh" aria-hidden="true"></i> {% trans "Renew reservation" %}
+                    {% icon "refresh" %} {% trans "Renew reservation" %}
                 </button>
             </p>
         </form>
+        <dialog role="alertdialog" id="cart-extend-feedback-dialog" class="inline-dialog" aria-labelledby="cart-deadline">
+            <form method="dialog">
+                <p>
+                    <button class="btn btn-default" autofocus value="OK">
+                        <span role="img" aria-label="{% trans "OK" %}">
+                            {% icon "check" %}
+                        </span>
+                        {% trans "Reservation renewed" %}
+                    </button>
+                </p>
+            </form>
+        </dialog>
     {% else %}
         <p class="sr-only" id="cart-description">{% trans "Overview of your ordered products." %}</p>
     {% endif %}

src/pretix/static/pretixbase/js/details.js

@@ -11,11 +11,18 @@ setup_collapsible_details = function (el) {
             content.classList.remove('sneak-peek-content');
             return;
         }
+        function openSneekPeakOnSubmit() {
+            $(button).trigger("click");
+        }
+        var $buttons = $("button:enabled", content).prop("disabled", true);
+        var $forms = $("form", content).on("submit", openSneekPeakOnSubmit);
         content.setAttribute('aria-hidden', 'true');
         button.setAttribute('aria-expanded', 'false');
         button.addEventListener('click', function (e) {
             button.setAttribute('aria-expanded', 'true');
             content.setAttribute('aria-hidden', 'false');
+            $buttons.prop("disabled", false);
+            $forms.off("submit", openSneekPeakOnSubmit);
 
             content.addEventListener('transitionend', function() {
                 content.classList.remove('sneak-peek-content');
@@ -29,8 +36,14 @@ setup_collapsible_details = function (el) {
                 // this will be called by screenreader users if they kept focus on the button after expanding
                 // we need to keep the trigger/button in the DOM to not irritate screenreaders toggling visibility
                 var expanded = button.getAttribute('aria-expanded') == 'true';
-                button.setAttribute('aria-expanded', !expanded);
+                button.setAttribute('aria-expanded', !expanded ? 'true' : 'false');
-                content.setAttribute('aria-hidden', expanded);
+                content.setAttribute('aria-hidden', expanded ? 'true' : 'false');
+                $buttons.prop("disabled", expanded);
+                if (expanded) {
+                    $forms.on("submit", openSneekPeakOnSubmit);
+                } else {
+                    $forms.off("submit", openSneekPeakOnSubmit);
+                }
             });
             button.addEventListener('blur', function (e) {
                 // if content is visible and the user leaves the button, we can safely remove the trigger/button
@@ -48,6 +61,8 @@ setup_collapsible_details = function (el) {
                     trigger.remove();
                     content.removeAttribute('aria-hidden');
                     content.classList.remove('sneak-peek-content');
+                    $buttons.prop("disabled", false);
+                    $forms.off("submit", openSneekPeakOnSubmit);
                 }
             }
             container.addEventListener("toggle", removeSneekPeakWhenClosed);

src/pretix/static/pretixbase/scss/_dialogs.scss

@@ -1,3 +1,10 @@
+dialog.inline-dialog {
+  position: static;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
 /* Modal dialogs using HTML5 dialog tags for accessibility */
 dialog.modal-card {
   border: none;

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

@@ -5,7 +5,6 @@ var cart = {
     _deadline_call: 0,
     _time_offset: 0,
     _prev_diff_minutes: 0,
-    _renewed_message: "",
 
     _get_now: function () {
         return moment().add(cart._time_offset, 'ms');
@@ -59,7 +58,6 @@ var cart = {
                     $("#cart-deadline").text(gettext("Your cart is about to expire."))
                 } else {
                     $("#cart-deadline").text(
-                        cart._renewed_message + " " +
                         ngettext(
                             "The items in your cart are reserved for you for one minute.",
                             "The items in your cart are reserved for you for {num} minutes.",
@@ -74,7 +72,6 @@ var cart = {
                 pad(diff_minutes.toString(), 2) + ':' + pad(diff_seconds.toString(), 2)
             );
 
-            cart._renewed_message = "";
             cart._deadline_timeout = window.setTimeout(cart.draw_deadline, 500);
         }
         var already_expired = diff_total_seconds <= 0;
@@ -103,7 +100,7 @@ var cart = {
         );
     },
 
-    set_deadline: function (expiry, max_extend, renewed_message) {
+    set_deadline: function (expiry, max_extend) {
         "use strict";
         cart._expiry_notified = false;
         cart._deadline = moment(expiry);
@@ -112,7 +109,6 @@ var cart = {
         }
         cart._deadline_timeout = null;
         cart._max_extend = moment(max_extend);
-        cart._renewed_message = renewed_message || "";
         cart.draw_deadline();
     }
 };
@@ -124,19 +120,24 @@ $(function () {
         cart.init();
     }
 
+    $("#cart-extend-feedback-dialog").on("keydown", function (e) {
+        // prevent enter or space-bar from bubbling up and closing the cart-panel
+        e.stopPropagation();
+    }).find("button").on("blur", function() {
+        this.closest("dialog").close();
+    });
+
     $("#cart-extend-form").on("pretix:async-task-success", function(e, data) {
         if (data.success) {
-            cart.set_deadline(data.expiry, data.max_expiry_extend, data.message);
+            cart.set_deadline(data.expiry, data.max_expiry_extend);
-            var cart_panel_heading = $(this).closest(".panel").find(".panel-heading").get(0);
+            $("#cart-extend-feedback-dialog").get(0).show();
-            if (cart_panel_heading) {
-                cart_panel_heading.focus();
-            }
         } else {
             alert(data.message);
         }
     });
 
     $("#dialog-cart-extend form").submit(function() {
+        $("#cart-extend-form").closest("details:not([open])").find("summary").trigger("click");
         $("#cart-extend-form").submit();
     });