Attachment 105663 Details for Bug 22807 – Bug 22807: Add 'Skip to content' option

[patch] Bug 22807: Add 'Skip to content' option

Bug-22807-Add-Skip-to-content-option.patch (text/plain), 2.70 KB, created by Martin Renvoize (ashimema) on 2020-06-09 13:15:26 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Martin Renvoize (ashimema)

Created: 2020-06-09 13:15:26 UTC

Size: 2.70 KB

patch

obsolete

>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

Actions: View | Diff | Splinter Review

Attachments on bug 22807: 105663 | 105664 | 105678 | 105698 | 105699 | 105700 | 105708 | 105709 | 105710 | 105711 | 105712 | 105713 | 105714 | 106124 | 106125 | 106126 | 106127 | 106128