rivet-1.0.x-dev/templates/misc/status-messages.html.twig

{#
/**
 * @file
 * 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.
 */
#}
{%
  set types = {
    'default' : 'info',
    'info' : 'info',
    'message' : 'info',
    'status' : 'success',
    'success' : 'success',
    'warning' : 'warning',
    'error' : 'danger',
  }
%}
<div data-drupal-messages><div class="messages__wrapper">
{% block messages %}
{% for type, messages in message_list %}
  {% set type_name = types[type] ?? 'info' %}
  {% set type_label = type ~ '-alert-title' %}
  {%
    set classes = [
      'rvt-alert',
      'rvt-alert--' ~ type_name,
      '[ rvt-m-tb-md ]',
    ]
  %}
  {% set role = type == 'error' ? 'alert' : 'contentinfo' %}
  <div role="{{ role }}" {{ attributes.addClass(classes)|without('role', 'aria-label') }} aria-labelledby="{{ type_label }}" data-rvt-alert="{{ type_name }}">
    {% if status_headings[type] %}
    <h2 id="{{ type_label }}-alert-title" class="rvt-alert__title rvt-sr-only">{{ status_headings[type] }}</h2>
    {% endif %}
    <div class="rvt-alert__message">
    {% if messages|length > 1 %}
      <ul>
      {% for message in messages %}
        <li>{{ message }}</li>
      {% endfor %}
      </ul>
    {% else %}
      {{ messages|first }}
    {% endif %}
    </div>
    <button class="rvt-alert__dismiss" data-rvt-alert-close>
      <span class="rvt-sr-only">Dismiss this alert</span>
      <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m3.5 2.086 4.5 4.5 4.5-4.5L13.914 3.5 9.414 8l4.5 4.5-1.414 1.414-4.5-4.5-4.5 4.5L2.086 12.5l4.5-4.5-4.5-4.5L3.5 2.086Z"></path></svg>
    </button>
  </div>
  {# Remove type specific classes. #}
  {% set attributes = attributes.removeClass(classes) %}
{% endfor %}
{% endblock messages %}
</div></div>