Add custom aria label option for layout header nav

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 * Tidy component filenames ([PR #1848](https://github.com/alphagov/govuk_publishing_components/pull/1848))
 * Add print styling for magna charta component ([PR #1867](https://github.com/alphagov/govuk_publishing_components/pull/1867))
+* Add custom aria label option for layout header nav ([PR #1865](https://github.com/alphagov/govuk_publishing_components/pull/1865))
 
 ## 23.12.2
 

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

@@ -5,6 +5,7 @@
   search ||= false
   search_left ||= false
   navigation_items ||= []
+  navigation_aria_label ||= "Top level"
   remove_bottom_border ||= false
   search_left ||= false
   width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
@@ -28,7 +29,7 @@
           <%= render "govuk_publishing_components/components/layout_header/search" %>
         </div>
         <div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
-          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items  %>
+          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label  %>
         </div>
       </div>
     <% else %>
@@ -37,7 +38,7 @@
           <%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
         </div>
         <div class="govuk-header__content gem-c-header__content">
-          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items  %>
+          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label  %>
         </div>
         <% if search %>
           <div class="govuk-grid-column-one-third gem-c-layout-header__search">

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

@@ -60,6 +60,27 @@ examples:
       - text: News and communications
         href: "item-6"
         active: true
+  with_custom_navigation_aria_label:
+    description: The navigation has `aria-label="Top level"` by default. This option is here for when the `aria-label` needs to be more descriptive than that.
+    data:
+      search_left: true
+      navigation_aria_label: "Departments and policy"
+      navigation_items:
+      - text: Departments
+        href: "item-1"
+      - text: Worldwide
+        href: "item-2"
+      - text: How government works
+        href: "item-3"
+      - text: Get involved
+        href: "item-4"
+      - text: Consultations
+        href: "item-4"
+      - text: Statistics
+        href: "item-5"
+      - text: News and communications
+        href: "item-6"
+        active: true
   full_width:
     description: |
       This is difficult to preview because the preview windows are constrained, but the header will stretch to the size of its container.

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

@@ -1,7 +1,7 @@
 <% if navigation_items.any? %>
   <button role="button" class="govuk-header__menu-button gem-c-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
-  <nav class="gem-c-header__nav">
-    <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end" aria-label="Top Level Navigation">
+  <%= tag.nav(class: "gem-c-header__nav", 'aria-label': navigation_aria_label ? navigation_aria_label : nil ) do %>
+    <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end">
       <% navigation_items.each_with_index do |item, index| %>
         <li class="govuk-header__navigation-item <%= "govuk-header__navigation-item--active" if item[:active] %>
           <%= "govuk-header__navigation-item--collapsed-menu-only" if item[:show_only_in_collapsed_menu] %>">
@@ -13,5 +13,5 @@
         </li>
       <% end %>
     </ul>
-  </nav>
+  <% end %>
 <% end %>

spec/components/layout_header_spec.rb

@@ -61,6 +61,19 @@ def component_name
     assert_select ".govuk-header__navigation-item.govuk-header__navigation-item--active", text: "Foo"
     assert_select ".govuk-header__navigation-item", text: "Bar"
     assert_select ".govuk-header__navigation-item.govuk-header__navigation-item--collapsed-menu-only", text: "Hello"
+    assert_select ".gem-c-header__nav[aria-label='Top level']"
+  end
+
+  it "renders the header navigation items with custom aria-label when navigation_aria_label is specified" do
+    navigation_items = [
+      { text: "Foo", href: "/foo", active: true },
+      { text: "Bar", href: "/bar" },
+      { text: "Hello", href: "/hello", show_only_in_collapsed_menu: true },
+    ]
+
+    render_component(environment: "staging", navigation_items: navigation_items, navigation_aria_label: "My fancy label")
+
+    assert_select ".gem-c-header__nav[aria-label='My fancy label']"
   end
 
   it "renders the header without the bottom border" do