fix: Fix links in Announcements

[ozandogrultan]

Signed-off-by: Ozan Dogrultan ozan.dogrultan@deliveryhero.com

Fixes #1875

Summary of Changes

Previously, when there were links in the Announcement html content, they were overridden by the navigation of the Card component and when they were clicked, announcement list page was shown instead of the link itself.

The changes in the PR introduces the logic the stop bubbling up the click event to the Card component so that the link navigation works as expected.

Tests

No test change is needed.

Documentation

No documentation change is needed.

CheckList

Make sure you have checked all steps below to ensure a timely review.

• PR title addresses the issue accurately and concisely. Example: "Updates the version of Flask to v1.0.2"
  • In case you are adding a dependency, check if the license complies with the ASF 3rd Party License Policy.
• PR includes a summary of changes.
• PR adds unit tests, updates existing unit tests, OR documents why no test additions or modifications are needed.
• In case of new functionality, my PR adds documentation that describes how to use it.
  • All the public functions and the classes in the PR contain docstrings that explain what it does

[feng-tao]

cc @Golodhros

[ozandogrultan]

@Golodhros could you review this please? 🙏🏼

[Golodhros]

This creation of a fake button and adding a stop propagation handler to it seems a bit fishy to me.
Could we achieve the same effect by using CSS pointer-events?
Check in https://css-tricks.com/almanac/properties/p/pointer-events/

[ozandogrultan]

Thanks for the link!
I've tried using pointer-events on both child and parent elements, however click event is always propagated to the Card component which results in following the navigation..
Could you be more specific on how we can use pointer-events here?

[Golodhros]

It is something like this: https://stackoverflow.com/a/46707009

[ozandogrultan]

I've tried this suggestion as well, but it didn't work either.. but I might be doing something wrong, I don't have much experience with pointer-events

Another option in my opinion is that eventPropagation can be stopped on the SanitizedHtml level here

[ozandogrultan]

if we stop the propagation in the "html_content" level it also works, but for me it's just another workaround and doesn't solve the problem fully

[ozandogrultan]

@Golodhros I've changed the fix strategy slightly with the latest changes. Now the only change is to allow onclick handlers to be customized in the sanitized announcement content, so stopping event propagation logic can be set if needed by the content which is passed. Can you please review again?

[Golodhros]

LGTM