status-messages.html.twig 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  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 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. * @see template_preprocess_status_messages()
  24. */
  25. #}
  26. {{ attach_library('basic/messages') }}
  27. {% for type, messages in message_list %}
  28. {%
  29. set classes = [
  30. 'messages',
  31. 'messages--' ~ type,
  32. ]
  33. %}
  34. <div{{ attributes.addClass(classes) }}>
  35. {% if type == 'error' %}
  36. <div role="alert">
  37. {% endif %}
  38. {% if status_headings[type] %}
  39. <h2 class="visually-hidden">{{ status_headings[type] }}</h2>
  40. {% endif %}
  41. {% if messages|length > 1 %}
  42. <ul class="messages__list">
  43. {% for message in messages %}
  44. <li class="messages__item">{{ message }}</li>
  45. {% endfor %}
  46. </ul>
  47. {% else %}
  48. {{ messages|first }}
  49. {% endif %}
  50. {% if type == 'error' %}
  51. </div>
  52. {% endif %}
  53. </div>
  54. {# Remove type specific classes. #}
  55. {{ attributes.removeClass(classes) }}
  56. {% endfor %}