From 397522c7a8b8aef55a0cee4a5454371b73732298 Mon Sep 17 00:00:00 2001 From: Martin Renvoize <martin.renvoize@ptfs-europe.com> Date: Tue, 9 Jun 2020 14:10:53 +0100 Subject: [PATCH] Bug 22807: Add 'Skip to content' option This patch adds a 'Skip to content' link to the header bar which will only appear upon the first use of 'tab' to navigate after any fresh page load in the OPAC. Test plan 1/ Load any page in the OPAC 2/ Hit the `tab` key 3/ Note the new 'Skip to main content' link appears at the top left of the screen. 4/ Hit `Enter` 5/ Note the page scrolls to the area of the page that has the #maincontent id. 6/ Note that the link has been hidden 7/ Try tabbing around and note that the 'Skip to main content' option does not reapper 8/ Reload the page 9/ The 'Skip to main content' should appear again upon first use of 'Tab' 10/ Signoff --- .../opac-tmpl/bootstrap/en/includes/masthead.inc | 3 +++ koha-tmpl/opac-tmpl/bootstrap/js/global.js | 16 ++++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc index 88dd9a9255..7f7cbbdfaa 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc @@ -12,6 +12,9 @@ <div class="navbar navbar-inverse navbar-static-top"> <div class="navbar-inner"> <div class="container-fluid"> + <div id="skiptocontent" class="pull-left hidden" role="button"> + <a href="#maincontent">Skip to main content</a> + </div> <h1 id="logo"> <a class="brand" href="/cgi-bin/koha/opac-main.pl"> [% IF ( LibraryNameTitle ) %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js index 76ce7b5cb0..a4e0751d44 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js +++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js @@ -91,3 +91,19 @@ function confirmModal(message, title, yes_label, no_label, callback) { $("#bootstrap-confirm-box-modal-cancel").text( no_label || 'Cancel' ); $("#bootstrap-confirm-box-modal").modal('show'); } + +var isFirstFocus = true; +document.documentElement.addEventListener('keydown', function(event) { + var code = event.which; + // Show animation only upon Tab or Arrow keys press. + if (code === 9 || (code > 36 && code < 41)) { + if (isFirstFocus) { + isFirstFocus = false; + $("#skiptocontent").removeClass('hidden'); + } + } +}, false); + +$('#skiptocontent').focusout(function() { + $('#skiptocontent').addClass('hidden'); +}); -- 2.20.1