[SPIKE] Service Header component - Githubissues

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.

https://frontend.design-system.service.gov.uk/

MIT License

1.18k stars 325 forks source link

[SPIKE] Service Header component #4950

Closed querkmachine closed 2 months ago

querkmachine commented 6 months ago

[!NOTE] This PR has been superseded by https://github.com/alphagov/govuk-frontend/pull/5206 for the purposes of active development. It is kept open here as reference and for comparison against the new PR.

Takes the 'Service Header' concept from #4915 and implements it as a standalone component, with the toolbox/dropdown concept removed (at least for now).

For https://github.com/alphagov/govuk-design-system/issues/3748.

Links

Todo

Creating a Service Header component

There are a few minor design issues outstanding:
- [x] The height of the Service Header (on desktop) is different depending on whether there are navigation links present or just a service name.
- [x] The focus style is positioned differently depending on whether it's a service name link or a navigational link.
- [x] The mobile layout generally feels a little bit unevenly spaced and could use some tweaking.
[x] The injection of <strong> for active links is done a bit haphazardly and needs more consideration as to when it's used and how it's styled.
[x] Comprehensive review app examples and associated tests written.
- [x] Template tests.
- [x] JS functionality tests.
- [x] Review app examples added/updated.
[x] Readme content written (this can probably be mostly lifted from another component).

Changes to other components

[ ] ~~Move the <header> tag out of the Header component and into the template.~~ Change no longer being pursued.
[ ] ~~Adapt the Phase banner to be usable between the Header and Service Header components.~~ Change no longer being pursued.
[x] Add 'slots' to the Header and Service Header components.
[x] Deprecate the navigation and service name/URL options on the Header component.

github-actions[bot] commented 6 months ago

:clipboard: Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	121.44 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	121.43 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 fbc582df0aad17172ebd3dedfcd48b21d27b2836

github-actions[bot] commented 6 months ago

JavaScript changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
index 754775151..c537433f1 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
@@ -730,41 +730,69 @@ ExitThisPage.moduleName = "govuk-exit-this-page", ExitThisPage.defaults = Object
 });
 class Header extends GOVUKFrontendComponent {
     constructor(e) {
-        if (super(), this.$module = void 0, this.$menuButton = void 0, this.$menu = void 0, this.menuIsOpen = !1, this.mql = null, !e) throw new ElementError({
+        if (super(), this.$module = void 0, this.$menuButton = void 0, this.$oneLoginMenuButton = void 0, this.$menu = void 0, this.$oneLoginMenu = void 0, this.menuIsOpen = !1, this.oneLoginMenuIsOpen = !1, this.mql = null, !e) throw new ElementError({
             componentName: "Header",
             element: e,
             identifier: "Root element (`$module`)"
         });
         this.$module = e;
-        const t = e.querySelector(".govuk-js-header-toggle");
-        if (!t) return this;
-        const n = t.getAttribute("aria-controls");
-        if (!n) throw new ElementError({
-            componentName: "Header",
-            identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
-        });
-        const i = document.getElementById(n);
-        if (!i) throw new ElementError({
-            componentName: "Header",
-            element: i,
-            identifier: `Navigation (\`<ul id="${n}">\`)`
-        });
-        this.$menu = i, this.$menuButton = t, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
+        const t = e.querySelector(".govuk-js-header-toggle"),
+            n = e.querySelector(".govuk-js-one-login-toggle");
+        if (!t && !n) return this;
+        if (t) {
+            const e = t.getAttribute("aria-controls");
+            if (!e) throw new ElementError({
+                componentName: "Header",
+                identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
+            });
+            const n = document.getElementById(e);
+            if (!n) throw new ElementError({
+                componentName: "Header",
+                element: n,
+                identifier: `Navigation (\`<ul id="${e}">\`)`
+            });
+            this.$menu = n, this.$menuButton = t, this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
+        }
+        if (n) {
+            const e = n.getAttribute("aria-controls");
+            if (!e) throw new ElementError({
+                componentName: "Header",
+                identifier: 'One Login menu button (`<button class="govuk-js-one-login-toggle">`) attribute (`aria-controls`)'
+            });
+            const t = document.getElementById(e);
+            if (!t) throw new ElementError({
+                componentName: "Header",
+                element: t,
+                identifier: `Navigation (\`<ul id="${e}">\`)`
+            });
+            this.$oneLoginMenu = t, this.$oneLoginMenuButton = n, this.$oneLoginMenuButton.addEventListener("click", (() => this.handleOneLoginMenuButtonClick()))
+        }
+        this.setupResponsiveChecks()
     }
     setupResponsiveChecks() {
-        const e = getBreakpoint("desktop");
+        const e = getBreakpoint("tablet");
         if (!e.value) throw new ElementError({
             componentName: "Header",
             identifier: `CSS custom property (\`${e.property}\`) on pseudo-class \`:root\``
         });
-        this.mql = window.matchMedia(`(min-width: ${e.value})`), "addEventListener" in this.mql ? this.mql.addEventListener("change", (() => this.checkMode())) : this.mql.addListener((() => this.checkMode())), this.checkMode()
+        this.mql = window.matchMedia(`(min-width: ${e.value})`), "addEventListener" in this.mql ? this.mql.addEventListener("change", (() => {
+            this.checkMode(), this.checkOneLoginMode()
+        })) : this.mql.addListener((() => {
+            this.checkMode(), this.checkOneLoginMode()
+        })), this.checkMode(), this.checkOneLoginMode()
     }
     checkMode() {
         this.mql && this.$menu && this.$menuButton && (this.mql.matches ? (this.$menu.removeAttribute("hidden"), this.$menuButton.setAttribute("hidden", "")) : (this.$menuButton.removeAttribute("hidden"), this.$menuButton.setAttribute("aria-expanded", this.menuIsOpen.toString()), this.menuIsOpen ? this.$menu.removeAttribute("hidden") : this.$menu.setAttribute("hidden", "")))
     }
+    checkOneLoginMode() {
+        this.mql && this.$oneLoginMenu && this.$oneLoginMenuButton && (this.mql.matches ? (this.$oneLoginMenu.removeAttribute("hidden"), this.$oneLoginMenuButton.setAttribute("hidden", "")) : (this.$oneLoginMenuButton.removeAttribute("hidden"), this.$oneLoginMenuButton.setAttribute("aria-expanded", this.oneLoginMenuIsOpen.toString()), this.oneLoginMenuIsOpen ? this.$oneLoginMenu.removeAttribute("hidden") : this.$oneLoginMenu.setAttribute("hidden", "")))
+    }
     handleMenuButtonClick() {
         this.menuIsOpen = !this.menuIsOpen, this.checkMode()
     }
+    handleOneLoginMenuButtonClick() {
+        this.oneLoginMenuIsOpen = !this.oneLoginMenuIsOpen, this.checkOneLoginMode()
+    }
 }
 Header.moduleName = "govuk-header";
 class NotificationBanner extends GOVUKFrontendComponent {
@@ -899,6 +927,45 @@ class Radios extends GOVUKFrontendComponent {
     }
 }
 Radios.moduleName = "govuk-radios";
+class ServiceHeader extends GOVUKFrontendComponent {
+    constructor(e) {
+        if (super(), this.$module = void 0, this.$menuButton = void 0, this.$menu = void 0, this.menuIsOpen = !1, this.mql = null, !e) throw new ElementError({
+            componentName: "Service Header",
+            element: e,
+            identifier: "Root element (`$module`)"
+        });
+        this.$module = e;
+        const t = e.querySelector(".govuk-js-service-header-toggle");
+        if (!t) return this;
+        const n = t.getAttribute("aria-controls");
+        if (!n) throw new ElementError({
+            componentName: "Service Header",
+            identifier: 'Navigation button (`<button class="govuk-js-service-header-toggle">`) attribute (`aria-controls`)'
+        });
+        const i = document.getElementById(n);
+        if (!i) throw new ElementError({
+            componentName: "Service Header",
+            element: i,
+            identifier: `Navigation (\`<ul id="${n}">\`)`
+        });
+        this.$menu = i, this.$menuButton = t, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
+    }
+    setupResponsiveChecks() {
+        const e = getBreakpoint("tablet");
+        if (!e.value) throw new ElementError({
+            componentName: "Service Header",
+            identifier: `CSS custom property (\`${e.property}\`) on pseudo-class \`:root\``
+        });
+        this.mql = window.matchMedia(`(min-width: ${e.value})`), "addEventListener" in this.mql ? this.mql.addEventListener("change", (() => this.checkMode())) : this.mql.addListener((() => this.checkMode())), this.checkMode()
+    }
+    checkMode() {
+        this.mql && this.$menu && this.$menuButton && (this.mql.matches ? (this.$menu.removeAttribute("hidden"), this.$menuButton.setAttribute("hidden", "")) : (this.$menuButton.removeAttribute("hidden"), this.$menuButton.setAttribute("aria-expanded", this.menuIsOpen.toString()), this.menuIsOpen ? this.$menu.removeAttribute("hidden") : this.$menu.setAttribute("hidden", "")))
+    }
+    handleMenuButtonClick() {
+        this.menuIsOpen = !this.menuIsOpen, this.checkMode()
+    }
+}
+ServiceHeader.moduleName = "govuk-service-header";
 class SkipLink extends GOVUKFrontendComponent {
     constructor(e) {
         var t;
@@ -1099,6 +1166,7 @@ function initAll(e) {
             [NotificationBanner, e.notificationBanner],
             [PasswordInput, e.passwordInput],
             [Radios],
+            [ServiceHeader],
             [SkipLink],
             [Tabs]
         ],
@@ -1130,6 +1198,7 @@ export {
     NotificationBanner,
     PasswordInput,
     Radios,
+    ServiceHeader,
     SkipLink,
     Tabs,
     createAll,

Action run for fbc582df0aad17172ebd3dedfcd48b21d27b2836

github-actions[bot] commented 6 months ago

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 17f05ea65..96884a292 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -3635,7 +3635,7 @@ only screen and (min-resolution:2dppx) {
     font-weight: 400;
     font-size: .875rem;
     line-height: 1;
-    border-bottom: 10px solid #fff;
+    border-bottom: 10px solid #1d70b8;
     color: #fff;
     background: #0b0c0c
 }
@@ -3661,8 +3661,7 @@ only screen and (min-resolution:2dppx) {
 }

 .govuk-header__container--full-width {
-    padding: 0 15px;
-    border-color: #1d70b8
+    padding: 0 15px
 }

 .govuk-header__container--full-width .govuk-header__menu-button {
@@ -3671,9 +3670,7 @@ only screen and (min-resolution:2dppx) {

 .govuk-header__container {
     position: relative;
-    margin-bottom: -10px;
-    padding-top: 10px;
-    border-bottom: 10px solid #1d70b8
+    padding-top: 10px
 }

 .govuk-header__container:after {
@@ -3837,7 +3834,7 @@ only screen and (min-resolution:2dppx) {
     padding-right: 80px
 }

-@media (min-width:48.0625em) {
+@media (min-width:40.0625em) {
     .govuk-header__logo {
         width: 33.33%;
         padding-right: 15px;
@@ -3956,7 +3953,7 @@ only screen and (min-resolution:2dppx) {
     display: none
 }

-@media (min-width:48.0625em) {
+@media (min-width:40.0625em) {
     .govuk-header__navigation {
         margin-bottom: 10px
     }
@@ -3972,7 +3969,7 @@ only screen and (min-resolution:2dppx) {
     display: none
 }

-@media (min-width:48.0625em) {
+@media (min-width:40.0625em) {
     .govuk-header__navigation--end {
         margin: 0;
         padding: 5px 0;
@@ -3985,7 +3982,7 @@ only screen and (min-resolution:2dppx) {
     border-bottom: 1px solid #2e3133
 }

-@media (min-width:48.0625em) {
+@media (min-width:40.0625em) {
     .govuk-header__navigation-item {
         display: inline-block;
         margin-right: 15px;
@@ -4053,6 +4050,200 @@ only screen and (min-resolution:2dppx) {
     }
 }

+.govuk-header__link--one-login {
+    font-weight: 700
+}
+
+@media (max-width:40.0525em) {
+    .govuk-header__link--one-login .govuk-header__one-login-icon {
+        display: none
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-header__link--one-login {
+        display: flex;
+        justify-content: center
+    }
+}
+
+.govuk-header__link--one-login:focus .govuk-header__one-login-icon circle:first-child {
+    fill: #0b0c0c
+}
+
+.govuk-header__link--one-login:focus .govuk-header__one-login-icon circle:nth-child(4) {
+    stroke: #0b0c0c
+}
+
+.govuk-header__link--one-login:focus .govuk-header__one-login-icon circle:nth-child(3),
+.govuk-header__link--one-login:focus .govuk-header__one-login-icon path {
+    fill: #fd0
+}
+
+.govuk-header__one-login-icon {
+    margin-left: 10px;
+    font-size: 0
+}
+
+.govuk-header__one-login-toggle {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: .875rem;
+    line-height: 1.1428571429;
+    display: inline-flex;
+    align-items: center;
+    position: absolute;
+    top: 13px;
+    right: 0;
+    min-height: 24px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    color: #fff;
+    background: none;
+    word-break: break-all;
+    cursor: pointer
+}
+
+@media print {
+    .govuk-header__one-login-toggle {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-header__one-login-toggle {
+        font-size: 1rem;
+        line-height: 1.25
+    }
+}
+
+@media print {
+    .govuk-header__one-login-toggle {
+        font-size: 14pt;
+        line-height: 1.2
+    }
+}
+
+.govuk-header__one-login-toggle:hover {
+    -webkit-text-decoration: solid underline 3px;
+    text-decoration: solid underline 3px;
+    text-underline-offset: .1578em
+}
+
+.govuk-header__one-login-toggle:focus {
+    outline: 3px solid transparent;
+    color: #0b0c0c;
+    background-color: #fd0;
+    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+    text-decoration: none;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone
+}
+
+.govuk-header__one-login-toggle:before {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
+    clip-path: polygon(0 0, 50% 100%, 100% 0);
+    border-color: transparent;
+    border-style: solid;
+    border-width: 8.66px 5px 0;
+    border-top-color: inherit;
+    content: "";
+    margin-right: 5px
+}
+
+.govuk-header__one-login-toggle[aria-expanded=true]:before {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
+    clip-path: polygon(50% 0, 0 100%, 100% 100%);
+    border-color: transparent;
+    border-style: solid;
+    border-width: 0 5px 8.66px;
+    border-bottom-color: inherit
+}
+
+.govuk-header__one-login-toggle[hidden] {
+    display: none
+}
+
+.govuk-header__one-login-menu {
+    flex-shrink: 0
+}
+
+.govuk-header__one-login-menu-list {
+    margin: 10px 0 0;
+    padding: 0;
+    list-style: none
+}
+
+@media (min-width:40.0625em) {
+    .govuk-header__one-login-menu-list {
+        display: flex;
+        align-items: center;
+        margin-top: 0
+    }
+}
+
+.govuk-header__one-login-menu-item {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: .875rem;
+    line-height: 1.1428571429;
+    display: inline-block;
+    padding: 10px 0
+}
+
+@media print {
+    .govuk-header__one-login-menu-item {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-header__one-login-menu-item {
+        font-size: 1rem;
+        line-height: 1.25
+    }
+}
+
+@media print {
+    .govuk-header__one-login-menu-item {
+        font-size: 14pt;
+        line-height: 1.2
+    }
+}
+
+@media (max-width:40.0525em) {
+    .govuk-header__one-login-menu-item {
+        width: 100%
+    }
+
+    .govuk-header__one-login-menu-item:not(:last-child) {
+        border-bottom: 1px solid #2e3133
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-header__one-login-menu-item {
+        padding: 10px 0 10px 20px;
+        border-left: 1px solid #2e3133;
+        align-self: stretch
+    }
+
+    .govuk-header__one-login-menu-item:not(:last-child) {
+        margin-right: 20px
+    }
+}
+
 .govuk-inset-text {
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -4788,7 +4979,8 @@ only screen and (min-resolution:2dppx) {
     font-size: .875rem;
     line-height: 1.1428571429;
     color: #0b0c0c;
-    display: table;
+    display: flex;
+    align-items: baseline;
     margin: 0
 }

@@ -5129,6 +5321,333 @@ 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
+}
+
+@media (max-width:40.0525em) {
+    .govuk-service-header__container {
+        flex-direction: column;
+        align-items: start;
+        margin-bottom: 5px
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-header__container {
+        flex-direction: row;
+        flex-wrap: wrap
+    }
+}
+
+.govuk-service-header__link {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-decoration: underline;
+    text-decoration-thickness: max(1px, .0625rem);
+    text-underline-offset: .1578em
+}
+
+@media print {
+    .govuk-service-header__link {
+        font-family: sans-serif
+    }
+}
+
+.govuk-service-header__link:hover {
+    text-decoration-thickness: max(3px, .1875rem, .12em);
+    -webkit-text-decoration-skip-ink: none;
+    text-decoration-skip-ink: none;
+    -webkit-text-decoration-skip: none;
+    text-decoration-skip: none
+}
+
+.govuk-service-header__link:focus {
+    outline: 3px solid transparent;
+    background-color: #fd0;
+    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+    text-decoration: none;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone
+}
+
+.govuk-service-header__link:visited {
+    color: #4c2c92
+}
+
+.govuk-service-header__link:link,
+.govuk-service-header__link:visited {
+    color: #1d70b8
+}
+
+.govuk-service-header__link:hover {
+    color: #003078
+}
+
+.govuk-service-header__link:active,
+.govuk-service-header__link:focus {
+    color: #0b0c0c
+}
+
+.govuk-service-header__link:not(:hover) {
+    text-decoration: none
+}
+
+.govuk-service-header__link:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0
+}
+
+.govuk-service-header__link--service-name:link,
+.govuk-service-header__link--service-name:visited {
+    color: #0b0c0c
+}
+
+@media print {
+
+    .govuk-service-header__link--service-name:link,
+    .govuk-service-header__link--service-name:visited {
+        color: #000
+    }
+}
+
+.govuk-service-header__link--service-name:hover {
+    color: rgba(11, 12, 12, .99)
+}
+
+.govuk-service-header__link--service-name:active,
+.govuk-service-header__link--service-name:focus {
+    color: #0b0c0c
+}
+
+@media print {
+
+    .govuk-service-header__link--service-name:active,
+    .govuk-service-header__link--service-name:focus {
+        color: #000
+    }
+}
+
+.govuk-service-header__navigation-item,
+.govuk-service-header__service-name {
+    position: relative
+}
+
+@media (min-width:40.0625em) {
+
+    .govuk-service-header__navigation-item,
+    .govuk-service-header__service-name {
+        display: inline-block;
+        padding: 15px 0
+    }
+}
+
+.govuk-service-header__service-name {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 700;
+    font-size: 1rem;
+    line-height: 1.25;
+    margin: 5px 0
+}
+
+@media print {
+    .govuk-service-header__service-name {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-header__service-name {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-service-header__service-name {
+        font-size: 14pt;
+        line-height: 1.15
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-header__service-name {
+        margin-right: 15px;
+        margin-top: 0;
+        margin-bottom: 5px
+    }
+}
+
+@media (min-width:40.0625em) and (min-width:40.0625em) {
+    .govuk-service-header__service-name {
+        margin-right: 25px
+    }
+}
+
+.govuk-service-header__toggle {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 700;
+    font-size: 1rem;
+    line-height: 1.25;
+    display: inline-flex;
+    margin: 5px 0;
+    padding: 0;
+    border: 0;
+    color: #1d70b8;
+    background: none;
+    word-break: break-all;
+    cursor: pointer;
+    align-items: center
+}
+
+@media print {
+    .govuk-service-header__toggle {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-header__toggle {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-service-header__toggle {
+        font-size: 14pt;
+        line-height: 1.15
+    }
+}
+
+.govuk-service-header__toggle:after {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
+    clip-path: polygon(0 0, 50% 100%, 100% 0);
+    border-color: transparent;
+    border-style: solid;
+    border-width: 8.66px 5px 0;
+    border-top-color: inherit;
+    content: "";
+    margin-left: 5px
+}
+
+.govuk-service-header__toggle[aria-expanded=true]:after {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
+    clip-path: polygon(50% 0, 0 100%, 100% 100%);
+    border-color: transparent;
+    border-style: solid;
+    border-width: 0 5px 8.66px;
+    border-bottom-color: inherit
+}
+
+.govuk-service-header__toggle[hidden] {
+    display: none
+}
+
+.govuk-service-header__navigation-list {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.25;
+    margin: 0;
+    padding: 0;
+    list-style: none
+}
+
+@media print {
+    .govuk-service-header__navigation-list {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-header__navigation-list {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-service-header__navigation-list {
+        font-size: 14pt;
+        line-height: 1.15
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-header__navigation-list {
+        display: flex;
+        flex-wrap: wrap
+    }
+}
+
+@media (min-width:40.0625em) and (-ms-high-contrast:none),
+screen and (min-width:40.0625em) and (-ms-high-contrast:active) {
+    .govuk-service-header__navigation-list {
+        display: block
+    }
+}
+
+.govuk-service-header__navigation-item {
+    margin: 10px 0;
+    border: 0 solid
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-header__navigation-item {
+        margin: 0 30px 0 0
+    }
+
+    .govuk-service-header__navigation-item:last-of-type {
+        margin: 0
+    }
+}
+
+.govuk-service-header__navigation-item--active {
+    border-color: #1d70b8
+}
+
+@media (max-width:40.0525em) {
+    .govuk-service-header__navigation-item--active {
+        margin-left: -15px;
+        padding-left: 10px;
+        border-left-width: 5px
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-header__navigation-item--active {
+        border-bottom-width: 5px
+    }
+}
+
+.govuk-service-header__active-fallback {
+    font-weight: inherit
+}
+
 .govuk-skip-link {
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;

Action run for fbc582df0aad17172ebd3dedfcd48b21d27b2836

github-actions[bot] commented 6 months ago

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-default.html b/packages/govuk-frontend/dist/govuk/components/header/template-default.html
index 91ab515f4..dafbdae31 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-default.html
@@ -1,5 +1,6 @@
 <header class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -17,5 +18,8 @@
         </svg>
       </a>
     </div>
+
+
+
   </div>
 </header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-full-width-with-navigation.html b/packages/govuk-frontend/dist/govuk/components/header/template-full-width-with-navigation.html
index 41bc217b3..f7b6cbabd 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-full-width-with-navigation.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-full-width-with-navigation.html
@@ -1,5 +1,6 @@
 <header class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-header__container--full-width">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -20,6 +21,8 @@
         </span>
       </a>
     </div>
+
+
     <div class="govuk-header__content">
       <nav aria-label="Menu" class="govuk-header__navigation govuk-header__navigation--end">
         <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>
@@ -45,5 +48,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
 </header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-full-width.html b/packages/govuk-frontend/dist/govuk/components/header/template-full-width.html
index bbebb0f68..ab7ed2913 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-full-width.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-full-width.html
@@ -1,5 +1,6 @@
 <header class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-header__container--full-width">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -20,5 +21,8 @@
         </span>
       </a>
     </div>
+
+
+
   </div>
 </header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-html.html b/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-html.html
index 75ad6abc2..0bc8b2fbe 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-html.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-html.html
@@ -1,5 +1,6 @@
 <header class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -17,6 +18,8 @@
         </svg>
       </a>
     </div>
+
+
     <div class="govuk-header__content">
       <a href="/components/header" class="govuk-header__link govuk-header__service-name">
         Service Name
@@ -45,5 +48,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
 </header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-text-without-link.html b/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-text-without-link.html
index 6a04c6b18..f01f2090f 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-text-without-link.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-text-without-link.html
@@ -1,5 +1,6 @@
 <header class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -17,6 +18,8 @@
         </svg>
       </a>
     </div>
+
+
     <div class="govuk-header__content">
       <a href="/components/header" class="govuk-header__link govuk-header__service-name">
         Service Name
@@ -39,5 +42,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
 </header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-label.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-label.html
index be66d9450..5ac39be94 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-label.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-label.html
@@ -1,5 +1,6 @@
 <header class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -17,6 +18,8 @@
         </svg>
       </a>
     </div>
+
+
     <div class="govuk-header__content">
       <nav aria-label="Menu" class="govuk-header__navigation">
         <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Custom button label" hidden>
@@ -47,5 +50,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
 </header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-text.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-text.html
index fef844ab2..ec03af50e 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-text.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-text.html
@@ -1,5 +1,6 @@
 <header class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -17,6 +18,8 @@
         </svg>
       </a>
     </div>
+
+
     <div class="govuk-header__content">
       <nav aria-label="Dewislen" class="govuk-header__navigation">
         <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>
@@ -47,5 +50,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
 </header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-navigation-label.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-navigation-label.html
index c4e96ac14..5fc5ad68d 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-navigation-label.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-navigation-label.html
@@ -1,5 +1,6 @@
 <header class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -17,6 +18,8 @@
         </svg>
       </a>
     </div>
+
+
     <div class="govuk-header__content">
       <nav aria-label="Custom navigation label" class="govuk-header__navigation">
         <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>
@@ -47,5 +50,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
 </header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-govuk-one-login.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-govuk-one-login.html
new file mode 100644
index 000000000..c5ea316bc
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-govuk-one-login.html
@@ -0,0 +1,66 @@
+<header class="govuk-header" data-module="govuk-header">
+  <div class="govuk-header__container govuk-width-container">
+
+    <div class="govuk-header__logo">
+      <a href="/" class="govuk-header__link govuk-header__link--homepage">
+        <svg
+          focusable="false"
+          role="img"
+          class="govuk-header__logotype"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 148 30"
+          height="30"
+          width="148"
+          aria-label="GOV.UK"
+        >
+          <title>GOV.UK</title>
+          <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
+        </svg>
+      </a>
+    </div>
+
+      
+      <button type="button"
+        class="govuk-header__one-login-toggle govuk-js-one-login-toggle"
+        aria-controls="govuk-header__one-login-menu"
+        aria-label="GOV.UK One Login menu"
+        aria-expanded="false"
+        hidden>
+        <span class="">One Login</span>
+          <span class="govuk-header__one-login-icon">
+    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+      <circle cx="11" cy="11" r="11" fill="#fff"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M3.29297 18.8487C4.23255 15.4753 7.32741 13 11.0004 13C14.6731 13 17.7678 15.4749 18.7076 18.848C17.8058 19.7338 16.752 20.4654 15.5889 21H11.0004H6.41097C5.24819 20.4655 4.19463 19.7342 3.29297 18.8487Z" fill="#1D70B8"/>
+      <circle cx="11" cy="7.75" r="3.75" fill="#1D70B8"/>
+      <circle cx="11" cy="11" r="10" stroke="#fff" stroke-width="2"/>
+    </svg>
+  </span>
+      </button>
+
+      
+      <nav aria-label="GOV.UK One Login menu" class="govuk-header__navigation govuk-header__navigation--end" id="govuk-header__one-login-menu">
+        <ul class="govuk-header__navigation-list">
+          <li class="govuk-header__navigation-item">
+            <a class="govuk-header__link govuk-header__link--one-login" href="https://home.account.gov.uk/">
+              <span class="">GOV.UK One Login</span>
+              <span class="govuk-header__one-login-icon">
+    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+      <circle cx="11" cy="11" r="11" fill="#fff"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M3.29297 18.8487C4.23255 15.4753 7.32741 13 11.0004 13C14.6731 13 17.7678 15.4749 18.7076 18.848C17.8058 19.7338 16.752 20.4654 15.5889 21H11.0004H6.41097C5.24819 20.4655 4.19463 19.7342 3.29297 18.8487Z" fill="#1D70B8"/>
+      <circle cx="11" cy="7.75" r="3.75" fill="#1D70B8"/>
+      <circle cx="11" cy="11" r="10" stroke="#fff" stroke-width="2"/>
+    </svg>
+  </span>
+            </a>
+          </li>
+          <li class="govuk-header__navigation-item">
+            <a class="govuk-header__link" href="https://home.account.gov.uk/sign-out">
+              Sign out
+            </a>
+          </li>
+        </ul>
+      </nav>
+
+
+  </div>
+</header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-large-navigation.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-large-navigation.html
index 6406765d3..6d23eeda8 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-large-navigation.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-large-navigation.html
@@ -1,5 +1,6 @@
 <header class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -17,6 +18,8 @@
         </svg>
       </a>
     </div>
+
+
     <div class="govuk-header__content">
       <nav aria-label="Menu" class="govuk-header__navigation">
         <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>
@@ -107,5 +110,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
 </header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-navigation.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-navigation.html
index 7863fa81e..d9c5aafbe 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-navigation.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-navigation.html
@@ -1,5 +1,6 @@
 <header class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -17,6 +18,8 @@
         </svg>
       </a>
     </div>
+
+
     <div class="govuk-header__content">
       <nav aria-label="Menu" class="govuk-header__navigation">
         <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>
@@ -47,5 +50,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
 </header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-product-name.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-product-name.html
index 0ee1f2818..29b7effd1 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-product-name.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-product-name.html
@@ -1,5 +1,6 @@
 <header class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -20,5 +21,8 @@
         </span>
       </a>
     </div>
+
+
+
   </div>
 </header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-and-navigation.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-and-navigation.html
index f2fc493ad..2245b0d3e 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-and-navigation.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-and-navigation.html
@@ -1,5 +1,6 @@
 <header class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -17,6 +18,8 @@
         </svg>
       </a>
     </div>
+
+
     <div class="govuk-header__content">
       <a href="/components/header" class="govuk-header__link govuk-header__service-name">
         Service Name
@@ -50,5 +53,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
 </header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-but-no-service-url.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-but-no-service-url.html
index d460416a5..68627fc96 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-but-no-service-url.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-but-no-service-url.html
@@ -1,5 +1,6 @@
 <header class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -17,10 +18,13 @@
         </svg>
       </a>
     </div>
+
+
     <div class="govuk-header__content">
       <span class="govuk-header__service-name">
         Service Name
       </span>
     </div>
+
   </div>
 </header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name.html
index f01029178..ce27abc46 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name.html
@@ -1,5 +1,6 @@
 <header class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -17,10 +18,13 @@
         </svg>
       </a>
     </div>
+
+
     <div class="govuk-header__content">
       <a href="/components/header" class="govuk-header__link govuk-header__service-name">
         Service Name
       </a>
     </div>
+
   </div>
 </header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-st-edwards-crown.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-st-edwards-crown.html
index 24f79ac7b..e181955c0 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-st-edwards-crown.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-st-edwards-crown.html
@@ -1,5 +1,6 @@
 <header class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -17,5 +18,8 @@
         </svg>
       </a>
     </div>
+
+
+
   </div>
 </header>
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
new file mode 100644
index 000000000..6d6107926
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-default.html
@@ -0,0 +1,14 @@
+
+  <section class="govuk-service-header" data-module="govuk-service-header" aria-label="Service information">
+    <div class="govuk-width-container">
+
+        <div class="govuk-service-header__container">
+          
+            <span class="govuk-service-header__service-name">
+Service name            </span>
+
+          
+        </div>
+
+        </div>
+  </section>
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
new file mode 100644
index 000000000..8d6f0cec1
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-html-navigation-items.html
@@ -0,0 +1,43 @@
+
+  <section class="govuk-service-header" data-module="govuk-service-header" aria-label="Service information">
+    <div class="govuk-width-container">
+
+        <div 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>
+
+              <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>
+
+                </ul>
+            </nav>
+        </div>
+
+        </div>
+  </section>
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
new file mode 100644
index 000000000..95fb78744
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-large-navigation.html
@@ -0,0 +1,134 @@
+
+  <section class="govuk-service-header" data-module="govuk-service-header" aria-label="Service information">
+    <div class="govuk-width-container">
+
+        <div 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>
+
+              <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>
+
+                </ul>
+            </nav>
+        </div>
+
+        </div>
+  </section>
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
new file mode 100644
index 000000000..6d60284a2
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-long-service-name.html
@@ -0,0 +1,17 @@
+
+  <section class="govuk-service-header" data-module="govuk-service-header" aria-label="Service information">
+    <div class="govuk-width-container">
+
+        <div 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>
+
+          
+        </div>
+
+        </div>
+  </section>
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
new file mode 100644
index 000000000..a1ee49681
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation-with-a-current-item.html
@@ -0,0 +1,51 @@
+
+  <section class="govuk-service-header" data-module="govuk-service-header" aria-label="Service information">
+    <div class="govuk-width-container">
+
+        <div 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>
+
+              <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>
+
+                </ul>
+            </nav>
+        </div>
+
+        </div>
+  </section>
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
new file mode 100644
index 000000000..357de70ad
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation-with-an-active-item.html
@@ -0,0 +1,51 @@
+
+  <section class="govuk-service-header" data-module="govuk-service-header" aria-label="Service information">
+    <div class="govuk-width-container">
+
+        <div 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>
+
+              <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>
+
+                </ul>
+            </nav>
+        </div>
+
+        </div>
+  </section>
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
new file mode 100644
index 000000000..8fe27f774
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation.html
@@ -0,0 +1,50 @@
+
+  <section class="govuk-service-header" data-module="govuk-service-header" aria-label="Service information">
+    <div class="govuk-width-container">
+
+        <div 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>
+
+              <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>
+
+                </ul>
+            </nav>
+        </div>
+
+        </div>
+  </section>
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
new file mode 100644
index 000000000..f68975168
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-non-link-navigation-items.html
@@ -0,0 +1,43 @@
+
+  <section class="govuk-service-header" data-module="govuk-service-header" aria-label="Service information">
+    <div class="govuk-width-container">
+
+        <div 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>
+
+              <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>
+
+                </ul>
+            </nav>
+        </div>
+
+        </div>
+  </section>
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
new file mode 100644
index 000000000..39e914064
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-service-link.html
@@ -0,0 +1,17 @@
+
+  <section class="govuk-service-header" data-module="govuk-service-header" aria-label="Service information">
+    <div class="govuk-width-container">
+
+        <div 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>
+
+          
+        </div>
+
+        </div>
+  </section>
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
new file mode 100644
index 000000000..4bbf987cc
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-service-name-and-navigation.html
@@ -0,0 +1,56 @@
+
+  <section class="govuk-service-header" data-module="govuk-service-header" aria-label="Service information">
+    <div class="govuk-width-container">
+
+        <div 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>
+
+              <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>
+
+                </ul>
+            </nav>
+        </div>
+
+        </div>
+  </section>

Action run for fbc582df0aad17172ebd3dedfcd48b21d27b2836

github-actions[bot] commented 6 months ago

Other changes to npm package

The diff could not be posted as a comment. You can download it from the workflow artifacts.

Action run for fbc582df0aad17172ebd3dedfcd48b21d27b2836

Ciandelle commented 6 months ago

Overall I'm not seeing any glaring issues that concern me. I do wonder if the blue text is something to change based on the working group feedback. Additionally, personally I don't like the layout of the service header with large navigation, it feels too unorganised and I would struggle to find what I'm looking for. I am aware that this may be a complete personal thing, so please don't get caught up on it

querkmachine commented 6 months ago

personally I don't like the layout of the service header with large navigation, it feels too unorganised and I would struggle to find what I'm looking for.

That's entirely fair. This is one of those review app examples which is intended to test the extremes of the component. No one should actually be using that many navigation items in practice, I hope! 🤞

selfthinker commented 6 months ago

I've done some accessibility testing of the worst scenario example page. Here are the results.

Navigation landmark missing in mobile view

The menu button (which shows on the mobile view or when zoomed in) was previously inside the nav element and was now moved out. A consequence of that is that the navigation landmark disappears completely on mobile (or when zoomed in) and is not discoverable when the navigation is collapsed. This happened in all the screen readers I tested with.

Because I had mentioned this elsewhere before, @querkmachine has fixed it today. I just wanted to mention it for completeness' sake.

Also, not a problem, just something I noticed is that the navigation now collapses at a narrower breakpoint than before. Mentioning it just in case it was not intended.

Unlabelled breadcrumbs confusing

The navigation coming right before the breadcrumbs exacerbate the issue that the breadcrumbs don't have a label. It is very unclear what those links are when you cannot see their design visually. A screen reader will say that they are out of the navigation landmark, but they appear to belong to the navigation.

This is not something new and most probably out of scope. Just mentioning it because it's easier to notice when testing both navigation and breadcrumbs together.

Position of phase banner makes service name less clear

The phase banner being between the logo and the service name makes it harder to understand what the service name is. It previously would have read (simplified): "GOV.UK - Manage company information - Alpha This is a new service – your feedback will help us to improve it." Now it reads (simplified): "GOV.UK - Alpha This is a new service – your feedback will help us to improve it. - Manage company information". The service name seems "lost" at a later point. I have made a few screenshots with CSS disabled (and the landmarks showing) to hopefully make the issue more visible.

The previous version with the phase banner after the navigation:

The current version with the phase banner before the service name:

Navigation difficult to discover when magnified

The navigation is currently right-aligned when it comes after the service name (in desktop view). That will make it harder for magnification users to discover. The horizontal lines help a bit. But I'd suggest thinking about left-aligning them instead.

All items highlighted when changing colours

When changing colours via High Contrast Mode or Firefox browser settings all the items will appear highlighted, not just the active one. That is both the case for the desktop as well as mobile (or zoomed in) view.

Screenshot showing behaviour in desktop view described above

Menu chevron missing in High Contrast Mode

When changing colours via High Contrast Mode the menu chevron is missing, which removes the visual affordance of understanding that it is clickable and will expand something.

Screenshot showing behaviour described above

NVDA in Chrome behaving weird

When using NVDA in Chrome it behaves a bit weird. It doesn't read the service name when arrowing. (It does read it when tabbing.) It also reads all the navigation items in one go, meaning I cannot navigate them individually via arrowing. (Again, it reads them when tabbing.) That is only the case for the desktop view, not for the mobile (or zoomed in) view.

I wonder if this has something to do with flexbox? It's possible it's a bug in NVDA (or Chrome?) rather than something wrong in our code. NVDA is working as expected in Firefox, and JAWS is working as expected in Chrome in this regard.

querkmachine commented 6 months ago

Position of phase banner makes service name less clear

This is a very good point, and is useful evidence against calls to let the phase banner live in this location.

I imagine the situation would be different if we let the service name still live in the header, rather than moving it to this new component.

Menu chevron missing in High Contrast Mode

Just a quick check if this was tested in Edge or Chrome? If so, this is likely because of a High Contrast Mode bug introduced in the latest versions of those browsers. https://github.com/alphagov/reported-bugs/issues/87

Happily, this looks like it should be fixed for the next releases of those browsers.

All items highlighted when changing colours

This is, in hindsight, not unexpected. Whoops! Definitely something that needs fixing.

selfthinker commented 6 months ago

Position of phase banner makes service name less clear

I imagine the situation would be different if we let the service name still live in the header, rather than moving it to this new component.

Yes, when the service name is in the global header, the phase banner could (or maybe even should?) come right after.

By the way, it's not just the phase banner that can make the service name less clear, the One Login navigation and a search bar will have the same effect. I wonder if we should think about those cases as well as the experience of those will be worse after the service name has moved to the service banner.

Menu chevron missing in High Contrast Mode

Just a quick check if this was tested in Edge or Chrome? If so, this is likely because of a High Contrast Mode bug introduced in the latest versions of those browsers. alphagov/reported-bugs#87

Yes, this was in Edge. I saw you posting about that bug but didn't think about it when I found this. That looks like the culprit indeed.

querkmachine commented 6 months ago

I've pushed up a fix for all of the links appearing selected in High Contrast Mode.

The other things I haven't actioned yet could affect the overall design of the component and probably needs to do the rounds within the squad first

querkmachine commented 4 months ago

It (somehow) only just struck me that the aria-label needs to be configurable for localisation purposes. Bit of a brain fart on that one.

Consider this a note to self (or anyone else who might pick up making that change.)