[A11y] add alertidalog to confirm successful cart renewal

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

@@ -1,4 +1,5 @@
 {% load i18n %}
+{% load icon %}
 {% load eventurl %}
 {% load daterange %}
 {% load safelink %}
@@ -510,6 +511,14 @@
                 </button>
             </p>
         </form>
+        <dialog role="alertdialog" id="cart-extend-feedback-dialog" aria-labelledby="cart-extend-feedback">
+            <form method="dialog">
+                <span id="cart-extend-feedback" class="text-muted"></span>
+                <button class="btn btn-default" autofocus value="OK">
+                    {% icon "check" %} {% trans "OK" %}
+                </button>
+            </form>
+        </dialog>
     {% else %}
         <p class="sr-only" id="cart-description">{% trans "Overview of your ordered products." %}</p>
     {% endif %}

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

@@ -59,7 +59,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.",
@@ -67,6 +66,12 @@ var cart = {
                         ).replace(/\{num\}/g, diff_minutes)
                     );
                 }
+                $("#cart-extend-feedback").text(cart._renewed_message);
+                var dialog = $("#cart-extend-feedback-dialog").get(0);
+                if (cart._renewed_message) {
+                    dialog.show();
+                }
+
                 cart._prev_diff_minutes = diff_minutes;
             }
 
@@ -101,6 +106,19 @@ var cart = {
             $("#cart-deadline").attr("data-expires"),
             $("#cart-deadline").attr("data-max-expiry-extend")
         );
+        $("#cart-extend-feedback-dialog").on("close", function () {
+                var cart_panel_heading = $(this).closest(".panel").find(".panel-heading").get(0);
+                if (cart_panel_heading) {
+                    window.setTimeout(function () {
+                        cart_panel_heading.focus();
+                    }, 50);
+                }
+            }
+        }).find("button").on("blur", function() {
+            var dialog = this.closest("dialog");
+            if (dialog.open) {
+            }
+        });
     },
 
     set_deadline: function (expiry, max_extend, renewed_message) {
@@ -127,10 +145,6 @@ $(function () {
     $("#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);
-            var cart_panel_heading = $(this).closest(".panel").find(".panel-heading").get(0);
-            if (cart_panel_heading) {
-                cart_panel_heading.focus();
-            }
         } else {
             alert(data.message);
         }

src/pretix/static/pretixpresale/scss/_cart.scss

@@ -254,6 +254,12 @@
 #cart-deadline-short {
     font-variant-numeric: tabular-nums;
 }
+#cart-extend-feedback-dialog {
+    position: static;
+    padding: 0;
+    margin: 0;
+    border: none;
+}
 .btn-invisible {
     opacity: 0 !important;
 }