status-messages--gin-lb.html.twig in Gin Layout Builder 1.0.x

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.

See also

claro_preprocess_status_messages().

File

templates/status-messages--gin-lb.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.
 * - title_ids: A list of unique ids keyed by message type.
 *
 * @see claro_preprocess_status_messages().
 */
#}
<div data-drupal-messages class="glb-messages-list">
  {% for type, messages in message_list %}
    {%
      set classes = [
      'messages-list__item',
      'messages',
      'messages--' ~ type,
    ]
    %}
    {%
      set is_message_with_title = status_headings[type]
    %}
    {%
      set is_message_with_icon = type in ['error', 'status', 'warning']
    %}

    <div role="contentinfo" aria-labelledby="{{ title_ids[type] }}"{{ glb_classes(attributes.addClass(classes)|without('role', 'aria-label')) }}>
      {% if type == 'error' %}
      <div role="glb-alert">
        {% endif %}
        {% if is_message_with_title or is_message_with_icon %}
          <div class="glb-messages__header">
            {% if is_message_with_title %}
              <div id="{{ title_ids[type] }}" class="glb-messages__title">
                {{ status_headings[type] }}
              </div>
            {% endif %}
          </div>
        {% endif %}
        <div class="glb-messages__content">
          {% if messages|length > 1 %}
            <ul class="glb-messages__list">
              {% for message in messages %}
                <li class="glb-messages__item">{{ message }}</li>
              {% endfor %}
            </ul>
          {% else %}
            {{ messages|first }}
          {% endif %}
        </div>
        {% if type == 'error' %}
      </div>
      {% endif %}
    </div>
    {# Remove type specific classes. #}
    {% set attributes = glb_classes(attributes.removeClass(classes)) %}
  {% endfor %}
</div>