status-messages.html.twig

Same filename in this branch
  1. 9 core/profiles/demo_umami/themes/umami/templates/components/messages/status-messages.html.twig
  2. 9 core/themes/stable9/templates/media-library/status-messages.html.twig
  3. 9 core/themes/seven/templates/classy/misc/status-messages.html.twig
  4. 9 core/themes/claro/templates/misc/status-messages.html.twig
  5. 9 core/themes/bartik/templates/status-messages.html.twig
  6. 9 core/themes/stable/templates/misc/status-messages.html.twig
  7. 9 core/themes/starterkit_theme/templates/misc/status-messages.html.twig
  8. 9 core/themes/classy/templates/misc/status-messages.html.twig
  9. 9 core/modules/system/tests/themes/test_messages/templates/status-messages.html.twig
  10. 9 core/modules/system/templates/status-messages.html.twig
Same filename in other branches
  1. 8.9.x core/profiles/demo_umami/themes/umami/templates/components/messages/status-messages.html.twig
  2. 8.9.x core/themes/seven/templates/classy/misc/status-messages.html.twig
  3. 8.9.x core/themes/claro/templates/misc/status-messages.html.twig
  4. 8.9.x core/themes/bartik/templates/status-messages.html.twig
  5. 8.9.x core/themes/stable/templates/misc/status-messages.html.twig
  6. 8.9.x core/themes/classy/templates/misc/status-messages.html.twig
  7. 8.9.x core/modules/system/tests/themes/test_messages/templates/status-messages.html.twig
  8. 8.9.x core/modules/system/templates/status-messages.html.twig
  9. 10 core/profiles/demo_umami/themes/umami/templates/components/messages/status-messages.html.twig
  10. 10 core/themes/olivero/templates/misc/status-messages.html.twig
  11. 10 core/themes/stable9/templates/media-library/status-messages.html.twig
  12. 10 core/themes/claro/templates/misc/status-messages.html.twig
  13. 10 core/themes/starterkit_theme/templates/misc/status-messages.html.twig
  14. 10 core/modules/system/tests/themes/test_messages/templates/status-messages.html.twig
  15. 10 core/modules/system/templates/status-messages.html.twig
  16. 11.x core/profiles/demo_umami/themes/umami/templates/components/messages/status-messages.html.twig
  17. 11.x core/themes/olivero/templates/misc/status-messages.html.twig
  18. 11.x core/themes/stable9/templates/media-library/status-messages.html.twig
  19. 11.x core/themes/claro/templates/misc/status-messages.html.twig
  20. 11.x core/themes/starterkit_theme/templates/misc/status-messages.html.twig
  21. 11.x core/modules/system/tests/themes/test_messages/templates/status-messages.html.twig
  22. 11.x core/modules/system/templates/status-messages.html.twig

Theme override 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 https://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
Form constructor.
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/themes/olivero/templates/misc/status-messages.html.twig

View source
  1. {#
  2. /**
  3. * @file
  4. * Theme override for status messages.
  5. *
  6. * Displays status, error, and warning messages, grouped by type.
  7. *
  8. * An invisible heading identifies the messages for assistive technology.
  9. * Sighted users see a colored box. See
  10. * https://www.w3.org/TR/WCAG-TECHS/H69.html for info.
  11. *
  12. * Add an ARIA label to the contentinfo area so that assistive technology
  13. * user agents will better describe this landmark.
  14. *
  15. * Available variables:
  16. * - message_list: List of messages to be displayed, grouped by type.
  17. * - status_headings: List of all status types.
  18. * - attributes: HTML attributes for the element, including:
  19. * - class: HTML classes.
  20. */
  21. #}
  22. {{ attach_library('olivero/messages') }}
  23. <div data-drupal-messages class="messages-list">
  24. <div class="messages__wrapper layout-container">
  25. {% for type, messages in message_list %}
  26. {%
  27. set classes = [
  28. 'messages-list__item',
  29. 'messages',
  30. 'messages--' ~ type,
  31. ]
  32. %}
  33. <div{{ attributes
  34. .addClass(classes)
  35. .setAttribute('data-drupal-selector', 'messages')
  36. .setAttribute('role', 'contentinfo')
  37. .setAttribute('aria-label', status_headings[type])
  38. }}>
  39. <div class="messages__container" data-drupal-selector="messages-container"{% if type == 'error' %} role="alert"{% endif %}>
  40. {% if status_headings[type] %}
  41. <div class="messages__header">
  42. <h2 class="visually-hidden">{{ status_headings[type] }}</h2>
  43. <div class="messages__icon">
  44. {% if type == 'error' %}
  45. {% include "@olivero/../images/error.svg" %}
  46. {% elseif type == 'warning' %}
  47. {% include "@olivero/../images/warning.svg" %}
  48. {% elseif type == 'status' %}
  49. {% include "@olivero/../images/status.svg" %}
  50. {% elseif type == 'info' %}
  51. {% include "@olivero/../images/info.svg" %}
  52. {% endif %}
  53. </div>
  54. </div>
  55. {% endif %}
  56. <div class="messages__content">
  57. {% if messages|length > 1 %}
  58. <ul class="messages__list">
  59. {% for message in messages %}
  60. <li class="messages__item">{{ message }}</li>
  61. {% endfor %}
  62. </ul>
  63. {% else %}
  64. {{ messages|first }}
  65. {% endif %}
  66. </div>
  67. </div>
  68. </div>
  69. {# Remove type specific classes. #}
  70. {% set attributes = attributes.removeClass(classes) %}
  71. {% endfor %}
  72. </div>
  73. </div>

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.