Remove ƒ typo in fieldset example

…tern page

…tern page and compress it to save space

…table-pattern

update image to generic journey on the check a service is suitable pa…

Add latest blog posts April 2022

…n/moment-2.29.2

Bump moment from 2.24.0 to 2.29.2

Node.js v14 has been in maintenance mode from 19 October 2021. v16 is the active LTS version.

This in turns updates NPM to v8, meaning our lockfile has change to [`lockfileVersion` 2](https://docs.npmjs.com/cli/v8/configuring-npm/package-lock-json#lockfileversion)

This is an internal change that affects development, testing and deployment.

If a user has previously installed locally using Node 14 and lower on their M1 machine, they will encounter `node-sass` errors when running `npm install` after pulling this commit.

This adds documentation to deal with those errors.

This should only affect developers.

Update Node to Active LTS version v16 (Gallium)

We've installed @metalsmith/sass which uses sass (Dart Sass)
under the hood instead.

Move the existing sass config to @metalsmith/sass syntax (uses loadPaths
instead of includePaths)

Set the `quietDeps` flag to true to suppress sass  deprecation warnings for
division (/) and any future deprecations coming from GOV.UK Frontend.

Dart Sass wasn't able to resolve the import for 'example-init', which
we use within our component example sass.

Telling it to look in 'src/stylesheets' to resolve imports, so it can find
this file.

Update Metalsmith and move to Dart Sass

We've updated Metalsmith and moved to Dart Sass, so this issue no longer applies (see alphagov#2150)

Remove node-sass on node v16 troubleshooting docs

This aims to make the difference between the `class` and the link text clearer, particularly for people relatively new to HTML.

Add new team member

Put county field back in address pattern and update guidance

…tent-text-input

Add placeholder text info to text input guidance

Add implementation advice to skip link guidance

…ormat

Add subheadings to text input guidance

Make help text advice clearer in fieldset guidance

Replace double quotes with singles in example

Draft: National Insurance number formatting

Added myself to the team member list

Co-authored-by: Kimberly Grey <kimberly.grey@digital.cabinet-office.gov.uk>

Co-authored-by: Calvin Lau <77630796+calvin-lau-sig7@users.noreply.github.com>

Update design-system-team.md.njk

…art-2

adding format guidance for National Insurance number

The ‘back to top’ link takes users to the #top anchor point, which is currently before the navigation but after the ‘skip to main content’ link.

This means you can no longer skip past the navs etc (as per WCAG 2.1 2.4.1 Bypass Blocks [1]) unless you know to press shift + tab to go backwards in the tab order.

Insetead, we want the 'back to top' link to take the user to the very top of the page, so that the next tab will take them to ‘Skip to main content’ (or the cookie banner, if it’s not been dismissed).

We also considered taking the user to the start of `#main` [2], bypassing all of the navigation, but opted instead to move the `#top` anchor to be the very first thing because:

1. The back to top link was introduced in alphagov#687, when we moved from the side navigation and the main content being fixed, independently scrollable panes. This change meant that the side navigation no longer remained within the viewport.

It seems that the intent at the time was that the back to top link would bring the side navigation back into view, rather than providing a convenient way for the user to get back to the top of the main content.

2. Linking to #main makes it harder for users who have to get back to the navigation:

> If you're using a screen reader you could jump between landmarks using hot keys, but if you're just using a keyboard you're kinda just left with the tab key. Maybe I'm missing something, but the only options I could see to get back to the nav would be:
>
> - use TAB to go all the way through the content and footer content until you eventually get back to the top of the page
> - use back to top to get to the top of the main, and then use SHIFT+TAB to reverse through the nav menu
> - refresh the page and use TAB

3. We think users would expect to see the header when using the ‘Back to top’ link, especially if they were aiming for the navigation.

[1]: https://www.w3.org/TR/WCAG21/#bypass-blocks
[2]: alphagov#1561 (comment)

Closes alphagov#1561

Explain issues with client side validation

…stent

Make layout name consistent throughout guidance

This proposed update:

- adds links to relevant information on privacy notices, cookie pages and accessibility statements
- clarifies copyright and licensing information

Related issues:

alphagov#1225
alphagov#1306

…ntend-4.1.0

Bump govuk-frontend to 4.1.0

…ount-guidance

Update character count guidance to match new implementation

The GOV.UK Frontend ES modules don't make the common (e.g: `nodeListForEach`)
function available to import. We've made this decision intentionally as we never
really intended for `nodeListForEach` to be something we provided.

This introduces a helper.js file which contains `nodeListForEach`. Switch our
JS files to use that helper, rather than the one from GOV.UK Frontend.

Use ESM modules from GOV.UK Frontend

Update Design System website for v4.1.0

…t-red-border

Explain that red border depends on exceeding limit

…-content

Add accurate content for email field char limit

-  error message
 - textarea
 - text input
 - character count (including error example)

…less

Replace instances of 'fewer' with 'less' when referring to characters

Move #top anchor to before the skip link

Update guidance on footer component

actions/setup-node v2.5.0 and above support reading a .nvmrc file itself [[1]].
This lets us simplify our code.

[1]: https://github.com/actions/setup-node/releases/tag/v2.5.0

…de-version-file

Use node-version-file input to specify node version in GitHub Actions

…ding

Make validation guidance language more consistent

 Change contact panel headings to reflect the type of page they're on

…ples

Update link text in examples

…nity-tab

Update team page on Design System site

Change cookie button text from 'Hide this message' to
'Hide cookie message' to provide context to any users using
assistive tech navigating out of context.

Update cookie hide button to be more descriptive

…raphy-example

Make link text in example reflect guidance

…kiplink-header-footer

Add info on default components in page template

…aire-team

Add Claire to team page

Remove last line on the Payment Card details page, which refers to the performance platform. This platform no longer exists.

Remove last line about performance platform

add a hint to the select to help users understand the options

Bump govuk-frontend to v4.2.0

Iterate content and add headings for examples

Fix typo for heading level

Fix headings

Add guidance for pagination component

Iterate content and add headings for examples

Fix typo for heading level

Fix headings

Apply suggestions from tech writer review

Co-authored-by: EoinShaughnessy <72507742+EoinShaughnessy@users.noreply.github.com>

Update pagination guidance

Updated guidance to:

- cover issues raised by working group
- clarify use case for different types of pagination - and when to use 'continue' button and back link instead

Minor edits for dashes and contractions

Tweaking paragraph breaks

Remove section about saying "page" in labels

By default, "Previous" and "next" do not include "page" so this section is no longer needed