Release 6.0.0-beta.2

[govuk-design-system-ci]

Breaking changes

Update Nunjucks blocks around the GOV.UK header

We've changed the page structure around the header to separate the header element (<header>) from the GOV.UK header component. This lets you include other components, such as the Service navigation and Phase banner components, within the header element of each page.

You’ll need to follow different instructions to upgrade, depending on how you create the page headers in your service. In all cases, you should make sure your page includes a single <header> element after you’ve made the changes.

If you use GOV.UK Frontend's template and override the govukHeader component, update references to the header Nunjucks block to use govukHeader instead.

{# Previously #}
{% block header %}
  {{ govukHeader() }}
{% endblock %}

{# Now #}
{% block govukHeader %}
  {{ govukHeader() }}
{% endblock %}

If you do not use GOV.UK Frontend's template but use the govukHeader component, update your template to include a <header> element around the component.

If you do not use the header Nunjucks block at any point, or you're only using the block to remove it, you do not need to change anything.

If you do not use Nunjucks, change the existing GOV.UK header to a <div> element and wrap it, along with any other header components, with a <header> element.

<header class="govuk-template__header">
  <div class="govuk-header">
    [...]
  </div>
  <div class="govuk-service-navigation">
    [...]
  </div>
</header>

We made this change in pull request #6536: Refactor heading to detach element from component.

Use the container block instead of the main block to replace the width container

We've reduced the scope of the main block to only replace the <main> element,
rather than the whole `

element.

If you’re using the main block, use the new container block instead.

{# Previously #}
{% block main %}
  <!-- Your markup -->
{% endblock %}

{# Now #}
{% block container %}
  <!-- Your markup -->
{% endblock %}

We made this change in pull request #6538: Make Page template options besides header and footer follow conventions.

Update Nunjucks blocks around the GOV.UK footer

We've changed the page structure around the footer to separate the <footer> element from the GOV.UK footer component. This lets you include other components within the footer element (<footer>) of each page.

You’ll need to follow different instructions to upgrade depending on how you create the page footers in your service. In all cases, you should make sure your page includes a single <footer> element after you’ve made the changes.

If you use GOV.UK Frontend's template and override the govukFooter component, update references to the footer Nunjucks block to use govukFooter instead.

{# Previously #}
{% block footer %}
  {{ govukFooter() }}
{% endblock %}

{# Now #}
{% block govukFooter %}
  {{ govukFooter() }}
{% endblock %}

If you do not use GOV.UK Frontend's template but use the govukFooter component, update your template to include a <footer> element around the component.

If you do not use the footer Nunjucks block at any point, or you're only using the block in order to remove it, you do not need to change anything.

If you do not use Nunjucks, change the existing GOV.UK footer to a <div> element and wrap it with a <footer> element.

<footer class="govuk-template__footer">
  <div class="govuk-footer">
    [...]
  </div>
</footer>

We made this change in pull request #6537: Refactor footer to detach element from component.

New features

Customise the template's <header> element

If you use Nunjucks, you can customise the appearance and content of the template's <header> element with new blocks and variables.

New variables:

• headerClasses applies custom classes to the element
• headerAttributes applies custom HTML attributes to the element

New Nunjucks blocks:

• headerStart inserts HTML immediately after the element's opening tag, and headerEnd inserts HTML immediately before the element's closing tag
• govukHeader lets you customise the govukHeader component without affecting other parts of the header

We made this change in pull request #6536: Refactor heading to detach element from component.

Easily include Service navigation on your page

We've added new ways to include the Service navigation component on a page when using GOV.UK Frontend's Nunjucks template.

If you set the serviceName variable, the page template will add the Service navigation component to the <header> element and show the service name. You can also set the serviceUrl variable to provide a link for the service name.

{% extends "govuk/template.njk" %}
{% set serviceName = "YOUR_SERVICE_NAME" %}
{% set serviceUrl = "YOUR_SERVICE_URL" %}

To help you make further customisations, we've added a govukServiceNavigation Nunjucks block to override the default component.

We made this change in pull request #6541: Add service navigation block to template.

Customise the <div class="govuk-width-container"> element

We've added new variables and blocks to allow you to further customise the <div class="govuk-width-container"> element.

New variables:

• containerAttributes applies custom HTML attributes to the element

New blocks

• containerStart inserts HTML immediately after the element's opening tag
• containerEnd inserts HTML immediately before the element's closing tag

We made this change in pull request #6538: Make Page template options besides header and footer follow conventions.

Use the mainAttributes variable to add attributes to the <main> element

We've added a new mainAttributes variable to apply custom HTML attributes to the <main> element.

We made this change in pull request #6538: Make Page template options besides header and footer follow conventions.

Customise the template's <footer> element

If you use Nunjucks, you can customise the appearance and content of the template's <footer> element with new blocks and variables.

New variables:

• footerClasses applies custom classes to the element
• footerAttributes applies custom HTML attributes to the element

New Nunjucks blocks:

• footerStart inserts HTML immediately after the element's opening tag
• footerEnd inserts HTML immediately before the element's closing tag
• govukFooter lets you customise the govukFooter component without affecting other parts of the footer

We made this change in pull request #6537: Refactor footer to detach element from component.

Recommended changes

Use the govukSkipLink block instead of skipLink

We're deprecating the skipLink block and replacing it with a govukSkipLink block so all blocks replacing GOV.UK Frontend elements have the same name as the component's macro.

{# Previously #}
{% block skipLink %}
  {{ govukSkipLink()}}
{% endblock %}

{# Now #}
{% block govukSkipLink %}
  {{ govukSkipLink()}}
{% endblock %}

We made this change in pull request #6538: Make Page template options besides header and footer follow conventions.

Use the containerStart block instead of beforeContent

We're deprecating the beforeContent block and replacing it with a containerStart block so all blocks adding content at the start of an element are named ...Start to make its name better match what it does.

We made this change in pull request #6538: Make Page template options besides header and footer follow conventions.

Fixes

Add aria-hidden="true" to the Service navigation's menu toggle

If you do not use Nunjucks macros to generate your components' HTML, add an aria-hidden="true" attribute to the hidden <button> element of the Service navigation component.

The VoiceOver screen reader software for macOS and iPadOS contains bugs that make the button accessible to VoiceOver users, even if the button has a hidden attribute. Adding the aria-hidden="true" attribute means the button will remain hidden for VoiceOver users.

We made this change in pull request #6467: Fix VoiceOver access to hidden Service Navigation menu button.

Other fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #6351: Preserve already escaped attributes values to prevent double escaping – thanks to @colinrotherham for fixing this issue
• #6462: Update HMRC brand colour
• #6454: Prevent date inputs shifting alignment on iOS 18 – thanks to @rowellx68 for reporting this issue and @colinrotherham for suggesting the fix.
• #6445: Fix skip link outline being clipped in forced colours mode

[github-actions]

JavaScript changes to GitHub release

diff --git a/dist/govuk-frontend-6.0.0-beta.1.min.js b/dist/govuk-frontend-6.0.0-beta.2.min.js
index 7d740897f..f2801f90d 100644
--- a/dist/govuk-frontend-6.0.0-beta.1.min.js
+++ b/dist/govuk-frontend-6.0.0-beta.2.min.js
@@ -1,4 +1,4 @@
-const version = "6.0.0-beta.1";
+const version = "6.0.0-beta.2";
 
 function getBreakpoint(t) {
     const e = `--govuk-breakpoint-${t}`;
@@ -984,13 +984,21 @@ class ServiceNavigation extends Component {
         this.mql = window.matchMedia(`(min-width: ${t.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", "")))
+        this.mql && this.$menu && this.$menuButton && (this.mql.matches ? (this.$menu.removeAttribute("hidden"), function(t, e) {
+            for (const i in e) t.setAttribute(i, e[i])
+        }(this.$menuButton, e)) : (! function(t, e) {
+            for (const i of e) t.removeAttribute(i)
+        }(this.$menuButton, Object.keys(e)), 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()
     }
 }
 ServiceNavigation.moduleName = "govuk-service-navigation";
+const e = {
+    hidden: "",
+    "aria-hidden": "true"
+};
 class SkipLink extends Component {
     constructor(t) {
         var e;
@@ -1240,4 +1248,4 @@ export {
     initAll,
     isSupported,
     version
-}; //# sourceMappingURL=govuk-frontend-6.0.0-beta.1.min.js.map
\ No newline at end of file
+}; //# sourceMappingURL=govuk-frontend-6.0.0-beta.2.min.js.map
\ No newline at end of file

---

Action run for bbeb333

[github-actions]

Stylesheets changes to GitHub release

diff --git a/dist/govuk-frontend-6.0.0-beta.1.min.css b/dist/govuk-frontend-6.0.0-beta.2.min.css
index d79e81952..03454b8f1 100644
--- a/dist/govuk-frontend-6.0.0-beta.1.min.css
+++ b/dist/govuk-frontend-6.0.0-beta.2.min.css
@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 :root {
-    --govuk-frontend-version: "6.0.0-beta.1";
+    --govuk-frontend-version: "6.0.0-beta.2";
     --govuk-breakpoint-mobile: 20rem;
     --govuk-breakpoint-tablet: 40.0625rem;
     --govuk-breakpoint-desktop: 48.0625rem;
@@ -2700,7 +2700,8 @@ screen and (forced-colors:active) {
 .govuk-date-input__item {
     display: inline-block;
     margin-right: 20px;
-    margin-bottom: 0
+    margin-bottom: 0;
+    vertical-align: bottom
 }
 
 .govuk-date-input__label {
@@ -5242,6 +5243,12 @@ screen and (forced-colors:active) {
     background-color: var(--_govuk-focus-colour, #fd0)
 }
 
+@media (forced-colors:active) {
+    .govuk-skip-link:focus {
+        outline-offset: -3px
+    }
+}
+
 .govuk-skip-link-focused-element:focus {
     outline: none
 }
@@ -7526,4 +7533,4 @@ screen and (-ms-high-contrast:active) {
     }
 }
 
-/*# sourceMappingURL=govuk-frontend-6.0.0-beta.1.min.css.map */
\ No newline at end of file
+/*# sourceMappingURL=govuk-frontend-6.0.0-beta.2.min.css.map */
\ No newline at end of file

---

Action run for bbeb333

[github-actions]

Other changes to GitHub release

diff --git a/dist/VERSION.txt b/dist/VERSION.txt
index 1cd446ae8..7bdb82666 100644
--- a/dist/VERSION.txt
+++ b/dist/VERSION.txt
@@ -1 +1 @@
-6.0.0-beta.1
+6.0.0-beta.2

---

Action run for bbeb333

[github-actions]

📋 Stats

No changes to any distributed file sizes!

---

Action run for bbeb333

[calvin-lau-sig7]

Suggested change

	rather than the whole `<div class="govuk-width-container">` element.

We missed an unclosed backtick in the changelog which we just need to update, then I can reapprove