Close notification on click?

Is it possible to get the notifications to close on click anywhere inside?
I tried this, but it didn’t do anything:

notification.getElement().addEventListener("click", event -> {
    notification.close();
});

From accessibility perspective, a separate close button is preferred (maybe even necessary, to comply with something like WCAG).
You can see an example of that here:

A non-ideal way to achieve your way, is to add the contents of the notification through a Div with a click listener on it, that closes the notification. However, clicking outside that Div will not close it and natively there is some padding for the content of the notification. So you would have to remove padding there, add it to the Div.
Here’s how it could work:

var notification = new Notification();
notification.addClassName("no-padding");
var notificationContent = new Div("This is content of notification");
notificationContent.getStyle().setPadding("var(--lumo-space-wide-l)");
notificationContent.addClickListener(click -> notification.close());
notification.add(notificationContent)
vaadin-notification-card.no-padding::part(content) {
    padding: 0;
}

Sure, we want accessibility, but if we add a close button we indicate that you have to close it, which is also wrong. Btw, this is for Notification with duration > 0 which close themselves.

Not sure what we’ll end up doing, but thanks for the code example :smiley:

I don’t think having a close button indicates to the user that they have to close it themselves.
In my vaadin apps I do just that. Success notifications will have a duration > 0, while error messages have a duration = 0. Every Notification has a close button no matter the duration.
Just yesterday I watched one of my app users over their shoulders and saw that they did not close a success notification, they let it expire so it went away itself.

Good input, but I do click on them… :smiley:

Well yes, me too actually. but because I want to, not because I have to. There’s no harm in closing a closeable notification. At least when there’s a close button, the user knows what is to be expected when clicking it, in contrast to having a clicklistener on the whole notification (“I just wanted to copy the message, now the notification is just gone” - anonymous user, probably)