GOV.UK Frontend v2.8.0

Considerations for fixed components such as modals

We have been made aware that the change to force scroll bars to appear at all times can change the behaviour of some components such as modals.

If you're using your own components that rely on the overflow state of the document (such as modals) you should make sure you test those components when updating to this version.

🎉   Highlights

This release:

• improves the experience for users using phones with non‑rectangular displays (such as those with notches)
• introduces a new button enhancement to try and prevent 'double clicks' firing two click events
• makes error messages more explicit for screen reader users
• fixes an issue where the content 'jumps around' in browsers that resize the viewport when displaying scrollbars
• fixes issues with the summary list and inset text components
• allows you to use the attributes option on inputs within the date input component

Thanks to everyone that contributed to this release.

🆕   New features

Enable pattern attribute for input

You can now set the pattern attribute on input fields using the component macros:

{{ govukInput({
  name: "example",
  pattern: "[0-9]*"
}) }}

As well as pattern, custom attributes can also be added on day/month/year inputs (e.g. data-example) shown below:

{{ govukDateInput({
  items: [
    {
      pattern: "[0-9]*",
      attributes: {
        "data-example": "value"
      }
    }
  ]
}) }}

(PR #1172)

Prevent horizontal jump as scrollbars appear

As content vertical height grows (e.g. autocomplete results appear), browsers may add scroll bars causing the page to jump horizontally in position.

To avoid this, re-introduce fix from GOV.UK Template:
#1204

(PR #1230)

Accommodate camera notches on new devices (iPhone X, Google Pixel 3 etc)

On newer devices with "camera notches", browsers reserve a safe area in landscape orientation (known as pillarboxing) so content isn't obscured.

To avoid this, support has been added for viewport-fit=cover as shown here:

https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Thanks to @colinrotherham for contributing this feature.

(PR #1176)

Prefix error messages with a visually hidden "Error:" to make it clearer to users of assistive technologies

To help users of some assistive technologies, like screen readers, the error message component now includes a hidden 'Error:' prefix before the message.

If you have error messages written in another language then you'll need to translate the 'Error' prefix.

(PR #1221)

Prevent accidental multiple submissions of forms

If a user double clicks a submit button in a form, we debounce this event and ignore the second click.

HTML data attribute:

<button class="govuk-button" data-prevent-double-click="true">
  Submit
</button>

Nunjucks macro:

{{ govukButton({
  text: "Submit",
  preventDoubleClick: true
}) }}

Thanks to @quis for contributing this feature.

(PR #1018)

🔧   Fixes

Ensure that files within the core, objects and overrides layers can be imported individually

Unlike components, the files within these layers did not previously import their dependencies (for example, most of them require the govuk-exports mixin but did not import it).

We've also added tests to ensure that files within these layers can be imported and rendered to CSS without erroring, which should catch this in the future.

Thanks to Alasdair McLeay for originally raising a PR to fix this.

(PR #1235)

Ensure inset component does not misalign nested components

Thanks to Paul Hayes for raising this issue.

(PR #1232)

Improve word wrapping in summary list component

Thanks to Edward Horsford and Lee Kowalkowski for their help on this one.

Also thanks to Malcolm Butler for exploring a previous version of this fix.

(PR #1220)