add label (#3707)

ec-europa · Nov 4, 2024 · f112d4e · f112d4e · github-actions · Nov 4, 2024
1 parent 25942d6
commit f112d4e
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 8 deletions.
diff --git a/src/implementations/twig/components/search-form/__snapshots__/search-form.test.js.snap b/src/implementations/twig/components/search-form/__snapshots__/search-form.test.js.snap
@@ -9,9 +9,16 @@ exports[`Search Form Default renders correctly 1`] = `
     <div
       class="ecl-form-group"
     >
+      <label
+        class="ecl-form-label ecl-search-form__label"
+        for="search-input-id"
+        id="search-input-id-label"
+      >
+        Search
+      </label>
       <input
         class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
-        id="search-input"
+        id="search-input-id"
         placeholder="Placeholder text"
         type="search"
       />
@@ -56,9 +63,16 @@ exports[`Search Form Default renders correctly with extra attributes 1`] = `
     <div
       class="ecl-form-group"
     >
+      <label
+        class="ecl-form-label ecl-search-form__label"
+        for="search-input-id"
+        id="search-input-id-label"
+      >
+        Search
+      </label>
       <input
         class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
-        id="search-input"
+        id="search-input-id"
         placeholder="Placeholder text"
         type="search"
       />
@@ -101,9 +115,16 @@ exports[`Search Form Default renders correctly with extra class names 1`] = `
     <div
       class="ecl-form-group"
     >
+      <label
+        class="ecl-form-label ecl-search-form__label"
+        for="search-input-id"
+        id="search-input-id-label"
+      >
+        Search
+      </label>
       <input
         class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
-        id="search-input"
+        id="search-input-id"
         placeholder="Placeholder text"
         type="search"
       />
@@ -146,9 +167,16 @@ exports[`Search Form Default renders correctly with extra classes on the button
     <div
       class="ecl-form-group"
     >
+      <label
+        class="ecl-form-label ecl-search-form__label"
+        for="search-input-id"
+        id="search-input-id-label"
+      >
+        Search
+      </label>
       <input
         class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
-        id="search-input"
+        id="search-input-id"
         placeholder="Placeholder text"
         type="search"
       />
@@ -191,9 +219,16 @@ exports[`Search Form Default renders correctly with extra classes on the input 1
     <div
       class="ecl-form-group"
     >
+      <label
+        class="ecl-form-label ecl-search-form__label"
+        for="search-input-id"
+        id="search-input-id-label"
+      >
+        Search
+      </label>
       <input
         class="ecl-text-input ecl-text-input--m ecl-search-form__text-input input-extra-class"
-        id="search-input"
+        id="search-input-id"
         placeholder="Placeholder text"
         type="search"
       />
@@ -236,9 +271,16 @@ exports[`Search Form Default renders correctly with extra form elements 1`] = `
     <div
       class="ecl-form-group"
     >
+      <label
+        class="ecl-form-label ecl-search-form__label"
+        for="search-input-id"
+        id="search-input-id-label"
+      >
+        Search
+      </label>
       <input
         class="ecl-text-input ecl-text-input--m ecl-search-form__text-input"
-        id="search-input"
+        id="search-input-id"
         placeholder="Placeholder text"
         type="search"
       />

diff --git a/src/specs/components/search-form/demo/data--ec.js b/src/specs/components/search-form/demo/data--ec.js
@@ -1,7 +1,8 @@
 // Simple content for demo
 module.exports = {
+  label: 'Search',
   text_input: {
-    id: 'search-input',
+    id: 'search-input-id',
     label: 'Search',
     placeholder: 'Placeholder text',
   },

diff --git a/src/specs/components/search-form/demo/data--eu.js b/src/specs/components/search-form/demo/data--eu.js
@@ -1,7 +1,8 @@
 // Simple content for demo
 module.exports = {
+  label: 'Search',
   text_input: {
-    id: 'search-input',
+    id: 'search-input-id',
     label: 'Search',
     placeholder: 'Placeholder text',
   },