'Back to top' link moves focus after the 'skip to main content link' but before the navigation #1561

abbott567 · 2021-03-08T12:39:41Z

Hi everyone. I forked the design system for our accessibility manual, and I have a query about the back-to-top link.

I've copied the way it works in the design system, which is to give the pane wrapper the id of top and then use #top as the href.
However, the sequence of elements in the layout is:

<body>
  <skip-link>
  <#top>
    <header>
    <nav>
    <subnav>
    <main>

This means when you use the back to top link, you're now at the top of the page above all of the navigational elements, but you're still under the skip-link which jumps you to the <main> tag. It means you can no longer skip past the navs etc for WCAG 2.4.1 bypass blocks unless you know to press shift + tab to go one link up from the element #top.

It feels like the back to top link should jump to the top of the body, this way the skip-link would still be accessible in a logical reading order.

The text was updated successfully, but these errors were encountered:

edwardhorsford · 2021-03-08T16:05:18Z

@abbott567 I wonder if it should take you to main - basically the same as the skip link in function.

abbott567 · 2021-03-08T16:43:22Z

@edwardhorsford Yeah, I think if it went back to the top of the main or back to the top of the body those would make sense. But back to "not quite the top" feels like it could be disorientating.

36degrees · 2021-11-09T15:43:05Z

Thanks for raising, @abbott567. I've prototyped the two options suggested so far. I believe either would resolve this issue…

@christopherthomasdesign @CharlotteDowns any thoughts on which of these makes more sense?

Moving the `#top` anchor to before the skip link

Activating the 'back to top' link takes the user to the very top of the page:

The next tab takes the user to the 'skip to main content' link:

Changing the target of the 'back to top' link to `#main-content`

This is the same place that the 'Skip to main content' link takes users to.

Activating the 'back to top' link takes the user to the start of the content, after the heading:

The next tab takes the user to the first interactive control within the guidance on that page:

christopherthomasdesign · 2021-11-09T16:17:16Z

I think option 2. IMO the context of a 'back to top' link is usually within the main body of a page, as opposed to before the nav etc. I know it's all one web page, but persistent elements like navigation maybe sit outside of how I'd think about a page. That's just my interpretation though, I don't fully understand the impact each would have on users of different assistive tech.

jbuller · 2021-11-10T12:09:06Z

Going to #main feels sensible to me, as going to the top of the page can be achieved in other ways.

In some cases 'Back to contents list' or similar might be more appropriate.
Maybe if such a link Is deemed necessary it implies a contents list is needed too?

If you'd been linked into the middle of a page though it wouldn't be going 'Back' so maybe '[Up to] List of Contents' ?

abbott567 · 2021-11-30T20:51:52Z

I think @jbuller is onto something there. Back to top is a bit subjective.

I took it literally like "back to top" was going to the top of the rendered page which would be the start of the <body>, which is why it seemed weird that it was under the skip link. However, I do acknowledge that my brain is overly technical a lot of the time so it's unlikely this would be a common thought process.

I think either of the suggestions by @36degrees would work better than the current solution. Though I do think the second option could be slightly more frustrating if you're actually trying to get back to the navigation menu from midway through the page.

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

jbuller · 2021-11-30T22:37:23Z

[NVDA Ctrl+] Home too but I guess not on all (mobile) keyboards

jbuller · 2021-12-03T10:47:22Z

More on the same topic https://www.digitala11y.com/scroll-to-top-where-should-the-focus-land/

36degrees · 2022-03-16T10:47:59Z

I've been digging in to the history of the back to top link to try and understand what we actually intended it to do.

The back to top link was introduced in #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.

The description for that PR says:

We have created a new back to top component that will return you to the navigation, since some of our pages are long and no longer have the navigation available as you scroll.

So, it seems like 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.

It's hard for us to know whether our intent matches with a user's expectation of what the back to top link should behave, or what it's for, but based on this I think it makes more sense to go with 'option 1' and return the user to the very top of the page. That seems to provide the 'best of both worlds' as the user can still choose to bypass the navigation by using the skip link, if they were aiming to get back to the top of the content.

This seems to fit with @abbott567's thoughts about the second option potentially being more frustrating for users aiming to get back to the navigation.

Thoughts?

jbuller · 2022-03-22T14:21:24Z

I still like my rationale for going to #main - at least for an imaginary '(Up to) Contents list' link.
However if I ask myself: "Do you expect to see the header when I use 'Back to top' the answer is yes, especially if I was aiming for the navigation. If it didn't I might well scroll up to make sure I'm at the top.

jbuller · 2022-03-24T18:20:49Z

Salient point from a discussion on an accessibility forum:

shortcut keys like Home or Ctrl+Home, while they do scroll the page to the top, they don't move your focus to the top. That is, if my keyboard focus is in the middle of the page and I hit Home and then Tab, my focus won't start at the top of the page.

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. Move the #top anchor to before the skip link (and cookie banner), so that activating the 'back to top' link takes the user to the very top of the page, and 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 #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]: #1561 (comment) Closes #1561

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). The HTML spec hard-codes `#top` as ‘the top of the HTML document’ (unless there is an element with the `id` or `name` of `top`) [2] so remove `id=“top”` from the main element and rely on that behavior. We also considered taking the user to the start of `#main` [3], 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 #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]: https://html.spec.whatwg.org/multipage/browsing-the-web.html#the-indicated-part-of-the-document [3]: #1561 (comment) Closes #1561

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 #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]: #1561 (comment) Closes #1561

* Update Task List pattern to show it is being worked on This aims to give people greater visibility over the work that is currently being done on this pattern and component. Also updates the research section to add some additional known issues based on research gathered by the cross-government collaboration. * Fix typo Co-authored-by: Paul Hayes <[email protected]> * Link homepage to Home Office Design System * First draft Co-Authored-By: Chris Hill-Scott <[email protected]> Co-Authored-By: Calvin Lau <[email protected]> * Add new draft after working group review * Refinements Co-Authored-By: Calvin Lau <[email protected]> * Final review from team and working group Co-Authored-By: Calvin Lau <[email protected]> Co-Authored-By: EoinShaughnessy <[email protected]> * Empty commit to kick off build * Fix typo * Add Ast to team list * Update src/design-system-team.md.njk Co-authored-by: Vanita Barrett-Smith <[email protected]> * Changed field labels to 'Address line 1' and 'Address line 2' This change did three things: 1. Stopped the second field label being invisible 2. Added 'optional' to second field label 3. Made the labels 'Address line 1' and 'Address line 2' * Add message about co-design work Fix HTML in status message instead of Markdown Apply content tweak to message Co-Authored-By: Chris Ballantine-Thomas <[email protected]> * Update for April 2021, new patterns Minor tweak Tweak * address fieldset is now aligned with the new address fields * Bump moment from 2.24.0 to 2.29.2 Bumps [moment](https://github.com/moment/moment) from 2.24.0 to 2.29.2. - [Release notes](https://github.com/moment/moment/releases) - [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md) - [Commits](moment/moment@2.24.0...2.29.2) --- updated-dependencies: - dependency-name: moment dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * Update html label to text within macro * Put county field back in address pattern and update guidance * update image to generic journey on the check a service is suitable pattern page * Bump urijs from 1.19.10 to 1.19.11 Bumps [urijs](https://github.com/medialize/URI.js) from 1.19.10 to 1.19.11. - [Release notes](https://github.com/medialize/URI.js/releases) - [Changelog](https://github.com/medialize/URI.js/blob/gh-pages/CHANGELOG.md) - [Commits](medialize/URI.js@v1.19.10...v1.19.11) --- updated-dependencies: - dependency-name: urijs dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * Remove ƒ typo in fieldset example * Fix autocomplete values in multiple address example * Add latest blog posts April 2022 * Fix dashes and punctuation * update image to make it neater on the check a service is suitable pattern page * update image to make it neater on the check a service is suitable pattern page and compress it to save space * Update Node to Active LTS version v16 (Gallium) 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. * Add troubleshooting documentation for Node 16, node-sass and M1 machines 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 metalsmith to latest version (2.4.2) * Install @metalsmith/sass * Uninstall metalsmith-sass and node-sass We've installed @metalsmith/sass which uses sass (Dart Sass) under the hood instead. * Set `quietDeps` to true and move config to @metalsmith/sass syntax 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. * Add 'src/stylesheets' to sass loadPaths 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. * Remove node-sass on node v16 troubleshooting docs We've updated Metalsmith and moved to Dart Sass, so this issue no longer applies (see alphagov#2150) * Add new team member * Make help text advice clearer in fieldset guidance * Add placeholder text info to text input guidance * Revert town or city field to use address-level2 * Explain issues with client side validation * Add implementation advice to skip link guidance * Add subheadings to text input guidance * Replace double quotes with singles in example * Updating error example for National Insurance number to use correct format * adding format guidance for National Insurance number * Update design-system-team.md.njk Added myself to the team member list * Update src/design-system-team.md.njk Co-authored-by: Kimberly Grey <[email protected]> * Update src/patterns/national-insurance-numbers/index.md.njk Co-authored-by: Calvin Lau <[email protected]> * Move #top anchor to before the skip link 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 * Make layout name consistent throughout guidance * Update guidance on footer component 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 * Update character count guidance to match new implementation * Minor edits for consistency * Clarify and add accessibility information * Update What's New section for v4.1.0 * Update roadmap * Add context to JAWS issue * Bump govuk-frontend to 4.1.0 * Add nodeListForEach helper directly into design system 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. * Replace individual JS imports with ES modules initAll * Explain that red border depends on exceeding limit * Add accurate content for email field char limit * Replace in guidance and examples - error message - textarea - text input - character count (including error example) * Bump actions/setup-node from v2 to v3 * Use node-version-file input to specify node version 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 * Make validation guidance language more consistent * Remove patterns * Update package-lock.json * Remove GDS community text Co-authored-by: Frankie Roberto <[email protected]> Co-authored-by: Paul Hayes <[email protected]> Co-authored-by: EoinShaughnessy <[email protected]> Co-authored-by: EoinShaughnessy <[email protected]> Co-authored-by: Chris Hill-Scott <[email protected]> Co-authored-by: Calvin Lau <[email protected]> Co-authored-by: Chris Thomas <[email protected]> Co-authored-by: Kimberly Grey <[email protected]> Co-authored-by: Vanita Barrett-Smith <[email protected]> Co-authored-by: terrysimpson99 <[email protected]> Co-authored-by: Chris Ballantine-Thomas <[email protected]> Co-authored-by: Ciandelle Scollan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ciandelle Scollan <[email protected]> Co-authored-by: Oliver Byford <[email protected]> Co-authored-by: domoscargin <[email protected]> Co-authored-by: ameliaphil <[email protected]> Co-authored-by: Colin Oakley <[email protected]> Co-authored-by: Ruth Hammond <[email protected]> Co-authored-by: Colin <[email protected]> Co-authored-by: StephenGill <[email protected]> Co-authored-by: Laurence de Bruxelles <[email protected]>

* Update Task List pattern to show it is being worked on This aims to give people greater visibility over the work that is currently being done on this pattern and component. Also updates the research section to add some additional known issues based on research gathered by the cross-government collaboration. * Fix typo Co-authored-by: Paul Hayes <[email protected]> * Link homepage to Home Office Design System * First draft Co-Authored-By: Chris Hill-Scott <[email protected]> Co-Authored-By: Calvin Lau <[email protected]> * Add new draft after working group review * Refinements Co-Authored-By: Calvin Lau <[email protected]> * Final review from team and working group Co-Authored-By: Calvin Lau <[email protected]> Co-Authored-By: EoinShaughnessy <[email protected]> * Empty commit to kick off build * Fix typo * Add Ast to team list * Update src/design-system-team.md.njk Co-authored-by: Vanita Barrett-Smith <[email protected]> * Changed field labels to 'Address line 1' and 'Address line 2' This change did three things: 1. Stopped the second field label being invisible 2. Added 'optional' to second field label 3. Made the labels 'Address line 1' and 'Address line 2' * Add message about co-design work Fix HTML in status message instead of Markdown Apply content tweak to message Co-Authored-By: Chris Ballantine-Thomas <[email protected]> * Update for April 2021, new patterns Minor tweak Tweak * address fieldset is now aligned with the new address fields * Bump moment from 2.24.0 to 2.29.2 Bumps [moment](https://github.com/moment/moment) from 2.24.0 to 2.29.2. - [Release notes](https://github.com/moment/moment/releases) - [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md) - [Commits](moment/moment@2.24.0...2.29.2) --- updated-dependencies: - dependency-name: moment dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * Update html label to text within macro * Put county field back in address pattern and update guidance * update image to generic journey on the check a service is suitable pattern page * Bump urijs from 1.19.10 to 1.19.11 Bumps [urijs](https://github.com/medialize/URI.js) from 1.19.10 to 1.19.11. - [Release notes](https://github.com/medialize/URI.js/releases) - [Changelog](https://github.com/medialize/URI.js/blob/gh-pages/CHANGELOG.md) - [Commits](medialize/URI.js@v1.19.10...v1.19.11) --- updated-dependencies: - dependency-name: urijs dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * Remove ƒ typo in fieldset example * Fix autocomplete values in multiple address example * Add latest blog posts April 2022 * Fix dashes and punctuation * update image to make it neater on the check a service is suitable pattern page * update image to make it neater on the check a service is suitable pattern page and compress it to save space * Update Node to Active LTS version v16 (Gallium) 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. * Add troubleshooting documentation for Node 16, node-sass and M1 machines 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 metalsmith to latest version (2.4.2) * Install @metalsmith/sass * Uninstall metalsmith-sass and node-sass We've installed @metalsmith/sass which uses sass (Dart Sass) under the hood instead. * Set `quietDeps` to true and move config to @metalsmith/sass syntax 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. * Add 'src/stylesheets' to sass loadPaths 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. * Remove node-sass on node v16 troubleshooting docs We've updated Metalsmith and moved to Dart Sass, so this issue no longer applies (see alphagov#2150) * Update link text in examples 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 * Make help text advice clearer in fieldset guidance * Add placeholder text info to text input guidance * Revert town or city field to use address-level2 * Explain issues with client side validation * Add implementation advice to skip link guidance * Add subheadings to text input guidance * Replace double quotes with singles in example * Updating error example for National Insurance number to use correct format * adding format guidance for National Insurance number * Update design-system-team.md.njk Added myself to the team member list * Update src/design-system-team.md.njk Co-authored-by: Kimberly Grey <[email protected]> * Update src/patterns/national-insurance-numbers/index.md.njk Co-authored-by: Calvin Lau <[email protected]> * Move #top anchor to before the skip link 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 * Make layout name consistent throughout guidance * Update guidance on footer component 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 * Update character count guidance to match new implementation * Minor edits for consistency * Clarify and add accessibility information * Update What's New section for v4.1.0 * Update roadmap * Add context to JAWS issue * Bump govuk-frontend to 4.1.0 * Add nodeListForEach helper directly into design system 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. * Replace individual JS imports with ES modules initAll * Explain that red border depends on exceeding limit * Add accurate content for email field char limit * Replace in guidance and examples - error message - textarea - text input - character count (including error example) * Bump actions/setup-node from v2 to v3 * Use node-version-file input to specify node version 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 * Make validation guidance language more consistent * Add info on default components in page template * Change contact panel headings to reflect the kind of page they're on * Make link text in example reflect guidance * Reorder link text * Update team page on Design System site * Update cookie hide button to be more descriptive 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. * Add Claire to team page * Fix em-dash * Remove last line about performance platform Remove last line on the Payment Card details page, which refers to the performance platform. This platform no longer exists. * add a hint to the select to help users understand the options * Bump govuk-frontend to v4.2.0 * Add guidance for pagination component 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 <[email protected]> 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 * Remove pagination component from community backlog * Update what's new and roadmap for 4.2.0 * Update roadmap Tidying up and reorganising some of our roadmap items in mid-2022. * Fixed typo on pagination documentation * Add paragraph tag to link example This link example does not include a wrapping element, meaning that some of the text is appearing as default serif text instead of in Transport. As the text above this example states that it is regarding links at the end of sentences or paragraphs, the example shouldn't be negatively affected by the inclusion of a paragraph. * Indent Nunjucks code Attempt to make this file easier to read by indenting Nunjucks code similarly to HTML. * Refactor design system tabs JS * Fix tab not being opened when macro options are linked to * Update test ID and result checks * Check for existence of tabs * Update team member Add Ben to the team * Remove govuk-react-jsx which is no longer supported * Bump terser from 5.7.0 to 5.14.2 Bumps [terser](https://github.com/terser/terser) from 5.7.0 to 5.14.2. - [Release notes](https://github.com/terser/terser/releases) - [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md) - [Commits](https://github.com/terser/terser/commits) --- updated-dependencies: - dependency-name: terser dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * Bump moment from 2.29.2 to 2.29.4 Bumps [moment](https://github.com/moment/moment) from 2.29.2 to 2.29.4. - [Release notes](https://github.com/moment/moment/releases) - [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md) - [Commits](moment/moment@2.29.2...2.29.4) --- updated-dependencies: - dependency-name: moment dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * Apply `this` binding changes from code review Co-authored-by: Oliver Byford <[email protected]> * Refactor getDesktopTab to not use a loop * Bump metalsmith to 2.5.0 * Remove ‘mainstream’ from images guidance Instead, define non-service content by content type and publishing method. As flagged in alphagov/govuk-design-system-backlog#70 (comment): > Mainstream is 2500 pages managed by GDS, but this guidance also applies to all content on www.gov.uk produced by depts, the half a million 'whitehall' pages. Co-authored-by: Calvin Lau <[email protected]> * Use the official core metalsmith postcss plugin Metalsmith is being updated fairly regularly now, and have an [official PostCSS plugin](https://github.com/metalsmith/postcss). We've been blocked on bumping some dependencies because of this (alphagov#2016). I've run `npm build` and there is one small prefixing change in the resulting CSS, but otherwise it's exactly the same. * Only toggle details aria attributes if already set I believe this dates from when the polyfill for the `<details>` element used to be applied in all browsers, and added extra ARIA attributes which always needed to be kept in sync when this script toggled the open state. However, since GOV.UK Frontend v3.1.0 the polyfill now does nothing in browsers that natively support the <details> elements [1]. This means that once these attributes are set on page load, unless the polyfill is running there is nothing to keep them in sync if the user toggles the details element: - `aria-expanded` will always be `true`, potentially causing AT to announce the expanded state incorrectly - `aria-hidden` will always be `false` – although this is likely not an issue as aria-hidden can't make things hidden using display:none 're-appear' in the accessibility tree Instead, only toggle `aria-expanded` if it is already set on the element (which should only happen if the polyfill has run, in which case the browser does not natively support the `<details>` element). We also need to re-introduce the `aria-hidden` attribute removed in 8b53583 as when the polyfill runs it currently adds an `aria-hidden` attribute which means the content inside the `<details>` element will be inaccessible even when opened unless we remove it. Add a comment to try and explain why this code needs to exist. [1]: alphagov/govuk-frontend#1523 * Bump metalsmith-env to 2.2.0 - Allow storing the environment variables under a metadata[metadatakey] instead of metadata. See opts.metadatakey for more details. - Dependency updates * Use @metalsmith/in-place in favour of metalsmith-in-place Core metalsmith plugin is effectively an updated version of the previous package. v4.5.0 - feat: org migration, core plugin alignment - feat: use metalsmith.match instead of multimatch, drop Node < 10 support - feat: better jsdoc typehints & defaults mgmt - fix: don't mistake dots in folder paths for extensions * Use @metalsmith/layouts in favour of metalsmith-layouts The core plugin replaces the old one. v2.5.1 - pass the transformed list of files to metalsmith.match… - Merge pull request alphagov#184 from doteco/master - pass the transformed list of files to metalsmith.match so that renamed files can be matched v2.5.0 - use metalsmith.match instead of multimatch - Remove semicolons, run formatting. Remove devDependencies - feat: add JSdocs, named plugin function - Dependencies: updates debug to 4.3.4 - Drop Node < 12 support 2.4.0 - Return when done - Improve readme - Align dotfiles, repo with core plugin setup @metalsmith - deps: update dependencies and fix prefer-object-spread * Use @metalsmith/permalinks in favour of metalsmith-permalinks Core plugin replaces old package. Changelog: https://github.com/metalsmith/permalinks/blob/master/CHANGELOG.md * Bump metalsmith-uglify to v2.4.1 Patch bump to update some dependencies. * Bump @metalsmith/sass from 1.0.0 to 1.0.1 Changes: metalsmith/sass@1.0.0...1.0.1 * Adjust link text to GOV.UK image guidance * Allow start buttons to be forms Although unusual, there are a few valid circumstances where you might want to submit a form when pressing the start button. A situation that came up recently was we wanted to record analytics on when a user started a service by recording the time that a user presses the start button, without client-side JavaScript. The implementation for this involved using the Rails `button_to` helper which generates a form which POSTs to a route and includes a single `submit` button. I think this is a valid use case of the start button, so I suggest changing the wording on this to be slightly more open to the idea of the start button not being a link. * Update link to task list Sass file This file has changed location in recent changes to the Prototype Kit, this updates the URL to no longer 404. * Override auto-linking with period character * Move width override classes from spacing to layout Overriding the width of an element really has nothing to do with spacing, so this guidance make more sense as part of the layout guidance, alongside the documentation about the grid system which uses the same ‘one third’, ‘one half’ concepts. * Tweak width override guidance for new context Remove the link to the grid system which is now on the same page and is introduced before the override classes Remove a reference to the spacing override classes which doesn’t make sense now that they’re on a separate page and the user might not have read about them already. * Update links to width override classes * Remove link to archived ethnic groups pattern The ethnic groups pattern was archived in alphagov#1582. * Remove broken link in page template guidance The ‘variables’ and ‘blocks’ tables were merged in alphagov#1311 but this link was missed. * Remove redundant classes As noted in alphagov/govuk-frontend#2733, these classes don’t actually do anything. * Remove extra closing `</tr>` tag * Swap small and large screen sizes in spacing table Putting the smaller sizes on the left-hand size seems more logical and fits better with a mobile-first approach. * Flip order of spacing scale in table Going from the smallest size to the largest size just makes more sense. * Fix mismatched heading tags in navigation * Document the static spacing scale Fixes alphagov#1210. * Improve headings for override classes and helpers * Move section on overrides last Try to encourage users who are writing their own CSS to use the helpers that we provide rather than the override classes, by making it more likely they’ll read about them first. * Update link to my talk for more accessible blog Allows more options to access it as I've made it into a blog post too. * Tweaks to guidance on helpers * Tweaks to guidance on override classes * Bump autoprefixer to 10.4.7 One major version bump. Version 10: - Uses PostCSS 8 - Removes support for Node.js 6, 8 and 11 - PostCSS is now a peerDependency None of which affects our installation. * Replace sass-lint with stylelint * Add basic stylelint config The resulting CSS appears to be the same after running `npm run build`. * Fix SCSS linting errors * Update documentation * Replace metalsmith-tagcleaner with a custom marked renderer * Bump marked and jstransformer packages Makes sense to bump these as part of this work, since they're being used under the hood to transform our files. jstransformer-nunjucks Changelog: https://github.com/jstransformers/jstransformer-nunjucks/blob/master/CHANGELOG.md - The major version bump simply adds the option to use custom Nunjucks loaders jstransformer-marked Changelog: https://github.com/jstransformers/jstransformer-marked/blob/master/HISTORY.md * Apply suggestions from code review Co-authored-by: Calvin Lau <[email protected]> * Update logo in header to match GOV.UK Frontend Mirror the changes that have been made to the Header component in GOV.UK Frontend [1] including: - using conditional comments for header fallback PNG rather than an `<image` element [2] - camel-casing the SVG attributes [3] Fixes alphagov#2280. [1]: https://github.com/alphagov/govuk-frontend/blob/aceb8d9798d8d2fc28357f1dda62d1a5e4a2eb98/src/govuk/components/header/template.njk [2]: alphagov/govuk-frontend#2229 [3]: alphagov/govuk-frontend#1838 * Change to more up to date link GSS appear to have moved to a new site - the link was pointing at the old (and out of date) archived standard. * Remove examples for archived ethnic groups pattern The ‘Ask users for ethnic groups’ pattern was archived in alphagov#1582 [1] (dd77104) when the guidance was moved into the ‘Ask users for equality information’ pattern. New examples were created for the equality information pattern, but the existing examples and the SVG included in the guidance were not removed from the repo. Remove the examples and the SVG previously included in the archived ethnic groups pattern. [1]: alphagov#1582 * Use subclass for marked renderer This better matches how things are done in Marked, and allows us to user `super` for cases other than images. Co-authored-by: Oliver Byford <[email protected]> * Fix markdown lists on pagination component page When there's no empty line before the list the Markdown renderer is treating it like it's part of the preceding paragraph. * Revert "Replace metalsmith-tagcleaner with a custom marked renderer" * Update src/patterns/equality-information/index.md.njk Co-authored-by: Calvin Lau <[email protected]> * SCSS linting issue Co-authored-by: Frankie Roberto <[email protected]> Co-authored-by: Paul Hayes <[email protected]> Co-authored-by: EoinShaughnessy <[email protected]> Co-authored-by: EoinShaughnessy <[email protected]> Co-authored-by: Chris Hill-Scott <[email protected]> Co-authored-by: Calvin Lau <[email protected]> Co-authored-by: Chris Thomas <[email protected]> Co-authored-by: Kimberly Grey <[email protected]> Co-authored-by: Vanita Barrett-Smith <[email protected]> Co-authored-by: terrysimpson99 <[email protected]> Co-authored-by: Chris Ballantine-Thomas <[email protected]> Co-authored-by: Ciandelle Scollan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ciandelle Scollan <[email protected]> Co-authored-by: Oliver Byford <[email protected]> Co-authored-by: domoscargin <[email protected]> Co-authored-by: ameliaphil <[email protected]> Co-authored-by: Colin Oakley <[email protected]> Co-authored-by: Ruth Hammond <[email protected]> Co-authored-by: Colin <[email protected]> Co-authored-by: StephenGill <[email protected]> Co-authored-by: Laurence de Bruxelles <[email protected]> Co-authored-by: CAAshworth <[email protected]> Co-authored-by: owenatgov <[email protected]> Co-authored-by: Robert Deniszczyc <[email protected]> Co-authored-by: NoraGDS <[email protected]> Co-authored-by: Andy Mantell <[email protected]> Co-authored-by: Thomas Leese <[email protected]> Co-authored-by: Nick Colley <[email protected]> Co-authored-by: Ed Horsford <[email protected]> Co-authored-by: Peter Yates <[email protected]>

* Remove ƒ typo in fieldset example * Fix autocomplete values in multiple address example * Add latest blog posts April 2022 * Fix dashes and punctuation * update image to make it neater on the check a service is suitable pattern page * update image to make it neater on the check a service is suitable pattern page and compress it to save space * Update Node to Active LTS version v16 (Gallium) 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. * Add troubleshooting documentation for Node 16, node-sass and M1 machines 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 metalsmith to latest version (2.4.2) * Install @metalsmith/sass * Uninstall metalsmith-sass and node-sass We've installed @metalsmith/sass which uses sass (Dart Sass) under the hood instead. * Set `quietDeps` to true and move config to @metalsmith/sass syntax 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. * Add 'src/stylesheets' to sass loadPaths 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. * Remove node-sass on node v16 troubleshooting docs We've updated Metalsmith and moved to Dart Sass, so this issue no longer applies (see alphagov#2150) * Update link text in examples 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 * Make help text advice clearer in fieldset guidance * Add placeholder text info to text input guidance * Revert town or city field to use address-level2 * Explain issues with client side validation * Add implementation advice to skip link guidance * Add subheadings to text input guidance * Replace double quotes with singles in example * Updating error example for National Insurance number to use correct format * adding format guidance for National Insurance number * Update design-system-team.md.njk Added myself to the team member list * Update src/design-system-team.md.njk Co-authored-by: Kimberly Grey <[email protected]> * Update src/patterns/national-insurance-numbers/index.md.njk Co-authored-by: Calvin Lau <[email protected]> * Move #top anchor to before the skip link 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 * Make layout name consistent throughout guidance * Update guidance on footer component 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 * Update character count guidance to match new implementation * Minor edits for consistency * Clarify and add accessibility information * Update What's New section for v4.1.0 * Update roadmap * Add context to JAWS issue * Bump govuk-frontend to 4.1.0 * Add nodeListForEach helper directly into design system 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. * Replace individual JS imports with ES modules initAll * Explain that red border depends on exceeding limit * Add accurate content for email field char limit * Replace in guidance and examples - error message - textarea - text input - character count (including error example) * Bump actions/setup-node from v2 to v3 * Use node-version-file input to specify node version 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 * Make validation guidance language more consistent * Add info on default components in page template * Change contact panel headings to reflect the kind of page they're on * Make link text in example reflect guidance * Reorder link text * Update team page on Design System site * Update cookie hide button to be more descriptive 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. * Add Claire to team page * Fix em-dash * Remove last line about performance platform Remove last line on the Payment Card details page, which refers to the performance platform. This platform no longer exists. * add a hint to the select to help users understand the options * Bump govuk-frontend to v4.2.0 * Add guidance for pagination component 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 <[email protected]> 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 * Remove pagination component from community backlog * Update what's new and roadmap for 4.2.0 * Update roadmap Tidying up and reorganising some of our roadmap items in mid-2022. * Fixed typo on pagination documentation * Add paragraph tag to link example This link example does not include a wrapping element, meaning that some of the text is appearing as default serif text instead of in Transport. As the text above this example states that it is regarding links at the end of sentences or paragraphs, the example shouldn't be negatively affected by the inclusion of a paragraph. * Indent Nunjucks code Attempt to make this file easier to read by indenting Nunjucks code similarly to HTML. * Refactor design system tabs JS * Fix tab not being opened when macro options are linked to * Update test ID and result checks * Check for existence of tabs * Update team member Add Ben to the team * Remove govuk-react-jsx which is no longer supported * Bump terser from 5.7.0 to 5.14.2 Bumps [terser](https://github.com/terser/terser) from 5.7.0 to 5.14.2. - [Release notes](https://github.com/terser/terser/releases) - [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md) - [Commits](https://github.com/terser/terser/commits) --- updated-dependencies: - dependency-name: terser dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * Bump moment from 2.29.2 to 2.29.4 Bumps [moment](https://github.com/moment/moment) from 2.29.2 to 2.29.4. - [Release notes](https://github.com/moment/moment/releases) - [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md) - [Commits](moment/moment@2.29.2...2.29.4) --- updated-dependencies: - dependency-name: moment dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * Apply `this` binding changes from code review Co-authored-by: Oliver Byford <[email protected]> * Refactor getDesktopTab to not use a loop * Bump metalsmith to 2.5.0 * Remove ‘mainstream’ from images guidance Instead, define non-service content by content type and publishing method. As flagged in alphagov/govuk-design-system-backlog#70 (comment): > Mainstream is 2500 pages managed by GDS, but this guidance also applies to all content on www.gov.uk produced by depts, the half a million 'whitehall' pages. Co-authored-by: Calvin Lau <[email protected]> * Use the official core metalsmith postcss plugin Metalsmith is being updated fairly regularly now, and have an [official PostCSS plugin](https://github.com/metalsmith/postcss). We've been blocked on bumping some dependencies because of this (alphagov#2016). I've run `npm build` and there is one small prefixing change in the resulting CSS, but otherwise it's exactly the same. * Only toggle details aria attributes if already set I believe this dates from when the polyfill for the `<details>` element used to be applied in all browsers, and added extra ARIA attributes which always needed to be kept in sync when this script toggled the open state. However, since GOV.UK Frontend v3.1.0 the polyfill now does nothing in browsers that natively support the <details> elements [1]. This means that once these attributes are set on page load, unless the polyfill is running there is nothing to keep them in sync if the user toggles the details element: - `aria-expanded` will always be `true`, potentially causing AT to announce the expanded state incorrectly - `aria-hidden` will always be `false` – although this is likely not an issue as aria-hidden can't make things hidden using display:none 're-appear' in the accessibility tree Instead, only toggle `aria-expanded` if it is already set on the element (which should only happen if the polyfill has run, in which case the browser does not natively support the `<details>` element). We also need to re-introduce the `aria-hidden` attribute removed in 8b53583 as when the polyfill runs it currently adds an `aria-hidden` attribute which means the content inside the `<details>` element will be inaccessible even when opened unless we remove it. Add a comment to try and explain why this code needs to exist. [1]: alphagov/govuk-frontend#1523 * Bump metalsmith-env to 2.2.0 - Allow storing the environment variables under a metadata[metadatakey] instead of metadata. See opts.metadatakey for more details. - Dependency updates * Use @metalsmith/in-place in favour of metalsmith-in-place Core metalsmith plugin is effectively an updated version of the previous package. v4.5.0 - feat: org migration, core plugin alignment - feat: use metalsmith.match instead of multimatch, drop Node < 10 support - feat: better jsdoc typehints & defaults mgmt - fix: don't mistake dots in folder paths for extensions * Use @metalsmith/layouts in favour of metalsmith-layouts The core plugin replaces the old one. v2.5.1 - pass the transformed list of files to metalsmith.match… - Merge pull request alphagov#184 from doteco/master - pass the transformed list of files to metalsmith.match so that renamed files can be matched v2.5.0 - use metalsmith.match instead of multimatch - Remove semicolons, run formatting. Remove devDependencies - feat: add JSdocs, named plugin function - Dependencies: updates debug to 4.3.4 - Drop Node < 12 support 2.4.0 - Return when done - Improve readme - Align dotfiles, repo with core plugin setup @metalsmith - deps: update dependencies and fix prefer-object-spread * Use @metalsmith/permalinks in favour of metalsmith-permalinks Core plugin replaces old package. Changelog: https://github.com/metalsmith/permalinks/blob/master/CHANGELOG.md * Bump metalsmith-uglify to v2.4.1 Patch bump to update some dependencies. * Bump @metalsmith/sass from 1.0.0 to 1.0.1 Changes: metalsmith/sass@1.0.0...1.0.1 * Adjust link text to GOV.UK image guidance * Allow start buttons to be forms Although unusual, there are a few valid circumstances where you might want to submit a form when pressing the start button. A situation that came up recently was we wanted to record analytics on when a user started a service by recording the time that a user presses the start button, without client-side JavaScript. The implementation for this involved using the Rails `button_to` helper which generates a form which POSTs to a route and includes a single `submit` button. I think this is a valid use case of the start button, so I suggest changing the wording on this to be slightly more open to the idea of the start button not being a link. * Update link to task list Sass file This file has changed location in recent changes to the Prototype Kit, this updates the URL to no longer 404. * Override auto-linking with period character * Move width override classes from spacing to layout Overriding the width of an element really has nothing to do with spacing, so this guidance make more sense as part of the layout guidance, alongside the documentation about the grid system which uses the same ‘one third’, ‘one half’ concepts. * Tweak width override guidance for new context Remove the link to the grid system which is now on the same page and is introduced before the override classes Remove a reference to the spacing override classes which doesn’t make sense now that they’re on a separate page and the user might not have read about them already. * Update links to width override classes * Remove link to archived ethnic groups pattern The ethnic groups pattern was archived in alphagov#1582. * Remove broken link in page template guidance The ‘variables’ and ‘blocks’ tables were merged in alphagov#1311 but this link was missed. * Remove redundant classes As noted in alphagov/govuk-frontend#2733, these classes don’t actually do anything. * Remove extra closing `</tr>` tag * Swap small and large screen sizes in spacing table Putting the smaller sizes on the left-hand size seems more logical and fits better with a mobile-first approach. * Flip order of spacing scale in table Going from the smallest size to the largest size just makes more sense. * Fix mismatched heading tags in navigation * Document the static spacing scale Fixes alphagov#1210. * Improve headings for override classes and helpers * Move section on overrides last Try to encourage users who are writing their own CSS to use the helpers that we provide rather than the override classes, by making it more likely they’ll read about them first. * Update link to my talk for more accessible blog Allows more options to access it as I've made it into a blog post too. * Tweaks to guidance on helpers * Tweaks to guidance on override classes * Bump autoprefixer to 10.4.7 One major version bump. Version 10: - Uses PostCSS 8 - Removes support for Node.js 6, 8 and 11 - PostCSS is now a peerDependency None of which affects our installation. * Replace sass-lint with stylelint * Add basic stylelint config The resulting CSS appears to be the same after running `npm run build`. * Fix SCSS linting errors * Update documentation * Replace metalsmith-tagcleaner with a custom marked renderer * Bump marked and jstransformer packages Makes sense to bump these as part of this work, since they're being used under the hood to transform our files. jstransformer-nunjucks Changelog: https://github.com/jstransformers/jstransformer-nunjucks/blob/master/CHANGELOG.md - The major version bump simply adds the option to use custom Nunjucks loaders jstransformer-marked Changelog: https://github.com/jstransformers/jstransformer-marked/blob/master/HISTORY.md * Apply suggestions from code review Co-authored-by: Calvin Lau <[email protected]> * Update logo in header to match GOV.UK Frontend Mirror the changes that have been made to the Header component in GOV.UK Frontend [1] including: - using conditional comments for header fallback PNG rather than an `<image` element [2] - camel-casing the SVG attributes [3] Fixes alphagov#2280. [1]: https://github.com/alphagov/govuk-frontend/blob/aceb8d9798d8d2fc28357f1dda62d1a5e4a2eb98/src/govuk/components/header/template.njk [2]: alphagov/govuk-frontend#2229 [3]: alphagov/govuk-frontend#1838 * Document static spacing override classes Static spacing override classes are being introduced to GOV.UK Frontend (alphagov/govuk-frontend#2672). Document the new classes so that users know how they work, and how they compare to the existing responsive spacing override classes. * Change to more up to date link GSS appear to have moved to a new site - the link was pointing at the old (and out of date) archived standard. * Remove examples for archived ethnic groups pattern The ‘Ask users for ethnic groups’ pattern was archived in alphagov#1582 [1] (dd77104) when the guidance was moved into the ‘Ask users for equality information’ pattern. New examples were created for the equality information pattern, but the existing examples and the SVG included in the guidance were not removed from the repo. Remove the examples and the SVG previously included in the archived ethnic groups pattern. [1]: alphagov#1582 * Use subclass for marked renderer This better matches how things are done in Marked, and allows us to user `super` for cases other than images. Co-authored-by: Oliver Byford <[email protected]> * Fix markdown lists on pagination component page When there's no empty line before the list the Markdown renderer is treating it like it's part of the preceding paragraph. * Revert "Replace metalsmith-tagcleaner with a custom marked renderer" * Update src/patterns/equality-information/index.md.njk Co-authored-by: Calvin Lau <[email protected]> * Fix matchMedia event listener in IE / Safari < 14 IE 10/11 and Safari >= 5.1 < 14 support `window.matchMedia` but do not support `MediaQueryList.addEventListener`. Instead we have to use the non-standard (and deprecated) `MediaQueryList.addListener`, which only takes one argument which is the callback function to run when the media query status changes [1]. Test for the presence of the `MediaQueryList.addEventListener` method and then use whichever method is appropriate for the browser. [1]: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener Co-authored-by: Owen Jones <[email protected]> * Enable aliases for section headings * Alias section break as hr * Update What's New for v4.3.0 * Update govuk-frontend to 4.3.0 * Document `opengraphImageUrl` page template option Document the new `opengraphImageUrl` page template option, added in alphagov/govuk-frontend#2673. Update the documentation for the `assetUrl` option to make it slightly more generic and remove the recommendation to override by adding another meta tag to the `head` block as users should use the new `opengraphImageUrl` instead. * Retry failed tests The "see no evil, hear no evil" approach. This does not address the flaky tests themselves, but sets `jest.retryTimes` to 3, rerunning failed tests and greatly increasing the likelihood of a CI test task passing. This is speedier (and more automatic) than rerunning a full CI task again, so might be enough if the flakiness isn't easily addressable. * Fix linting issues * Update team members list * Reference cookie banner in updating guidance We now have a cookie banner component, so we should link to it from this guide. * Add ‘measuring the value’ talk to community page * Update what's new with DSDay blog post Tweak line breaks to look better Add full stop * Update date Co-authored-by: NoraGDS <[email protected]> * Shorten call-to-action * Update what's new for v4.3.1 * Update to GOV.UK Frontend v4.3.1 * Add in link and download to Mural file Interaction Designer, Clare Brown ([email protected]) has created an editable Mural template of GOV.UK Design System Flow Diagram for all designers to use. This will help designers map out their service and/or user journeys at a high-level. The template is based off designs that were created in Miro and hosted on GitHub which can be found here: https://github.com/paulmsmith/govuk-designsystem-flow-diagram-miro. File needs to be hosted for download, uploaded and have instructions on how people can use the file. * Remove unused tables option The `tables` option was removed in Marked v0.7.0 [1] so this doesn’t do anything any more. [1]: https://github.com/markedjs/marked/releases/tag/v0.7.0 * Remove unused gfm: true from marked config The documentation for the `pedantic` option [1] says: > If true, conform to the original markdown.pl as much as possible. Don't fix original markdown bugs or behavior. Turns off and overrides gfm. Verified that this option is doing nothing by comparing the build output with and without this setting, and there is no difference (other than the obfuscated email address on the community page, which is non-deterministic and so changes with every build): ``` $ diff -r deploy/public-marked-main deploy/public diff -r deploy/public-marked-main/community/design-system-working-group/index.html deploy/public/community/design-system-working-group/index.html 1045c1045 < <p>In the meantime, if you are interested in joining the working group email the Design System team at <a href="mailto:g&alphagov#111;v&alphagov#117;k-de&alphagov#115;&alphagov#105;g&alphagov#110;-&alphagov#115;y&alphagov#115;&alphagov#116;em-&alphagov#115;uppo&alphagov#114;t@dig&alphagov#105;&alphagov#116;al.cab&alphagov#105;&alphagov#110;et-off&alphagov#105;ce.gov.&alphagov#117;k">g&alphagov#111;v&alphagov#117;k-de&alphagov#115;&alphagov#105;g&alphagov#110;-&alphagov#115;y&alphagov#115;&alphagov#116;em-&alphagov#115;uppo&alphagov#114;t@dig&alphagov#105;&alphagov#116;al.cab&alphagov#105;&alphagov#110;et-off&alphagov#105;ce.gov.&alphagov#117;k</a>.</p> --- > <p>In the meantime, if you are interested in joining the working group email the Design System team at <a href="mailto:g&alphagov#111;&alphagov#118;&alphagov#117;k-des&alphagov#105;gn-&alphagov#115;ys&alphagov#116;e&alphagov#109;-&alphagov#115;u&alphagov#112;&alphagov#112;o&alphagov#114;&alphagov#116;@d&alphagov#105;g&alphagov#105;&alphagov#116;al.cabi&alphagov#110;e&alphagov#116;-office.g&alphagov#111;&alphagov#118;.&alphagov#117;&alphagov#107;">g&alphagov#111;&alphagov#118;&alphagov#117;k-des&alphagov#105;gn-&alphagov#115;ys&alphagov#116;e&alphagov#109;-&alphagov#115;u&alphagov#112;&alphagov#112;o&alphagov#114;&alphagov#116;@d&alphagov#105;g&alphagov#105;&alphagov#116;al.cabi&alphagov#110;e&alphagov#116;-office.g&alphagov#111;&alphagov#118;.&alphagov#117;&alphagov#107;</a>.</p> ``` [1]: https://marked.js.org/using_advanced#options * Add border to 'preview' / 'archive' banner We moved the banner when refactoring the nav in 2b6a27b. Now that the banner is not between the header and the navigation, it makes sense to add the bottom border back to separate the banner from the page content. Keep the `--no-border` modifier which we use on the homepage when the banner is followed immediately by the masthead. * Remove redundant app-pane wrapper When the Design System had an independently scrollable nav and body regions, we used a 'app-pane' flexbox wrapper around the whole site so that the header could be fixed in place above both scrollable regions. When we simplified the layout and lost the indepedantly scrollable regions we didn't tidy up the wrapper, which isn't really doing anything any more (other than the flex layout causing weird issues like the banner width issue seen in 6c83fde). Remove the unneccesary wrapper and its classes. * Remove custom phase banner styles The `width: 100%` is no longer needed that we're not in a flex context and can be removed. As it turns out, the margins are being overridden by the `app-width-container` class anyway – and if they weren't being overriden, they'd mean that the phase banner would be flush up against the viewport edges on mobile, which isn't what we want. * Remove redundant app-pane__content wrappers The `app-pane__content` class isn't doing anything useful in these layouts and can be removed. * Split 'category nav' out from app pane CSS This doesn't really have anything to do with the rest of the 'split pane' CSS, so split it out into its own 'component'. Whilst we're at it, give it a better name and some context to help explain what it's for and why we need it. * Rename app-pane classes * Fix implementation for non-flexbox browsers * Rename 'pane' to 'split-pane' * Remove unused CSS * Stop recommending pattern=[0-9]* on number inputs We previously recommended using `pattern="[0-9]*"` on number inputs to prompt iOS to display the numeric keypad. This has been unnecessary since Safari 12.2, when support for the standardised `inputmode` attribute was added to Safari. We stopped using the `pattern` attribute on the date input component [1] in v4.1.0 (released in May 2022) as the proportion of GOV.UK visitors using versions of iOS 12.x and below had fallen to 0.08% of total traffic. [1]: alphagov/govuk-frontend#2599 Co-authored-by: Calvin Lau <[email protected]> * Remove pattern attribute from examples See previous commit for details. * Remove use of govuk-exports We need to use govuk-exports in GOV.UK Frontend as files can be imported multiple files but we only ever want the CSS to be outputted once. As we're in control of how and where Sass in the Design System is imported, we don't need to worry about this and don't need to use the exports function. * Remove Sass and class that don't do anything * Fix more Sass that doesn't do anything The govuk-visually-hidden has `position: absolute` marked as `!important` and therefore it overrides this, so it can't be doing anything. * Remove unused app-phase-banner class * Update package-lock.json * Remove new GOV.UK pages Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: christopherthomasdesign <[email protected]> Co-authored-by: Calvin Lau <[email protected]> Co-authored-by: Ciandelle Scollan <[email protected]> Co-authored-by: Ciandelle Scollan <[email protected]> Co-authored-by: domoscargin <[email protected]> Co-authored-by: Vanita Barrett <[email protected]> Co-authored-by: Frankie Roberto <[email protected]> Co-authored-by: ameliaphil <[email protected]> Co-authored-by: EoinShaughnessy <[email protected]> Co-authored-by: EoinShaughnessy <[email protected]> Co-authored-by: Colin Oakley <[email protected]> Co-authored-by: Ruth Hammond <[email protected]> Co-authored-by: Kimberly Grey <[email protected]> Co-authored-by: Colin <[email protected]> Co-authored-by: Oliver Byford <[email protected]> Co-authored-by: StephenGill <[email protected]> Co-authored-by: Laurence de Bruxelles <[email protected]> Co-authored-by: CAAshworth <[email protected]> Co-authored-by: owenatgov <[email protected]> Co-authored-by: Robert Deniszczyc <[email protected]> Co-authored-by: NoraGDS <[email protected]> Co-authored-by: Andy Mantell <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Thomas Leese <[email protected]> Co-authored-by: Nick Colley <[email protected]> Co-authored-by: Ed Horsford <[email protected]> Co-authored-by: Peter Yates <[email protected]> Co-authored-by: Owen Jones <[email protected]> Co-authored-by: Nick Colley <[email protected]> Co-authored-by: Clare Brown <[email protected]>

* V1 (#1) * Updates to package.json * Change brand colour and typeface, remove crown * Change all repo URLs from alphagov to LandRegistry * README title update * Remove crown from footer * Phase banner added * HMLR-specific views * HMLR-specific CSS * Custom HMLR HTML and CSS * Simpler header * Procfile added * GOV.UK -> HMLR * Small content update * GOV.UK -> HMLR * GOV.UK -> HMLR * Added example accessibility section * Add Umami tracking * Add HMLR favicon * Comment out cookie banner * Updated guidelines regarding typography * added advice for casework * Added initial CODEOWNERS * Update CODEOWNERS * initial content for styles, components and patterns (#5) * remove unneccessary pages except typography * temporary template for sections with no subnav * styles advice and temprary template for hiding subnav * syles help * components and patterns landing pages * clarify who to speak to * Updated getting started page (#6) * Started work on 'Get Started' section * Updated content in Getting Started Page Co-authored-by: AJ <[email protected]> * Added content to accessibilty section (#4) * Created new legal requirements page * new page * new page to contact me * Added new Assisted Digital content * Intro to accessibility page changes * What you can do page changes * accessibility page changes * added new page and content * Content added to accessibility new page * New content added * added links and text * rearranged content * updating content and links * links added * links added * links added * new page and links * edited changes * edited pages * Case change * Remove dash * Moved a11y index page to root of dir * Fixed content, removed MS Word encoded characters * Fixed link * deleted contact me Co-authored-by: Gaynor Williams <[email protected]> * Update the Design System Steering Group list (#7) * Updated list of Design System team members * Removed the GDS code owners * Add James to the list of steering group members * Include more pages in search * Remove deploy folder * Update canonical and sitemap URLs * Update icons * Remove deploy action * Fixed SCSS style * General site updates (#8) * Fixed layout for no-nav page * Update a11y statement * Update cookie page * Update get in touch page * "GOV.UK Design System" -> "HMLR Design System" * A11y statement links * Update homepage * Update community pages * Removed all component sub pages * Removed all pattern sub pages * Update link on error page * Get started prototyping page cleaned down * Styles page to show nav to typography * Non-nav pages don't need navigation logic * Contact links * What's new updated * Disable cookie banner * Fix tests and temporarily disable unwanted tests * Temporary emails * Added more pages to accessibility (#10) * Created new legal requirements page * new page * new page to contact me * Added new Assisted Digital content * Intro to accessibility page changes * What you can do page changes * accessibility page changes * added new page and content * Content added to accessibility new page * New content added * added links and text * rearranged content * updating content and links * links added * links added * links added * new page and links * edited changes * edited pages * Case change * Remove dash * Moved a11y index page to root of dir * Fixed content, removed MS Word encoded characters * Fixed link * deleted contact me * updated and split content over more pages * Created more pages and added links * updated logical order of alphabetical * deleted page what more you can do * added 1 word * AT page content added * AT page updated * AT changes * added text to link to accessibility checklist * Capital T for Heading * unneccesary capitals and 1 spelling mistake * new line added * Upper case at start of sentence. * Update src/accessibility/videos-and-recordings/index.md.njk Co-authored-by: Andrew Hosgood <[email protected]> * resolved conversations Co-authored-by: AJ <[email protected]> Co-authored-by: Andrew Hosgood <[email protected]> * Fixing updates from upstream * Banner for merge requests * New footer * Use the GDS phase banner * Use pull request number in phase banner * Phase banner links * Content/getting started (#14) * Started work on 'Get Started' section * Updated content in Getting Started Page * Getting started changes 25.3.22 * Updates * Case fix Co-authored-by: Adam Flay <[email protected]> * Content/accessibility (#13) * Created new legal requirements page * new page * new page to contact me * Added new Assisted Digital content * Intro to accessibility page changes * What you can do page changes * accessibility page changes * added new page and content * Content added to accessibility new page * New content added * added links and text * rearranged content * updating content and links * links added * links added * links added * new page and links * edited changes * edited pages * Case change * Remove dash * Moved a11y index page to root of dir * Fixed content, removed MS Word encoded characters * Fixed link * deleted contact me * updated and split content over more pages * Created more pages and added links * updated logical order of alphabetical * deleted page what more you can do * added 1 word * AT page content added * AT page updated * AT changes * added text to link to accessibility checklist * Capital T for Heading * unneccesary capitals and 1 spelling mistake * new line added * Upper case at start of sentence. * Update src/accessibility/videos-and-recordings/index.md.njk Co-authored-by: Andrew Hosgood <[email protected]> * resolved conversations * deleted 1 line * added in 90 to 100 * new link added to disproportionate burden * space added per AJs comment * full stop added * added text re marking images * More info added to accessibility statement page * full stop removed * 1 word deleted * My changes are not reflected in the design system * AJs suggestions added * brackets and fullstop amended * brackets Co-authored-by: AJ <[email protected]> Co-authored-by: Andrew Hosgood <[email protected]> * Update more references to GDS * Fixed links page * Code tidy * Code tidy * Added accessibility checklist * Remove upload artifact step from action * Remove artifact variables from action * Update intro to accessibility checklist * AT -> assistive technologies * Update design system team email (#16) * Previous design system explanation (#15) * Previous design system explanation * Update link text * Fix spelling mistake * Remove duplicated content (#17) * Fix/duplicated getting started content (#18) * Remove duplicated content * Re-insert feedback into getting started section * Addressing comment r.e. getting started links * Addressing comment r.e. getting started feedback * Content/content guidelines (#21) * Adding a new content section * content pages added to design system * Re-introduce includeInSearch * WIP: Change to Nunjucks accordion template * from html to nunjucks, h2 and description amends * Added missing space in page markup * Remove second import line Co-authored-by: AJ <[email protected]> * Don't run tests in Windows (#23) * Remove link to x-Gov HMLR Slack channel (#20) * Remove analytics for launch (#19) * Feature/upstream changes (#22) * Update Task List pattern to show it is being worked on This aims to give people greater visibility over the work that is currently being done on this pattern and component. Also updates the research section to add some additional known issues based on research gathered by the cross-government collaboration. * Fix typo Co-authored-by: Paul Hayes <[email protected]> * Link homepage to Home Office Design System * First draft Co-Authored-By: Chris Hill-Scott <[email protected]> Co-Authored-By: Calvin Lau <[email protected]> * Add new draft after working group review * Refinements Co-Authored-By: Calvin Lau <[email protected]> * Final review from team and working group Co-Authored-By: Calvin Lau <[email protected]> Co-Authored-By: EoinShaughnessy <[email protected]> * Empty commit to kick off build * Fix typo * Add Ast to team list * Update src/design-system-team.md.njk Co-authored-by: Vanita Barrett-Smith <[email protected]> * Changed field labels to 'Address line 1' and 'Address line 2' This change did three things: 1. Stopped the second field label being invisible 2. Added 'optional' to second field label 3. Made the labels 'Address line 1' and 'Address line 2' * Add message about co-design work Fix HTML in status message instead of Markdown Apply content tweak to message Co-Authored-By: Chris Ballantine-Thomas <[email protected]> * Update for April 2021, new patterns Minor tweak Tweak * address fieldset is now aligned with the new address fields * Bump moment from 2.24.0 to 2.29.2 Bumps [moment](https://github.com/moment/moment) from 2.24.0 to 2.29.2. - [Release notes](https://github.com/moment/moment/releases) - [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md) - [Commits](https://github.com/moment/moment/compare/2.24.0...2.29.2) --- updated-dependencies: - dependency-name: moment dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * Update html label to text within macro * Put county field back in address pattern and update guidance * update image to generic journey on the check a service is suitable pattern page * Bump urijs from 1.19.10 to 1.19.11 Bumps [urijs](https://github.com/medialize/URI.js) from 1.19.10 to 1.19.11. - [Release notes](https://github.com/medialize/URI.js/releases) - [Changelog](https://github.com/medialize/URI.js/blob/gh-pages/CHANGELOG.md) - [Commits](https://github.com/medialize/URI.js/compare/v1.19.10...v1.19.11) --- updated-dependencies: - dependency-name: urijs dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * Remove ƒ typo in fieldset example * Fix autocomplete values in multiple address example * Add latest blog posts April 2022 * Fix dashes and punctuation * update image to make it neater on the check a service is suitable pattern page * update image to make it neater on the check a service is suitable pattern page and compress it to save space * Update Node to Active LTS version v16 (Gallium) 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. * Add troubleshooting documentation for Node 16, node-sass and M1 machines 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 metalsmith to latest version (2.4.2) * Install @metalsmith/sass * Uninstall metalsmith-sass and node-sass We've installed @metalsmith/sass which uses sass (Dart Sass) under the hood instead. * Set `quietDeps` to true and move config to @metalsmith/sass syntax 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. * Add 'src/stylesheets' to sass loadPaths 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. * Remove node-sass on node v16 troubleshooting docs We've updated Metalsmith and moved to Dart Sass, so this issue no longer applies (see https://github.com/alphagov/govuk-design-system/pull/2150) * Add new team member * Make help text advice clearer in fieldset guidance * Add placeholder text info to text input guidance * Revert town or city field to use address-level2 * Explain issues with client side validation * Add implementation advice to skip link guidance * Add subheadings to text input guidance * Replace double quotes with singles in example * Updating error example for National Insurance number to use correct format * adding format guidance for National Insurance number * Update design-system-team.md.njk Added myself to the team member list * Update src/design-system-team.md.njk Co-authored-by: Kimberly Grey <[email protected]> * Update src/patterns/national-insurance-numbers/index.md.njk Co-authored-by: Calvin Lau <[email protected]> * Move #top anchor to before the skip link 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 #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]: https://github.com/alphagov/govuk-design-system/issues/1561#issuecomment-964273009 Closes #1561 * Make layout name consistent throughout guidance * Update guidance on footer component This proposed update: - adds links to relevant information on privacy notices, cookie pages and accessibility statements - clarifies copyright and licensing information Related issues: https://github.com/alphagov/govuk-design-system/issues/1225 https://github.com/alphagov/govuk-design-system/issues/1306 * Update character count guidance to match new implementation * Minor edits for consistency * Clarify and add accessibility information * Update What's New section for v4.1.0 * Update roadmap * Add context to JAWS issue * Bump govuk-frontend to 4.1.0 * Add nodeListForEach helper directly into design system 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. * Replace individual JS imports with ES modules initAll * Explain that red border depends on exceeding limit * Add accurate content for email field char limit * Replace in guidance and examples - error message - textarea - text input - character count (including error example) * Bump actions/setup-node from v2 to v3 * Use node-version-file input to specify node version 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 * Make validation guidance language more consistent * Remove patterns * Update package-lock.json * Remove GDS community text Co-authored-by: Frankie Roberto <[email protected]> Co-authored-by: Paul Hayes <[email protected]> Co-authored-by: EoinShaughnessy <[email protected]> Co-authored-by: EoinShaughnessy <[email protected]> Co-authored-by: Chris Hill-Scott <[email protected]> Co-authored-by: Calvin Lau <[email protected]> Co-authored-by: Chris Thomas <[email protected]> Co-authored-by: Kimberly Grey <[email protected]> Co-authored-by: Vanita Barrett-Smith <[email protected]> Co-authored-by: terrysimpson99 <[email protected]> Co-authored-by: Chris Ballantine-Thomas <[email protected]> Co-authored-by: Ciandelle Scollan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ciandelle Scollan <[email protected]> Co-authored-by: Oliver Byford <[email protected]> Co-authored-by: domoscargin <[email protected]> Co-authored-by: ameliaphil <[email protected]> Co-authored-by: Colin Oakley <[email protected]> Co-authored-by: Ruth Hammond <[email protected]> Co-authored-by: Colin <[email protected]> Co-authored-by: StephenGill <[email protected]> Co-authored-by: Laurence de Bruxelles <[email protected]> * Updated URL * HMLR Open Graph logo * Content tweaks to HMLR accessibility statement (#24) * Refactor accessibility section (#25) * patterns homepage first draft (#26) * add table to the components page to match patterns page (#27) Co-authored-by: lruser <[email protected]> * Ensure contact panel is visible in all sections (#28) * Add link to GDS alternative text (#29) * "HMLR" -> "HM Land Registry" (#30) * HMLR -> HM Land Registry * Site header name * "alternative text" links to page anchor * Content/component page styling (#31) * update content on styles front page * update page content based on design system review. Change way we describe designers who work on casework systems, use bullet point guidelines, add HM to Land Registry in relevant places, ensure consistency across the interaction design sections, update any references to Gov to GOV.UK Co-authored-by: lruser <[email protected]> * Content/review and improve (#32) * homepage content * get started - tell people what the design practice design guidance is * homepage correctly say Land Registry * styles page clearer * typography imporved * remove Help imporve this page form all pages in site * full width table for pattern backlog * components table full width * Content/consistency review (#33) * conssitency review on designers who work on casework systems, and actvie voice on typography page * join 2 sentences in bullet point with a '-' and hyphenate front-end as being used as an adjective * make way we say 'more than 1' service in component and backlog tables consistent - remove ';' and replace with 'and' for readability. Switch order of LLC and SFLAPI around to aid readability * fix typo in 'what's new section on homepage Co-authored-by: lruser <[email protected]> * Updated assistive technologies info (#34) * Remove component/pattern tables, add backlog details (#53) * Change advice for typography (#52) * Closes #51 * Start advice for Geo typeface * Geo typography draft * If you need a copy * Updated details on Geo typeface - fixes #49 * Lint fixes * Update Geo example Co-authored-by: Adam Flay <[email protected]> * Updates from GDS (#55) * Update Task List pattern to show it is being worked on This aims to give people greater visibility over the work that is currently being done on this pattern and component. Also updates the research section to add some additional known issues based on research gathered by the cross-government collaboration. * Fix typo Co-authored-by: Paul Hayes <[email protected]> * Link homepage to Home Office Design System * First draft Co-Authored-By: Chris Hill-Scott <[email protected]> Co-Authored-By: Calvin Lau <[email protected]> * Add new draft after working group review * Refinements Co-Authored-By: Calvin Lau <[email protected]> * Final review from team and working group Co-Authored-By: Calvin Lau <[email protected]> Co-Authored-By: EoinShaughnessy <[email protected]> * Empty commit to kick off build * Fix typo * Add Ast to team list * Update src/design-system-team.md.njk Co-authored-by: Vanita Barrett-Smith <[email protected]> * Changed field labels to 'Address line 1' and 'Address line 2' This change did three things: 1. Stopped the second field label being invisible 2. Added 'optional' to second field label 3. Made the labels 'Address line 1' and 'Address line 2' * Add message about co-design work Fix HTML in status message instead of Markdown Apply content tweak to message Co-Authored-By: Chris Ballantine-Thomas <[email protected]> * Update for April 2021, new patterns Minor tweak Tweak * address fieldset is now aligned with the new address fields * Bump moment from 2.24.0 to 2.29.2 Bumps [moment](https://github.com/moment/moment) from 2.24.0 to 2.29.2. - [Release notes](https://github.com/moment/moment/releases) - [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md) - [Commits](https://github.com/moment/moment/compare/2.24.0...2.29.2) --- updated-dependencies: - dependency-name: moment dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * Update html label to text within macro * Put county field back in address pattern and update guidance * update image to generic journey on the check a service is suitable pattern page * Bump urijs from 1.19.10 to 1.19.11 Bumps [urijs](https://github.com/medialize/URI.js) from 1.19.10 to 1.19.11. - [Release notes](https://github.com/medialize/URI.js/releases) - [Changelog](https://github.com/medialize/URI.js/blob/gh-pages/CHANGELOG.md) - [Commits](https://github.com/medialize/URI.js/compare/v1.19.10...v1.19.11) --- updated-dependencies: - dependency-name: urijs dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * Remove ƒ typo in fieldset example * Fix autocomplete values in multiple address example * Add latest blog posts April 2022 * Fix dashes and punctuation * update image to make it neater on the check a service is suitable pattern page * update image to make it neater on the check a service is suitable pattern page and compress it to save space * Update Node to Active LTS version v16 (Gallium) 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. * Add troubleshooting documentation for Node 16, node-sass and M1 machines 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 metalsmith to latest version (2.4.2) * Install @metalsmith/sass * Uninstall metalsmith-sass and node-sass We've installed @metalsmith/sass which uses sass (Dart Sass) under the hood instead. * Set `quietDeps` to true and move config to @metalsmith/sass syntax 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. * Add 'src/stylesheets' to sass loadPaths 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. * Remove node-sass on node v16 troubleshooting docs We've updated Metalsmith and moved to Dart Sass, so this issue no longer applies (see https://github.com/alphagov/govuk-design-system/pull/2150) * Update link text in examples 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 * Make help text advice clearer in fieldset guidance * Add placeholder text info to text input guidance * Revert town or city field to use address-level2 * Explain issues with client side validation * Add implementation advice to skip link guidance * Add subheadings to text input guidance * Replace double quotes with singles in example * Updating error example for National Insurance number to use correct format * adding format guidance for National Insurance number * Update design-system-team.md.njk Added myself to the team member list * Update src/design-system-team.md.njk Co-authored-by: Kimberly Grey <[email protected]> * Update src/patterns/national-insurance-numbers/index.md.njk Co-authored-by: Calvin Lau <[email protected]> * Move #top anchor to before the skip link 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 #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]: https://github.com/alphagov/govuk-design-system/issues/1561#issuecomment-964273009 Closes #1561 * Make layout name consistent throughout guidance * Update guidance on footer component This proposed update: - adds links to relevant information on privacy notices, cookie pages and accessibility statements - clarifies copyright and licensing information Related issues: https://github.com/alphagov/govuk-design-system/issues/1225 https://github.com/alphagov/govuk-design-system/issues/1306 * Update character count guidance to match new implementation * Minor edits for consistency * Clarify and add accessibility information * Update What's New section for v4.1.0 * Update roadmap * Add context to JAWS issue * Bump govuk-frontend to 4.1.0 * Add nodeListForEach helper directly into design system 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. * Replace individual JS imports with ES modules initAll * Explain that red border depends on exceeding limit * Add accurate content for email field char limit * Replace in guidance and examples - error message - textarea - text input - character count (including error example) * Bump actions/setup-node from v2 to v3 * Use node-version-file input to specify node version 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 * Make validation guidance language more consistent * Add info on default components in page template * Change contact panel headings to reflect the kind of page they're on * Make link text in example reflect guidance * Reorder link text * Update team page on Design System site * Update cookie hide button to be more descriptive 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. * Add Claire to team page * Fix em-dash * Remove last line about performance platform Remove last line on the Payment Card details page, which refers to the performance platform. This platform no longer exists. * add a hint to the select to help users understand the options * Bump govuk-frontend to v4.2.0 * Add guidance for pagination component 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 <[email protected]> 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 * Remove pagination component from community backlog * Update what's new and roadmap for 4.2.0 * Update roadmap Tidying up and reorganising some of our roadmap items in mid-2022. * Fixed typo on pagination documentation * Add paragraph tag to link example This link example does not include a wrapping element, meaning that some of the text is appearing as default serif text instead of in Transport. As the text above this example states that it is regarding links at the end of sentences or paragraphs, the example shouldn't be negatively affected by the inclusion of a paragraph. * Indent Nunjucks code Attempt to make this file easier to read by indenting Nunjucks code similarly to HTML. * Refactor design system tabs JS * Fix tab not being opened when macro options are linked to * Update test ID and result checks * Check for existence of tabs * Update team member Add Ben to the team * Remove govuk-react-jsx which is no longer supported * Bump terser from 5.7.0 to 5.14.2 Bumps [terser](https://github.com/terser/terser) from 5.7.0 to 5.14.2. - [Release notes](https://github.com/terser/terser/releases) - [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md) - [Commits](https://github.com/terser/terser/commits) --- updated-dependencies: - dependency-name: terser dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * Bump moment from 2.29.2 to 2.29.4 Bumps [moment](https://github.com/moment/moment) from 2.29.2 to 2.29.4. - [Release notes](https://github.com/moment/moment/releases) - [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md) - [Commits](https://github.com/moment/moment/compare/2.29.2...2.29.4) --- updated-dependencies: - dependency-name: moment dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * Apply `this` binding changes from code review Co-authored-by: Oliver Byford <[email protected]> * Refactor getDesktopTab to not use a loop * Bump metalsmith to 2.5.0 * Remove ‘mainstream’ from images guidance Instead, define non-service content by content type and publishing method. As flagged in https://github.com/alphagov/govuk-design-system-backlog/issues/70#issuecomment-1187335536: > Mainstream is 2500 pages managed by GDS, but this guidance also applies to all content on www.gov.uk produced by depts, the half a million 'whitehall' pages. Co-authored-by: Calvin Lau <[email protected]> * Use the official core metalsmith postcss plugin Metalsmith is being updated fairly regularly now, and have an [official PostCSS plugin](https://github.com/metalsmith/postcss). We've been blocked on bumping some dependencies because of this (#2016). I've run `npm build` and there is one small prefixing change in the resulting CSS, but otherwise it's exactly the same. * Only toggle details aria attributes if already set I believe this dates from when the polyfill for the `<details>` element used to be applied in all browsers, and added extra ARIA attributes which always needed to be kept in sync when this script toggled the open state. However, since GOV.UK Frontend v3.1.0 the polyfill now does nothing in browsers that natively support the <details> elements [1]. This means that once these attributes are set on page load, unless the polyfill is running there is nothing to keep them in sync if the user toggles the details element: - `aria-expanded` will always be `true`, potentially causing AT to announce the expanded state incorrectly - `aria-hidden` will always be `false` – although this is likely not an issue as aria-hidden can't make things hidden using display:none 're-appear' in the accessibility tree Instead, only toggle `aria-expanded` if it is already set on the element (which should only happen if the polyfill has run, in which case the browser does not natively support the `<details>` element). We also need to re-introduce the `aria-hidden` attribute removed in 8b53583 as when the polyfill runs it currently adds an `aria-hidden` attribute which means the content inside the `<details>` element will be inaccessible even when opened unless we remove it. Add a comment to try and explain why this code needs to exist. [1]: https://github.com/alphagov/govuk-frontend/pull/1523 * Bump metalsmith-env to 2.2.0 - Allow storing the environment variables under a metadata[metadatakey] instead of metadata. See opts.metadatakey for more details. - Dependency updates * Use @metalsmith/in-place in favour of metalsmith-in-place Core metalsmith plugin is effectively an updated version of the previous package. v4.5.0 - feat: org migration, core plugin alignment - feat: use metalsmith.match instead of multimatch, drop Node < 10 support - feat: better jsdoc typehints & defaults mgmt - fix: don't mistake dots in folder paths for extensions * Use @metalsmith/layouts in favour of metalsmith-layouts The core plugin replaces the old one. v2.5.1 - pass the transformed list of files to metalsmith.match… - Merge pull request #184 from doteco/master - pass the transformed list of files to metalsmith.match so that renamed files can be matched v2.5.0 - use metalsmith.match instead of multimatch - Remove semicolons, run formatting. Remove devDependencies - feat: add JSdocs, named plugin function - Dependencies: updates debug to 4.3.4 - Drop Node < 12 support 2.4.0 - Return when done - Improve readme - Align dotfiles, repo with core plugin setup @metalsmith - deps: update dependencies and fix prefer-object-spread * Use @metalsmith/permalinks in favour of metalsmith-permalinks Core plugin replaces old package. Changelog: https://github.com/metalsmith/permalinks/blob/master/CHANGELOG.md * Bump metalsmith-uglify to v2.4.1 Patch bump to update some dependencies. * Bump @metalsmith/sass from 1.0.0 to 1.0.1 Changes: https://github.com/metalsmith/sass/compare/1.0.0...1.0.1 * Adjust link text to GOV.UK image guidance * Allow start buttons to be forms Although unusual, there are a few valid circumstances where you might want to submit a form when pressing the start button. A situation that came up recently was we wanted to record analytics on when a user started a service by recording the time that a user presses the start button, without client-side JavaScript. The implementation for this involved using the Rails `button_to` helper which generates a form which POSTs to a route and includes a single `submit` button. I think this is a valid use case of the start button, so I suggest changing the wording on this to be slightly more open to the idea of the start button not being a link. * Update link to task list Sass file This file has changed location in recent changes to the Prototype Kit, this updates the URL to no longer 404. * Override auto-linking with period character * Move width override classes from spacing to layout Overriding the width of an element really has nothing to do with spacing, so this guidance make more sense as part of the layout guidance, alongside the documentation about the grid system which uses the same ‘one third’, ‘one half’ concepts. * Tweak width override guidance for new context Remove the link to the grid system which is now on the same page and is introduced before the override classes Remove a reference to the spacing override classes which doesn’t make sense now that they’re on a separate page and the user might not have read about them already. * Update links to width override classes * Remove link to archived ethnic groups pattern The ethnic groups pattern was archived in #1582. * Remove broken link in page template guidance The ‘variables’ and ‘blocks’ tables were merged in #1311 but this link was missed. * Remove redundant classes As noted in https://github.com/alphagov/govuk-frontend/issues/2733, these classes don’t actually do anything. * Remove extra closing `</tr>` tag * Swap small and large screen sizes in spacing table Putting the smaller sizes on the left-hand size seems more logical and fits better with a mobile-first approach. * Flip order of spacing scale in table Going from the smallest size to the largest size just makes more sense. * Fix mismatched heading tags in navigation * Document the static spacing scale Fixes #1210. * Improve headings for override classes and helpers * Move section on overrides last Try to encourage users who are writing their own CSS to use the helpers that we provide rather than the override classes, by making it more likely they’ll read about them first. * Update link to my talk for more accessible blog Allows more options to access it as I've made it into a blog post too. * Tweaks to guidance on helpers * Tweaks to guidance on override classes * Bump autoprefixer to 10.4.7 One major version bump. Version 10: - Uses PostCSS 8 - Removes support for Node.js 6, 8 and 11 - PostCSS is now a peerDependency None of which affects our installation. * Replace sass-lint with stylelint * Add basic stylelint config The resulting CSS appears to be the same after running `npm run build`. * Fix SCSS linting errors * Update documentation * Replace metalsmith-tagcleaner with a custom marked renderer * Bump marked and jstransformer packages Makes sense to bump these as part of this work, since they're being used under the hood to transform our files. jstransformer-nunjucks Changelog: https://github.com/jstransformers/jstransformer-nunjucks/blob/master/CHANGELOG.md - The major version bump simply adds the option to use custom Nunjucks loaders jstransformer-marked Changelog: https://github.com/jstransformers/jstransformer-marked/blob/master/HISTORY.md * Apply suggestions from code review Co-authored-by: Calvin Lau <[email protected]> * Update logo in header to match GOV.UK Frontend Mirror the changes that have been made to the Header component in GOV.UK Frontend [1] including: - using conditional comments for header fallback PNG rather than an `<image` element [2] - camel-casing the SVG attributes [3] Fixes #2280. [1]: https://github.com/alphagov/govuk-frontend/blob/aceb8d9798d8d2fc28357f1dda62d1a5e4a2eb98/src/govuk/components/header/template.njk [2]: https://github.com/alphagov/govuk-frontend/pull/2229 [3]: https://github.com/alphagov/govuk-frontend/pull/1838 * Change to more up to date link GSS appear to have moved to a new site - the link was pointing at the old (and out of date) archived standard. * Remove examples for archived ethnic groups pattern The ‘Ask users for ethnic groups’ pattern was archived in #1582 [1] (dd77104) when the guidance was moved into the ‘Ask users for equality information’ pattern. New examples were created for the equality information pattern, but the existing examples and the SVG included in the guidance were not removed from the repo. Remove the examples and the SVG previously included in the archived ethnic groups pattern. [1]: https://github.com/alphagov/govuk-design-system/pull/1582 * Use subclass for marked renderer This better matches how things are done in Marked, and allows us to user `super` for cases other than images. Co-authored-by: Oliver Byford <[email protected]> * Fix markdown lists on pagination component page When there's no empty line before the list the Markdown renderer is treating it like it's part of the preceding paragraph. * Revert "Replace metalsmith-tagcleaner with a custom marked renderer" * Update src/patterns/equality-information/index.md.njk Co-authored-by: Calvin Lau <[email protected]> * SCSS linting issue Co-authored-by: Frankie Roberto <[email protected]> Co-authored-by: Paul Hayes <[email protected]> Co-authored-by: EoinShaughnessy <[email protected]> Co-authored-by: EoinShaughnessy <[email protected]> Co-authored-by: Chris Hill-Scott <[email protected]> Co-authored-by: Calvin Lau <[email protected]> Co-authored-by: Chris Thomas <[email protected]> Co-authored-by: Kimberly Grey <[email protected]> Co-authored-by: Vanita Barrett-Smith <[email protected]> Co-authored-by: terrysimpson99 <[email protected]> Co-authored-by: Chris Ballantine-Thomas <[email protected]> Co-authored-by: Ciandelle Scollan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ciandelle Scollan <[email protected]> Co-authored-by: Oliver Byford <[email protected]> Co-authored-by: domoscargin <[email protected]> Co-authored-by: ameliaphil <[email protected]> Co-authored-by: Colin Oakley <[email protected]> Co-authored-by: Ruth Hammond <[email protected]> Co-authored-by: Colin <[email protected]> Co-authored-by: StephenGill <[email protected]> Co-authored-by: Laurence de Bruxelles <[email protected]> Co-authored-by: CAAshworth <[email protected]> Co-authored-by: owenatgov <[email protected]> Co-authored-by: Robert Deniszczyc <[email protected]> Co-authored-by: NoraGDS <[email protected]> Co-authored-by: Andy Mantell <[email protected]> Co-authored-by: Thomas Leese <[email protected]> Co-authored-by: Nick Colley <[email protected]> Co-authored-by: Ed Horsford <[email protected]> Co-authored-by: Peter Yates <[email protected]> * Update/upstream (#60) * Remove ƒ typo in fieldset example * Fix autocomplete values in multiple address example * Add latest blog posts April 2022 * Fix dashes and punctuation * update image to make it neater on the check a service is suitable pattern page * update image to make it neater on the check a service is suitable pattern page and compress it to save space * Update Node to Active LTS version v16 (Gallium) 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. * Add troubleshooting documentation for Node 16, node-sass and M1 machines 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 metalsmith to latest version (2.4.2) * Install @metalsmith/sass * Uninstall metalsmith-sass and node-sass We've installed @metalsmith/sass which uses sass (Dart Sass) under the hood instead. * Set `quietDeps` to true and move config to @metalsmith/sass syntax 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. * Add 'src/stylesheets' to sass loadPaths 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. * Remove node-sass on node v16 troubleshooting docs We've updated Metalsmith and moved to Dart Sass, so this issue no longer applies (see https://github.com/alphagov/govuk-design-system/pull/2150) * Update link text in examples 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 * Make help text advice clearer in fieldset guidance * Add placeholder text info to text input guidance * Revert town or city field to use address-level2 * Explain issues with client side validation * Add implementation advice to skip link guidance * Add subheadings to text input guidance * Replace double quotes with singles in example * Updating error example for National Insurance number to use correct format * adding format guidance for National Insurance number * Update design-system-team.md.njk Added myself to the team member list * Update src/design-system-team.md.njk Co-authored-by: Kimberly Grey <[email protected]> * Update src/patterns/national-insurance-numbers/index.md.njk Co-authored-by: Calvin Lau <[email protected]> * Move #top anchor to before the skip link 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 #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]: https://github.com/alphagov/govuk-design-system/issues/1561#issuecomment-964273009 Closes #1561 * Make layout name consistent throughout guidance * Update guidance on footer component This proposed update: - adds links to relevant information on privacy notices, cookie pages and accessibility statements - clarifies copyright and licensing information Related issues: https://github.com/alphagov/govuk-design-system/issues/1225 https://github.com/alphagov/govuk-design-system/issues/1306 * Update character count guidance to match new implementation * Minor edits for consistency * Clarify and add accessibility information * Update What's New section for v4.1.0 * Update roadmap * Add context to JAWS issue * Bump govuk-frontend to 4.1.0 * Add nodeListForEach helper directly into design system 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. * Replace individual JS imports with ES modules initAll * Explain that red border depends on exceeding limit * Add accurate content for email field char limit * Replace in guidance and examples - error message - textarea - text input - character count (including error example) * Bump actions/setup-node from v2 to v3 * Use node-version-file input to specify node version 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 * Make validation guidance language more consistent * Add info on default components in page template * Change contact panel headings to reflect the kind of page they're on * Make link text in example reflect guidance * Reorder link text * Update team page on Design System site * Update cookie hide button to be more descriptive 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. * Add Claire to team page * Fix em-dash * Remove last line about performance platform Remove last line on the Payment Card details page, which refers to the performance platform. This platform no longer exists. * add a hint to the select to help users understand the options * Bump govuk-frontend to v4.2.0 * Add guidance for pagination component 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 <[email protected]> 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 * Remove pagination component from community backlog * Update what's new and roadmap for 4.2.0 * Update roadmap Tidying up and reorganising some of our roadmap items in mid-2022. * Fixed typo on pagination documentation * Add paragraph tag to link example This link example does not include a wrapping element, meaning that some of the text is appearing as default serif text instead of in Transport. As the text above this example states that it is regarding links at the end of sentences or paragraphs, the example shouldn't be negatively affected by the inclusion of a paragraph. * Indent Nunjucks code Attempt to make this file easier to read by indenting Nunjucks code similarly to HTML. * Refactor design system tabs JS * Fix tab not being opened when macro options are linked to * Update test ID and result checks * Check for existence of tabs * Update team member Add Ben to the team * Remove govuk-react-jsx which is no longer supported * Bump terser from 5.7.0 to 5.14.2 Bumps [terser](https://github.com/terser/terser) from 5.7.0 to 5.14.2. - [Release notes](https://github.com/terser/terser/releases) - [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md) - [Commits](https://github.com/terser/terser/commits) --- updated-dependencies: - dependency-name: terser dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * Bump moment from 2.29.2 to 2.29.4 Bumps [moment](https://github.com/moment/moment) from 2.29.2 to 2.29.4. - [Release notes](https://github.com/moment/moment/releases) - [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md) - [Commits](https://github.com/moment/moment/compare/2.29.2...2.29.4) --- updated-dependencies: - dependency-name: moment dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * Apply `this` binding changes from code review Co-authored-by: Oliver Byford <[email protected]> * Refactor getDesktopTab to not use a loop * Bump metalsmith to 2.5.0 * Remove ‘mainstream’ from images guidance Instead, define non-service content by content type and publishing method. As flagged in https://github.com/alphagov/govuk-design-system-backlog/issues/70#issuecomment-1187335536: > Mainstream is 2500 pages managed by GDS, but this guidance also applies to all content on www.gov.uk produced by depts, the half a million 'whitehall' pages. Co-authored-by: Calvin Lau <[email protected]> * Use the official core metalsmith postcss plugin Metalsmith is being updated fairly regularly now, and have an [official PostCSS plugin](https://github.com/metalsmith/postcss). We've been blocked on bumping some dependencies because of this (#2016). I've run `npm build` and there is one small prefixing change in the resulting CSS, but otherwise it's exactly the same. * Only toggle details aria attributes if already set I believe this dates from when the polyfill for the `<details>` element used to be applied in all browsers, and added extra ARIA attributes which always needed to be kept in sync when this script toggled the open state. However, since GOV.UK Frontend v3.1.0 the polyfill now does nothing in browsers that natively support the <details> elements [1]. This means that once these attributes are set on page load, unless the polyfill is running there is nothing to keep them in sync if the user toggles the details element: - `aria-expanded` will always be `true`, potentially causing AT to announce the expanded state incorrectly - `aria-hidden` will always be `false` – although this is likely not an issue as aria-hidden can't make things hidden using display:none 're-appear' in the accessibility tree Instead, only toggle `aria-expanded` if it is already set on the element (which should only happen if the polyfill has run, in which case the browser does not natively support the `<details>` element). We also need to re-introduce the `aria-hidden` attribute removed in 8b53583 as when the polyfill runs it currently adds an `aria-hidden` attribute which means the content inside the `<details>` element will be inaccessible even when opened unless we remove it. Add a comment to try and explain why this code needs to exist. [1]: https://github.com/alphagov/govuk-frontend/pull/1523 * Bump metalsmith-env to 2.2.0 - Allow storing the environment variables under a metadata[metadatakey] instead of metadata. See opts.metadatakey for more details. - Dependency updates * Use @metalsmith/in-place in favour of metalsmith-in-place Core metalsmith plugin is effectively an updated version of the previous package. v4.5.0 - feat: org migration, core plugin alignment - feat: use metalsmith.match instead of multimatch, drop Node < 10 support - feat: better jsdoc typehints & defaults mgmt - fix: don't mistake dots in folder paths for extensions * Use @metalsmith/layouts in favour of metalsmith-layouts The core plugin replaces the old one. v2.5.1 - pass the transformed list of files to metalsmith.match… - Merge pull request #184 from doteco/master - pass the transformed list of files to metalsmith.match so that renamed files can be matched v2.5.0 - use metalsmith.match instead of multimatch - Remove semicolons, run formatting. Remove devDependencies - feat: add JSdocs, named plugin function - Dependencies: updates debug to 4.3.4 - Drop Node < 12 support 2.4.0 - Return when done - Improve readme - Align dotfiles, repo with core plugin setup @metalsmith - deps: update dependencies and fix prefer-object-spread * Use @metalsmith/permalinks in favour of metalsmith-permalinks Core plugin replaces old package. Changelog: https://github.com/metalsmith/permalinks/blob/master/CHANGELOG.md * Bump metalsmith-uglify to v2.4.1 Patch bump to update some dependencies. * Bump @metalsmith/sass from 1.0.0 to 1.0.1 Changes: https://github.com/metalsmith/sass/compare/1.0.0...1.0.1 * Adjust link text to GOV.UK image guidance * Allow start buttons to be forms Although unusual, there are a few valid circumstances where you might want to submit a form when pressing the start button. A situation that came up recently was we wanted to record analytics on when a user started a service by recording the time that a user presses the start button, without client-side JavaScript. The implementation for this involved using the Rails `button_to` helper which generates a form which POSTs to a route and includes a single `submit` button. I think this is a valid use case of the start button, so I suggest changing the wording on this to be slightly more open to the idea of the start button not being a link. * Update link to task list Sass file This file has changed location in recent changes to the Prototype Kit, this updates the URL to no longer 404. * Override auto-linking with period character * Move width override classes from spacing to layout Overriding the width of an element really has nothing to do with spacing, so this guidance make more sense as part of the layout guidance, alongside the documentation about the grid system which uses the same ‘one third’, ‘one half’ concepts. * Tweak width override guidance for new context Remove the link to the grid system which is now on the same page and is introduced before the override classes Remove a reference to the spacing override classes which doesn’t make sense now that they’re on a separate page and the user might not have read about them already. * Update links to width override classes * Remove link to archived ethnic groups pattern The ethnic groups pattern was archived in #1582. * Remove broken link in page template guidance The ‘variables’ and ‘blocks’ tables were merged in #1311 but this link was missed. * Remove redundant classes As noted in https://github.com/alphagov/govuk-frontend/issues/2733, these classes don’t actually do anything. * Remove extra closing `</tr>` tag * Swap small and large screen sizes in spacing table Putting the smaller sizes on the left-hand size seems more logical and fits better with a mobile-first approach. * Flip order of spacing scale in table Going from the smallest size to the largest size just makes more sense. * Fix mismatched heading tags in navigation * Document the static spacing scale Fixes #1210. * Improve headings for override classes and helpers * Move section on overrides last Try to encourage users who are writing their own CSS to use the helpers that we provide rather than the override classes, by making it more likely they’ll read about them first. * Update link to my talk for more accessible blog Allows more options to access it as I've made it into a blog post too. * Tweaks to guidance on helpers * Tweaks to guidance on override classes * Bump autoprefixer to 10.4.7 One major version bump. Version 10: - Uses PostCSS 8 - Removes support for Node.js 6, 8 and 11 - …

36degrees added the website Issues relating to the Design System website itself label Jun 18, 2021

36degrees self-assigned this Nov 9, 2021

trang-erskine added the accessibility label Feb 9, 2022

36degrees changed the title ~~Back to top link query~~ 'Back to top' link moves focus after the 'skip to main content link' but before the navigation Mar 16, 2022

kellylee-gds added the shared ownership label Apr 26, 2022

36degrees mentioned this issue Apr 28, 2022

Move #top anchor to before the skip link #2161

Merged

dav-idc added the contribution squad label May 5, 2022

36degrees closed this as completed in #2161 May 19, 2022

36degrees moved this to Done 🏁 in GOV.UK Design System cycle board Feb 2, 2023

36degrees added this to GOV.UK Design System cycle board Feb 2, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

'Back to top' link moves focus after the 'skip to main content link' but before the navigation #1561

'Back to top' link moves focus after the 'skip to main content link' but before the navigation #1561

abbott567 commented Mar 8, 2021

edwardhorsford commented Mar 8, 2021

abbott567 commented Mar 8, 2021

36degrees commented Nov 9, 2021

christopherthomasdesign commented Nov 9, 2021

jbuller commented Nov 10, 2021

abbott567 commented Nov 30, 2021

jbuller commented Nov 30, 2021

jbuller commented Dec 3, 2021

36degrees commented Mar 16, 2022

jbuller commented Mar 22, 2022

jbuller commented Mar 24, 2022

'Back to top' link moves focus after the 'skip to main content link' but before the navigation #1561

'Back to top' link moves focus after the 'skip to main content link' but before the navigation #1561

Comments

abbott567 commented Mar 8, 2021

edwardhorsford commented Mar 8, 2021

abbott567 commented Mar 8, 2021

36degrees commented Nov 9, 2021

Moving the #top anchor to before the skip link

Changing the target of the 'back to top' link to #main-content

christopherthomasdesign commented Nov 9, 2021

jbuller commented Nov 10, 2021

abbott567 commented Nov 30, 2021

jbuller commented Nov 30, 2021

jbuller commented Dec 3, 2021

36degrees commented Mar 16, 2022

jbuller commented Mar 22, 2022

jbuller commented Mar 24, 2022

Moving the `#top` anchor to before the skip link

Changing the target of the 'back to top' link to `#main-content`