file status-messages.html.twig

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.
  • display: (optional) May have a value of 'status' or 'error' when only displaying messages of that specific type.
  • attributes: HTML attributes for the element, including:
    • class: HTML classes.

See Also

  • template_preprocess_status_messages()
Source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation 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 http://www.w3.org/TR/WCAG-TECHS/H69.html
  10. * 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. * - display: (optional) May have a value of 'status' or 'error' when only
  19. * displaying messages of that specific type.
  20. * - attributes: HTML attributes for the element, including:
  21. * - class: HTML classes.
  22. *
  23. * @ingroup templates
  24. *
  25. * @see template_preprocess_status_messages()
  26. */
  27. #}
  28. {# Save original attribute classes. This is needed to override in loop below. #}
  29. {# @see https://www.drupal.org/project/bootstrap/issues/2892936 #}
  30. {% set classes = attributes.offsetGet('class')|default({}) %}
  31. {%
  32. set status_heading = {
  33. 'status': 'Status message'|t,
  34. 'error': 'Error message'|t,
  35. 'warning': 'Warning message'|t,
  36. 'info': 'Informative message'|t,
  37. }
  38. %}
  39. {%
  40. set status_classes = {
  41. 'status': 'success',
  42. 'error': 'danger',
  43. 'warning': 'warning',
  44. 'info': 'info',
  45. }
  46. %}
  47. {%
  48. set status_roles = {
  49. 'status': 'status',
  50. 'error': 'alert',
  51. 'warning': 'alert',
  52. 'info': 'status',
  53. }
  54. %}
  55. <div data-drupal-messages>
  56. <div class="messages__wrapper">
  57. {% for type, messages in message_list %}
  58. {%
  59. set message_classes = [
  60. 'alert',
  61. 'alert-' ~ status_classes[type],
  62. 'alert-dismissible',
  63. ]
  64. %}
  65. {# Reset the attribute classes and then add the message specific classes. #}
  66. <div{{ attributes.setAttribute('class', classes).addClass(message_classes).setAttribute('role', status_roles[type]).setAttribute('aria-label', status_headings[type]) }}>
  67. <button type="button" role="button" class="close" data-dismiss="alert" aria-label="{{ 'Close'|t }}"><span aria-hidden="true">&times;</span></button>
  68. {% if status_headings[type] %}
  69. <h2 class="sr-only">{{ status_headings[type] }}</h2>
  70. {% endif %}
  71. {% if messages|length > 1 %}
  72. <ul class="item-list item-list--messages">
  73. {% for message in messages %}
  74. <li class="item item--message">{{ message }}</li>
  75. {% endfor %}
  76. </ul>
  77. {% else %}
  78. <p>{{ messages|first }}</p>
  79. {% endif %}
  80. </div>
  81. {% endfor %}
  82. </div>
  83. </div>

Related topics