Skip to content

GOV.UK Frontend v4.1.0
Compare
Choose a tag to compare
@domoscargin domoscargin released this 18 May 12:11
· 5352 commits to main since this release
v4.1.0
137b806
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

New features

Import GOV.UK Frontend JavaScript as ECMAScript (ES) modules

You can now import our component JavaScript into your service as ES modules, if you're using a bundler.

This change allows you to import only the JavaScript you need, and helps reduce duplication of polyfills.

Because we're shipping ES modules in addition to how we currently publish our component JavaScript, this change is backwards compatible. You will not be required to make any changes unless you want to.

If you want to import using ES modules, we recommend you only use import to import the JavaScript for components you're using in your service. For example:

import { SkipLink, Radios } from 'govuk-frontend'

var $skipLink = document.querySelector('[data-module="govuk-skip-link"]')
if ($skipLink) {
  new SkipLink($skipLink).init()
}

var $radios = document.querySelectorAll('[data-module="govuk-radios]')
if ($radios) {
  for (var i = 0; i < $radios.length; i++) {
    new Radios($radios[i]).init()
  }
}

If you need to import all of GOV.UK Frontend's components, then use the initAll function to initialise them:

import { initAll } from 'govuk-frontend'
initAll()

Depending on the bundler you use, you may also need to make changes to your JavaScript bundler configuration file. You can read more in our installation instructions about importing JavaScript using a bundler.

This was added in pull request #2586: Publish our JavaScript as ES modules alongside Universal Module Definition (UMD).

Recommended changes

We've recently made some non-breaking changes to GOV.UK Frontend. Implementing these changes will make your service work better.

Remove aria-live from the character count component

If you're not using the Nunjucks macros, remove the aria-live attribute from the character count message element. This element's content no longer updates, as we've moved the live counter functionality to a new element injected by JavaScript.

This change was introduced in pull request #2577: Refactor character count to inject new element.

Remove pattern from the date input component

If you're not using the Nunjucks macros, remove pattern="[0-9]*" from each of the date input's elements.

We originally added the pattern attribute to make numeric keypad functionality the default functionality in Safari on iOS. However, we no longer need to use it, as the inputmode attribute provides this functionality for newer Safari versions.

This change was introduced in pull request #2599: Remove pattern attribute from date input component.

Fixes

We've made the following fixes in pull request #2577: Refactor character count to inject new element:

  • fix character count message being repeated twice by screen readers
  • fix character count hint text being announced as part of the count message
  • fix multiple outdated character count messages being announced at once
  • fix character count message being announced when input length is below a defined threshold

We’ve also made fixes in the following pull requests:

Assets 3
Loading