Problem/Motivation

When the withdraw consent banner is enabled and a user has accepted cookies, the privacy settings button becomes available and the withdraw consent banner is visually hidden off-screen. Keyboard users can tab onto any links or the withdraw consent button within the hidden banner, but there is no visible focus indicator because the banner is hidden. This is probably confusing for sighted users navigating the page by keyboard and is likely to be a failure under WCAG SC 2.4.7. It is probably best to prevent controls within the banner receiving keyboard focus when the banner is hidden.

Steps to reproduce

  1. Enable the Opt-in. Don't track visitors unless they specifically give consent. (GDPR compliant) option
  2. Enable the options Enable floating privacy settings tab and withdraw consent banner and Enable floating privacy settings tab after withdrawing consent
  3. Get the cookie consent banner to trigger and select the option to accept cookies
  4. The privacy settings button should now be visible and the withdraw consent banner should be hidden (the privacy button must be clicked to reveal the withdraw consent banner)
  5. Whilst the withdraw consent banner is hidden, use the keyboard to tab onto the privacy settings button
  6. Press tab again - any links or the withdraw consent button within the hidden withdraw consent banner can obtain keyboard focus
  7. Possibly a side issue, but notice also that just after cookies are accepted and the withdraw consent banner is present in the DOM (but visually hidden) the body tag contains the class "eu-cookie-compliance-popup-open". The privacy settings tab must be toggled to open and close the withdraw consent banner for the class to be removed.

Proposed resolution

  1. When the withdraw consent banner is hidden, set tabindex="-1" on all controls (links, buttons, inputs) within the withdraw banner to prevent the controls receiving keyboard focus.
  2. When the withdraw consent banner is shown, set tabindex="0" on all controls with the withdraw banner so that they can again receive keyboard focus
  3. Ensure the body class "eu-cookie-compliance-popup-open" is always removed when the withdraw consent banner is hidden

Issue fork eu_cookie_compliance-3298345

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

Glugmeister created an issue. See original summary.

svenryen’s picture

svenryen commented

Thanks for the patch! I'll take a look.

svenryen opened merge request !77

svenryen’s picture

svenryen commented

@Glugmeister, did you plan to add code in the issue fork, or do you want the maintainer team to fix this issue?

mzouari’s picture

mzouari commented

@svenryen
Hello everyone,
when the banner is folded, it is still possible to access it in keyboard navigation and with a screen reader. I added a js script that allows:
1. Add the aria-hidden="true" attribute on the element that contains the banner when it is collapsed (aria-hidden="false" when it is open).

glugmeister’s picture

glugmeister commented

@svenryen yes I planned to add code into the issue fork - but I had some difficulty getting the forked version to work in my local dev environment. I then went on holiday! So apologies for that. I am not overly familiar with submitting patches via issue forks. Yes please if the maintainer team could look at fixing this issue that would be much appreciated. In the meantime I will attempt to better understand how to work with issue forks ...!

svenryen’s picture

svenryen commented

I will not have time until the week after next week, and there's the Reject all feature I'd like to work on before the early Sept release window that we're aiming for.

We also accept old-style patches, so don't be shy about uploading a patch! :)

glugmeister’s picture

glugmeister commented

Thanks @svenryen - I'll try to contribute a patch in some form!

svenryen’s picture

svenryen commented

Hi @Glugmeister. I'll add a patch today for setting the aria-hidden to true and tabindex to -1 when hidden and the opposite for the visible banner.

If you think additional changes need be made, please follow up and post another patch in this issue. :)

  • svenryen committed 60a09b6 on 8.x-1.x 
    Issue #3298345 by svenryen, Glugmeister: Withdraw banner links/buttons...
svenryen’s picture

svenryen commented
Status: Active » Fixed

Hi @Glugmeister and @mzouari, can you test the 1.x-dev version or the branch from this issue fork to see if this resolves your issue?

Glugmeister opened merge request !91

Glugmeister closed merge request !91

Glugmeister opened merge request !92

glugmeister’s picture

glugmeister commented

Hi @svenryen,

Please see my most recent merge request above (#14). I have added aria-hidden attribute to the compliance and withdraw banner and I also noticed that tabindex is not being set for the "Cookie Policy" and "More info" buttons if they are enabled in the banner (also if you add any links into the banner compliance and withdraw messages, tabindex is not set for them either).

So have changed lines in the JS like this:

$('.eu-cookie-compliance-agree-button, .eu-cookie-compliance-more-button, .eu-cookie-compliance-secondary-button, .eu-cookie-compliance-save-preferences-button, .eu-cookie-compliance-category-checkbox, .eu-cookie-compliance-default-button, .eu-cookie-withdraw-button').attr('tabindex', -1);

To this:

$('.eu-cookie-compliance-banner, .eu-cookie-withdraw-banner')
              .attr('aria-hidden', true)
              .find('a, button, input')
              .attr('tabindex', -1);

I am thinking that it should be safe to target all focusable controls inside the banners to set tabindex. Hopefully that makes sense!

  • svenryen committed c94b004 on 8.x-1.x authored by Glugmeister 
    Issue #3298345 by svenryen, Glugmeister, mzouari: Withdraw banner links/...
svenryen’s picture

svenryen commented
svenryen’s picture

svenryen commented

Thanks for helping. That was a much better selector.

glugmeister’s picture

glugmeister commented
Status: Fixed » Needs review
glugmeister’s picture

glugmeister commented
Status: Needs review » Fixed

Glugmeister opened merge request !93

glugmeister’s picture

glugmeister commented
Status: Fixed » Needs review

Changing back to "Needs review" because I've submitted a merge request with couple of extra fixes.

  • svenryen committed c04f2aa on 8.x-1.x authored by Glugmeister 
    Issue #3298345 by Glugmeister, svenryen, mzouari: Withdraw banner links/...
svenryen’s picture

svenryen commented
Status: Needs review » Fixed

Thanks for the fixes.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.