A11y improvements (#2081)

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

src/pretix/static/lightbox/css/lightbox.scss

@@ -194,7 +194,7 @@ body:after {
   height: 30px;
   background: url(static('lightbox/images/close.png')) top right no-repeat;
   text-align: right;
-  outline: none;
+  border: none;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
   opacity: 0.7;
   -webkit-transition: opacity 0.2s;

src/pretix/static/lightbox/js/lightbox.js

@@ -1,3 +1,12 @@
+/*
+
+WARNING! CUSTOMIZED!
+
+Added improvements for better A11y-support, 
+i.e. role, aria-labelledby, aria-modal and <button>
+
+*/
+
 /*!
  * Lightbox v2.8.1
  * by Lokesh Dhakar
@@ -78,7 +87,7 @@
   // Attach event handlers to the new DOM elements. click click click
   Lightbox.prototype.build = function() {
     var self = this;
-    $('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
+    $('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox" role="dialog" aria-labelledby="lightboxLabel" aria-modal="true"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details" id="lightboxLabel"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><button aria-label="'+gettext("close")+'" class="lb-close"></button></div></div></div></div>').appendTo($('body'));
 
     // Cache jQuery objects
     this.$lightbox       = $('#lightbox');
@@ -195,6 +204,7 @@
       left: left + 'px'
     }).fadeIn(this.options.fadeDuration);
 
+    this.$lightbox.find(".lb-close").focus();
     this.changeImage(imageNumber);
   };
 
@@ -359,6 +369,7 @@
     // Thanks Nate Wright for the fix. @https://github.com/NateWr
     if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
       this.album[this.currentImageIndex].title !== '') {
+      this.$lightbox.find('.lb-image').attr("alt", this.album[this.currentImageIndex].title);
       this.$lightbox.find('.lb-caption')
         .html(this.album[this.currentImageIndex].title)
         .fadeIn('fast')