gitea
/
Koha-clms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bug 39209: Set cookie consent bar as first focus 

This patch updates the cookie consent javascript, when the feature is
enabled, to ensure that the cookie consent bar gets focused when it
displays.

Test plan
1) Enable the CookieConsent preference
2) Open any OPAC page
3) Hit 'tab' and note the display of 'Skip to main content'
4) Confirm that the cookie consent bar is displayed and continued 'tabs'
   eventually navigate to it
5) Apply this patch
6) Navigate to any OPAC page
7) Hit 'tab' and note that the 'Cookie consent' bar is focused, your
   keyboard navigation starts with the cookie consent buttons
8) Accept the essential cookies
9) Hit tab and note the focus is back to normal and shows the 'Skip to
   main content' button on first keyboard navigation.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Amended-by: Jonathan Druart
Run tidy.pl

Signed-off-by: Thomas Klausner <domm@plix.at>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
(cherry picked from commit 5426ae5bfd)
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
This commit is contained in:
Martin Renvoize 2025-02-27 15:40:18 +00:00 committed by Fridolin Somers
parent 85fc58e0f3
commit 83ae6fce2e
No known key found for this signature in database
GPG Key ID: 9A8E73E2A8B96537
1 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
koha-tmpl/opac-tmpl/bootstrap/js/cookieconsent.js
View File

@ -63,12 +63,36 @@
const consentBar = $('#cookieConsentBar');
consentBar.attr('aria-hidden', 'false');
consentBar.css("display", "flex");
// Set focus to the first focusable element within the consent bar
const firstFocusableElement = consentBar
.find("a, button, input, select, textarea")
.filter(":visible")
.first();
if (firstFocusableElement.length) {
firstFocusableElement.focus();
} else {
// If no focusable elements exist, add tabindex to the bar itself to make it focusable
consentBar.attr("tabindex", "-1").focus();
}
}
function hideConsentBar() {
const consentBar = $('#cookieConsentBar');
consentBar.attr('aria-hidden', 'true');
consentBar.hide();
// Remove focus from any currently focused element
if (document.activeElement) {
document.activeElement.blur();
}
// Set focus to the body, which effectively removes visible focus indicators
// This allows the first Tab press to highlight the "Skip to main content" link
document.body.focus();
document.querySelector("body").setAttribute("tabindex", "-1");
document.querySelector("body").focus();
document.querySelector("body").removeAttribute("tabindex");
}
// Hides the appropriate consent container, depending on what