govuk-frontend
Advanced tools
Changelog
4.0.1 (Fix release)
We've recently made some non-breaking changes to GOV.UK Frontend. Implementing these changes will make your service work better.
tabindex
attribute from the error summary componentIf you're not using Nunjucks macros, remove the tabindex
attribute from the error summary's HTML. The component JavaScript now adds and removes this attribute.
This change was introduced in pull request #2491: Prevent error summary from being refocused after it has been initially focused on page load.
We’ve made fixes to GOV.UK Frontend in the following pull requests:
Changelog
4.0.0 (Breaking release)
This release contains a lot of breaking changes, but we expect many of them will only affect a small number of users. However, to make sure your service still works after you upgrade, you should read the release notes and make any required changes.
We've changed the design of the accordion. You can see its new look and read the revised guidance, particularly about when and when not to use accordions.
You should check your accordions still display as expected if you have any:
You do not need to make changes to the content that accordions hide or show, as this release's changes do not affect it.
These changes were introduced in pull request #2257: Update accordion design. Thanks to Mia Allers, Owen Jones, Nikin Nagewadia and Chris Yoong for their contributions.
The summary line is now inside the HTML button
element, so you can only add 'phrasing content' to it. Do not use any non-phrasing content, as the resulting HTML will not be valid.
This change was introduced in pull request #2257: Update accordion design.
Only add a summary line if you need to, as it's likely to make the button text too long.
If you're already using the summary line, review your use of the summary line to make sure you actually need it.
If you need to keep the summary line, review the accordion guidance and make the summary line as short as possible.
We've updated the HTML for the summary list component to avoid nesting <span>
elements within <dd>
elements, which is invalid HTML. This update only affects you if you have summary lists that include a mix of rows with and without actions. You can read more about adding actions to rows.
If you're not using Nunjucks macros, do not include an empty <span class="govuk-summary-list__actions"></span>
in rows without actions. Instead, add the govuk-summary-list__row--no-actions
modifier class to the row.
This change was introduced in pull request #2323: Avoid invalid nesting of <span>
within a <dd>
in summary list. Thanks to Malcolm Hire for reporting this issue.
We've updated the HTML for the header. This update only affects you if your header includes navigation.
Any additional classes passed using the navigationClasses
Nunjucks option are now applied to the <nav>
rather than the <ul>
. Check the additional classes are still doing what you expect.
If you're not using Nunjucks macros, then you should:
<button>
inside the <nav>
, immediately before the <ul>
aria-label
attribute from the <ul>
to the <nav>
govuk-header__navigation
class from the <ul>
to the <nav>
govuk-header__navigation-list
class to the <ul>
Check your changes against the header example in the Design System to make sure you have correctly implemented them.
This change was introduced in pull request #2427: Improve the screen reader experience for the header menu.
We've removed the default font styles from the cookie banner Sass. This change makes it more obvious when you have not added classes and styles to any custom HTML.
If you're passing custom HTML into the cookie banner component (for example, using the html
Nunjucks parameter), you must make sure you're applying the appropriate classes and styles to that HTML. This could look like, for example, adding the govuk-body
class to any paragraph tags. You must do this to prevent your cookie banner displaying with unstyled text.
This change was introduced in pull request #2432: Remove default font styles from cookie banner Sass.
In GOV.UK Frontend v3.8.0, we updated the HTML for hints to use a <div>
rather than a <span>
element, to allow the use of block elements. We've now removed the styles which made the hint <span>
display as block.
If you’re not using Nunjucks macros, update your hint HTML to use a <div>
rather than a <span>
. For example: <div id="input-hint" class="govuk-hint"></div>
instead of <span id="input-hint" class="govuk-hint"></span>
.
This change was introduced in pull request #2437: Remove display:block
on hint component.
We've added JavaScript for the skip link component to set focus to the linked element, for example, the main content on the page. This helps screen readers read the linked content when users use the skip link component.
If you're importing JavaScript for individual components, import the skip link JavaScript.
If you're not using Nunjucks macros, add a data-module="govuk-skip-link"
attribute to the component HTML. For example:
<div class="govuk-skip-link" data-module="govuk-skip-link">
...
</div>
Once you've made the changes, check the skip link JavaScript works. To do this, select the skip link and check the linked element (usually the <main>
element) in the browser has a tabindex
attribute.
This change was introduced in pull request #2450: Set focus to skip link target to improve screen reader announcements.
We’ve updated the HTML for the error message component to use a <p>
element instead of a <span>
element, as this is more semantically correct.
If you’re not using Nunjucks macros, swap the <span class="govuk-error-message">
for a <p class="govuk-error-message">
.
This change was introduced in pull request #2452: Update error messages to use paragraph tags instead of spans.
On radios and checkboxes, the JavaScript now looks within the whole page for conditionally-revealed content. Before, it only looked within the same set of radios or checkboxes.
If you see unexpected behaviour, make sure the revealed content's id
is unique within the page the content is on. Reusing the same id
within a page could cause a radio or checkbox to reveal or hide the wrong element, and also means your HTML is invalid.
This change was introduced in pull request #2370: Prevent issues with conditionally revealed content when content id
includes CSS syntax characters.
On character counts, the JavaScript now looks within the whole page for the count message, which will be something similar to “You have 200 characters remaining”. Before, it only looked within the character count component.
If you see unexpected behaviour, make sure the id
for the textarea component is unique within the page the content is on. Reusing the same id
within a page could cause the wrong count message to update, and also means your HTML is invalid.
This change was introduced in pull request #2408: Prevent issues with character count when textarea id
includes CSS syntax characters.
You do not need to do anything if you have done at least one of the following:
all.js
We've changed the naming of our components' JavaScript modules so individual imports are now attached to
window.GOVUKFrontend.[ComponentName]
instead of window.GOVUKFrontend
.
You can now import multiple modules without overwriting the previous one, for example:
//= require govuk/components/accordion/accordion.js
//= require govuk/components/button/button.js
Changelog
3.14.0 (Feature release)
Note: This release was created from the support/3.x
branch.
You can now use the govuk-!-text-align-left
, govuk-!-text-align-centre
and govuk-!-text-align-right
CSS classes to set text alignment on elements.
This was added in pull request #2339: Add text-align
override classes. Thanks to Ed Horsford for reporting this issue.
govuk-spacing
functionYou can now pass the negative equivalent of a point from the spacing scale to the govuk-spacing
function to get negative spacing.
For example, govuk-spacing(1)
returns 5px
, and govuk-spacing(-1)
returns -5px
.
This was added in pull request #2348: Allow govuk-spacing
to output negative spacing. Thanks to Chris Hill-Scott for reporting this issue.
Changelog
3.13.1 (Fix release)
We’ve made fixes to GOV.UK Frontend in the following pull requests:
max-width
to file upload componentpadding-right
from details componentChangelog
3.13.0 (Feature release)
You can now add a 'none' option to checkboxes. For example, 'None of the above' or 'None of these options apply to me'.
Use the 'none' option to allow users to state that none of the checkboxes apply to them. Otherwise, users would have to work out that they should leave all the checkboxes unticked.
You can now also add an 'or' divider before the 'none' option. Use the 'or' divider to make the 'none' option more visible to users.
This was added in pull request #2151: Add 'None of the above' and 'or' divider to checkboxes. Thanks to @frankieroberto for contributing this improvement.
nonce
attribute to inline scriptsIf your service has a Content Security Policy (CSP), you can now add a nonce
attribute to inline scripts within the Nunjucks page template. To do this, set the cspNonce
Nunjucks variable. However, you should only add this attribute if you're not able to include the hash for the inline scripts in your CSP.
Make sure you understand the security implications of using this attribute, as wrong implementation could affect your service’s security.
Read more about how to configure your CSP to work with GOV.UK Frontend.
This was added in pull request #2245: Allow the CSP nonce
attribute to be set on the inline script in the page template. Thanks to @natcarey for contributing this issue and its solution.
We've made the following fixes in pull request #2229: Change approach to fallback PNG in the header to fix blank data URI from triggering Content Security Policy error:
We’ve also made fixes in the following pull requests:
Changelog
3.12.0 (Feature release)
Links now have underlines that are consistently thinner and a bit further away from the link text.
Links also have a clearer hover state, where the underline gets thicker to make the link stand out to users.
These changes are an opt-in feature because you may:
To enable this feature, set $govuk-new-link-styles
to true
before you import GOV.UK Frontend in your Sass:
// application.scss
$govuk-new-link-styles: true;
@import "govuk-frontend/all";
If you have created your own link styles, you should review them to ensure their use is consistent across your service.
To make it easier to be consistent in your use of link styles, we’ve also introduced new mixins and modifier classes for:
These new link styles will be enabled by default in a future major version of GOV.UK Frontend.
This was added in pull request #2183: Updates to link styles and link hover states.
You can now remove underlines from links by using either the:
govuk-link-style-no-underline
mixin in your Sass, orgovuk-link--no-underline
class in your HTMLAn underline still appears when the user hovers their cursor over the link.
This was added in pull request #2214: Add no-underline mixin and modifier class.
You can now style links on dark backgrounds to use white text colour by using either the:
govuk-link-style-inverse
mixin in your Sass, orgovuk-link--inverse
class in your HTMLThis was added in pull request #2213: Add inverse link mixin and modifier class.
You can now add links styled as buttons to cookie banners. For example, you can set the Hide button to be a link styled as a button that reloads the page. Use this feature if you set non-essential cookies on the server and want to help users keep their place using progressive enhancement.
This feature is enabled by default.
This was added in pull request #2164: Enable cookie banner to set link styled as a button.
Changelog
3.11.0 (Feature release)
You can now use cookie banners to allow users to accept or reject cookies which are not essential for making your service work.
This was added in pull request #2131: Add cookie banner component and button groups.
You can now use a button group when you place two or more buttons together.
Any links you include within a button group now line up visually with the buttons.
Read more about button groups on the Design System’s button page.
This was added in pull request #2114: Add button groups for use in cookie banner.
You can now make table captions larger or smaller by applying the govuk-table__caption--xl
, govuk-table__caption--l
, govuk-table__caption--m
or govuk-table__caption--s
classes.
This was added in pull request #2048: Add modifiers for table captions.
We’ve made fixes to GOV.UK Frontend in the following pull requests:
Changelog
3.10.2 (Patch release)
We’ve made fixes to the fixtures you can use to check your HTML matches GOV.UK Frontend.
These changes were made in the following pull requests:
There are no other changes to GOV.UK Frontend in this release.
Changelog
3.10.1 (Patch release)
We’ve made fixes to GOV.UK Frontend in the following pull requests: