Merge pull request #4112 from alphagov/corrections

Allow disabling `search` input spelling corrections

CHANGELOG.md

@@ -7,8 +7,12 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Allow disabling `search` component input spelling correction ([PR #4112](https://github.com/alphagov/govuk_publishing_components/pull/4112))
+
 ## 40.0.1
-* Add Brakeman to CI jobs ([PR #4108](https://github.com/alphagov/govuk_publishing_components/pull/4108)) 
+* Add Brakeman to CI jobs ([PR #4108](https://github.com/alphagov/govuk_publishing_components/pull/4108))
 
 ## 40.0.0
 

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

@@ -6,6 +6,7 @@
 
   aria_controls ||= nil
   button_text ||= t("components.search_box.search_button")
+  correction_value = "off" if local_assigns[:disable_corrections]
   id ||= "search-main-" + SecureRandom.hex(4)
   wrap_label_in_a_heading ||= false
   label_margin_bottom ||= nil
@@ -73,6 +74,8 @@
       title: t("components.search_box.input_title"),
       type: "search",
       value: value,
+      autocorrect: correction_value,
+      autocapitalize: correction_value,
     ) %>
     <div class="gem-c-search__item gem-c-search__submit-wrapper">
       <%= tag.button class: "gem-c-search__submit", type: "submit", data: data_attributes, enterkeyhint: "search" do %>

app/views/govuk_publishing_components/components/docs/search.yml

@@ -113,3 +113,15 @@ examples:
       Allows adding a custom class to the label of the component.
     data:
       label_custom_class: "govuk-heading-xl"
+  with_corrections_disabled:
+    description: |
+      Allows disabling mobile browser autocorrect features (`autocorrect` and `autocapitalize`
+      attributes) on the input field.
+
+      Mobile browser autocorrect and text substitution features can conflict with the built in
+      autocorrect features of some search engines, and will frequently correct domain-specific
+      search terms to something that is not what the user intended (for example, correcting "SORN"
+      to "sworn" or "HMRC" to "Hercules"). Capitalisation can also be significant for some search
+      engines such as that currently used by Search API v2.
+    data:
+      disable_corrections: true

spec/components/search_spec.rb

@@ -188,4 +188,22 @@ def component_name
     })
     assert_select ".custom-class-label"
   end
+
+  it "does not set autocorrect or autocapitalize attributes by default" do
+    render_component({})
+    assert_select "input[autocorrect='off']", count: 0
+    assert_select "input[autocapitalize='off']", count: 0
+  end
+
+  it "does not set autocorrect or autocapitalize attributes if disable_corrections is false" do
+    render_component(disable_corrections: false)
+    assert_select "input[autocorrect='off']", count: 0
+    assert_select "input[autocapitalize='off']", count: 0
+  end
+
+  it "sets autocorrect and autocapitalize attributes if disable_corrections is true" do
+    render_component(disable_corrections: true)
+    assert_select "input[autocorrect='off']", count: 1
+    assert_select "input[autocapitalize='off']", count: 1
+  end
 end