From b1011e7fb8562675bb3b4c681ce509a90d384fb6 Mon Sep 17 00:00:00 2001
From: Paul Robert Lloyd <me+git@paulrobertlloyd.com>
Date: Sun, 17 Dec 2023 22:04:30 +0000
Subject: [PATCH] Add search element to site search

---
 components/site-search/site-search.js | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/site-search/site-search.js b/components/site-search/site-search.js
index 1de6e50d..3a6a3f9b 100644
--- a/components/site-search/site-search.js
+++ b/components/site-search/site-search.js
@@ -71,13 +71,16 @@ export class SiteSearchElement extends HTMLElement {
     }
   }
 
-  searchLabelTemplate() {
-    const element = document.createElement('label')
-    element.classList.add('govuk-visually-hidden')
-    element.htmlFor = this.searchInputId
-    element.textContent = this.searchLabel
+  searchTemplate() {
+    const labelElement = document.createElement('label')
+    labelElement.classList.add('govuk-visually-hidden')
+    labelElement.htmlFor = this.searchInputId
+    labelElement.textContent = this.searchLabel
 
-    return element
+    const searchElement = document.createElement('search')
+    searchElement.append(labelElement)
+
+    return searchElement
   }
 
   resultTemplate(result) {
@@ -109,12 +112,12 @@ export class SiteSearchElement extends HTMLElement {
       this.sitemapLink.remove()
     }
 
-    // Add label for search input
-    const label = this.searchLabelTemplate()
-    this.append(label)
+    // Add `search` element with `label`
+    const search = this.searchTemplate()
+    this.append(search)
 
     accessibleAutocomplete({
-      element: this,
+      element: search,
       id: this.searchInputId,
       cssNamespace: 'app-site-search',
       displayMenu: 'overlay',