Merge pull request #4163 from alphagov/fix-search-toggle-layout-header

Fix the search toggle in layout header

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Fix the search toggle in layout header ([PR #4163](https://github.com/alphagov/govuk_publishing_components/pull/4163))
+
 ## 43.0.1
 
 * Fix card component padding based on heading ([PR #4169](https://github.com/alphagov/govuk_publishing_components/pull/4169))

app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss

@@ -148,8 +148,6 @@
 }
 
 .gem-c-layout-header__search-form {
-  display: none;
-
   &.js-visible {
     display: block;
   }

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

@@ -1,9 +1,12 @@
-<% navigation_aria_label ||= "Top level" %>
+<%
+  navigation_aria_label ||= "Top level"
+  navigation_id = "navigation-#{SecureRandom.hex(4)}"
+%>
 
 <% if navigation_items.any? %>
   <%= tag.nav class: "gem-c-header__nav govuk-header__navigation govuk-header__navigation--end", aria: { label: navigation_aria_label } do %>
     <button
-      aria-controls="navigation"
+      aria-controls="<%= navigation_id %>"
       aria-label="Show or hide Top Level Navigation"
       class="govuk-header__menu-button govuk-js-header-toggle gem-c-header__menu-button govuk-!-display-none-print"
       type="button"
@@ -12,7 +15,7 @@
     >
       <%= t("components.layout_header.menu") %>
     </button>
-    <ul id="navigation" class="govuk-header__navigation-list govuk-!-display-none-print">
+    <ul id="<%= navigation_id %>" class="govuk-header__navigation-list govuk-!-display-none-print">
       <% navigation_items.each_with_index do |item, index| %>
         <%
           li_classes = %w(govuk-header__navigation-item)

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

@@ -1,16 +1,21 @@
+<%
+  search_form_id = "search-#{SecureRandom.hex(4)}"
+%>
+
 <button
-  class="search-toggle js-header-toggle"
+  class="search-toggle govuk-js-header-toggle"
   data-search-toggle-for="search"
   data-button-name="search"
   data-show-text="<%= t("components.layout_header.show_button") %>"
   data-hide-text="<%= t("components.layout_header.hide_button") %>"
+  aria-controls="<%= search_form_id %>"
 >
   <%= t("components.layout_header.show_button") %>
 </button>
 <form
   action="/search"
   class="gem-c-layout-header__search-form govuk-clearfix govuk-!-display-none-print"
-  id="search"
+  id="<%= search_form_id %>"
   method="get"
   role="search"
 >