From 69cfbadf9578f6490bd3981e8c9804bf331ef20c 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

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.
---
 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 9da60f8824..769b79da57 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.20.1