To install this version with npm, run npm install govuk-frontend@5.9.0. You can also find more information about how to stay up to date in our documentation.
New features
Use our improved File upload component
We've added a JavaScript enhancement to the File upload component which:
- makes the component easier to use for drag and drop
- allows the text of the component to be translated
- fixes accessibility issues for users of Dragon, a speech recognition software
This improvement is opt-in, as it's a substantial visual change which risks shifting other content on the page.
To enable this improvement for your users, you'll first need to update the markup of your File upload component:
- if you use our Nunjucks macro, using the new
javascriptoption ofgovukFileUpload
{{ govukFileUpload({
id: "file-upload",
name: "photo",
label: {
text: "Upload your photo"
},
javascript: true
}) }}- if you're using HTML, wrapping the
<input type="file">of the File upload markup in a<div class="govuk-drop-zone" data-module="govuk-file-upload">
<div class="govuk-form-group">
<label class="govuk-label" for="file-upload-1">
Upload your photo
</label>
<div class="govuk-drop-zone" data-module="govuk-file-upload">
<input class="govuk-file-upload" id="file-upload" name="photo" type="file">
</div>
</div>If you're importing components individually in your JavaScript, which we recommend for better performance, you'll then need to import and initialise the new FileUpload component.
import {FileUpload} from 'govuk-frontend'
createAll(FileUpload)This change was introduced in pull request #5305: Add progressively enhanced File Upload component
Form control components now have default id attributes
If you're using the included Nunjucks macros, these components now automatically use the value of the name parameter for the id parameter:
- Text input
- Textarea
- Password input
- Character count
- File upload
- Select
You’ll only have to provide the name parameters if they both have the same value.
The Date input component still requires an id attribute.
This change was introduced in pull request #5658: Update form control components to set a default id based on name.
Deprecated features
Move service name and navigation links from the GOV.UK header to Service navigation component
We’ve deprecated the option to show a service name in the GOV.UK header component. This option will be removed from the GOV.UK header in the next breaking release of GOV.UK Frontend.
We recommend updating your service to use the Service navigation component as soon as possible.
Previously, we deprecated the option to show navigation links in the GOV.UK header component. This option will be removed as well, along with the GOV.UK header JavaScript component, since its only purpose was to make the navigation links responsive.
This change was introduced in pull request #5721: Add deprecation field and deprecate header navigation.
Migrate to the new organisation colour palette
The legacy organisation colour palette has been deprecated and will be removed in the next major version.
If your service uses the organisation colour palette, make sure that things still look as expected with the $govuk-new-organisation-colours feature flag enabled.
This change was introduced in pull request #5627: Deprecate legacy organisation colour palette.
Fixes
We've made fixes to GOV.UK Frontend in the following pull requests:
- #5628: Add focused error state to Character count - thanks to @edwardhorsford for reporting this issue
- #5717: Fix prototype kit sass import path - thanks to @joelanman
- #5720: Fix summary card actions appearance when there are lots of links
- #5728: Prevent menu button being overlaid at high zoom levels - thanks to @govindmalurwardwp for reporting this issue
Additional thanks to @colinrotherham for:
#5607: Fix compiler error "does not satisfy the constraint 'ObjectNested'"
#5239: Consider JSDoc @import for non-exported types
