Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ENABLE-140 Component Cookie Banner #174

Open
wants to merge 26 commits into
base: main
Choose a base branch
from

Conversation

ocjadan
Copy link
Collaborator

@ocjadan ocjadan commented Jul 19, 2024

No description provided.

@ocjadan ocjadan added the component development adding to or creating a new component for Enable. label Jul 19, 2024
@ocjadan ocjadan self-assigned this Jul 19, 2024
@ocjadan ocjadan linked an issue Jul 19, 2024 that may be closed by this pull request
content/body/cookiebanner.php Outdated Show resolved Hide resolved
<button id="show-non-modal-button">Show Non-Modal Banner</button>

<div id="cookie-banner-container">
<dialog id="cookie-banner" class="cookie-banner">
Copy link
Collaborator

@zoltan-dulac zoltan-dulac Jul 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because this is a non-modal, I think it better to not use the dialog tag to encapsulate the cookie banner in the non-modal case. I think

would be better (with aria-labeledby pointing to the title of the banner.

You should use for the modal case, but make sure you follow all the instructions in dialog.php.

Copy link
Collaborator Author

@ocjadan ocjadan Jul 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @zoltan-dulac , could you share why the <aside> tag would be appropriate for a cookie banner. If we trade <dialog> in favor of <aside> then we also lose the following benefits:

  1. The .show() method which positions the contents above everything else on the page, but "still allowing interaction with content outside of the dialog". MDN link
  2. The combination of using a <form> tag with its method attribute set to "dialog", which results in automatic dismissal of the dialog when a button is pressed.

We'd have to program these functionalities ourselves when using the <aside> tag, and also convince users of Enable to do the same.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Zoltan: "Will check with Allison regarding the .show() method."

images/posters/cookiebanner.jpg Outdated Show resolved Hide resolved
less/cookiebanner.less Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component development adding to or creating a new component for Enable.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Component: Cookie Banner
2 participants