Improve Lightbox accessibility.

themes/bootstrap3/js/lightbox.js

@@ -3,11 +3,11 @@ VuFind.register('lightbox', function Lightbox() {
   // State
   var _originalUrl = false;
   var _currentUrl = false;
-  var _lightboxTitle = '';
+  var _lightboxTitle = false;
   var refreshOnClose = false;
   var _modalParams = {};
   // Elements
-  var _modal, _modalBody, _clickedButton = null;
+  var _modal, _modalBody, _modalTitle, _clickedButton = null;
   // Utilities
   function _storeClickedStatus() {
     _clickedButton = this;
@@ -15,13 +15,9 @@ VuFind.register('lightbox', function Lightbox() {
   function _html(content) {
     _modalBody.html(content);
     // Set or update title if we have one
-    if (_lightboxTitle !== '') {
-      var h2 = _modalBody.find('h2:first-child');
-      if (h2.length === 0) {
-        h2 = $('<h2/>').prependTo(_modalBody);
-      }
-      h2.text(_lightboxTitle);
-      _lightboxTitle = '';
+    if (_lightboxTitle) {
+      _modalTitle.text(_lightboxTitle);
+      _lightboxTitle = false;
     }
     _modal.modal('handleUpdate');
   }
@@ -242,12 +238,12 @@ VuFind.register('lightbox', function Lightbox() {
     }
     if (this.href.length > 1) {
       event.preventDefault();
-      var obj = {url: $(this).data('lightboxHref') || this.href};
-      if ("string" === typeof $(this).data('lightboxPost')) {
+      var obj = {url: $(this).data('lightbox-href') || this.href};
+      if ("string" === typeof $(this).data('lightbox-post')) {
         obj.type = 'POST';
-        obj.data = $(this).data('lightboxPost');
+        obj.data = $(this).data('lightbox-post');
       }
-      _lightboxTitle = $(this).data('lightboxTitle') || '';
+      _lightboxTitle = $(this).data('lightbox-title') || '';
       _modalParams = $(this).data();
       VuFind.modal('show');
       ajax(obj);
@@ -322,7 +318,7 @@ VuFind.register('lightbox', function Lightbox() {
       submit.attr('disabled', 'disabled');
     }
     // Store custom title
-    _lightboxTitle = submit.data('lightboxTitle') || $(form).data('lightboxTitle') || '';
+    _lightboxTitle = submit.data('lightbox-title') || $(form).data('lightbox-title') || '';
     // Get Lightbox content
     ajax({
       url: $(form).attr('action') || _currentUrl,
@@ -366,7 +362,7 @@ VuFind.register('lightbox', function Lightbox() {
         });
         imageCheck.done(function lightboxImageCheckDone(content, status, jq_xhr) {
           if (
-            jq_xhr.status === 200 && 
+            jq_xhr.status === 200 &&
             jq_xhr.getResponseHeader("content-type").substr(0, 5) === "image"
           ) {
             render('<div class="lightbox-image"><img src="' + url + '"/></div>');
@@ -388,6 +384,7 @@ VuFind.register('lightbox', function Lightbox() {
   function init() {
     _modal = $('#modal');
     _modalBody = _modal.find('.modal-body');
+    _modalTitle = _modal.find('#modal-title');
     _modal.on('hide.bs.modal', function lightboxHide() {
       if (VuFind.lightbox.refreshOnClose) {
         VuFind.refreshPage();

themes/bootstrap3/less/components/lightbox.less

@@ -6,7 +6,7 @@
   right: 0;
   z-index: 2;
   padding: .5rem 1rem;
-  opacity: .7;
+  opacity: 1;
 
   body.rtl & {
     left: 0;
@@ -15,17 +15,19 @@
 }
 @media (min-width: 768px) {
   #modal .modal-content > .close { // Fancy side X button
-    right: -50px;
+    right: -60px;
     font-size: 32pt;
     color: #fff;
+    background-color: rgba(0,0,0,0);
+    border-radius: 6px;
     body.rtl & {
-      left: -50px;
+      left: -60px;
       right: auto;
     }
   }
 }
 
-#modal .modal-content > .close:hover { opacity: 1; }
+#modal .modal-content > .close:hover { background-color: #000; }
 #modal .modal-body h1,
 #modal .modal-body h2 {
   margin-top: 0.3rem;