Bug 39209 - Cookie consent banner should be 'focused' on load
Summary: Cookie consent banner should be 'focused' on load
Status: Pushed to main
Alias: None
Product: Koha
Classification: Unclassified
Component: Accessibility (show other bugs)
Version: unspecified
Hardware: All All
: P5 - low normal
Assignee: Martin Renvoize (ashimema)
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2025-02-27 11:52 UTC by Martin Renvoize (ashimema)
Modified: 2025-04-10 17:27 UTC (History)
7 users (show)

See Also:
GIT URL:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
25.05.00
Circulation function:


Attachments
Bug 39209: Set cookie consent bar as first focus (3.28 KB, patch)
2025-02-27 15:46 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 39209: Set cookie consent bar as first focus (3.33 KB, patch)
2025-03-03 18:08 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 39209: Set cookie consent bar as first focus (2.84 KB, patch)
2025-03-17 10:57 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 39209: Set cookie consent bar as first focus (2.89 KB, patch)
2025-04-02 14:05 UTC, Thomas Klausner
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Martin Renvoize (ashimema) 2025-02-27 11:52:05 UTC
We've had an accessibility audit highlight that the cookie consent banner is 'in a strange order' for keyboard navigation.

> Issue
> • The cookie banner current sits in a slightly odd place in the focus order,
>   coming after the ‘Advanced Search’ link
> • This might be somewhat disorientating for screen reader users. It may also
>   be frustrating for sighted keyboard users who would like want to dismiss this
>   prior to exploring the page
>
> Solution
> • Review the order of focus (by tabbing through the page) to ensure the
>   journey users take through the page and within elements is the most logical
>   and efficient, and matches the visible order of content
> • Move the cookie banner so it can be dismissed as the first action on the
>   page
> • NB – avoid using positive tabindex values to artificially modify the focus
> order

I've researched this a little and there's evidence that moving the banner to the top is detrimental to engagement.  Other research suggests that as soon as a cookie banner appears, it should take the initial keyboard focus.

I propose we take the later approach and if the cookie consent banner is present on the page it should take the first focus point until dismissed at which point the focus should be reset.
Comment 1 Martin Renvoize (ashimema) 2025-02-27 15:46:03 UTC
Created attachment 178786 [details] [review]
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.
Comment 2 Owen Leonard 2025-03-03 18:08:23 UTC
Created attachment 178894 [details] [review]
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>
Comment 3 Martin Renvoize (ashimema) 2025-03-05 08:46:46 UTC
Thanks for the quick signoff Owen, very much appreciated :)
Comment 4 Marcel de Rooy 2025-03-14 10:43:33 UTC
 FAIL   koha-tmpl/opac-tmpl/bootstrap/js/cookieconsent.js
   FAIL   tidiness
                File is not tidy, please run `perl misc/devel/tidy.pl koha-tmpl/opac-tmpl/bootstrap/js/cookieconsent.js`

             if (
                 $(window).scrollTop() >=
                 wrapper.offset().top +
-                wrapper.outerHeight() -
-                window.innerHeight
+                    wrapper.outerHeight() -
+                    window.innerHeight
             ) {

Now that should be tidy. Dont ask me why :)
Comment 5 Marcel de Rooy 2025-03-14 10:46:27 UTC
-        document.querySelector('body').setAttribute('tabindex', '-1');
-        document.querySelector('body').focus();
-        document.querySelector('body').removeAttribute('tabindex');
+        document.querySelector("body").setAttribute("tabindex", "-1");
+        document.querySelector("body").focus();
+        document.querySelector("body").removeAttribute("tabindex");

Also replacing single quotes here. Do we really want that ?
Comment 6 Marcel de Rooy 2025-03-14 10:47:02 UTC
Jonathan Druart: Please see previous two comments.
Comment 7 Katrin Fischer 2025-03-14 13:30:13 UTC
(In reply to Marcel de Rooy from comment #5)
> -        document.querySelector('body').setAttribute('tabindex', '-1');
> -        document.querySelector('body').focus();
> -        document.querySelector('body').removeAttribute('tabindex');
> +        document.querySelector("body").setAttribute("tabindex", "-1");
> +        document.querySelector("body").focus();
> +        document.querySelector("body").removeAttribute("tabindex");
> 
> Also replacing single quotes here. Do we really want that ?

I believe we had some bits where we replaced with double quotes because of a security risk. And for translatable strings there also used to be a coding guideline, so for example French users don't break JS when using ' in their translations. 

Do you see an issue with the change?
Comment 8 Jonathan Druart 2025-03-17 10:57:39 UTC
Created attachment 179385 [details] [review]
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
Comment 9 Jonathan Druart 2025-03-17 10:58:00 UTC
(In reply to Marcel de Rooy from comment #6)
> Jonathan Druart: Please see previous two comments.

I don't understand. I have run tidy.pl and amended the patch. Now all looks good to me. Only new lines added and the QA script is happy.
Comment 10 Martin Renvoize (ashimema) 2025-03-27 15:41:38 UTC
Are we happy here at this stage?
Comment 11 Thomas Klausner 2025-04-02 14:05:01 UTC
Works as advertised (unless you have the "I still don't care about cookies" firedox extension installed, which automatically clicks the least invasive option and thus the consent bar is not shown. So if you have something like that, be sure to disable it before testing...)
Comment 12 Thomas Klausner 2025-04-02 14:05:59 UTC
Created attachment 180385 [details] [review]
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>
Comment 13 Katrin Fischer 2025-04-10 17:27:48 UTC
Pushed for 25.05!

Well done everyone, thank you!