From 4bae69cffc587e899c06f9c1a873beea21dda903 Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Thu, 4 Mar 2021 13:49:55 +0000
Subject: [PATCH] Add button text setting to search box

Adds ability to change the visually hidden text inside the search box button.
---
 .../components/_search.html.erb               | 43 ++++++++++++-------
 .../components/docs/search.yml                | 10 +++++
 spec/components/search_spec.rb                | 10 +++++
 3 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/app/views/govuk_publishing_components/components/_search.html.erb b/app/views/govuk_publishing_components/components/_search.html.erb
index 179adadfa1..a34a03248c 100644
--- a/app/views/govuk_publishing_components/components/_search.html.erb
+++ b/app/views/govuk_publishing_components/components/_search.html.erb
@@ -1,11 +1,19 @@
 <%
-  size ||= ""
-  no_border ||= false
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = %w(gem-c-search)
+
+  aria_controls ||= nil
+  button_text ||= "Search"
+  id ||= "search-main-" + SecureRandom.hex(4)
+  label_text ||= "Search on GOV.UK"
+  name ||= "q"
+  no_border ||= false
+  size ||= ""
+  value ||= ""
+
+  classes = %w[gem-c-search]
   classes << (shared_helper.get_margin_top)
   classes << (shared_helper.get_margin_bottom) if local_assigns[:margin_bottom]
-  classes << "gem-c-search--large" if size == 'large'
+  classes << "gem-c-search--large" if size == "large"
   classes << "gem-c-search--no-border" if no_border
   if local_assigns[:on_govuk_blue].eql?(true)
     classes << "gem-c-search--on-govuk-blue"
@@ -13,25 +21,28 @@
     classes << "gem-c-search--on-white"
   end
   classes << "gem-c-search--separate-label" if local_assigns.include?(:inline_label)
-
-  value ||= ""
-  id ||= "search-main-" + SecureRandom.hex(4)
-  label_text ||= "Search on GOV.UK"
-  name ||= 'q'
-  aria_controls ||= nil
 %>
 
-<div class="<%= classes.join(' ') %>" data-module="gem-toggle-input-class-on-focus">
+<div class="<%= classes.join(" ") %>" data-module="gem-toggle-input-class-on-focus">
   <label for="<%= id %>" class="gem-c-search__label">
     <%= label_text %>
   </label>
   <div class="gem-c-search__item-wrapper">
-    <input type="search" value="<%= value %>"
-      id="<%= id %>" name="<%= name %>" title="Search"
-      aria-controls="<%= aria_controls %>"
-      class="gem-c-search__item gem-c-search__input js-class-toggle">
+    <%= tag.input(
+      aria: {
+        controls: aria_controls,
+      },
+      class: "gem-c-search__item gem-c-search__input js-class-toggle",
+      id: id,
+      name: name,
+      title: "Search",
+      type: "search",
+      value: value,
+    ) %>
     <div class="gem-c-search__item gem-c-search__submit-wrapper">
-      <button type="submit" class="gem-c-search__submit">Search</button>
+      <button class="gem-c-search__submit" type="submit">
+        <%= button_text %>
+      </button>
     </div>
   </div>
 </div>
diff --git a/app/views/govuk_publishing_components/components/docs/search.yml b/app/views/govuk_publishing_components/components/docs/search.yml
index 978bf16c87..00eb50daeb 100644
--- a/app/views/govuk_publishing_components/components/docs/search.yml
+++ b/app/views/govuk_publishing_components/components/docs/search.yml
@@ -51,6 +51,16 @@ examples:
   with_aria_controls_attribute:
     description: |
       The aria-controls attribute is a 'relationship attribute' which denotes which elements in a page an interactive element or set of elements has control over and affects.
+
       For places like the finders where the page is updated dynamically after value changes to the input.
     data:
       aria_controls: "wrapper"
+  with_custom_button_text:
+    description: |
+      The search box component may be used multiple times on a page -- for example, on a [guidance and regulation finder results page](https://www.gov.uk/search/guidance-and-regulation?keywords=bananas&order=relevance) there is both the sitewide search in the header and also for the specific finder.
+
+      To avoid confusion, the text inside the button should be different for each form. This can be done by setting the `button_text` parameter.
+
+      This is visually hidden text -- to check for changes use a screen reader or inspect the button element.
+    data:
+      button_text: "Search absolutely everywhere"
diff --git a/spec/components/search_spec.rb b/spec/components/search_spec.rb
index fb93b427fb..6e6cbe8538 100644
--- a/spec/components/search_spec.rb
+++ b/spec/components/search_spec.rb
@@ -75,4 +75,14 @@ def component_name
     render_component(no_border: true)
     assert_select ".gem-c-search--no-border"
   end
+
+  it "renders a search box with default button text" do
+    render_component({})
+    assert_select ".gem-c-search__submit", text: "Search"
+  end
+
+  it "renders a search box with custom button text" do
+    render_component(button_text: "Search please")
+    assert_select ".gem-c-search__submit", text: "Search please"
+  end
 end