Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the links on homepage, root pages and Get Started sections #4304

Merged
merged 1 commit into from
Nov 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions src/accessibility-statement.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,13 +85,13 @@ The [GOV.UK Design System website](https://design-system.service.gov.uk/) was la

DAC tested a sample of pages to cover the different content types in the GOV.UK Design System website. They were:

- [the homepage](https://design-system.service.gov.uk/)
- [a short content page](https://design-system.service.gov.uk/community/design-system-working-group/)
- [a long content page](https://design-system.service.gov.uk/styles/layout/)
- [an overview page](https://design-system.service.gov.uk/community/)
- [a styles page](https://design-system.service.gov.uk/styles/headings/)
- [a component page](https://design-system.service.gov.uk/components/radios/)
- [a pattern page](https://design-system.service.gov.uk/patterns/question-pages/)
- the [GOV.UK Design System homepage](https://design-system.service.gov.uk/)
- a short content page: [Design System working group](https://design-system.service.gov.uk/community/design-system-working-group/)
- a long content page: [Layout styles](https://design-system.service.gov.uk/styles/layout/)
- an overview page: [Community section](https://design-system.service.gov.uk/community/)
- a styles page: [Headings styles](https://design-system.service.gov.uk/styles/headings/)
- a component page: [Radios component](https://design-system.service.gov.uk/components/radios/)
- a pattern page: [Question pages pattern](https://design-system.service.gov.uk/patterns/question-pages/)

DAC also tested the global search functionality that appears in the header of the GOV.UK Design System website.

Expand All @@ -101,11 +101,11 @@ The [GOV.UK Frontend documentation website](http://frontend.design-system.servic

DAC tested the [Technical Documentation Template](https://tdt-documentation.london.cloudapps.digital/), which is the template for the GOV.UK Frontend documentation website.

To learn more, read the [Technical Documentation Template accessibility statement](https://tdt-documentation.london.cloudapps.digital/accessibility/).
To learn more, read the [Accessibility statement for Technical Documentation Template and documentation](https://github.com/alphagov/tdt-documentation/blob/main/source/accessibility/index.html.md.erb).

### Frontend codebase

The GOV.UK Frontend codebase is not a website but a [code repository](https://github.com/alphagov/govuk-frontend) and [npm package](https://www.npmjs.com/package/govuk-frontend).
The GOV.UK Frontend codebase is not a website but a [code repository on GitHub](https://github.com/alphagov/govuk-frontend) and [a software package on npm (Node Package Manager)](https://www.npmjs.com/package/govuk-frontend).

Examples using the GOV.UK Frontend codebase were last audited for accessibility issues by an external group in May 2023. The audit was carried out by the [Digital Accessibility Centre (DAC)](https://digitalaccessibilitycentre.org/).

Expand Down
4 changes: 2 additions & 2 deletions src/get-started/focus-states/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ description: Some people use keyboards or other devices to navigate through a pa

Some people use keyboards or other devices to navigate through a page by jumping from one interactive element to the next. Focus states let users know which element they’re currently on and is ready to be interacted with.

Focus states in the GOV.UK Design System use a combination of yellow and black to make sure they meet Web Content Accessibility Guidelines (WCAG) 2.1 level AA [non-text contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) on any background colour used on GOV.UK.
Focus states in the GOV.UK Design System use a combination of yellow and black to make sure they meet [Web Content Accessibility Guidelines (WCAG) 2.2 success criterion 1.4.11 Non-text Contrast (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) on any background colour used on GOV.UK.

The yellow has a high contrast with dark backgrounds and the thick black border has a high contrast against light backgrounds.

Expand Down Expand Up @@ -68,7 +68,7 @@ Use these variables in your components instead of numeric values for the backgro

To make a component's focus state accessible without using Sass, you can:

- see how the `govuk-focused-text` mixin works from the [GOV.UK Frontend source code](https://github.com/alphagov/govuk-frontend/blob/25a4333b239e1c3b8a136e526981fe29172a2852/src/govuk/helpers/_focused.scss#L12-L28)
- use the `govuk-focused-text` mixin – [see how `govuk-focused-text` works in the GOV.UK Frontend source code](https://github.com/alphagov/govuk-frontend/blob/25a4333b239e1c3b8a136e526981fe29172a2852/src/govuk/helpers/_focused.scss#L12-L28)
- get the values for `$govuk-focus-colour` and `$govuk-focus-text-colour` from the [colour page](/styles/colour/)

## Contributing back
Expand Down
6 changes: 3 additions & 3 deletions src/get-started/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ The examples in the GOV.UK Design System come with code to make it easy for you

There are guides to getting started:

- [prototyping](prototyping/)
- [in production](production/)
- [with prototyping](prototyping/)
- [working in production](production/)

## Using styles, components and patterns

When something is published in the GOV.UK Design System as a [style](/styles/), [component](/components/) or [pattern](/patterns/) we include details of how and when it’s been tested in user research. This should help you decide whether it’s something you can use or adapt for your service.
When we publish new [styles](/styles/), [components](/components/) or [patterns](/patterns/) we include details of how and when it’s been tested in user research. This should help you decide whether it’s something you can use or adapt for your service.

You can ask questions or share your research by joining the discussion on GitHub. There are links at the end of each style, component and pattern page - under the ‘Help improve this page’ heading.

Expand Down
18 changes: 9 additions & 9 deletions src/get-started/production/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ This guide explains how to set up your project so you can start using the styles

owenatgov marked this conversation as resolved.
Show resolved Hide resolved
{{ govukInsetText({
classes: "app-table--constrained",
html: 'If you’ve used GOV.UK Elements, GOV.UK Template or the GOV.UK Frontend Toolkit before, you might also find it useful to read the guide on <a href="/get-started/updating-your-code/">updating your code</a>.'
html: 'If you’ve used GOV.UK Elements, GOV.UK Template or the GOV.UK Frontend Toolkit before, you might also find it useful to read the guide to <a href="https://frontend.design-system.service.gov.uk/v4/migrating-from-legacy-products/#migrate-from-our-old-frameworks">Migrate from our old frameworks</a>.'
}) }}

## Include GOV.UK Frontend in your project
Expand All @@ -29,11 +29,11 @@ We recommend [installing GOV.UK Frontend using npm](https://frontend.design-syst

Using this option, you will be able to:

- selectively [include the CSS](https://frontend.design-system.service.gov.uk/import-css/) for individual components
- selectively [include the JavaScript](https://frontend.design-system.service.gov.uk/import-javascript/) for individual components
- [selectively include the CSS for individual components](https://frontend.design-system.service.gov.uk/import-css/)
- [selectively include the JavaScript individual components](https://frontend.design-system.service.gov.uk/import-javascript/) for
- build your own styles or components based on the palette or typography and spacing mixins
- customise the build (for example, overriding colours or enabling global styles)
- use the [Nunjucks template and macros](https://frontend.design-system.service.gov.uk/use-nunjucks/) if your environment supports them
- use [our Nunjucks template and macros](https://frontend.design-system.service.gov.uk/use-nunjucks/) if your environment supports them

### Option 2: include compiled files

Expand All @@ -43,23 +43,23 @@ Using this option, you will be able to include all the CSS and JavaScript of GOV

You will not be able to:

- selectively [include the CSS](https://frontend.design-system.service.gov.uk/import-css/) for individual components
- selectively [include the JavaScript](https://frontend.design-system.service.gov.uk/import-javascript/) for individual components
- [selectively include the CSS for individual components](https://frontend.design-system.service.gov.uk/import-css/)
- [selectively include the JavaScript for individual components](https://frontend.design-system.service.gov.uk/import-javascript/)
- build your own styles or components based on the palette or typography and spacing mixins
- customise the build, for example, overriding colours or enabling global styles
- use the component Nunjucks templates

## Start using the GOV.UK page template

You can set up a basic page that is consistent with GOV.UK branding by using the [GOV.UK page template](/styles/page-template/).
You can set up a basic page that is consistent with GOV.UK branding by [using the GOV.UK page template](/styles/page-template/).

## Styling page elements

The Design System provides CSS classes for styling content, instead of global styles.

The class names follow the Block Element Modifier (BEM) naming convention. This can look a bit daunting at first, but it makes robust code that’s easy to maintain.

Explore the [Styles](/styles/) section of the Design System to see what classes are available.
Explore the [Styles section](/styles/) of the Design System to see what classes are available.

## Using components

Expand All @@ -68,7 +68,7 @@ The components in the Design System are designed to be accessible and responsive
You can use them in your live application as either:

- HTML
- [Nunjucks macros](https://frontend.design-system.service.gov.uk/use-nunjucks/) - if you installed GOV.UK Frontend using npm and your application uses Node.js
- [our Nunjucks macros](https://frontend.design-system.service.gov.uk/use-nunjucks/), if you've installed GOV.UK Frontend using npm and your application uses Node.js

You can get the code from the HTML or Nunjucks tabs below any examples:

Expand Down
2 changes: 1 addition & 1 deletion src/get-started/prototyping/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ This means that any code that you copy across from old prototypes will not displ

The Design System provides lots of new CSS classes for styling page elements, so you should not need to write as much of your own Sass or CSS.

Explore the [Styles](/styles/) section of the Design System to see what classes are available and how to apply them.
Explore the [Styles section](/styles/) of the Design System to see what classes are available and how to apply them.

## Using components

Expand Down
8 changes: 4 additions & 4 deletions src/index.njk
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,17 @@ masthead: true
<div class="govuk-grid-column-one-third-from-desktop govuk-!-margin-bottom-8">
<h2 class="govuk-heading-l govuk-!-font-weight-bold">Styles</h2>
<p class="govuk-body">Make government services look like GOV.UK with guides for applying layout, typography, colour and&nbsp;images.</p>
<p class="govuk-body govuk-!-margin-bottom-0"><a href="/styles/" class="govuk-link govuk-!-font-weight-bold">Browse styles</a></p>
<p class="govuk-body govuk-!-margin-bottom-0"><a href="/styles/" class="govuk-link govuk-!-font-weight-bold">Browse our styles</a></p>
</div>
<div class="govuk-grid-column-one-third-from-desktop govuk-!-margin-bottom-8">
<h2 class="govuk-heading-l">Components</h2>
<p class="govuk-body">Save time with reusable, accessible components for forms, navigation, panels, tables and&nbsp;more.</p>
<p class="govuk-body govuk-!-margin-bottom-0"><a href="/components/" class="govuk-link govuk-!-font-weight-bold">Browse components</a></p>
<p class="govuk-body govuk-!-margin-bottom-0"><a href="/components/" class="govuk-link govuk-!-font-weight-bold">Browse our components</a></p>
</div>
<div class="govuk-grid-column-one-third-from-desktop govuk-!-margin-bottom-8">
<h2 class="govuk-heading-l">Patterns</h2>
<p class="govuk-body">Help users complete common tasks like entering names and addresses, filling in forms and creating accounts.</p>
<p class="govuk-body govuk-!-margin-bottom-0"><a href="/patterns/" class="govuk-link govuk-!-font-weight-bold">Browse patterns</a></p>
<p class="govuk-body govuk-!-margin-bottom-0"><a href="/patterns/" class="govuk-link govuk-!-font-weight-bold">Browse our patterns</a></p>
</div>

<div class="govuk-grid-column-full">
Expand All @@ -33,7 +33,7 @@ masthead: true
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Principles we follow</h2>
<p class="govuk-body">
The GOV.UK Design System helps teams that work on government services follow the <a class="govuk-link" href="https://www.gov.uk/guidance/government-design-principles">Government Design Principles</a> and <a class="govuk-link" href="https://www.gov.uk/service-manual">GOV.UK Service Manual</a>. This website also follows the <a class="govuk-link" href="https://www.gov.uk/guidance/style-guide">style guide</a> and <a class="govuk-link" href="https://www.gov.uk/guidance/content-design">content design guidance</a> used by GOV.UK.
The GOV.UK Design System helps teams that work on government services follow the <a class="govuk-link" href="https://www.gov.uk/guidance/government-design-principles">Government Design Principles</a> and <a class="govuk-link" href="https://www.gov.uk/service-manual">GOV.UK Service Manual</a>. This website also follows the <a class="govuk-link" href="https://www.gov.uk/guidance/style-guide">GOV.UK style guide</a> and <a class="govuk-link" href="https://www.gov.uk/guidance/content-design">GOV.UK content design guidance</a>.
</p>

<p class="govuk-body">
Expand Down
2 changes: 1 addition & 1 deletion src/privacy-policy.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ As part of [GOV.UK Design System](/) we share your personal data with data proce

- software collaboration platforms when you share research, feedback or make a contribution
- mailing list providers when you sign up to receive emails from us
- [support providers](https://www.gov.uk/government/publications/government-digital-service-user-support-privacy-notice/user-support-privacy-notice) when you contact us for assistance
- support providers when you contact us for assistance – [see the User support privacy notice](https://www.gov.uk/government/publications/government-digital-service-user-support-privacy-notice/user-support-privacy-notice)
- web analytics services

We will not:
Expand Down