block--secondary-menu--plugin-id--search-form-block.html.twig

{#
/**
 * @file
 * Theme implementation for a search form block in the Secondary Menu region.
 *
 * Available variables:
 * - content: The content of this block.
 * - content_attributes: A list of HTML attributes applied to the main content
 *   tag that appears in the template.
 * - label: The configured label of the block if visible.
 * - attributes: HTML attributes for the wrapper.
 * - title_attributes: Same as attributes, except applied to the main title
 *   tag that appears in the template.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the main title tag that appears in the template.
 *
 * @see template_preprocess_block()
 * @see search_preprocess_block()
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
    'block',
    'block-search-wide',
  ]
%}
<div{{ attributes.addClass(classes) }}>
  {{ title_prefix }}
  {% if label %}
    <h2{{ title_attributes }}>{{ label }}</h2>
  {% endif %}
  {{ title_suffix }}
  {% block content %}
    <button class="block-search-wide__button" aria-label="{{ 'Search Form'|t }}" data-drupal-selector="block-search-wide-button">
      {% include "@olivero/../images/search.svg" %}
      <span class="block-search-wide__button-close"></span>
    </button>

    {#
      Add tabindex=“-1” to prevent Safari from closing search bar when the submit button is clicked with a mouse.
      @see https://www.drupal.org/project/drupal/issues/3269716
      @see https://bugs.webkit.org/show_bug.cgi?id=229895
    #}
    <div{{ content_attributes.addClass('block-search-wide__wrapper').setAttribute('data-drupal-selector', 'block-search-wide-wrapper').setAttribute('tabindex', '-1') }}>
      <div class="block-search-wide__container">
        <div class="block-search-wide__grid">
          {{ content }}
        </div>
      </div>
    </div>
  {% endblock %}
</div>