When theming status messages, this is generally done by overriding status-messages.html.twig. However, messages added via AJAX or JS (
JavaScript Messages API →
) use Drupal.theme.message in core/misc/message.js or a similar function in the theme that overrides it.
Here is Drupal.theme.message in core/misc/message.js.
Even the attributes and classes added aren't consistent with what core has in status-messages.html.twig
This requires developers wanting to unify their results to create JS that builds HTML similar to what is in the Twig file.
There are also inconsistencies between the results of the two methods in Core. One example is that in JS there is:
messageWrapper.setAttribute(
'role',
type === 'error' || type === 'warning' ? 'alert' : 'status',
);
which sets the role to "alert" for errors and warnings. But in the Twig file it only sets that role for errors. Also, the JS sets data-drupal-message-id, but the Twig template doesn't.
Is there a way to unify these, so that the Messages API uses the twig file and there aren't disparate results?
Active
11.0 🔥
This is related to 🐛 AJAX MessageCommand markup and styling differs from Theme default Active but while I think we could make the AJAX command generate HTML, actually setting messages from js (if anything uses this) won't be able to, so should be in its own issue.