Update search box button

CHANGELOG.md

@@ -10,6 +10,7 @@
 ## Unreleased
 
 * Fix GOV.UK Frontend deprecation warning for component-guide print stylesheet ([PR #1961](https://github.com/alphagov/govuk_publishing_components/pull/1961))
+* Update search box button ([PR #1957](https://github.com/alphagov/govuk_publishing_components/pull/1957))
 
 ## 24.4.1
 

app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-var */
+
 // used by the header navigation from govuk_template
 
 (function () {
@@ -14,6 +16,8 @@
         var targetClass = target.getAttribute('class') || ''
         var sourceClass = this.getAttribute('class') || ''
         var isSearchToggle = sourceClass.match('search-toggle')
+        var showText = this.getAttribute('data-show-text') || 'Show search'
+        var hideText = this.getAttribute('data-hide-text') || 'Hide search'
 
         if (targetClass.indexOf('js-visible') !== -1) {
           target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''))
@@ -23,12 +27,12 @@
         if (sourceClass.indexOf('js-visible') !== -1) {
           this.setAttribute('class', sourceClass.replace(/(^|\s)js-visible(\s|$)/, ''))
           if (isSearchToggle) {
-            this.innerText = 'Show search'
+            this.innerText = showText
           }
         } else {
           this.setAttribute('class', sourceClass + ' js-visible')
           if (isSearchToggle) {
-            this.innerText = 'Hide search'
+            this.innerText = hideText
           }
         }
         this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') !== 'true')

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 ||= t("components.search_box.search_button")
+  id ||= "search-main-" + SecureRandom.hex(4)
+  label_text ||= t("components.search_box.label")
+  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: t("components.search_box.input_title"),
+      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"

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

@@ -1,8 +1,22 @@
-<button class="search-toggle js-header-toggle" data-search-toggle-for="search">Show search</button>
-<form id="search" class="gem-c-layout-header__search-form govuk-clearfix" action="/search" method="get" role="search">
+<button
+  class="search-toggle js-header-toggle"
+  data-search-toggle-for="search"
+  data-show-text="<%= t("components.layout_header.show_button") %>"
+  data-hide-text="<%= t("components.layout_header.hide_button") %>"
+>
+  <%= t("components.layout_header.show_button") %>
+</button>
+<form
+  action="/search"
+  class="gem-c-layout-header__search-form govuk-clearfix"
+  id="search"
+  method="get"
+  role="search"
+>
   <%= render "govuk_publishing_components/components/search", {
+    button_text: t("components.layout_header.search_button"),
     id: "site-search-text",
+    margin_bottom: 0,
     no_border: true,
-    margin_bottom: 0
   } %>
 </form>

config/locales/en.yml

@@ -4,11 +4,11 @@
 #
 # To use the locales, use `I18n.t`:
 #
-#     I18n.t 'hello'
+#     I18n.t "hello"
 #
 # In views, this is aliased to just `t`:
 #
-#     <%= t('hello') %>
+#     <%= t("hello") %>
 #
 # To use a different locale, set it with `I18n.locale`:
 #
@@ -31,11 +31,11 @@ en:
     article_schema:
       scoped_search_description: "Search within %{title}"
     back_link:
-      back: 'Back'
+      back: "Back"
     checkboxes:
-      or: 'or'
+      or: "or"
     contents_list:
-      contents: Contents
+      contents: "Contents"
     feedback:
       is_this_page_useful: "Is this page useful?"
       yes: "Yes"
@@ -54,10 +54,14 @@ en:
       what_wrong: "What went wrong?"
       send_me_survey: "Send me the survey"
       send: "Send"
+    layout_header:
+      search_button: "Search GOV.UK"
+      show_button: "Show search"
+      hide_button: "Hide search"
     organisation_schema:
       all_content_search_description: "Find all content from %{organisation}"
     radio:
-      or: 'or'
+      or: "or"
     related_navigation:
       collections: "Collection"
       external_links: "Elsewhere on the web"
@@ -76,22 +80,26 @@ en:
         link_path: "/transition"
         link_text: "Check what you need to do"
       take_action_list:
-        red: Check
-        amber: Change
-        green: Go
-        aria_label: Brexit campaign slogan, Check, Change, Go.
+        red: "Check"
+        amber: "Change"
+        green: "Go"
+        aria_label: "Brexit campaign slogan, Check, Change, Go."
     related_footer_navigation:
       collections: "Collections"
       policies: "Policies"
       statistical_data_sets: "Statistical data sets"
       topical_events: "Topical events"
+    search_box:
+      search_button: "Search"
+      label: "Search on GOV.UK"
+      input_title: "Search"
     show_password:
-      show: Show
-      hide: Hide
-      show_password: Show password
-      hide_password: Hide password
-      announce_show: Your password is shown
-      announce_hide: Your password is hidden
+      show: "Show"
+      hide: "Hide"
+      show_password: "Show password"
+      hide_password: "Hide password"
+      announce_show: "Your password is shown"
+      announce_hide: "Your password is hidden"
     print_link:
       text: "Print this page"
     skip_link:

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