From 751b0bb84ecec87784178f0a2a89a6525d0a0a89 Mon Sep 17 00:00:00 2001
From: Chris Hallberg <crhallberg@gmail.com>
Date: Tue, 28 Apr 2020 11:55:06 -0400
Subject: [PATCH] Improve Lightbox accessibility.
---
themes/bootstrap3/js/lightbox.js | 27 +++++++++----------
.../bootstrap3/less/components/lightbox.less | 10 ++++---
2 files changed, 18 insertions(+), 19 deletions(-)
diff --git a/themes/bootstrap3/js/lightbox.js b/themes/bootstrap3/js/lightbox.js
index 07b5e4ad592..ed69c3af3c4 100644
--- a/themes/bootstrap3/js/lightbox.js
+++ b/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();
diff --git a/themes/bootstrap3/less/components/lightbox.less b/themes/bootstrap3/less/components/lightbox.less
index d7adf7a0bfd..b1af70eb615 100644
--- a/themes/bootstrap3/less/components/lightbox.less
+++ b/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;
--
GitLab