JavaScript messages template changes

The JavaScript Messages API makes some small assumptions about where the messages should be rendered. In order to attach messages there needs to be a div element on the page with a data-drupal-messages attribute.

Core's themes comply because the twig templates provided by classy and stable have been updated.

If you have a custom theme that extends classy or stable you might need to make changes if it overrides the status-messages.html.twig template. If the template extends the status-messages.html.twig using the twig block provided by Classy's template then you will not need to make a change.

If you have a completely custom theme you will need to update your status-messages.html.twig template.

For example the stable theme's status-messages.html.twig does the following:

<div data-drupal-messages>
 {% for type, messages in message_list %}
   <div role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes|without('role', 'aria-label') }}>
     {% if type == 'error' %}

     {% endif %}
   </div>
 {% endfor %}
</div>