Make close button X as DeclineAll button for mustConsent: true (needed for Italy)

jan kellermann → made their first commit to this issue’s fork.

Thank you for your feedback!

Here is the upstream issue: https://github.com/klaro-org/klaro-js/issues/478

We will add a button via Drupal until klaro upstream offers this function.

I added a close button X to the notice dialog. You have to enable the button on the settings page.

Please review.

The close button is only added for notice dialog, not for consent dialog modal. I will add this.

Added :)

Please review and please check the accessibility of the new close button.

@jan kellermann, you have mentioned that it is necessary to enable the close button in the settings, but somehow i am unable to find that button. I've applied MR32, code changes are in place, and i went through the different settings pages but no luck finding anything in regard of this setting? semantically i would have expected the checkbox under settings -> general within the buttons section, but i only find "accept all", "decline all", "learn more", "display learn more as a button" and "show button to toggle the consent modal"?

Thank you, @rkoller for your time! I am sorry, that you could not test :(

The new option should be in the button area, see screenshot.

Maybe the patch did not applied? The patch is against klaro-dev and not latest rc.

Maybe you can checkout branch `3485880-make-close-button` from Issue-git ?

Thank you very much.

Thanks for the confirmation and the help with ideation finding the root cause. i've figured it out now (at least i know what broke but not the why, yet). the reason why i dont see the changes applied is the following:
i am using https://github.com/joachim-n/drupal-core-development-project which is based on a symlink approach, you have one repos folder with a folder for drupal core and you are able to add (git clone) additional contrib modules. afterwards you have to add the added repo folder to the repositories section in the composer.json. after that you also have to composer require the module you've just git cloned (and instead of added it gets symlinked). that approach worked fine for me for months. that way i am able to add and checkout MRs, which i did for klaro here as well. and when i'Ve checked before in the directory in the repos folder all the changes of the different MRs are applied properly. the problem is the changes arent reflected in web/modules/conrib/klaro and that is what the site i am testing on is based on. goota have4 to figure out why that sync isnt taking place anymore.

ok figured it out, the placement of the repo reference in the repositories section was the problem, had to move it past the composer entry few days ago to fix an odd behavior and that broke the ability to symlink now (i just havent noticed because i had already installed and linked all necessary contrib modules i was regularly testing - anyway the exact details i have to figure out still but at least i am able to test again). about the MR:

cookie notice (none modal dialog):
The focus outline if the dialog modal is in focus has a bulge:

while if the close button is in focus the focus outline is no proper square

the target size is large enough to meet the minimum requirement of SC 2.5.8.

cookie notice (modal dialog):
the close button is missing a focus outline (see dialog.mp4)

Consent dialog modal:
The close button is missing a focus outline (see consent_dialog.mp4)

Settings page:
You may enable the option Show close button X to modal form to meet national regulations. which is added to the descriptions of the first two checkboxes feels sort of redundant and unnecessary. Cuz technically that detail is provided in the description of the Show close button X to modal form checkbox in a rephrased manner already. it is only an indication that the proximity between the checkbox related to the dialog modals and the buttons sections is too large and that there is sort of a disconnect?

The first part of the first sentence of the description for the Show close button X to modal form checkbox is also redundant. The beginning of the description (Adds a close button X to modal dialog) is close to identical. I wonder if it would make sense to simply drop it and change things to:

checkbox label
Add close button to the modal dialog

checkbox description:
Closes the modal dialog and declines all consents. Mandatory in some countries for modal dialogs.

Thank you got the exact and extensive feedback! It's great to have you on this project.

I worked on CSS and JS to fix all the focus bugs and put the elements in the right order.

I also worked on the settings form and introduced a new section "Required consent" and I refer in the description to the button section.

Please reviews.

thanks for your changes! The focus outline quirks on the cookie notice dialog modal seem fixed. There is only one detail to note, is it possible that the none modal dialog is slightly more narrow compared to its modal counterpart? On the none modal dialog the close button is slightly overlapping "following", plus "following" is comma separated, another indication of a more narrow element width:

when the close button is in focus the word "following" gets overlapped even more:

aside that minor detail, the close button on the cookie notice modal dialog and the consent dialog modal are still missing a focus outline.

And I like your idea adding a description to the first section and moving the legal note there. Only a thought about the wording. I've taken a look at the legislative text in https://www.garanteprivacy.it/faq/cookie (i've only used a translation service), but from my perspective the text is not about modals, but the cookie banner in general in which ever way it is displayed. but based on the description a user might assume the necessity to add the close button only if the "require user action" or the "show notice as modal" is checked. but as i understand the link text if none of the two checkboxes is checked and no close button added it would be in violation of the law in italy then. So maybe slightly reword the description and also front load the reason (the thing people will perhaps scan for) and leave the way how to solve things afterwards. How about something like:

Some national regulations require a close button for the consent. It can be enabled by the "Add close button to the modal dialog" option.

That resurfaces again the point i've made in #3484938-7: Add support for a less intrusive user experience mode → , it is tricky how to name each of ui component "flavors" as well as all of them at once. In my suggestion i went with the neutral "consent" without the addition of anything like banner, widget, component, or alike. but i've intentionally avoided using the term "modal form", since modal wouldnt entail the case where none of the two checkboxes under "require consent" is checked.

In regard of the section title "require consent" it feels and reads like an order, plus the other two sections are single worded nouns while this one contains a verb and a noun. Maybe it would make sense to drop require and label it just "consent"?

But in both cases i wonder if it would make sense to leave the title and description as is and making potential further changes within the scope of ✨ Add support for a less intrusive user experience mode Active where the labels of the different modes are being discussed as well. that way it might be easier to stay consistent?

Thank you very much!

I fixed the missing margin and will merge this MR.

Ich changed the wording because the close-button will also added to the non-modal notice dialog.

Lets discuss the settings form in #3484938

Merge is done. Thank you all for response and testing.

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