Bugzilla – Attachment 178894 Details for
Bug 39209
Cookie consent banner should be 'focused' on load
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 39209: Set cookie consent bar as first focus
Bug-39209-Set-cookie-consent-bar-as-first-focus.patch (text/plain), 3.33 KB, created by
Owen Leonard
on 2025-03-03 18:08:23 UTC
(
hide
)
Description:
Bug 39209: Set cookie consent bar as first focus
Filename:
MIME Type:
Creator:
Owen Leonard
Created:
2025-03-03 18:08:23 UTC
Size:
3.33 KB
patch
obsolete
>From fa74a848b9b30844b87a75fc0d18b7c360a64681 Mon Sep 17 00:00:00 2001 >From: Martin Renvoize <martin.renvoize@ptfs-europe.com> >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. > >Signed-off-by: Owen Leonard <oleonard@myacpl.org> >--- > .../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.39.5
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 39209
:
178786
|
178894
|
179385
|
180385