Merge pull request #775 from City-of-Helsinki/UHF-8839_Search_focus

UHF-8839: Search focus
City-of-Helsinki · Sep 25, 2023 · bd4ca8c · bd4ca8c
2 parents e8a3b45 + d5b13a9
commit bd4ca8c
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 15 deletions.
diff --git a/hdbt.libraries.yml b/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: {}
diff --git a/hdbt.theme b/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';
+}
diff --git a/src/js/search-helper.js b/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);
diff --git a/templates/views/views-view--service-list--block-search.html.twig b/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 }}

diff --git a/templates/views/views-view--unit-search.html.twig b/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 }}

diff --git a/templates/views/views-view-unformatted--service-list--block-search.html.twig b/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>