Remove deceptive "Accept all" button colors/contrast

[geek-andi]

Problem

By law, users must be given a clear yes/no option. Max Schrems claims that deceptive colors/contrast does not comply to GDPR, I think he's right :) (even if courts end up judging differently, we should not "nudge" users to the one or the other option). Source: https://noyb.eu/en/noyb-aims-end-cookie-banner-terror-and-issues-more-500-gdpr-complaints

Currently, cookiesjsr does exactly this.

• The "Accept all" button is highlighted with another color fill/border than the other buttons
• The video blocking info has "Accept all cookies" in all-caps, bigger font size and highlighted bg color

Proposed solution

Remove highlighting the "Accept all" buttons in the default styling. (To make the banner visually easier to get, the cookie setting button could be smaller.)

(Of course users can override the css, but I think the default settings should be sensible)

[jfeltkamp]

I'm absolute okay with your interest, but the buttons have the same contrast, in so far as white/blue has the same contrast-value as blue/white. The buttons have the same size and font-size. "Deceptive" means that buttons appear as "disabled", "disadvantageous" or "dangerous" or something like this. You can't even say that either of these buttons is clearly highlighted. Which of the two would that be? The one with the border, or the monochrome one.

But I will leave this issue open to catch other comments and meanings on it.

[geek-andi]

@jfeltkamp Thanks for your answer! Yes, there is some room for discussion here.

For me, two things are quite obvious:

1. In the first screenshot bigger font size and capital letters are used the "Accept all cookies" button. "Only accept Video cookies" is not even a button
2. In the second screenshot the "Accept all" Button has a color fill which makes it more visible to me. Since there are two buttons that have a white fill color, the one button which is different will always stand out

Indeed, I'm not sure if deceptive is the correct word for it. At least I would say both designs nudge users to click on the button which is less privacy friendly. In my opinion that should not be the case. Because when you think about the dozens of banners average users "click away" each days it affects the choice users make.

[JPustkuchen]

Please see https://www.drupal.org/project/cookies/issues/3250618 for similar issue on drupal.org and suggestions for a flexible solution by @thomas.frobieter

[JPustkuchen]

@jfeltkamp could we please at least add semantic classes to the buttons, so we can safely style them? This should be no breaking change.

Current situation is the following:
Bar:

Modal layer:

So I'd suggest to simply add

• "acceptAll" (like already existing denyAll) - in both dialogs
• "save" (or cookiejsr-settings-save???) - in modal layer

---

In a later cleanup (future task), the BEM style should be reviewed & revised and I'd vote to remove the "important" class.

[jfeltkamp]

Ok, I improved that in the master of jfeltkamp/cookiesjsr.
Please check, if it works for you. Then I will tag it and deploy on CDN.

To test with Drupal:
Go to libraries and checkout cookiesjsr as master.
(correct version, when you see 1.0.13 in the pacckage.json)
Un-check "Load by CDN" in COOKiES settings.

In the banner:
Allow and Deny get both "important" class and an additional individual class.
Responsive behavior doesen't display-none the deny button anymore and alternativly swap to mobil mode earlier, if there is not enough place for all buttons in a row.

In the layer:
The "Save" action got the important class. Allow and Deny don't have "important" class anymore, and will also be handled equal in responsive.

[JPustkuchen]

Thank you @jfeltkamp! Green lights from our side :)

[geek-andi]

Nice, this seems to be fixed. Thanks @jfeltkamp !

See https://www.drupal.org/project/cookies/issues/3250618