Issue #3182458 by alison, dmundra, lauriii, xjm, Gauravvvv, smustgrave,...

Issue #3182458 by alison, dmundra, lauriii, xjm, Gauravvvv, smustgrave, quietone, mgifford, bnjmnm, alexpott: Accessibility: skipped heading level on for search "no results" text

(cherry picked from commit 5c8213b5)

core/modules/search/src/Controller/SearchController.php

@@ -118,7 +118,9 @@ public function view(Request $request, SearchPageInterface $entity) {
       '#theme' => ['item_list__search_results__' . $plugin->getPluginId(), 'item_list__search_results'],
       '#items' => $results,
       '#empty' => [
-        '#markup' => '<h3>' . $this->t('Your search yielded no results.') . '</h3>',
+        '#type' => 'html_tag',
+        '#tag' => 'em',
+        '#value' => $this->t('Your search yielded no results.'),
       ],
       '#list_type' => 'ol',
       '#context' => [

core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css

@@ -3,8 +3,14 @@
  * Stylesheet for results generated by the Search module.
  */
 
-.search-form + .item-list > h3 {
-  margin: 1.28rem;
+.search-form + .item-list > em {
+  display: inline-block;
+  font-family: "Scope One", Georgia, serif;
+  font-size: 1.125rem;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.2;
+  margin-block: 1.28rem;
 }
 .search-form > .form-wrapper {
   margin-bottom: 1.28rem;

core/themes/olivero/css/components/search-results.css

@@ -109,3 +109,21 @@
     margin-block-end: var(--sp3);
   }
 }
+
+.empty-search-results-text {
+  color: var(--color-text-neutral-loud);
+  font-family: var(--font-sans);
+  font-size: 1.25rem;
+  font-weight: bold;
+  font-style: normal;
+  line-height: var(--sp1-5);
+  margin-block: var(--sp);
+}
+
+@media (min-width: 43.75rem) {
+  .empty-search-results-text {
+    margin-block: var(--sp2);
+    font-size: 1.5rem;
+    line-height: var(--sp2);
+  }
+}

core/themes/olivero/css/components/search-results.pcss.css

@@ -95,3 +95,19 @@
     margin-block-end: var(--sp3);
   }
 }
+
+.empty-search-results-text {
+  color: var(--color-text-neutral-loud);
+  font-family: var(--font-sans);
+  font-size: 20px;
+  font-weight: bold;
+  font-style: normal;
+  line-height: var(--sp1-5);
+  margin-block: var(--sp);
+
+  @media (--md) {
+    margin-block: var(--sp2);
+    font-size: 24px;
+    line-height: var(--sp2);
+  }
+}

core/themes/olivero/olivero.theme

@@ -579,6 +579,16 @@ function olivero_preprocess_search_result(&$variables) {
   }
 }
 
+/**
+ * Implements hook_preprocess_item_list__search_results().
+ */
+function olivero_preprocess_item_list__search_results(&$variables) {
+  if (isset($variables['empty'])) {
+    $variables['empty']['#attributes']['class'][] = 'empty-search-results-text';
+    $variables['empty']['#attached']['library'][] = 'olivero/search-results';
+  }
+}
+
 /**
  * Implements hook_preprocess_links__comment().
  */

core/themes/stable9/stable9.theme

+<?php
+
+/**
+ * @file
+ * Functions to support theming in the Stable9 theme.
+ */
+
+/**
+ * Implements hook_preprocess_item_list__search_results().
+ *
+ * Converts the markup of #empty for search results.
+ */
+function stable9_preprocess_item_list__search_results(&$variables) {
+  if (isset($variables['empty']['#tag'])) {
+    $variables['empty']['#tag'] = 'h3';
+  }
+}