You are here

status-messages.html.twig in Status Messages 8

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 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.

File

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 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. #}
  22. <div class="simple-status-messages">
  23. {% block messages %}
  24. {% for type, messages in message_list %}
  25. {%
  26. set classes = [
  27. 'status-messages',
  28. 'messages--' ~ type,
  29. ]
  30. %}
  31. <div role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>
  32. <a href="#" class="status-messageclose" title="Close">×</a>
  33. {{ enabled }}
  34. {% if type == 'error' %}
  35. <div role="alert">
  36. {% endif %}
  37. {% if status_headings[type] %}
  38. <h2 class="visually-hidden">{{ status_headings[type] }}</h2>
  39. {% endif %}
  40. {% if messages|length > 1 %}
  41. <ul class="messages__list">
  42. {% for message in messages %}
  43. <li class="messages__item">{{ message }}</li>
  44. {% endfor %}
  45. </ul>
  46. {% else %}
  47. {{ messages|first }}
  48. {% endif %}
  49. {% if type == 'error' %}
  50. </div>
  51. {% endif %}
  52. </div>
  53. {# Remove type specific classes. #}
  54. {% set attributes = attributes.removeClass(classes) %}
  55. {% endfor %}
  56. {% endblock messages %}
  57. </div>