status-messages.html.twig in Drupal 10

Default theme implementation for status messages.

Displays status, error, and warning messages, grouped by type.

An invisible heading identifies the messages for assistive technology. Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html for info.

Add an ARIA label to the contentinfo area so that assistive technology user agents will better describe this landmark.

Available variables:

• message_list: List of messages to be displayed, grouped by type.
• status_headings: List of all status types.
• attributes: HTML attributes for the element, including:
  • class: HTML classes.

4 theme calls to status-messages.html.twig

CKEditor5::buildConfigurationForm in core/modules/ckeditor5/src/Plugin/Editor/CKEditor5.php

DefaultsEntityForm::buildMessage in core/modules/layout_builder/src/Form/DefaultsEntityForm.php

Renders a message to display at the top of the layout builder.

OverridesEntityForm::buildMessage in core/modules/layout_builder/src/Form/OverridesEntityForm.php

Renders a message to display at the top of the layout builder.

StatusMessages::renderMessages in core/lib/Drupal/Core/Render/Element/StatusMessages.php

#lazy_builder callback; replaces placeholder with messages.

File

core/modules/system/templates/status-messages.html.twig

{#
/**
 * @file
 * Default theme implementation for status messages.
 *
 * Displays status, error, and warning messages, grouped by type.
 *
 * An invisible heading identifies the messages for assistive technology.
 * Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html
 * for info.
 *
 * Add an ARIA label to the contentinfo area so that assistive technology
 * user agents will better describe this landmark.
 *
 * Available variables:
 * - message_list: List of messages to be displayed, grouped by type.
 * - status_headings: List of all status types.
 * - attributes: HTML attributes for the element, including:
 *   - class: HTML classes.
 *
 * @ingroup themeable
 */
#}
<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' %}
      <div role="alert">
    {% endif %}
    {% if status_headings[type] %}
      <h2 class="visually-hidden">{{ status_headings[type] }}</h2>
    {% endif %}
    {% if messages|length > 1 %}
      <ul>
        {% for message in messages %}
          <li>{{ message }}</li>
        {% endfor %}
      </ul>
    {% else %}
      {{ messages|first }}
    {% endif %}
    {% if type == 'error' %}
      </div>
    {% endif %}
  </div>
{% endfor %}
</div>

Related topics

Theme system overview

Functions and templates for the user interface that themes can override.