[A11y] improve cart renew confirmation (#5206)

* [A11y] improve cart renew confirmation

* revert time

* add inline-dialog to cart-renewal-button so confirm-button has interactive meaning

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,23 @@
             </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-confirmation-dialog" class="inline-dialog" aria-labelledby="cart-deadline">
+            <form method="dialog">
+                <p>
+                    <button class="btn btn-success" 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/presale/templates/pretixpresale/fragment_modals.html

@@ -48,6 +48,10 @@
     <p class="modal-card-confirm"><button class="btn btn-lg btn-primary">{% trans "Renew reservation" %}</button></p>
 {% enddialog %}
 
+{% dialog "dialog-cart-extended" "" "" icon="clock-o" alert=true %}
+    <p class="modal-card-confirm"><button class="btn btn-lg btn-primary">{% trans "OK" %}</button></p>
+{% enddialog %}
+
 <dialog id="lightbox-dialog" class="modal-card" role="alertdialog" aria-labelledby="lightbox-label">
     <form method="dialog" class="modal-card-inner form-horizontal">
         <div class="modal-card-content">

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;
@@ -112,7 +109,6 @@ var cart = {
         }
         cart._deadline_timeout = null;
         cart._max_extend = moment(max_extend);
-        cart._renewed_message = renewed_message || "";
         cart.draw_deadline();
     }
 };
@@ -122,22 +118,41 @@ $(function () {
 
     if ($("#cart-deadline").length) {
         cart.init();
+        $("#cart-extend-confirmation-button").hide().on("blur", function() {
+            $(this).hide();
+        });
     }
 
     $("#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);
-            if (cart_panel_heading) {
-                cart_panel_heading.focus();
-            }
         } else {
             alert(data.message);
         }
     });
+    // renew-button in cart-panel is clicked, show inline dialog
+    $("#cart-extend-button").on("click", function() {
+        $("#cart-extend-form").one("pretix:async-task-success", function(e, data) {
+            if (data.success) {
+                document.getElementById("cart-extend-confirmation-dialog").show();
+            }
+        });
+    });
+    $("#cart-extend-confirmation-dialog").on("keydown", function (e) {
+        if(e.key === "Escape") {
+            this.close();
+        }
+    });
 
+    // renew-button in modal dialog is clicked, show modal dialog
     $("#dialog-cart-extend form").submit(function() {
-        $("#cart-extend-form").submit();
+        $("#cart-extend-form").one("pretix:async-task-success", function(e, data) {
+            if (data.success) {
+                $("#dialog-cart-extended-title").text(data.message);
+                $("#dialog-cart-extended-description").text($("#cart-deadline").text());
+                document.getElementById("dialog-cart-extended").showModal();
+            }
+        }).submit();
     });
 
     $(".toggle-container").each(function() {