UHF-8839: Search focus

hdbt.libraries.yml

@@ -191,3 +191,8 @@ news-archive:
   dependencies:
     - core/drupalSettings
     - core/drupal
+
+search-helper:
+  version: 1.x
+  js:
+    src/js/search-helper.js: {}

hdbt.theme

@@ -1687,3 +1687,10 @@ function hdbt_theme_suggestions_container_alter(array &$suggestions, array &$var
 
   array_unshift($suggestions, 'container__' . $type . '__' . $name);
 }
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function hdbt_preprocess_views_exposed_form(array &$variables) {
+  $variables['#attached']['library'][] = 'hdbt/search-helper';
+}

src/js/search-helper.js

@@ -0,0 +1,15 @@
+(function ($) {
+
+  // Set focus on search result count
+  $(document).ajaxComplete(function onDataLoaded(e, xhr, settings) {
+    // Check form ID to prevent mixing on multi-form page
+    const viewDomId = settings.extraData.view_dom_id;
+    const resultsContainerEl = $(`[data-id-number=${  viewDomId  }]`);
+    const resultCountEl = $('[class$="__count-container"]', resultsContainerEl[0])[0];
+
+    if (!resultCountEl) return;
+    resultCountEl.setAttribute('tabindex', '-1');
+    resultCountEl.focus();
+    resultCountEl.scrollIntoView({behavior: 'smooth', block: 'center'});
+  });
+})(jQuery);

templates/views/views-view--service-list--block-search.html.twig

@@ -50,19 +50,22 @@
     </header>
   {% endif %}
 
-  {% if is_ajax_request or total_rows > pager_items_per_page %}
-    {{ exposed }}
+  {{ exposed }}
+  <div class="services-search__results" data-id-number="{{ dom_id }}">
     <span class="service-list__count-container">
-      <span class="service-list__count">{{ total_rows ?? 0 }}</span>
-      {% trans with {'context': 'Service list count'}%}service{% plural total_rows %}services{% endtrans %}
-    </span>
-  {% endif %}
+      {% if total_rows %}
+        <span class="service-list__count">{{ total_rows }}</span>
+        {% trans with {'context': 'Service list count'}%}service{% plural total_rows %}services{% endtrans %}
+      {% endif %}
 
+      {{ empty }}
+    </span>
+  </div>
   {{ attachment_before }}
 
   {{ rows }}
 
-  {{ empty }}
+
   {{ pager }}
 
   {{ attachment_after }}

templates/views/views-view--unit-search.html.twig

@@ -54,17 +54,18 @@
   {{ exposed }}
   {{ attachment_before }}
 
-  <div class="unit-search__results">
-    {% if total_rows %}
+  <div class="unit-search__results" data-id-number="{{ dom_id }}">
       <span class="unit-search__count-container">
-        <span class="unit-search__count">{{ total_rows }}</span>
-        {% trans with {'context': 'Unit search count'}%}result{% plural total_rows %}results{% endtrans %}
+        {% if total_rows %}
+          <span class="unit-search__count">{{ total_rows }}</span>
+          {% trans with {'context': 'Unit search count'}%}result{% plural total_rows %}results{% endtrans %}
+        {% endif %}
+
+        {{ empty }}
       </span>
-    {% endif %}
 
     {{ rows }}
 
-    {{ empty }}
     {{ pager }}
   </div>
   {{ attachment_after }}

templates/views/views-view-unformatted--service-list--block-search.html.twig

@@ -16,10 +16,8 @@
  */
 #}
 
-<div class="services-search__results">
 {% for row in rows %}
   <div class="views-row">
     {{- row.content -}}
   </div>
 {% endfor %}
-</div>