You are here

status-messages.html.twig in Drupal 10

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.
  • title_ids: A list of unique ids keyed by message type.

File

core/themes/claro/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. * - title_ids: A list of unique ids keyed by message type.
  21. *
  22. * @see claro_preprocess_status_messages().
  23. */
  24. #}
  25. <div data-drupal-messages class="messages-list">
  26. {% for type, messages in message_list %}
  27. {%
  28. set classes = [
  29. 'messages-list__item',
  30. 'messages',
  31. 'messages--' ~ type,
  32. ]
  33. %}
  34. {%
  35. set is_message_with_title = status_headings[type]
  36. %}
  37. {%
  38. set is_message_with_icon = type in ['error', 'status', 'warning']
  39. %}
  40. <div role="contentinfo" aria-labelledby="{{ title_ids[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>
  41. {% if type == 'error' %}
  42. <div role="alert">
  43. {% endif %}
  44. {% if is_message_with_title or is_message_with_icon %}
  45. <div class="messages__header">
  46. {% if is_message_with_title %}
  47. <h2 id="{{ title_ids[type] }}" class="messages__title">
  48. {{ status_headings[type] }}
  49. </h2>
  50. {% endif %}
  51. </div>
  52. {% endif %}
  53. <div class="messages__content">
  54. {% if messages|length > 1 %}
  55. <ul class="messages__list">
  56. {% for message in messages %}
  57. <li class="messages__item">{{ message }}</li>
  58. {% endfor %}
  59. </ul>
  60. {% else %}
  61. {{ messages|first }}
  62. {% endif %}
  63. </div>
  64. {% if type == 'error' %}
  65. </div>
  66. {% endif %}
  67. </div>
  68. {# Remove type specific classes. #}
  69. {% set attributes = attributes.removeClass(classes) %}
  70. {% endfor %}
  71. </div>