Add js message theme override to match Umami message markup

This looks really good. Just a few things to consider before we give it a final test/merge.

• In Drupal 10, we don't need to have the es6 code transpiled for ie11 any more, so that can be removed.
• Can we try remove the weight from the CSS file in the library definition. I don't think that should be needed.

Rerolled patch for 10.1.x.

Tried to fix test errors in #15.

As mentioned in #14.1, Drupal 10 doesn't need to have the es6 code transpiled, so we can just copy the contents from .es6.js into .js file from the D9 patch and remove the .es6.js.
#14.2 - not sure whats the ask.

Thanks!

Thank you for working on this @ankithashetty

Will still need screenshots for this though.

Hi @ankithashetty

Thanks for this work; it's looking really good.

For #14.2, that was my mistake. I thought we were introducing a 'weight' to the CSS file, but looks like we were removing it.

However, we now have a 'messages' library with no messages.css file in it. It seems to have been moved to the general umami global library. Can we add that CSS file back to the messages library instead please, so we keep the CSS and the JS for this component in the same library?

Also, as @smustgrave says, we'll need to get some before/after screenshots to verify this. Then we can move it to RTBC.

I made a slight modification of patch #16.
Message.css was added back to the library, adding an id to the h2 for the aria-labelledby attribute.
I also added a wrapper span around the message text to match the twig markup.
Before/after screenshots are attached.

Thanks just FYI for next time went screenshots are tagged they need to be added to the issue summary.

For the ID is there a possibility there could be 2 of the same on the page? That could introduce an accessibility issue.

I based this modification on claros's messages.js, but you are right, if two ids are the same it can cause accessibility issues.
So we can remove the aria-labelledby attribute since the h2 is visually-hidden but it contains the text needed for screen readers.
Added new patch.

Thanks! Change looks good and since this is a demo profile doubt it will need any kind of change record

Good job!

+++ b/core/profiles/demo_umami/themes/umami/umami.info.yml
@@ -7,7 +7,6 @@ libraries:
-  - umami/messages

If we remove the umami/messages library from the global libraries, it isn't guaranteed anymore that the message styles are loaded when messages are rendered. We probably should add the messages.css styles to the global library since it should be always loaded.

Added messages.css to global library.

I have added patch and interdiff for same. Please review

If we add to global don't think we need

+  core/drupal.message:

Anymore right?