From 914a7368ce02d09849879ef3431ff5d98dbc3557 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Mon, 25 Apr 2022 11:03:40 +0000
Subject: [PATCH] Bug 30136: (follow-up) CSS and accessibility update
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This patch adds the new CSS to the global CSS file. Rebuild the OPAC CSS
to test.

The patch also moves the JavaScript for the button from opac-bottom.inc
into global.js and adds accessibility labels to the generated markup.

Signed-off-by: Séverine QUEUNE <severine.queune@bulac.fr>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
---
 koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 10 ++++++++++
 .../bootstrap/en/includes/opac-bottom.inc       | 14 --------------
 koha-tmpl/opac-tmpl/bootstrap/js/global.js      | 17 ++++++++++++++++-
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index 746c3adce8..6906e04db2 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -225,6 +225,16 @@ th {
     }
 }
 
+#backtotop {
+    display: inline-block;
+    text-align: center;
+    font-size: 120%;
+    position: fixed;
+    bottom: 40px;
+    right: 40px;
+    z-index: 1000;
+}
+
 #booleansearch {
     width: 80%;
 }
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
index 8dc1846f73..2d61b53590 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
@@ -213,20 +213,6 @@
         return confirmDelete(MSG_DELETE_SEARCH_HISTORY);
     });
 
-    $("body").append('<button id="backtotop" class="btn btn-primary"><i class="fa fa-arrow-up" aria-hidden="true"></i></button>');
-    $("#backtotop").hide();
-    $(window).scroll(function(){
-        if ( $(window).scrollTop() < 300 ) {
-            $("#backtotop").fadeOut();
-        } else {
-            $("#backtotop").fadeIn();
-        }
-    });
-    $("#backtotop").click(function(e) {
-        e.preventDefault();
-        $("html,body").animate({scrollTop: 0}, "slow");
-    });
-
 </script>
 
 [% IF Koha.Preference( 'opacbookbag' ) == 1 %]
diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
index 03882079ce..1a40118106 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js
+++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
@@ -1,4 +1,4 @@
-/* global enquire readCookie updateBasket delCookie */
+/* global enquire readCookie updateBasket delCookie __ */
 (function( w ){
     // if the class is already set, the font has already been loaded
     if( w.document.documentElement.className.indexOf( "fonts-loaded" ) > -1 ){
@@ -231,4 +231,19 @@ $(document).ready(function(){
     });
 
     $('[data-toggle="tooltip"]').tooltip();
+
+    /* Scroll back to top button */
+    $("body").append('<button id="backtotop" class="btn btn-primary" aria-label="' + __("Back to top") + '"><i class="fa fa-arrow-up" aria-hidden="true" title="' + __("Scroll to the top of the page") + '"></i></button>');
+    $("#backtotop").hide();
+    $(window).on("scroll", function(){
+        if ( $(window).scrollTop() < 300 ) {
+            $("#backtotop").fadeOut();
+        } else {
+            $("#backtotop").fadeIn();
+        }
+    });
+    $("#backtotop").on("click", function(e) {
+        e.preventDefault();
+        $("html,body").animate({scrollTop: 0}, "slow");
+    });
 });
-- 
2.30.2