From 8d2c6f5ae8a99218d277ae2aa7ad1abaa72378d1 Mon Sep 17 00:00:00 2001
From: Thomas Hackl <hackl@data-quest.de>
Date: Wed, 10 Apr 2024 10:52:48 +0000
Subject: [PATCH] Resolve "Barrierefreiheit: "Back to top" ist nicht per
Tabulator erreichbar"
Closes #3941
Merge request studip/studip!2800
---
.../assets/javascripts/lib/scroll_to_top.js | 22 ++++++++++++-------
templates/layouts/base.php | 2 +-
2 files changed, 15 insertions(+), 9 deletions(-)
diff --git a/resources/assets/javascripts/lib/scroll_to_top.js b/resources/assets/javascripts/lib/scroll_to_top.js
index 2a754027a24..9b0d3ee38d5 100644
--- a/resources/assets/javascripts/lib/scroll_to_top.js
+++ b/resources/assets/javascripts/lib/scroll_to_top.js
@@ -4,9 +4,9 @@ let fold;
let was_below_the_fold = false;
const back_to_top = function(scrolltop) {
- var is_below_the_fold = scrolltop > fold;
+ let is_below_the_fold = scrolltop > fold;
if (is_below_the_fold !== was_below_the_fold) {
- $('#scroll-to-top').toggleClass('hide', !is_below_the_fold);
+ document.getElementById('scroll-to-top').classList.toggle('hide', !is_below_the_fold);
was_below_the_fold = is_below_the_fold;
}
};
@@ -23,15 +23,21 @@ const ScrollToTop = {
},
disable() {
Scroll.removeHandler('header');
- $('#scroll-to-top').addClass('hide');
+ document.getElementById('scroll-to-top').classList.add('hide');
},
moveBack() {
- $('#scroll-to-top').on('click', function(e) {
- $('html, body').stop().animate({
- scrollTop: (0)
- }, 1000, 'easeInOutExpo');
- e.preventDefault();
+ document.getElementById('scroll-to-top').addEventListener('click', (evt) => {
+ evt.preventDefault();
+ this.toTop();
});
+ document.getElementById('scroll-to-top').addEventListener('keypress', (evt) => {
+ if (evt.code === 'Space') {
+ this.toTop();
+ }
+ });
+ },
+ toTop() {
+ window.scroll({top: 0, left: 0, behavior: 'smooth'});
}
};
diff --git a/templates/layouts/base.php b/templates/layouts/base.php
index 180e0207d09..2db1f7eab8b 100644
--- a/templates/layouts/base.php
+++ b/templates/layouts/base.php
@@ -96,7 +96,7 @@ $lang_attr = str_replace('_', '-', $_SESSION['_language']);
</main>
<!-- End main content -->
- <a id="scroll-to-top" class="hide">
+ <a id="scroll-to-top" class="hide" tabindex="0" title="<?= _('Zurück zum Seitenanfang') ?>">
<?= Icon::create('arr_1up', 'info_alt')->asImg(24, ['class' => '']) ?>
</a>
--
GitLab