-
Notifications
You must be signed in to change notification settings - Fork 319
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Move service name and navigation into section #5092
Merged
domoscargin
merged 2 commits into
service-header-component
from
bk-service-information-section
Jun 19, 2024
Merged
Move service name and navigation into section #5092
domoscargin
merged 2 commits into
service-header-component
from
bk-service-information-section
Jun 19, 2024
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
📋 StatsFile sizes
Modules
View stats and visualisations on the review app Action run for 34c9c95 |
Stylesheets changes to npm packagediff --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 34c9c95 |
Rendered HTML changes to npm packagediff --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 34c9c95 |
Other changes to npm packagediff --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 34c9c95 |
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. |
8 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is a possible fix for the 'unclear service name' accessibility issue from alphagov/govuk-design-system#3811
Links
npm install --save "alphagov/govuk-frontend#dc8ff97b4"
Before:
After:
Potential issues
start
andend
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..govuk-service-header
class for anything. We could probably finagle some positioning and naming of classes.