Merge pull request #1203 from alphagov/allow-aria-attributes-on-searc…

…h-component

Allow aria-controls attribute on search component

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Allow aria-controls attribute on search component ([PR #1203](https://github.com/alphagov/govuk_publishing_components/pull/1203))
+
 ## 21.12.0
 
 * Migrate primary-links.js from frontend_toolkit ([PR #1201](https://github.com/alphagov/govuk_publishing_components/pull/1201))

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

@@ -9,6 +9,7 @@
   id ||= "search-main-" + SecureRandom.hex(4)
   label_text ||= "Search GOV.UK"
   name ||= 'q'
+  aria_controls ||= nil
 %>
 
 <div class="gem-c-search <%= class_name %>" data-module="gem-toggle-input-class-on-focus">
@@ -18,6 +19,7 @@
   <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">
     <div class="gem-c-search__item gem-c-search__submit-wrapper">
       <button type="submit" class="gem-c-search__submit">Search</button>

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

@@ -42,3 +42,9 @@ examples:
     description: To be used if you need to change the default name 'q'
     data:
       name: "my_own_fieldname"
+  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"

spec/components/search_spec.rb

@@ -52,4 +52,9 @@ def component_name
     render_component(name: "my_custom_field")
     assert_select 'input[name="my_custom_field"]'
   end
+
+  it "renders a search box with the aria-controls attribute" do
+    render_component(aria_controls: "something-else")
+    assert_select "input[aria-controls='something-else']"
+  end
 end