Move service name and navigation into section

[domoscargin]

This is a possible fix for the 'unclear service name' accessibility issue from https://github.com/alphagov/govuk-design-system/issues/3811

Links

• Service header component
• Example with a header, service header (with service name and navigation) and phase banner
• Example page with header and service header (service name only)
• Example page with header and service header (navigation only)
• Example page with cookie banner, header, phase banner, service header (with service name and navigation) and breadcrumbs, to emulate a potential 'worse case scenario'
• Preview Branch. To install, use npm install --save "alphagov/govuk-frontend#dc8ff97b4"

Before:

<div class="govuk-service-header">
  <div class="govuk-service_header__container govuk-width-container">
    <!-- start slot -->
    <span>service name</span>
    <nav>service navigation</nav>
    <!-- end slot ->>
  </div>
</div>

After:

<div class="govuk-service-header" aria-label="Service information and navigation">
  <div class="govuk-width-container">
    <!-- start slot -->
   <section class="govuk-service_header__container">
      <span>service name</span>
      <nav>service navigation</nav>
    </section>
    <!-- end slot ->>
  </div>
</div>

Potential issues

• I've limited the background colour and bottom border to the service name and navigation section. This means folks would have to do some extra work to make the start and end slots look of a piece, but there's not really a guarantee they want them to look the same, and it enables a Phase Banner to be inserted without mucking about with that component's styles. I'm not sure it looks great with a border on the grey service header and then a border on the phase banner, though.
• Feels a bit weird not using the main .govuk-service-header class for anything. We could probably finagle some positioning and naming of classes.

[github-actions[bot]]

:clipboard: Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	122.56 KiB
dist/govuk-frontend-development.min.js	44.88 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	92.24 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	86.63 KiB
packages/govuk-frontend/dist/govuk/all.mjs	1.04 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	122.55 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	44.87 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	4.96 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	83.75 KiB	42.72 KiB
accordion.mjs	23.5 KiB	12.39 KiB
button.mjs	5.98 KiB	2.69 KiB
character-count.mjs	22.4 KiB	9.92 KiB
checkboxes.mjs	5.83 KiB	2.83 KiB
error-summary.mjs	7.89 KiB	3.46 KiB
exit-this-page.mjs	17.1 KiB	9.26 KiB
header.mjs	6.38 KiB	3.82 KiB
notification-banner.mjs	6.26 KiB	2.62 KiB
password-input.mjs	15.15 KiB	7.25 KiB
radios.mjs	4.83 KiB	2.38 KiB
service-header.mjs	4.42 KiB	2.66 KiB
skip-link.mjs	4.39 KiB	2.18 KiB
tabs.mjs	10.13 KiB	6.11 KiB

View stats and visualisations on the review app

---

Action run for 34c9c95e3d748340c6ec3bd430f8690aaea39d40

[github-actions[bot]]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 3857794f1..868c4ee8b 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -5368,14 +5368,11 @@ screen and (forced-colors:active) {
     border-color: #0b0c0c
 }

-.govuk-service-header {
-    border-bottom: 1px solid #b1b4b6;
-    background-color: #f3f2f1
-}
-
 .govuk-service-header__container {
     display: flex;
-    padding-top: 5px
+    padding-top: 5px;
+    border-bottom: 1px solid #b1b4b6;
+    background-color: #f3f2f1
 }

 @media (max-width:40.0525em) {

---

Action run for 34c9c95e3d748340c6ec3bd430f8690aaea39d40

[github-actions[bot]]

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-default.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-default.html
index 20b68c6c9..f92938a7f 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-header/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-default.html
@@ -1,12 +1,15 @@

-  <div class="govuk-service-header" data-module="govuk-service-header">
-    <div class="govuk-service-header__container govuk-width-container">
+  <div class="govuk-service-header" data-module="govuk-service-header"
+    aria-label="Service information and navigation">
+    <div class="govuk-width-container">

-        
-          <span class="govuk-service-header__service-name">
-Service name          </span>
+        <section class="govuk-service-header__container">
+          
+            <span class="govuk-service-header__service-name">
+Service name            </span>

-        
+          
+        </section>

         </div>
   </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-html-navigation-items.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-html-navigation-items.html
index 5d855b947..01b8239b0 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-html-navigation-items.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-html-navigation-items.html
@@ -1,35 +1,38 @@

-  <div class="govuk-service-header" data-module="govuk-service-header">
-    <div class="govuk-service-header__container govuk-width-container">
+  <div class="govuk-service-header" data-module="govuk-service-header"
+    aria-label="Service information and navigation">
+    <div class="govuk-width-container">

-        
+        <section class="govuk-service-header__container">
+          

-        
-          <nav aria-label="Menu" class="govuk-service-header__navigation">
-            <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
-              Menu
-            </button>
+          
+            <nav aria-label="Menu" class="govuk-service-header__navigation">
+              <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
+                Menu
+              </button>

-            <ul class="govuk-service-header__navigation-list" id="navigation" >
+              <ul class="govuk-service-header__navigation-list" id="navigation" >

-                              <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/1">
-                      
-<em>Navigation item 1</em>                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/2">
-                      
-<em>Navigation item 2</em>                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/3">
-                      
-<em>Navigation item 3</em>                    </a>
-                </li>
+                                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/1">
+                        
+<em>Navigation item 1</em>                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/2">
+                        
+<em>Navigation item 2</em>                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/3">
+                        
+<em>Navigation item 3</em>                      </a>
+                  </li>

-              </ul>
-          </nav>
+                </ul>
+            </nav>
+        </section>

         </div>
   </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-large-navigation.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-large-navigation.html
index 4747aec36..cb9c79d97 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-large-navigation.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-large-navigation.html
@@ -1,100 +1,103 @@

-  <div class="govuk-service-header" data-module="govuk-service-header">
-    <div class="govuk-service-header__container govuk-width-container">
+  <div class="govuk-service-header" data-module="govuk-service-header"
+    aria-label="Service information and navigation">
+    <div class="govuk-width-container">

-        
+        <section class="govuk-service-header__container">
+          

-        
-          <nav aria-label="Menu" class="govuk-service-header__navigation">
-            <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
-              Menu
-            </button>
+          
+            <nav aria-label="Menu" class="govuk-service-header__navigation">
+              <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
+                Menu
+              </button>

-            <ul class="govuk-service-header__navigation-list" id="navigation" >
+              <ul class="govuk-service-header__navigation-list" id="navigation" >

-                              <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/browse/benefits">
-                      
-Benefits                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/browse/births-deaths-marriages">
-                      
-Births, deaths, marriages and care                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/browse/business">
-                      
-Business and self-employed                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/browse/childcare-parenting">
-                      
-Childcare and parenting                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/browse/citizenship">
-                      
-Citizenship and living in the UK                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/browse/justice">
-                      
-Crime, justice and the law                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/browse/disabilities">
-                      
-Disabled people                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/browse/driving">
-                      
-Driving and transport                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/browse/education">
-                      
-Education and learning                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/browse/employing-people">
-                      
-Employing people                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/browse/environment-countryside">
-                      
-Environment and countryside                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/browse/housing-local-services">
-                      
-Housing and local services                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/browse/tax">
-                      
-Money and tax                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/browse/abroad">
-                      
-Passports, travel and living abroad                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/browse/visas-immigration">
-                      
-Visas and immigration                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/browse/working">
-                      
-Working, jobs and pensions                    </a>
-                </li>
+                                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/benefits">
+                        
+Benefits                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/births-deaths-marriages">
+                        
+Births, deaths, marriages and care                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/business">
+                        
+Business and self-employed                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/childcare-parenting">
+                        
+Childcare and parenting                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/citizenship">
+                        
+Citizenship and living in the UK                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/justice">
+                        
+Crime, justice and the law                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/disabilities">
+                        
+Disabled people                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/driving">
+                        
+Driving and transport                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/education">
+                        
+Education and learning                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/employing-people">
+                        
+Employing people                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/environment-countryside">
+                        
+Environment and countryside                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/housing-local-services">
+                        
+Housing and local services                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/tax">
+                        
+Money and tax                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/abroad">
+                        
+Passports, travel and living abroad                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/visas-immigration">
+                        
+Visas and immigration                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/working">
+                        
+Working, jobs and pensions                      </a>
+                  </li>

-              </ul>
-          </nav>
+                </ul>
+            </nav>
+        </section>

         </div>
   </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-long-service-name.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-long-service-name.html
index 2d8d37a02..8b88f5b5e 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-long-service-name.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-long-service-name.html
@@ -1,15 +1,18 @@

-  <div class="govuk-service-header" data-module="govuk-service-header">
-    <div class="govuk-service-header__container govuk-width-container">
+  <div class="govuk-service-header" data-module="govuk-service-header"
+    aria-label="Service information and navigation">
+    <div class="govuk-width-container">

-        
-          <span class="govuk-service-header__service-name">
-            <a href="#/" class="govuk-service-header__link govuk-service-header__link--service-name">
-              Apply to receive a rare holofoil Charizard Pokémon card from the King
-            </a>
-          </span>
+        <section class="govuk-service-header__container">
+          
+            <span class="govuk-service-header__service-name">
+              <a href="#/" class="govuk-service-header__link govuk-service-header__link--service-name">
+                Apply to receive a rare holofoil Charizard Pokémon card from the King
+              </a>
+            </span>

-        
+          
+        </section>

         </div>
   </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation-with-a-current-item.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation-with-a-current-item.html
index 246401e53..c640a3f47 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation-with-a-current-item.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation-with-a-current-item.html
@@ -1,41 +1,44 @@

-  <div class="govuk-service-header" data-module="govuk-service-header">
-    <div class="govuk-service-header__container govuk-width-container">
+  <div class="govuk-service-header" data-module="govuk-service-header"
+    aria-label="Service information and navigation">
+    <div class="govuk-width-container">

-        
+        <section class="govuk-service-header__container">
+          

-        
-          <nav aria-label="Menu" class="govuk-service-header__navigation">
-            <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
-              Menu
-            </button>
+          
+            <nav aria-label="Menu" class="govuk-service-header__navigation">
+              <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
+                Menu
+              </button>

-            <ul class="govuk-service-header__navigation-list" id="navigation" >
+              <ul class="govuk-service-header__navigation-list" id="navigation" >

-                              <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/1">
-                      
-Navigation item 1                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item govuk-service-header__navigation-item--active">
-                    <a class="govuk-service-header__link" href="#/2" aria-current="page">
-                      
-                        <strong class="govuk-service-header__active-fallback">Navigation item 2</strong>
-                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/3">
-                      
-Navigation item 3                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/4">
-                      
-Navigation item 4                    </a>
-                </li>
+                                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/1">
+                        
+Navigation item 1                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item govuk-service-header__navigation-item--active">
+                      <a class="govuk-service-header__link" href="#/2" aria-current="page">
+                        
+                          <strong class="govuk-service-header__active-fallback">Navigation item 2</strong>
+                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/3">
+                        
+Navigation item 3                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/4">
+                        
+Navigation item 4                      </a>
+                  </li>

-              </ul>
-          </nav>
+                </ul>
+            </nav>
+        </section>

         </div>
   </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation-with-an-active-item.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation-with-an-active-item.html
index 7142d3a1f..6037c8707 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation-with-an-active-item.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation-with-an-active-item.html
@@ -1,41 +1,44 @@

-  <div class="govuk-service-header" data-module="govuk-service-header">
-    <div class="govuk-service-header__container govuk-width-container">
+  <div class="govuk-service-header" data-module="govuk-service-header"
+    aria-label="Service information and navigation">
+    <div class="govuk-width-container">

-        
+        <section class="govuk-service-header__container">
+          

-        
-          <nav aria-label="Menu" class="govuk-service-header__navigation">
-            <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
-              Menu
-            </button>
+          
+            <nav aria-label="Menu" class="govuk-service-header__navigation">
+              <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
+                Menu
+              </button>

-            <ul class="govuk-service-header__navigation-list" id="navigation" >
+              <ul class="govuk-service-header__navigation-list" id="navigation" >

-                              <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/1">
-                      
-Navigation item 1                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item govuk-service-header__navigation-item--active">
-                    <a class="govuk-service-header__link" href="#/2" aria-current="true">
-                      
-                        <strong class="govuk-service-header__active-fallback">Navigation item 2</strong>
-                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/3">
-                      
-Navigation item 3                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/4">
-                      
-Navigation item 4                    </a>
-                </li>
+                                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/1">
+                        
+Navigation item 1                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item govuk-service-header__navigation-item--active">
+                      <a class="govuk-service-header__link" href="#/2" aria-current="true">
+                        
+                          <strong class="govuk-service-header__active-fallback">Navigation item 2</strong>
+                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/3">
+                        
+Navigation item 3                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/4">
+                        
+Navigation item 4                      </a>
+                  </li>

-              </ul>
-          </nav>
+                </ul>
+            </nav>
+        </section>

         </div>
   </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation.html
index 331d64d1c..922dc05af 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation.html
@@ -1,40 +1,43 @@

-  <div class="govuk-service-header" data-module="govuk-service-header">
-    <div class="govuk-service-header__container govuk-width-container">
+  <div class="govuk-service-header" data-module="govuk-service-header"
+    aria-label="Service information and navigation">
+    <div class="govuk-width-container">

-        
+        <section class="govuk-service-header__container">
+          

-        
-          <nav aria-label="Menu" class="govuk-service-header__navigation">
-            <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
-              Menu
-            </button>
+          
+            <nav aria-label="Menu" class="govuk-service-header__navigation">
+              <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
+                Menu
+              </button>

-            <ul class="govuk-service-header__navigation-list" id="navigation" >
+              <ul class="govuk-service-header__navigation-list" id="navigation" >

-                              <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/1">
-                      
-Navigation item 1                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/2">
-                      
-Navigation item 2                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/3">
-                      
-Navigation item 3                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/4">
-                      
-Navigation item 4                    </a>
-                </li>
+                                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/1">
+                        
+Navigation item 1                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/2">
+                        
+Navigation item 2                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/3">
+                        
+Navigation item 3                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/4">
+                        
+Navigation item 4                      </a>
+                  </li>

-              </ul>
-          </nav>
+                </ul>
+            </nav>
+        </section>

         </div>
   </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-non-link-navigation-items.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-non-link-navigation-items.html
index 579ad7dd5..209913011 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-non-link-navigation-items.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-non-link-navigation-items.html
@@ -1,29 +1,32 @@

-  <div class="govuk-service-header" data-module="govuk-service-header">
-    <div class="govuk-service-header__container govuk-width-container">
+  <div class="govuk-service-header" data-module="govuk-service-header"
+    aria-label="Service information and navigation">
+    <div class="govuk-width-container">

-        
+        <section class="govuk-service-header__container">
+          

-        
-          <nav aria-label="Menu" class="govuk-service-header__navigation">
-            <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
-              Menu
-            </button>
+          
+            <nav aria-label="Menu" class="govuk-service-header__navigation">
+              <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
+                Menu
+              </button>

-            <ul class="govuk-service-header__navigation-list" id="navigation" >
+              <ul class="govuk-service-header__navigation-list" id="navigation" >

-                              <li class="govuk-service-header__navigation-item">
-                    <span class="govuk-service-header__navigation-text">Navigation item 1</span>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <span class="govuk-service-header__navigation-text"><em>Navigation item 2</em></span>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <span class="govuk-service-header__navigation-text">Navigation item 3</span>
-                </li>
+                                  <li class="govuk-service-header__navigation-item">
+                      <span class="govuk-service-header__navigation-text">Navigation item 1</span>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <span class="govuk-service-header__navigation-text"><em>Navigation item 2</em></span>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <span class="govuk-service-header__navigation-text">Navigation item 3</span>
+                  </li>

-              </ul>
-          </nav>
+                </ul>
+            </nav>
+        </section>

         </div>
   </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-service-link.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-service-link.html
index 6040b697c..6c356e7a0 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-service-link.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-service-link.html
@@ -1,15 +1,18 @@

-  <div class="govuk-service-header" data-module="govuk-service-header">
-    <div class="govuk-service-header__container govuk-width-container">
+  <div class="govuk-service-header" data-module="govuk-service-header"
+    aria-label="Service information and navigation">
+    <div class="govuk-width-container">

-        
-          <span class="govuk-service-header__service-name">
-            <a href="#/" class="govuk-service-header__link govuk-service-header__link--service-name">
-              Service name
-            </a>
-          </span>
+        <section class="govuk-service-header__container">
+          
+            <span class="govuk-service-header__service-name">
+              <a href="#/" class="govuk-service-header__link govuk-service-header__link--service-name">
+                Service name
+              </a>
+            </span>

-        
+          
+        </section>

         </div>
   </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-service-name-and-navigation.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-service-name-and-navigation.html
index 60ac73e2e..b1a71fde0 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-service-name-and-navigation.html
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-service-name-and-navigation.html
@@ -1,46 +1,49 @@

-  <div class="govuk-service-header" data-module="govuk-service-header">
-    <div class="govuk-service-header__container govuk-width-container">
+  <div class="govuk-service-header" data-module="govuk-service-header"
+    aria-label="Service information and navigation">
+    <div class="govuk-width-container">

-        
-          <span class="govuk-service-header__service-name">
-            <a href="#/" class="govuk-service-header__link govuk-service-header__link--service-name">
-              Apply for a juggling license
-            </a>
-          </span>
+        <section class="govuk-service-header__container">
+          
+            <span class="govuk-service-header__service-name">
+              <a href="#/" class="govuk-service-header__link govuk-service-header__link--service-name">
+                Apply for a juggling license
+              </a>
+            </span>

-        
-          <nav aria-label="Menu" class="govuk-service-header__navigation">
-            <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
-              Menu
-            </button>
+          
+            <nav aria-label="Menu" class="govuk-service-header__navigation">
+              <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
+                Menu
+              </button>

-            <ul class="govuk-service-header__navigation-list" id="navigation" >
+              <ul class="govuk-service-header__navigation-list" id="navigation" >

-                              <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/1">
-                      
-Navigation item 1                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item govuk-service-header__navigation-item--active">
-                    <a class="govuk-service-header__link" href="#/2" aria-current="true">
-                      
-                        <strong class="govuk-service-header__active-fallback">Navigation item 2</strong>
-                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/3">
-                      
-Navigation item 3                    </a>
-                </li>
-                <li class="govuk-service-header__navigation-item">
-                    <a class="govuk-service-header__link" href="#/4">
-                      
-Navigation item 4                    </a>
-                </li>
+                                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/1">
+                        
+Navigation item 1                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item govuk-service-header__navigation-item--active">
+                      <a class="govuk-service-header__link" href="#/2" aria-current="true">
+                        
+                          <strong class="govuk-service-header__active-fallback">Navigation item 2</strong>
+                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/3">
+                        
+Navigation item 3                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/4">
+                        
+Navigation item 4                      </a>
+                  </li>

-              </ul>
-          </nav>
+                </ul>
+            </nav>
+        </section>

         </div>
   </div>

---

Action run for 34c9c95e3d748340c6ec3bd430f8690aaea39d40

[github-actions[bot]]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/_index.scss b/packages/govuk-frontend/dist/govuk/components/service-header/_index.scss
index dcdca34b4..367bc4e09 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-header/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/_index.scss
@@ -3,14 +3,11 @@
   $govuk-service-header-border-color: $govuk-border-colour;
   $govuk-service-header-active-link-border-width: govuk-spacing(1);

-  .govuk-service-header {
-    border-bottom: 1px solid $govuk-service-header-border-color;
-    background-color: $govuk-service-header-background;
-  }
-
   .govuk-service-header__container {
     display: flex;
     padding-top: $govuk-service-header-active-link-border-width;
+    border-bottom: 1px solid $govuk-service-header-border-color;
+    background-color: $govuk-service-header-background;

     @include govuk-media-query($until: tablet) {
       flex-direction: column;
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/fixtures.json b/packages/govuk-frontend/dist/govuk/components/service-header/fixtures.json
index 108eb44c2..1c89aa993 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-header/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/fixtures.json
@@ -10,7 +10,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n          <span class=\"govuk-service-header__service-name\">\nService name          </span>\n\n        \n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n            <span class=\"govuk-service-header__service-name\">\nService name            </span>\n\n          \n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with service link",
@@ -22,7 +22,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n          <span class=\"govuk-service-header__service-name\">\n            <a href=\"#/\" class=\"govuk-service-header__link govuk-service-header__link--service-name\">\n              Service name\n            </a>\n          </span>\n\n        \n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n            <span class=\"govuk-service-header__service-name\">\n              <a href=\"#/\" class=\"govuk-service-header__link govuk-service-header__link--service-name\">\n                Service name\n              </a>\n            </span>\n\n          \n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with long service name",
@@ -34,7 +34,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n          <span class=\"govuk-service-header__service-name\">\n            <a href=\"#/\" class=\"govuk-service-header__link govuk-service-header__link--service-name\">\n              Apply to receive a rare holofoil Charizard Pokémon card from the King\n            </a>\n          </span>\n\n        \n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n            <span class=\"govuk-service-header__service-name\">\n              <a href=\"#/\" class=\"govuk-service-header__link govuk-service-header__link--service-name\">\n                Apply to receive a rare holofoil Charizard Pokémon card from the King\n              </a>\n            </span>\n\n          \n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with navigation",
@@ -62,7 +62,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n\n        \n          <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n            <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n              Menu\n            </button>\n\n            <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                              <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/1\">\n                      \nNavigation item 1                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/2\">\n                      \nNavigation item 2                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/3\">\n                      \nNavigation item 3                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/4\">\n                      \nNavigation item 4                    </a>\n                </li>\n\n              </ul>\n          </nav>\n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n\n          \n            <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n              <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n                Menu\n              </button>\n\n              <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/1\">\n                        \nNavigation item 1                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/2\">\n                        \nNavigation item 2                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/3\">\n                        \nNavigation item 3                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/4\">\n                        \nNavigation item 4                      </a>\n                  </li>\n\n                </ul>\n            </nav>\n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with navigation with a current item",
@@ -91,7 +91,7 @@
             "description": "The current item indicates that the user is present on that exact page. It looks the same as an active item, but has different underlying semantics.",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n\n        \n          <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n            <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n              Menu\n            </button>\n\n            <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                              <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/1\">\n                      \nNavigation item 1                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item govuk-service-header__navigation-item--active\">\n                    <a class=\"govuk-service-header__link\" href=\"#/2\" aria-current=\"page\">\n                      \n                        <strong class=\"govuk-service-header__active-fallback\">Navigation item 2</strong>\n                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/3\">\n                      \nNavigation item 3                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/4\">\n                      \nNavigation item 4                    </a>\n                </li>\n\n              </ul>\n          </nav>\n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n\n          \n            <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n              <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n                Menu\n              </button>\n\n              <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/1\">\n                        \nNavigation item 1                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item govuk-service-header__navigation-item--active\">\n                      <a class=\"govuk-service-header__link\" href=\"#/2\" aria-current=\"page\">\n                        \n                          <strong class=\"govuk-service-header__active-fallback\">Navigation item 2</strong>\n                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/3\">\n                        \nNavigation item 3                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/4\">\n                        \nNavigation item 4                      </a>\n                  </li>\n\n                </ul>\n            </nav>\n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with navigation with an active item",
@@ -120,7 +120,7 @@
             "description": "The active item indicates that the user is within that section, but not on the exact page being linked. It looks the same as a current item, but has different underlying semantics.",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n\n        \n          <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n            <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n              Menu\n            </button>\n\n            <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                              <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/1\">\n                      \nNavigation item 1                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item govuk-service-header__navigation-item--active\">\n                    <a class=\"govuk-service-header__link\" href=\"#/2\" aria-current=\"true\">\n                      \n                        <strong class=\"govuk-service-header__active-fallback\">Navigation item 2</strong>\n                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/3\">\n                      \nNavigation item 3                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/4\">\n                      \nNavigation item 4                    </a>\n                </li>\n\n              </ul>\n          </nav>\n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n\n          \n            <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n              <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n                Menu\n              </button>\n\n              <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/1\">\n                        \nNavigation item 1                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item govuk-service-header__navigation-item--active\">\n                      <a class=\"govuk-service-header__link\" href=\"#/2\" aria-current=\"true\">\n                        \n                          <strong class=\"govuk-service-header__active-fallback\">Navigation item 2</strong>\n                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/3\">\n                        \nNavigation item 3                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/4\">\n                        \nNavigation item 4                      </a>\n                  </li>\n\n                </ul>\n            </nav>\n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with large navigation",
@@ -196,7 +196,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n\n        \n          <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n            <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n              Menu\n            </button>\n\n            <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                              <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/browse/benefits\">\n                      \nBenefits                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/browse/births-deaths-marriages\">\n                      \nBirths, deaths, marriages and care                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/browse/business\">\n                      \nBusiness and self-employed                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/browse/childcare-parenting\">\n                      \nChildcare and parenting                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/browse/citizenship\">\n                      \nCitizenship and living in the UK                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/browse/justice\">\n                      \nCrime, justice and the law                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/browse/disabilities\">\n                      \nDisabled people                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/browse/driving\">\n                      \nDriving and transport                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/browse/education\">\n                      \nEducation and learning                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/browse/employing-people\">\n                      \nEmploying people                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/browse/environment-countryside\">\n                      \nEnvironment and countryside                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/browse/housing-local-services\">\n                      \nHousing and local services                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/browse/tax\">\n                      \nMoney and tax                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/browse/abroad\">\n                      \nPassports, travel and living abroad                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/browse/visas-immigration\">\n                      \nVisas and immigration                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/browse/working\">\n                      \nWorking, jobs and pensions                    </a>\n                </li>\n\n              </ul>\n          </nav>\n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n\n          \n            <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n              <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n                Menu\n              </button>\n\n              <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/browse/benefits\">\n                        \nBenefits                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/browse/births-deaths-marriages\">\n                        \nBirths, deaths, marriages and care                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/browse/business\">\n                        \nBusiness and self-employed                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/browse/childcare-parenting\">\n                        \nChildcare and parenting                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/browse/citizenship\">\n                        \nCitizenship and living in the UK                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/browse/justice\">\n                        \nCrime, justice and the law                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/browse/disabilities\">\n                        \nDisabled people                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/browse/driving\">\n                        \nDriving and transport                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/browse/education\">\n                        \nEducation and learning                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/browse/employing-people\">\n                        \nEmploying people                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/browse/environment-countryside\">\n                        \nEnvironment and countryside                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/browse/housing-local-services\">\n                        \nHousing and local services                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/browse/tax\">\n                        \nMoney and tax                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/browse/abroad\">\n                        \nPassports, travel and living abroad                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/browse/visas-immigration\">\n                        \nVisas and immigration                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/browse/working\">\n                        \nWorking, jobs and pensions                      </a>\n                  </li>\n\n                </ul>\n            </nav>\n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with HTML navigation items",
@@ -220,7 +220,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n\n        \n          <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n            <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n              Menu\n            </button>\n\n            <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                              <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/1\">\n                      \n<em>Navigation item 1</em>                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/2\">\n                      \n<em>Navigation item 2</em>                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/3\">\n                      \n<em>Navigation item 3</em>                    </a>\n                </li>\n\n              </ul>\n          </nav>\n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n\n          \n            <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n              <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n                Menu\n              </button>\n\n              <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/1\">\n                        \n<em>Navigation item 1</em>                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/2\">\n                        \n<em>Navigation item 2</em>                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/3\">\n                        \n<em>Navigation item 3</em>                      </a>\n                  </li>\n\n                </ul>\n            </nav>\n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with non-link navigation items",
@@ -241,7 +241,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n\n        \n          <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n            <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n              Menu\n            </button>\n\n            <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                              <li class=\"govuk-service-header__navigation-item\">\n                    <span class=\"govuk-service-header__navigation-text\">Navigation item 1</span>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <span class=\"govuk-service-header__navigation-text\"><em>Navigation item 2</em></span>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <span class=\"govuk-service-header__navigation-text\">Navigation item 3</span>\n                </li>\n\n              </ul>\n          </nav>\n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n\n          \n            <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n              <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n                Menu\n              </button>\n\n              <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                                  <li class=\"govuk-service-header__navigation-item\">\n                      <span class=\"govuk-service-header__navigation-text\">Navigation item 1</span>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <span class=\"govuk-service-header__navigation-text\"><em>Navigation item 2</em></span>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <span class=\"govuk-service-header__navigation-text\">Navigation item 3</span>\n                  </li>\n\n                </ul>\n            </nav>\n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with service name and navigation",
@@ -272,7 +272,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n          <span class=\"govuk-service-header__service-name\">\n            <a href=\"#/\" class=\"govuk-service-header__link govuk-service-header__link--service-name\">\n              Apply for a juggling license\n            </a>\n          </span>\n\n        \n          <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n            <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n              Menu\n            </button>\n\n            <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                              <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/1\">\n                      \nNavigation item 1                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item govuk-service-header__navigation-item--active\">\n                    <a class=\"govuk-service-header__link\" href=\"#/2\" aria-current=\"true\">\n                      \n                        <strong class=\"govuk-service-header__active-fallback\">Navigation item 2</strong>\n                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/3\">\n                      \nNavigation item 3                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/4\">\n                      \nNavigation item 4                    </a>\n                </li>\n\n              </ul>\n          </nav>\n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n            <span class=\"govuk-service-header__service-name\">\n              <a href=\"#/\" class=\"govuk-service-header__link govuk-service-header__link--service-name\">\n                Apply for a juggling license\n              </a>\n            </span>\n\n          \n            <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n              <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n                Menu\n              </button>\n\n              <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/1\">\n                        \nNavigation item 1                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item govuk-service-header__navigation-item--active\">\n                      <a class=\"govuk-service-header__link\" href=\"#/2\" aria-current=\"true\">\n                        \n                          <strong class=\"govuk-service-header__active-fallback\">Navigation item 2</strong>\n                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/3\">\n                        \nNavigation item 3                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/4\">\n                        \nNavigation item 4                      </a>\n                  </li>\n\n                </ul>\n            </nav>\n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with no options set",
@@ -296,7 +296,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\" data-foo=\"bar\" data-pika=\"chu\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n          <span class=\"govuk-service-header__service-name\">\nService name          </span>\n\n        \n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\" data-foo=\"bar\" data-pika=\"chu\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n            <span class=\"govuk-service-header__service-name\">\nService name            </span>\n\n          \n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "classes",
@@ -308,7 +308,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header app-my-curious-custom-class\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n          <span class=\"govuk-service-header__service-name\">\nService name          </span>\n\n        \n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header app-my-curious-custom-class\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n            <span class=\"govuk-service-header__service-name\">\nService name            </span>\n\n          \n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with custom navigation toggle text",
@@ -325,7 +325,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n\n        \n          <nav aria-label=\"Enter the NavZone\" class=\"govuk-service-header__navigation\">\n            <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n              Enter the NavZone\n            </button>\n\n            <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                              <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/1\">\n                      \nNavigation item 1                    </a>\n                </li>\n\n              </ul>\n          </nav>\n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n\n          \n            <nav aria-label=\"Enter the NavZone\" class=\"govuk-service-header__navigation\">\n              <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n                Enter the NavZone\n              </button>\n\n              <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/1\">\n                        \nNavigation item 1                      </a>\n                  </li>\n\n                </ul>\n            </nav>\n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with custom navigation toggle label",
@@ -342,7 +342,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n\n        \n          <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n            <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" aria-label=\"Enter the NavZone\" hidden>\n              Menu\n            </button>\n\n            <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                              <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/1\">\n                      \nNavigation item 1                    </a>\n                </li>\n\n              </ul>\n          </nav>\n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n\n          \n            <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n              <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" aria-label=\"Enter the NavZone\" hidden>\n                Menu\n              </button>\n\n              <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/1\">\n                        \nNavigation item 1                      </a>\n                  </li>\n\n                </ul>\n            </nav>\n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with identical navigation toggle text and label",
@@ -360,7 +360,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n\n        \n          <nav aria-label=\"Enter the NavZone\" class=\"govuk-service-header__navigation\">\n            <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n              Enter the NavZone\n            </button>\n\n            <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                              <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/1\">\n                      \nNavigation item 1                    </a>\n                </li>\n\n              </ul>\n          </nav>\n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n\n          \n            <nav aria-label=\"Enter the NavZone\" class=\"govuk-service-header__navigation\">\n              <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n                Enter the NavZone\n              </button>\n\n              <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/1\">\n                        \nNavigation item 1                      </a>\n                  </li>\n\n                </ul>\n            </nav>\n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with custom navigation label",
@@ -377,7 +377,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n\n        \n          <nav aria-label=\"Main navigation\" class=\"govuk-service-header__navigation\">\n            <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n              Menu\n            </button>\n\n            <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                              <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/1\">\n                      \nNavigation item 1                    </a>\n                </li>\n\n              </ul>\n          </nav>\n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n\n          \n            <nav aria-label=\"Main navigation\" class=\"govuk-service-header__navigation\">\n              <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n                Menu\n              </button>\n\n              <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/1\">\n                        \nNavigation item 1                      </a>\n                  </li>\n\n                </ul>\n            </nav>\n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with custom navigation toggle text and navigation label",
@@ -395,7 +395,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n\n        \n          <nav aria-label=\"The NavZone\" class=\"govuk-service-header__navigation\">\n            <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n              Enter the NavZone\n            </button>\n\n            <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                              <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/1\">\n                      \nNavigation item 1                    </a>\n                </li>\n\n              </ul>\n          </nav>\n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n\n          \n            <nav aria-label=\"The NavZone\" class=\"govuk-service-header__navigation\">\n              <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n                Enter the NavZone\n              </button>\n\n              <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/1\">\n                        \nNavigation item 1                      </a>\n                  </li>\n\n                </ul>\n            </nav>\n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with custom navigation classes",
@@ -412,7 +412,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n\n        \n          <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation app-my-neat-navigation-class\">\n            <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n              Menu\n            </button>\n\n            <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                              <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/1\">\n                      \nNavigation item 1                    </a>\n                </li>\n\n              </ul>\n          </nav>\n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n\n          \n            <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation app-my-neat-navigation-class\">\n              <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n                Menu\n              </button>\n\n              <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/1\">\n                        \nNavigation item 1                      </a>\n                  </li>\n\n                </ul>\n            </nav>\n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with custom navigation ID",
@@ -429,7 +429,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        \n\n        \n          <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n            <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"main-nav\" hidden>\n              Menu\n            </button>\n\n            <ul class=\"govuk-service-header__navigation-list\" id=\"main-nav\" >\n\n                              <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/1\">\n                      \nNavigation item 1                    </a>\n                </li>\n\n              </ul>\n          </nav>\n\n        </div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n\n          \n            <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n              <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"main-nav\" hidden>\n                Menu\n              </button>\n\n              <ul class=\"govuk-service-header__navigation-list\" id=\"main-nav\" >\n\n                                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/1\">\n                        \nNavigation item 1                      </a>\n                  </li>\n\n                </ul>\n            </nav>\n        </section>\n\n        </div>\n  </div>"
         },
         {
             "name": "with slotted content",
@@ -466,7 +466,41 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\">\n    <div class=\"govuk-service-header__container govuk-width-container\">\n\n        <div>[start]</div>\n          <span class=\"govuk-service-header__service-name\">\n            <a href=\"#/\" class=\"govuk-service-header__link govuk-service-header__link--service-name\">\n              Apply for a juggling license\n            </a>\n          </span>\n\n        \n          <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n            <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n              Menu\n            </button>\n\n            <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n              <li>[navigation start]</li>                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/1\">\n                      \nNavigation item 1                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item govuk-service-header__navigation-item--active\">\n                    <a class=\"govuk-service-header__link\" href=\"#/2\" aria-current=\"true\">\n                      \n                        <strong class=\"govuk-service-header__active-fallback\">Navigation item 2</strong>\n                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/3\">\n                      \nNavigation item 3                    </a>\n                </li>\n                <li class=\"govuk-service-header__navigation-item\">\n                    <a class=\"govuk-service-header__link\" href=\"#/4\">\n                      \nNavigation item 4                    </a>\n                </li>\n\n              <li>[navigation end]</li></ul>\n          </nav>\n\n        <div>[end]</div></div>\n  </div>"
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <div>[start]</div><section class=\"govuk-service-header__container\">\n          \n            <span class=\"govuk-service-header__service-name\">\n              <a href=\"#/\" class=\"govuk-service-header__link govuk-service-header__link--service-name\">\n                Apply for a juggling license\n              </a>\n            </span>\n\n          \n            <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n              <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n                Menu\n              </button>\n\n              <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                <li>[navigation start]</li>                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/1\">\n                        \nNavigation item 1                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item govuk-service-header__navigation-item--active\">\n                      <a class=\"govuk-service-header__link\" href=\"#/2\" aria-current=\"true\">\n                        \n                          <strong class=\"govuk-service-header__active-fallback\">Navigation item 2</strong>\n                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/3\">\n                        \nNavigation item 3                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/4\">\n                        \nNavigation item 4                      </a>\n                  </li>\n\n                <li>[navigation end]</li></ul>\n            </nav>\n        </section>\n\n        <div>[end]</div></div>\n  </div>"
+        },
+        {
+            "name": "with phase banner",
+            "options": {
+                "serviceName": "Apply for a juggling license",
+                "serviceUrl": "#/",
+                "navigation": [
+                    {
+                        "href": "#/1",
+                        "text": "Navigation item 1"
+                    },
+                    {
+                        "href": "#/2",
+                        "text": "Navigation item 2",
+                        "active": true
+                    },
+                    {
+                        "href": "#/3",
+                        "text": "Navigation item 3"
+                    },
+                    {
+                        "href": "#/4",
+                        "text": "Navigation item 4"
+                    }
+                ],
+                "slots": {
+                    "end": "<div class=\"govuk-phase-banner\">\n<p class=\"govuk-phase-banner__content\">\n<strong class=\"govuk-tag govuk-phase-banner__content__tag\">\nAlpha\n</strong>\n<span class=\"govuk-phase-banner__text\">\nThis is a new service. Help us improve it and <a class=\"govuk-link\" href=\"#\">give your feedback by email</a>.\n</span>\n</p>\n</div>\n"
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-service-header\" data-module=\"govuk-service-header\"\n    aria-label=\"Service information and navigation\">\n    <div class=\"govuk-width-container\">\n\n        <section class=\"govuk-service-header__container\">\n          \n            <span class=\"govuk-service-header__service-name\">\n              <a href=\"#/\" class=\"govuk-service-header__link govuk-service-header__link--service-name\">\n                Apply for a juggling license\n              </a>\n            </span>\n\n          \n            <nav aria-label=\"Menu\" class=\"govuk-service-header__navigation\">\n              <button type=\"button\" class=\"govuk-service-header__toggle govuk-js-service-header-toggle\" aria-controls=\"navigation\" hidden>\n                Menu\n              </button>\n\n              <ul class=\"govuk-service-header__navigation-list\" id=\"navigation\" >\n\n                                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/1\">\n                        \nNavigation item 1                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item govuk-service-header__navigation-item--active\">\n                      <a class=\"govuk-service-header__link\" href=\"#/2\" aria-current=\"true\">\n                        \n                          <strong class=\"govuk-service-header__active-fallback\">Navigation item 2</strong>\n                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/3\">\n                        \nNavigation item 3                      </a>\n                  </li>\n                  <li class=\"govuk-service-header__navigation-item\">\n                      <a class=\"govuk-service-header__link\" href=\"#/4\">\n                        \nNavigation item 4                      </a>\n                  </li>\n\n                </ul>\n            </nav>\n        </section>\n\n        <div class=\"govuk-phase-banner\">\n<p class=\"govuk-phase-banner__content\">\n<strong class=\"govuk-tag govuk-phase-banner__content__tag\">\nAlpha\n</strong>\n<span class=\"govuk-phase-banner__text\">\nThis is a new service. Help us improve it and <a class=\"govuk-link\" href=\"#\">give your feedback by email</a>.\n</span>\n</p>\n</div>\n</div>\n  </div>"
         }
     ],
     "previewLayout": "full-width"

---

Action run for 34c9c95e3d748340c6ec3bd430f8690aaea39d40

[domoscargin]

I'm going to merge this into the component branch to save time and enable previews, but am still very open to it being changed.