You are here

status-messages.html.twig in Open Social 8.4

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()

File

themes/socialbase/templates/system/status-messages.html.twig
View 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. {%
  29. set status_heading = {
  30. 'status': 'Status message'|t,
  31. 'error': 'Error message'|t,
  32. 'warning': 'Warning message'|t,
  33. 'info': 'Informative message'|t,
  34. }
  35. %}
  36. {%
  37. set status_classes = {
  38. 'status': 'success',
  39. 'error': 'danger',
  40. 'warning': 'warning',
  41. 'info': 'info',
  42. }
  43. %}
  44. {% for type, messages in message_list %}
  45. {%
  46. set classes = [
  47. 'alert',
  48. 'alert-' ~ status_classes[type],
  49. 'alert-dismissible',
  50. 'card-radius',
  51. ]
  52. %}
  53. <div{{ attributes.addClass(classes) }} role="alert">
  54. <a href="#" role="button" class="close" data-dismiss="alert" aria-label="{{ 'Close'|t }}"><span aria-hidden="true">&times;</span></a>
  55. {% if status_headings[type] %}
  56. <h4 class="sr-only">{{ status_headings[type] }}</h4>
  57. {% endif %}
  58. {% if messages|length > 1 %}
  59. <ul class="item-list item-list--messages">
  60. {% for message in messages %}
  61. <li class="item item--message">{{ message }}</li>
  62. {% endfor %}
  63. </ul>
  64. {% else %}
  65. {{ messages|first }}
  66. {% endif %}
  67. {# Remove type specific classes. #}
  68. {% set attributes = attributes.removeClass(classes) %}
  69. </div>
  70. {% endfor %}