Bump govuk-frontend from 4.7.0 to 5.3.1

[dependabot]

Bumps govuk-frontend from 4.7.0 to 5.3.1.

Release notes

Sourced from govuk-frontend's releases.

GOV.UK Frontend v5.3.1

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

Fixes

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

• #4906: Update the icon in the warning text component to match the defined text colour and background colour, rather than always being white on black
• #4919: Use canvas colour for cookie banner over hardcoded grey
• #4899: Remove indents from conditional reveals in radios and checkboxes
• #4935: Fix password input button unexpectedly stretching
• #4936: Fix skip link underline being removed when global styles are enabled
• #4938: Fix attributes option ignoring values passed from the safe filter

GOV.UK Frontend v5.3.0

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

New features

Use the Password input component to help users accessibly enter passwords

The Password input component allows users to choose:

• whether their passwords are visible or not
• to enter their passwords in plain text

This helps users use longer and more complex passwords without needing to remember what they've already typed.

This change was introduced in [pull request #4442: Create password input component](alphagov/govuk-frontend#4442). Thanks to @​andysellick for the original contribution.

Recommended changes

Update the HTML for the Character count component

We've updated the HTML for the Character count component. The component wrapper data-module="govuk-character-count" and its form group class="govuk-form-group" are now combined as the same <div>. The hint text used as the count message now appears directly after the <textarea>.

If you're not using Nunjucks macros, then you should:

• move all classes and attributes from the form group <div> to the component wrapper <div>
• remove the opening <div> and closing </div> tags used by the form group
• check the count message is now directly after the <textarea>

The following example shows some HTML and the difference once it’s updated.

HTML before:

<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
  <div class="govuk-form-group">
    <!-- // Label, hint, error and textarea -->
</tr></table> 

... (truncated)

Changelog

Sourced from govuk-frontend's changelog.

5.3.1 (Fix release)

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

Fixes

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

• #4906: Update the icon in the warning text component to match the defined text colour and background colour, rather than always being white on black
• #4919: Use canvas colour for cookie banner over hardcoded grey
• #4899: Remove indents from conditional reveals in radios and checkboxes
• #4935: Fix password input button unexpectedly stretching
• #4936: Fix skip link underline being removed when global styles are enabled
• #4938: Fix attributes option ignoring values passed from the safe filter

5.3.0 (Feature release)

To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.

New features

Use the Password input component to help users accessibly enter passwords

The Password input component allows users to choose:

• whether their passwords are visible or not
• to enter their passwords in plain text

This helps users use longer and more complex passwords without needing to remember what they've already typed.

This change was introduced in [pull request #4442: Create password input component](alphagov/govuk-frontend#4442). Thanks to @​andysellick for the original contribution.

Recommended changes

Update the HTML for the Character count component

We've updated the HTML for the Character count component. The component wrapper data-module="govuk-character-count" and its form group class="govuk-form-group" are now combined as the same <div>. The hint text used as the count message now appears directly after the <textarea>.

If you're not using Nunjucks macros, then you should:

• move all classes and attributes from the form group <div> to the component wrapper <div>
• remove the opening <div> and closing </div> tags used by the form group
• check the count message is now directly after the <textarea>

The following example shows some HTML and the difference once it’s updated.

HTML before:

<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
</tr></table> 

... (truncated)

Commits

• e30c841 Merge pull request #4941 from alphagov/release-5.3.1
• ddc2c9e Release v5.3.1
• 4d35a49 Merge pull request #4939 from alphagov/romaricpascal-patch-1
• 6c22c7b Update title of PR for fix to attributes option
• e1b5611 Merge pull request #4938 from alphagov/fix-safe-attributes
• fe7a019 Add test for values passed via safe filter
• 4e473eb Update changelog
• 5547e41 Fix govukAttributes macro not outputting values from the safe filter
• 1871898 Merge pull request #3387 from alphagov/contribution-docs-component-config
• 78b0795 Update doc to account for more recent JS changes
• Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

---

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

[dependabot]

Superseded by #793.