From a0cf29019eedd4f4acde10b3b563725605e95e57 Mon Sep 17 00:00:00 2001 From: Jude Gibbons Date: Mon, 22 Apr 2019 15:42:37 +0100 Subject: [PATCH 1/6] Change navigation spans into anchor tags. Links are more semantically-correct than spans. Anchor tags have native tabindex. Edit css to work with anchor tags rather than spans. --- src/featherlight.gallery.css | 18 +++++++++--------- src/featherlight.gallery.js | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/featherlight.gallery.css b/src/featherlight.gallery.css index 71a75ecd..e0fb206a 100644 --- a/src/featherlight.gallery.css +++ b/src/featherlight.gallery.css @@ -37,8 +37,8 @@ } -.featherlight-next span, -.featherlight-previous span { +.featherlight-next a, +.featherlight-previous a { display: none; position: absolute; @@ -60,14 +60,14 @@ font-style: normal; font-weight: normal; } -.featherlight-next span { +.featherlight-next a { right: 5%; left: auto; } -.featherlight-next:hover span, -.featherlight-previous:hover span { +.featherlight-next:hover a, +.featherlight-previous:hover a { display: inline-block; } @@ -94,8 +94,8 @@ .featherlight-previous:hover { background: none; } - .featherlight-next span, - .featherlight-previous span { + .featherlight-next a, + .featherlight-previous a { display: block; } } @@ -114,8 +114,8 @@ right: 85%; } - .featherlight-next span, - .featherlight-previous span { + .featherlight-next a, + .featherlight-previous a { margin-top: -30px; font-size: 40px; } diff --git a/src/featherlight.gallery.js b/src/featherlight.gallery.js index 70ca5919..cdd5ddcf 100644 --- a/src/featherlight.gallery.js +++ b/src/featherlight.gallery.js @@ -148,7 +148,7 @@ createNavigation: function(target) { var self = this; - return $(''+this[target+'Icon']+'').click(function(evt){ + return $(''+this[target+'Icon']+'').click(function(evt){ $(this).trigger(target+'.'+self.namespace); evt.preventDefault(); }); From 9e11825d7a3ad616b63fb0d5660a748087365d1e Mon Sep 17 00:00:00 2001 From: Jude Gibbons Date: Mon, 22 Apr 2019 15:54:48 +0100 Subject: [PATCH 2/6] Allow navigation elements to keep tabindex. --- src/featherlight.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/featherlight.js b/src/featherlight.js index e4e093de..44f5c9d3 100644 --- a/src/featherlight.js +++ b/src/featherlight.js @@ -590,7 +590,7 @@ return $(elem).attr('tabindex'); }); - this._$previouslyWithTabIndex.add(this._$previouslyTabbable).attr('tabindex', -1); + this._$previouslyWithTabIndex.add(this._$previouslyTabbable).not("[title='previous'] a").not("[title='next'] a").attr('tabindex', -1); if (document.activeElement.blur) { document.activeElement.blur(); From 94eb41c03e380f7360afd02cbaba7feeed2480b7 Mon Sep 17 00:00:00 2001 From: Jude Gibbons Date: Mon, 22 Apr 2019 16:05:52 +0100 Subject: [PATCH 3/6] Make navigation keyboard-accessible. Add 'keypress' event to navigation for keyboard accessibility. Use 'on' to attach event handlers. Make navigation elements visible on hover, focus and active states. --- src/featherlight.gallery.css | 14 +++++++++----- src/featherlight.gallery.js | 2 +- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/featherlight.gallery.css b/src/featherlight.gallery.css index e0fb206a..97840409 100644 --- a/src/featherlight.gallery.css +++ b/src/featherlight.gallery.css @@ -39,7 +39,8 @@ .featherlight-next a, .featherlight-previous a { - display: none; + display: inline-block; + opacity: 0.3; position: absolute; top: 50%; @@ -65,11 +66,14 @@ left: auto; } - .featherlight-next:hover a, -.featherlight-previous:hover a { - display: inline-block; -} +.featherlight-previous:hover a, +.featherlight-next a:focus, +.featherlight-previous a:focus, +.featherlight-next a:active, +.featherlight-previous a:active { + opacity: 1; + } .featherlight-swipe-aware .featherlight-next, .featherlight-swipe-aware .featherlight-previous { diff --git a/src/featherlight.gallery.js b/src/featherlight.gallery.js index cdd5ddcf..4edd7872 100644 --- a/src/featherlight.gallery.js +++ b/src/featherlight.gallery.js @@ -148,7 +148,7 @@ createNavigation: function(target) { var self = this; - return $(''+this[target+'Icon']+'').click(function(evt){ + return $(''+this[target+'Icon']+'').on('click keypress', (function (evt) { $(this).trigger(target+'.'+self.namespace); evt.preventDefault(); }); From 1265ae989cdc9ab6527eebbac55cf559a992feba Mon Sep 17 00:00:00 2001 From: Jude Gibbons Date: Mon, 22 Apr 2019 16:09:42 +0100 Subject: [PATCH 4/6] Improve tab order of navigation elements. Insert gallery navigation at start of featherlight-content rather than end. User will then tab to 'next' element first, then 'previous', then 'close'. --- src/featherlight.gallery.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/featherlight.gallery.js b/src/featherlight.gallery.js index 4edd7872..9263e70d 100644 --- a/src/featherlight.gallery.js +++ b/src/featherlight.gallery.js @@ -62,8 +62,8 @@ } self.$instance.find('.'+self.namespace+'-content') - .append(self.createNavigation('previous')) - .append(self.createNavigation('next')); + .prepend(self.createNavigation('previous')) + .prepend(self.createNavigation('next')); return _super(event); }, From c0f5ad65983b2d9ed1092756308970942475b1a2 Mon Sep 17 00:00:00 2001 From: Jude Gibbons Date: Mon, 22 Apr 2019 16:27:48 +0100 Subject: [PATCH 5/6] Add aria-labels to navigation elements. --- src/featherlight.gallery.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/featherlight.gallery.js b/src/featherlight.gallery.js index 9263e70d..a1bd0a01 100644 --- a/src/featherlight.gallery.js +++ b/src/featherlight.gallery.js @@ -148,7 +148,7 @@ createNavigation: function(target) { var self = this; - return $(''+this[target+'Icon']+'').on('click keypress', (function (evt) { + return $(''+this[target+'Icon']+'').on('click keypress', (function (evt) { $(this).trigger(target+'.'+self.namespace); evt.preventDefault(); }); From 67a43ea021b2276483beae0c660041d4bf152e4e Mon Sep 17 00:00:00 2001 From: Jude Gibbons Date: Mon, 22 Apr 2019 17:14:53 +0100 Subject: [PATCH 6/6] Insert missing bracket. --- src/featherlight.gallery.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/featherlight.gallery.js b/src/featherlight.gallery.js index a1bd0a01..f7c4910d 100644 --- a/src/featherlight.gallery.js +++ b/src/featherlight.gallery.js @@ -151,7 +151,7 @@ return $(''+this[target+'Icon']+'').on('click keypress', (function (evt) { $(this).trigger(target+'.'+self.namespace); evt.preventDefault(); - }); + })); } });