From a53d05278095bb244636166f7d1ff7f15506f578 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 10 Jun 2020 18:30:50 +0000
Subject: [PATCH] Bug 22807: (follow-up) Update style of skip button

This patch updates the markup and style of the skip button, adapting
(i.e. stealing) the style of the skip link at https://webaim.org.

To test, apply the patch and rebuild the OPAC CSS:
https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client

Go to any page in the OPAC and hit the tab key. The "Skip to main
content" link should appear. Tabbing away from it should cause the link
to hide. Hitting the ENTER key when the link is highlighted should cause
the page to scroll to the main content.

Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
(cherry picked from commit 2e94cb26a8267df72f657fb7c1097d08318e8a21)

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
(cherry picked from commit 30cc30bb996567dc5491f06c5224f1db1163d324)

Signed-off-by: Aleisha Amohia <aleishaamohia@hotmail.com>
---
 .../opac-tmpl/bootstrap/css/src/opac.scss     | 25 +++++++++++++++++++
 .../bootstrap/en/includes/masthead.inc        |  2 +-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index 03f1a5ea6d..053c7b9010 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -3086,4 +3086,29 @@ $star-selected: #EDB867;
     }
 }
 
+/* Skip to content link. CSS adapted from https://webaim.org/ */
+#scrolltocontent {
+    background: #c60000;
+    border: 1px solid white;
+    border-radius: 0 0 4px 0;
+    border-width: 0 1px 1px 0;
+    color: white;
+    left: 0px;
+    padding: 6px 12px;
+    position: absolute;
+    text-decoration: none;
+    text-shadow: 0 -1px 0 rgba(58, 0, 0, 0.75);
+    top: -40px;
+    transition: top .5s ease-out;
+    z-index: 100;
+
+    &:focus {
+        left: 0px;
+        outline-color: transparent;
+        position: absolute;
+        top: 0px;
+        transition: top .1s ease-in;
+    }
+}
+
 @import "responsive";
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
index fdcc9f9662..7b4dec8005 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
@@ -8,7 +8,7 @@
         <div class="navbar navbar-inverse navbar-static-top">
             <div class="navbar-inner">
                 <div class="container-fluid">
-                    <button id="scrolltocontent" class="sr-only sr-only-focusable pull-left nav btn btn-danger" type="button">Skip to main content</button>
+                    <button id="scrolltocontent">Skip to main content</button>
                     <h1 id="logo">
                         <a class="brand" href="/cgi-bin/koha/opac-main.pl">
                             [% IF ( LibraryNameTitle ) %]
-- 
2.20.1