status-messages.html.twig 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  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. * - attributes: HTML attributes for the element, including:
  19. * - class: HTML classes.
  20. *
  21. * @ingroup themeable
  22. */
  23. #}
  24. {% for type, messages in message_list %}
  25. <div role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes|without('role', 'aria-label') }}>
  26. {% if type == 'error' %}
  27. <div role="alert">
  28. {% endif %}
  29. {% if status_headings[type] %}
  30. <h2 class="visually-hidden">{{ status_headings[type] }}</h2>
  31. {% endif %}
  32. {% if messages|length > 1 %}
  33. <ul>
  34. {% for message in messages %}
  35. <li>{{ message }}</li>
  36. {% endfor %}
  37. </ul>
  38. {% else %}
  39. {{ messages|first }}
  40. {% endif %}
  41. {% if type == 'error' %}
  42. </div>
  43. {% endif %}
  44. </div>
  45. {% endfor %}