Move close button to header

jan kellermann → credited rkoller → .

Works for me. But the order of interactive elements changes!
Maybe move the new element to the end of .cm-modal.cm-klaro'?

@rkoller can you please have a look for a11y?

If an order must be preserved for backward compatibility and we don't want to complicate this too much (by providing a setting for that), maybe we can provide some kind of an API switch for that?

Something like:

Drupal.behaviors.klaro.config.closeButtonLocation = Drupal.behaviors.klaro.config.closeButtonLocation || '.cm-modal.cm-klaro .cm-footer';
var elem = document.querySelector(Drupal.behaviors.klaro.config.closeButtonLocation);

This would preserve existing installations and keep the element in the footer, but those who need it in the header can push this value through hook_page_attachments_alter() if needed and mention that in the README.

I don't see why this element needs to be in the footer in the first place, but since it's already here, let's not break projects for others. This can be changed in the next major release, but for now, the module can provide a documented workaround for that, but without explicit settings and UI.

Working on it.

i've tried to understand the problem, but i am unable to reproduce the problem in the first place unfortunately. i've ticked "Add close button to the Klaro! dialog" but for me the close button is still in the header section of the modal and not in the footer like outlined in the issue summary. could you provide some more instructions who to reproduce the problem? i am using 3.x.-dev of klaro and i am unable to reproduce the scenario you've outlined? thank you?

Made changes as requested by @Niklan, and it is working fine after the changes,
Please review.

@rkoller visually, yes, it’s in the header. But if you try to apply styles to the .cm-footer, like position: sticky; bottom: 0, then the close button also becomes sticky at the bottom of the page because it is inside .cm-footer, which is clearly wrong. This is not an action button with an explicit label, which is fine for the footer; it’s just a UI element, and it’s expected to be always at the top. But its current position in the DOM makes it more difficult or impossible in some cases.

• Before (upstream): video with problem →
• After (patched from this issue): video with patched result →

I reverted the last commit and changed the first commit to place the close-button at the end of dialog and not footer. You should place your footer now sticky and the close-button should remain top right in the dialog.

Please review and feedback.

Checked. Works as expected. The close button is appended last in the modal body container and does not conflict with the sticky footer.

Merged. Thank you all for feedback and distributing.

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