A11y improvements (#2081)

Co-authored-by: Raphael Michel <michel@rami.io>
Co-authored-by: Raphael Michel <mail@raphaelmichel.de>

src/pretix/static/pretixbase/js/asynctask.js

@@ -244,13 +244,15 @@ $(function () {
 var waitingDialog = {
     show: function (message) {
         "use strict";
-        $("#loadingmodal").find("h3").html(message);
+        $("#loadingmodal h3").html(message);
         $("#loadingmodal .progress").hide();
         $("body").addClass("loading");
+        $("#loadingmodal").removeAttr("hidden");
     },
     hide: function () {
         "use strict";
         $("body").removeClass("loading");
+        $("#loadingmodal").attr("hidden", true);
     }
 };
 

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

@@ -2,8 +2,8 @@
 
 setup_collapsible_details = function (el) {
     var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
-    el.find("details summary, details summary a[data-toggle=variations]").click(function (e) {
-        if (this.tagName !== "A" && $(e.target).closest("a, button").length > 0) {
+    el.find("details summary").click(function (e) {
+        if (this.tagName !== "A" && $(e.target).closest("a").length > 0) {
             return true;
         }
         var $details = $(this).closest("details");
@@ -57,6 +57,36 @@ setup_collapsible_details = function (el) {
             return false;
         });
     });
+
+    el.find("article button[data-toggle=variations]").click(function (e) {
+        var $button = $(this);
+        var $details = $button.closest("article");
+        var $detailsNotSummary = $(".variations", $details);
+        var isOpen = !$detailsNotSummary.prop("hidden");
+        if ($detailsNotSummary.is(':animated')) {
+            e.preventDefault();
+            return false;
+        }
+
+        var altLabel = $button.attr("data-label-alt");
+        $button.attr("data-label-alt", $button.text());
+        $button.text(altLabel);
+        $button.attr("aria-expanded", !isOpen);
+
+        if (isOpen) {
+            $details.removeClass("details-open");
+            $detailsNotSummary.stop().show().slideUp(500, function () {
+                $detailsNotSummary.prop("hidden", true);
+            });
+        } else {
+            $detailsNotSummary.prop("hidden", false).stop().hide();
+            $details.addClass("details-open");
+            $detailsNotSummary.slideDown();
+        }
+        e.preventDefault();
+        return false;
+    });
+    el.find(".variations-collapsed").prop("hidden", true);
 };
 
 $(function () {

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

@@ -100,9 +100,8 @@ input[type=number]::-webkit-outer-spin-button {
   background: transparent;
   border: transparent;
 }
-
-.alert-primary, .alert-warning, .alert-info, .alert-success, .alert-danger {
-  color: #3b3b3b;
+.panel-heading {
+  border-radius: 0;
 }
 .panel-danger > .panel-heading, .panel-success > .panel-heading, .panel-default > .panel-heading, .panel-info > .panel-heading, .panel-warning > .panel-heading {
   color: #000000;
@@ -122,7 +121,7 @@ input[type=number]::-webkit-outer-spin-button {
   text-align: left;
 }
 .alert-legal {
-  border-color: $state-info-border;
+  @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
 }
 .alert-success, .alert-danger, .alert-info, .alert-warning, .alert-legal {
   position: relative;
@@ -166,6 +165,7 @@ input[type=number]::-webkit-outer-spin-button {
 }
 .alert-primary::before {
   background: $brand-primary !important;
+  outline-color: $brand-primary;
 }
 .alert-primary {
   border-color: $brand-primary !important;

src/pretix/static/pretixbase/scss/_variables.scss

@@ -44,14 +44,18 @@ $navbar-inverse-link-hover-color: $gray-lighter;
 $navbar-inverse-brand-hover-color: $gray-lighter;
 $navbar-inverse-color: white;
 
-$state-success-bg:               white !default;
+$state-success-bg:               lighten($brand-success, 48%) !default;
 $state-success-border:           $brand-success;
-$state-info-bg:                  white !default;
+$state-success-text:             darken($brand-success, 10%);
+$state-info-bg:                  lighten($brand-info, 33%) !default;
 $state-info-border:              $brand-info;
-$state-warning-bg:               white !default;
+$state-info-text:                darken($brand-info, 20%);
+$state-warning-bg:               lighten($brand-warning, 41%) !default;
 $state-warning-border:           $brand-warning;
-$state-danger-bg:                white !default;
-$state-danger-border:            $brand-danger;
+$state-warning-text:             darken($brand-warning, 25%);
+$state-danger-bg:               lighten($brand-danger, 43%) !default;
+$state-danger-border:           $brand-danger;
+$state-danger-text:             darken($brand-danger, 5%);
 $panel-success-border:               tint($brand-success, 50%);
 $panel-success-heading-bg:               tint($brand-success, 50%);
 $panel-danger-border:               tint($brand-danger, 50%);