From 3fd20db6cb4b17a7e64251bd2ef80fa2be55525a Mon Sep 17 00:00:00 2001 From: Martin Renvoize Date: Thu, 27 Feb 2025 15:40:18 +0000 Subject: [PATCH] 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. --- .../opac-tmpl/bootstrap/js/cookieconsent.js | 26 +++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/cookieconsent.js b/koha-tmpl/opac-tmpl/bootstrap/js/cookieconsent.js index e77146d7d5d..acf9a6f5fec 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/js/cookieconsent.js +++ b/koha-tmpl/opac-tmpl/bootstrap/js/cookieconsent.js @@ -50,8 +50,8 @@ if ( $(window).scrollTop() >= wrapper.offset().top + - wrapper.outerHeight() - - window.innerHeight + wrapper.outerHeight() - + window.innerHeight ) { consentBar.css("bottom", height); } else { @@ -71,12 +71,33 @@ 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 @@ -226,6 +247,7 @@ $(".consentCheckbox").on("click", function () { maintainSelected(); }); + } // On page load, run any code that has been given consent -- 2.48.1