Add button text setting to search box

Adds ability to change the visually hidden text inside the search box button.

app/views/govuk_publishing_components/components/_search.html.erb

@@ -1,37 +1,48 @@
 <%
-  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"
   else
     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>

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"

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