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