alphagov · alexbowen · Sep 10, 2024 · Sep 11, 2024 · Sep 11, 2024 · Sep 11, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Change to add text 'Search' to search dropdown button. this is postfixed with visually hidden 'GOV.UK'. Open state has text 'Close' added. Mobile view should have text for both states completely visually hidden with just icons visible. ([PR #4216](https://github.com/alphagov/govuk_publishing_components/pull/4216))
 * Use component wrapper in hint component ([PR #4214](https://github.com/alphagov/govuk_publishing_components/pull/4214))
 * Hide printed URLs when printing tables ([PR #4209](https://github.com/alphagov/govuk_publishing_components/pull/4209))
 * Fix action link component print styles ([PR #4213](https://github.com/alphagov/govuk_publishing_components/pull/4213))

diff --git a/...s/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss b/...s/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
@@ -4,7 +4,6 @@
 
 $chevron-indent-spacing: 7px;
 $black-bar-height: 50px;
-$search-width-or-height: $black-bar-height;
 $pseudo-underline-height: 3px;
 $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
 
@@ -609,11 +608,11 @@ $after-button-padding-left: govuk-spacing(4);
   border: 0;
   color: govuk-colour("white");
   cursor: pointer;
-  height: $search-width-or-height;
+  height: $black-bar-height;
   padding: govuk-spacing(3);
   position: relative;
-  width: $search-width-or-height;
-  @include govuk-font($size: 19, $weight: "bold", $line-height: 20px);
+  width: 57px;
+  @include govuk-font($size: 16, $weight: "bold", $line-height: 20px);
 
   @include focus-and-focus-visible {
     @include govuk-focused-text;
@@ -639,6 +638,7 @@ $after-button-padding-left: govuk-spacing(4);
     border: 0;
     margin: 0;
     right: 0;
+    width: 130px;
 
     @include focus-not-focus-visible {
       border-bottom: 1px solid govuk-colour("dark-blue");
@@ -741,7 +741,14 @@ $after-button-padding-left: govuk-spacing(4);
   top: 0;
 
   .gem-c-layout-super-navigation-header__open-button & {
-    display: block;
+    display: inline-block;
+  }
+}
+
+.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
+  .gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon,
+  .gem-c-layout-super-navigation-header__search-toggle-button-link-text-close {
+    color: $govuk-link-colour;
   }
 }
 
@@ -868,10 +875,40 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
-.gem-c-layout-super-navigation-header__search-toggle-button--large-navbar {
-  padding-left: 24px;
-  padding-right: 24px;
-  width: 68px;
+.gem-c-layout-super-navigation-header__search-item {
+  .gem-c-layout-super-navigation-header__search-toggle-button-link-text-open {
+    display: inline;
+    @include govuk-media-query($until: "desktop") {
+      @include govuk-visually-hidden;
+    }
+  }
+
+  .gem-c-layout-super-navigation-header__search-toggle-button-link-text-close {
+    display: none;
+  }
+
+  .gem-c-layout-super-navigation-header__open-button {
+    .gem-c-layout-super-navigation-header__search-toggle-button-link-text-open {
+      display: none;
+    }
+
+    .gem-c-layout-super-navigation-header__search-toggle-button-link-text-close {
+      display: inline;
+      @include govuk-media-query($until: "desktop") {
+        @include govuk-visually-hidden;
+      }
+    }
+  }
+}
+
+.gem-c-layout-super-navigation-header__search-toggle-button-link-text-open,
+.gem-c-layout-super-navigation-header__search-toggle-button-link-text-close {
+  margin-left: govuk-spacing(1);
+  vertical-align: top;
+}
+
+.gem-c-layout-super-navigation-header__search-toggle-button-link-text-close {
+  color: $govuk-text-colour;
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-description {
@@ -961,7 +998,11 @@ $after-button-padding-left: govuk-spacing(4);
   .gem-c-layout-super-navigation-header__search-toggle-button--large-navbar {
     height: $large-navbar-height;
     // to stop the search icon moving on hover
-    padding-bottom: 12px;
+    padding-bottom: 6px;
+  }
+
+  .gem-c-layout-super-navigation-header__open-button {
+    padding-bottom: 3px;
   }
 
   .gem-c-layout-super-navigation-header__button-container--large-navbar {

diff --git a/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb b/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb
@@ -15,7 +15,8 @@
   navigation_menu_heading = t("components.layout_super_navigation_header.navigation_menu_heading")
   navigation_search_heading = t("components.layout_super_navigation_header.navigation_search_heading")
   navigation_search_subheading = t("components.layout_super_navigation_header.navigation_search_subheading")
-  search_text = t("components.layout_super_navigation_header.search_text")
+  search_text = t("components.layout_super_navigation_header.search_text_html")
+  close_text = t("components.layout_super_navigation_header.close_text")
 
   hide_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "search")
   show_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "search")
@@ -196,21 +197,25 @@
               hidden: true,
               type: "button",
             }) do %>
-              <span class="govuk-visually-hidden">
-                <%= search_text %>
-              </span>
+
               <%=
                 render "govuk_publishing_components/components/search/search_icon", {
                   classes: %w[gem-c-layout-super-navigation-header__search-toggle-button-link-icon],
                 }
               %>
+              <span class="gem-c-layout-super-navigation-header__search-toggle-button-link-text-open">
+                <%= search_text %>
+              </span>
               <span
                 aria-hidden="true"
                 class="gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon"
                 focusable="false"
               >
                 &times;
               </span>
+              <span class="gem-c-layout-super-navigation-header__search-toggle-button-link-text-close">
+                <%= close_text %>
+              </span>
             <% end %>
 
             <%= link_to "/search", {

diff --git a/config/locales/ar.yml b/config/locales/ar.yml
@@ -118,6 +118,7 @@ ar:
       show_button: إظهار البحث
       top_level: أفضل مستوى
     layout_super_navigation_header:
+      close_text: Close
       logo_link_title:
       logo_text:
       menu_toggle_label:
@@ -130,7 +131,7 @@ ar:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
-      search_text:
+      search_text_html:
     metadata:
       from: من
       history: المحفوظات

diff --git a/config/locales/az.yml b/config/locales/az.yml
@@ -115,6 +115,7 @@ az:
       show_button: Axtarışı göstər
       top_level: Yüksək səviyyəli
     layout_super_navigation_header:
+      close_text: Close
       logo_link_title:
       logo_text:
       menu_toggle_label:
@@ -127,7 +128,7 @@ az:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
-      search_text:
+      search_text_html:
     metadata:
       from: "...dan (dən)"
       history: Tarix

diff --git a/config/locales/be.yml b/config/locales/be.yml
@@ -121,6 +121,7 @@ be:
       show_button: Паказаць вынікі пошуку
       top_level: Верхні ўзровень
     layout_super_navigation_header:
+      close_text: Close
       logo_link_title:
       logo_text:
       menu_toggle_label:
@@ -133,7 +134,7 @@ be:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
-      search_text:
+      search_text_html:
     metadata:
       from: З
       history: Гiсторыя

diff --git a/config/locales/bg.yml b/config/locales/bg.yml
@@ -119,6 +119,7 @@ bg:
       show_button: Показване на търсенето
       top_level: Първо ниво
     layout_super_navigation_header:
+      close_text: Close
       logo_link_title:
       logo_text:
       menu_toggle_label:
@@ -131,7 +132,7 @@ bg:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
-      search_text:
+      search_text_html:
     metadata:
       from: От
       history: История

diff --git a/config/locales/bn.yml b/config/locales/bn.yml
@@ -116,6 +116,7 @@ bn:
       show_button: অনুসন্ধান দেখান
       top_level: শীর্ষ পর্যায়
     layout_super_navigation_header:
+      close_text: Close
       logo_link_title:
       logo_text:
       menu_toggle_label:
@@ -128,7 +129,7 @@ bn:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
-      search_text:
+      search_text_html:
     metadata:
       from: থেকে
       history: ইতিহাস

diff --git a/config/locales/cs.yml b/config/locales/cs.yml
@@ -120,6 +120,7 @@ cs:
       show_button: Zobrazit vyhledávání
       top_level: Nejvyšší úroveň
     layout_super_navigation_header:
+      close_text: Close
       logo_link_title:
       logo_text:
       menu_toggle_label:
@@ -132,7 +133,7 @@ cs:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
-      search_text:
+      search_text_html:
     metadata:
       from: 'Komu I:'
       history: Historie

diff --git a/config/locales/cy.yml b/config/locales/cy.yml
@@ -119,6 +119,7 @@ cy:
       show_button: Dangos y chwiliad
       top_level: Lefel uchaf
     layout_super_navigation_header:
+      close_text: Close
       logo_link_title:
       logo_text:
       menu_toggle_label:
@@ -131,7 +132,7 @@ cy:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
-      search_text:
+      search_text_html:
     metadata:
       from: Gan
       history: Hanes

diff --git a/config/locales/da.yml b/config/locales/da.yml
@@ -116,6 +116,7 @@ da:
       show_button: Vis søgning
       top_level: Øverste niveau
     layout_super_navigation_header:
+      close_text: Close
       logo_link_title:
       logo_text:
       menu_toggle_label:
@@ -128,7 +129,7 @@ da:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
-      search_text:
+      search_text_html:
     metadata:
       from: Fra
       history: Historie

diff --git a/config/locales/de.yml b/config/locales/de.yml
@@ -119,6 +119,7 @@ de:
       show_button: Suche anzeigen
       top_level: Oberste Ebene
     layout_super_navigation_header:
+      close_text: Close
       logo_link_title:
       logo_text:
       menu_toggle_label:
@@ -131,7 +132,7 @@ de:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
-      search_text:
+      search_text_html:
     metadata:
       from: Von
       history: Geschichte

diff --git a/config/locales/dr.yml b/config/locales/dr.yml
@@ -117,6 +117,7 @@ dr:
       show_button: جستجو را نمایش دهید
       top_level: سطح بالا
     layout_super_navigation_header:
+      close_text: Close
       logo_link_title:
       logo_text:
       menu_toggle_label:
@@ -129,7 +130,7 @@ dr:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
-      search_text:
+      search_text_html:
     metadata:
       from: از
       history: پیشینهء جستجو

diff --git a/config/locales/el.yml b/config/locales/el.yml
@@ -115,6 +115,7 @@ el:
       show_button: Εμφάνιση αναζήτησης
       top_level: Κορυφαίο επίπεδο
     layout_super_navigation_header:
+      close_text: Close
       logo_link_title:
       logo_text:
       menu_toggle_label:
@@ -127,7 +128,7 @@ el:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
-      search_text:
+      search_text_html:
     metadata:
       from: Από
       history: Ιστορικό

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -166,6 +166,8 @@ en:
       show_button: Show search
       top_level: Top level
     layout_super_navigation_header:
+      close_text: Close
+      close_text: Close
       logo_link_title: Go to the GOV.UK homepage
       logo_text: GOV.UK
       menu_toggle_label:
@@ -234,7 +236,7 @@ en:
       navigation_menu_heading: Navigation menu
       navigation_search_heading: Search and popular pages
       navigation_search_subheading: Search
-      search_text: Search GOV.UK
+      search_text_html: Search <span class="govuk-visually-hidden">GOV.UK</span>
     metadata:
       from: From
       history: History

diff --git a/config/locales/es-419.yml b/config/locales/es-419.yml
@@ -115,6 +115,7 @@ es-419:
       show_button: Mostrar búsqueda
       top_level: Nivel superior
     layout_super_navigation_header:
+      close_text: Close
       logo_link_title:
       logo_text:
       menu_toggle_label:
@@ -127,7 +128,7 @@ es-419:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
-      search_text:
+      search_text_html:
     metadata:
       from: Desde
       history: Historial

diff --git a/config/locales/es.yml b/config/locales/es.yml
@@ -115,6 +115,7 @@ es:
       show_button: Mostrar búsqueda
       top_level: Nivel superior
     layout_super_navigation_header:
+      close_text: Close
       logo_link_title:
       logo_text:
       menu_toggle_label:
@@ -127,7 +128,7 @@ es:
       navigation_menu_heading:
       navigation_search_heading:
       navigation_search_subheading:
-      search_text:
+      search_text_html:
     metadata:
       from: Desde
       history: Historial