Skip to content

Commit

Permalink
Make link text for components and patterns consistent
Browse files Browse the repository at this point in the history
  • Loading branch information
owenatgov committed Nov 5, 2024
1 parent 4daa25a commit 0066be7
Show file tree
Hide file tree
Showing 61 changed files with 159 additions and 159 deletions.
4 changes: 2 additions & 2 deletions src/community/roadmap/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Last updated 10 October 2024.

We’ve released [GOV.UK Frontend v5.7.1](https://github.com/alphagov/govuk-frontend/releases/tag/v5.7.1) with updated department colours.

Previously, we’ve released [GOV.UK Frontend v5.7.0](https://github.com/alphagov/govuk-frontend/releases/tag/v5.7.0), which includes an update to the Royal Arms in the [GOV.UK footer](/components/footer/). We’ve also added new features to help services [create their own JavaScript components using GOV.UK Frontend](https://frontend.design-system.service.gov.uk/building-your-own-javascript-components/).
Previously, we’ve released [GOV.UK Frontend v5.7.0](https://github.com/alphagov/govuk-frontend/releases/tag/v5.7.0), which includes an update to the Royal Arms in the [GOV.UK footer component](/components/footer/). We’ve also added new features to help services [create their own JavaScript components using GOV.UK Frontend](https://frontend.design-system.service.gov.uk/building-your-own-javascript-components/).

We’ve also recently:

Expand All @@ -29,7 +29,7 @@ We’ve also recently:
- improved how the Breadcrumbs component appears on screen readers
- fixed some alignment issues with Radio buttons and Checkboxes
- introduced new features to help you include only the components your service uses
- introduced a new [Password input component](/components/password-input/)
- introduced a new [Password input component](/components/password-input/)
- updated the crown in the header, favicon and social share images
- updated the components, patterns and styles to be compliant with WCAG 2.2
- made it easier for teams to understand [what's changed in WCAG 2.2 and what they need to do](/accessibility/wcag-2.2)
Expand Down
2 changes: 1 addition & 1 deletion src/components/accordion/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ Do not use the accordion component if the amount of content inside will make the

## Decide between using accordions, tabs and details

Accordions, [tabs](/components/tabs/) and [details](/components/details/) all work by hiding sections of content which a user can choose to reveal. Avoid using any of these components within one another.
Accordions, the [Tabs component](/components/tabs/) and the [Details component](/components/details/) all work by hiding sections of content which a user can choose to reveal. Avoid using any of these components within one another.

If you decide to use one of these components, consider if:

Expand Down
4 changes: 2 additions & 2 deletions src/components/back-link/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,13 @@ Although browsers have a back button, some sites break when you use it - so many

## When to use this component

Always include the back link component on GOV.UK [question pages](/patterns/question-pages/).
Always include the back link component on GOV.UK [Question pages](/patterns/question-pages/).

You can include a back link on other pages within a multi-page transaction, if it makes sense to do so.

## When not to use this component

Never use the back link component together with [breadcrumbs](/components/breadcrumbs/). If necessary, you should do research with your users to learn which they find more helpful in your service.
Never use the back link component together with the [Breadcrumbs component](/components/breadcrumbs/). If necessary, you should do research with your users to learn which they find more helpful in your service.

## How it works

Expand Down
4 changes: 2 additions & 2 deletions src/components/button/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@ Write button text in sentence case, describing the action it performs. For examp
- ‘Save and come back later’ when a user can save their information and come back later
- ‘Add another’ to add another item to a list or group
- ‘Pay’ to make a payment
- ‘Confirm and send’ on a [check answers](/patterns/check-answers/) page that does not have any legal content a user must agree to
- ‘Accept and send’ on a [check answers](/patterns/check-answers/) page that has legal content a user must agree to
- ‘Confirm and send’ on a [Check answers page](/patterns/check-answers/) that does not have any legal content a user must agree to
- ‘Accept and send’ on a [Check answers page](/patterns/check-answers/) that has legal content a user must agree to
- ‘Sign out’ when a user is signed in to an account

You may need to include more or different words to better describe the action. For example, ‘Add another address’ and ‘Accept and claim a tax refund’.
Expand Down
4 changes: 2 additions & 2 deletions src/components/character-count/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ If your users keep hitting the character limit imposed by the backend of your se

## How it works

It tells users how many characters they have remaining as they type into a [textarea](/components/textarea/) with a character limit.
It tells users how many characters they have remaining as they type into a [Textarea component](/components/textarea/) with a character limit.

Users will get updates at a pace that works best for the way they interact with the textarea. This means:

Expand All @@ -50,7 +50,7 @@ There are 2 ways to use the character count component. You can use HTML or, if y

### If you’re asking more than one question on the page

If you're asking more than one question on the page, do not set the contents of the `<label>` as the page heading. Read more about [asking multiple questions on question pages](/patterns/question-pages/#asking-multiple-questions-on-a-page).
If you're asking more than one question on the page, do not set the contents of the `<label>` as the page heading. Read more about [asking multiple questions on Question pages](/patterns/question-pages/#asking-multiple-questions-on-a-page).

{{ example({ group: "components", item: "character-count", example: "without-heading", html: true, nunjucks: true, open: false }) }}

Expand Down
6 changes: 3 additions & 3 deletions src/components/checkboxes/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Use the checkboxes component when you need to help users:

## When not to use this component

Do not use the checkboxes component if users can only choose one option from a selection. In this case, use the [radios component](/components/radios/).
Do not use the checkboxes component if users can only choose one option from a selection. In this case, use the [Radios component](/components/radios/).

## How it works

Expand Down Expand Up @@ -55,7 +55,7 @@ There are 2 ways to use the checkboxes component. You can use HTML or, if you’

### If you’re asking more than one question on the page

If you're asking more than one question on the page, do not set the contents of the `<legend>` as the page heading. Read more about [asking multiple questions on question pages](/patterns/question-pages/#asking-multiple-questions-on-a-page).
If you're asking more than one question on the page, do not set the contents of the `<legend>` as the page heading. Read more about [asking multiple questions on Question pages](/patterns/question-pages/#asking-multiple-questions-on-a-page).

{{ example({ group: "components", item: "checkboxes", example: "without-heading", html: true, nunjucks: true, open: false, size: "m" }) }}

Expand Down Expand Up @@ -127,7 +127,7 @@ Error messages should be styled like this:

{{ example({ group: "components", item: "checkboxes", example: "error", html: true, nunjucks: true, open: false, size: "s" }) }}

Make sure errors follow the guidance in [error message](/components/error-message/) and have specific error messages for specific error states.
Make sure errors follow the guidance in the [Error message component](/components/error-message/) and have specific error messages for specific error states.

#### If nothing is selected and the question has options in it

Expand Down
8 changes: 4 additions & 4 deletions src/components/cookie-banner/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ The term ‘non-essential cookies’ includes:
- service workers
- any other technologies that store files on the user’s device

This cookie banner and the [cookies page pattern](/patterns/cookies-page/) are based on the approach to getting cookie consent used on the GOV.UK website.
This cookie banner and the [Cookies page pattern](/patterns/cookies-page/) are based on the approach to getting cookie consent used on the GOV.UK website.

This component page shows several options for using a cookie banner, based on the types of cookies you’re using in the service. We also tell you what to cover in your cookie banner, with some text examples.

Expand All @@ -66,7 +66,7 @@ Check with your organisation's privacy expert to see how data protection legisla
Show the cookie banner every time the user accesses your service until they either:

- accept or reject cookies using the buttons in the cookie banner
- save their cookie preferences on the service’s [cookies page](/patterns/cookies-page/)
- save their cookie preferences on the service’s [Cookies page](/patterns/cookies-page/)

Once the user has accepted or rejected cookies, the cookie banner should:

Expand Down Expand Up @@ -177,7 +177,7 @@ You’ll need to change the example cookie banner text if your service:

Keep the text as short as possible while making sure it’s an accurate description of how you use cookies. For example, if you use more than one ‘functional’ cookie and there’s not enough space to mention what each of them does, you could ask for permission to set cookies so ‘you can use as many of the service’s features as possible’.

[See the cookies page for more advice on writing about cookies](/patterns/cookies-page/).
[See the Cookies page pattern for more advice on writing about cookies](/patterns/cookies-page/).

### If you’re using essential cookies and analytics cookies

Expand All @@ -197,7 +197,7 @@ You can use this example text for a service that set:

## Creating a cookies page

You’ll need a [cookies page](/patterns/cookies-page/) as well as a cookie banner.
You’ll need a [Cookies page](/patterns/cookies-page/) as well as a cookie banner.

## Research on this component

Expand Down
2 changes: 1 addition & 1 deletion src/components/date-input/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ If you’re highlighting just one field - either the day, month or year - only s

{{ example({ group: "components", item: "date-input", example: "error-single", html: true, nunjucks: true, open: false, size: "m" }) }}

Make sure errors follow the guidance in [error message](/components/error-message/) and have specific error messages for specific error states.
Make sure errors follow the guidance in the [Error message component](/components/error-message/) and have specific error messages for specific error states.

If there’s more than one error, show the highest priority error message. In order of priority, show error messages about:

Expand Down
2 changes: 1 addition & 1 deletion src/components/details/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Do not use the details component to hide information that the majority of your u

## Decide between using details, accordions and tabs

Details, [accordions](/components/accordion/), and [tabs](/components/tabs/) all hide sections of content which a user can choose to reveal.
Details, the [Accordion component](/components/accordion/), and the [Tabs component](/components/tabs/) all hide sections of content which a user can choose to reveal.

Use the details component instead of tabs or an accordion if you only have 1 section of content.

Expand Down
32 changes: 16 additions & 16 deletions src/components/error-message/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@ This guidance is for government teams that build online services. [To find infor
]
}) }}

Follow the [validation pattern](/patterns/validation/) and show an error message when there is a validation error. In the error message explain what went wrong and how to fix it.
Follow the [Validation pattern](/patterns/validation/) and show an error message when there is a validation error. In the error message explain what went wrong and how to fix it.

{{ example({ group: "components", item: "error-message", example: "default", html: true, nunjucks: true, open: false, size: "m", loading: "eager" }) }}

## When to use this component

Show an error message next to the field and in the [error summary](/components/error-summary/) when there is a validation error.
Show an error message next to the field and in the [Error summary component](/components/error-summary/) when there is a validation error.

Use standard messages for different components.

Expand Down Expand Up @@ -72,7 +72,7 @@ If your error message is written in another language, you can change the prefix

{{ example({ group: "components", item: "error-message", example: "custom-prefix", html: true, nunjucks: true, open: true, displayExample: false, size: "s" }) }}

Summarise all errors at the top of the page the user is on using an [error summary](/components/error-summary/).
Summarise all errors at the top of the page the user is on using an [Error summary component](/components/error-summary/).

There are 2 ways to use the error message component. You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

Expand Down Expand Up @@ -121,7 +121,7 @@ Read the message out loud to see if it sounds like something you would say.

### Be consistent

Use the same message next to the field and in the [error summary](/components/error-summary/) so they:
Use the same message next to the field and in the [Error summary component](/components/error-summary/) so they:

- look, sound and mean the same
- make sense out of context
Expand Down Expand Up @@ -161,18 +161,18 @@ Use both instructions and descriptions, but use them consistently. For example,

Use template messages for common errors on:

- [addresses](/patterns/addresses/#error-messages)
- [character count](/components/character-count/#error-messages)
- [checkboxes](/components/checkboxes/#error-messages)
- [date input](/components/date-input/#error-messages)
- [email address](/patterns/email-addresses/#error-messages)
- [file upload](/components/file-upload/#error-messages)
- [names](/patterns/names/#error-messages)
- [National Insurance numbers](/patterns/national-insurance-numbers/#error-messages)
- [radios](/components/radios/#error-messages)
- [phone numbers](/patterns/phone-numbers/#error-messages)
- [text input](/components/text-input/#error-messages)
- [textarea](/components/textarea/#error-messages)
- [Addresses pattern](/patterns/addresses/#error-messages)
- [Character count component](/components/character-count/#error-messages)
- [Checkboxes component](/components/checkboxes/#error-messages)
- [Date input component](/components/date-input/#error-messages)
- [Email address pattern](/patterns/email-addresses/#error-messages)
- [File upload component](/components/file-upload/#error-messages)
- [Names pattern](/patterns/names/#error-messages)
- [National Insurance numbers pattern](/patterns/national-insurance-numbers/#error-messages)
- [Radios component](/components/radios/#error-messages)
- [Phone numbers pattern](/patterns/phone-numbers/#error-messages)
- [Text input component](/components/text-input/#error-messages)
- [Textarea component](/components/textarea/#error-messages)

### Track errors

Expand Down
6 changes: 3 additions & 3 deletions src/components/error-summary/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ layout: layout-pane.njk

Use this component at the top of a page to summarise any errors a user has made.

When a user makes an error, you must show both an error summary and an [error message](/components/error-message/) next to each answer that contains an error.
When a user makes an error, you must show both an error summary and an [Error message component](/components/error-message/) next to each answer that contains an error.

{{ example({ group: "components", item: "error-summary", example: "default", html: true, nunjucks: true, open: false, size: "s", loading: "eager" }) }}

Expand All @@ -28,9 +28,9 @@ You must:
- link to each of the answers that have validation errors
- make sure the error messages in the error summary are worded the same as those which appear next to the inputs with errors

As well as showing an error summary, follow the [validation pattern](/patterns/validation/) - for example, by adding ‘Error: ’ to the beginning of the page `<title>` so screen readers read it out as soon as possible.
As well as showing an error summary, follow the [Validation pattern](/patterns/validation/) - for example, by adding ‘Error: ’ to the beginning of the page `<title>` so screen readers read it out as soon as possible.

And make your [error messages](/components/error-message/#be-clear-and-concise) clear and concise.
And [make your error messages clear and concise](/components/error-message/#be-clear-and-concise).

There are 2 ways to use the error summary component. You can use HTML or, if you are using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk), you can use the Nunjucks macro.

Expand Down
4 changes: 2 additions & 2 deletions src/components/exit-this-page/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@ You can also use this component for standalone content pages, such as dashboards

## When not to use this component

Do not use this component if the service or content is unlikely to put a user at risk. See the [Exit a page quickly](/patterns/exit-a-page-quickly/) pattern for examples of at-risk and sensitive topics.
Do not use this component if the service or content is unlikely to put a user at risk. See the [Exit a page quickly pattern](/patterns/exit-a-page-quickly/) for examples of at-risk and sensitive topics.

The 'Exit this page' component is a [button component](/components/button/) that has been marked up with addtional CSS and JavaScript functionality, to make it work in a specific way.
The 'Exit this page' component is a [Button component](/components/button/) that has been marked up with addtional CSS and JavaScript functionality, to make it work in a specific way.

Keep in mind that seeing this component might discourage certain users from using your service. If the user does not identify themselves as being at risk, they might see the button on a service and decide it’s not relevant to them.

Expand Down
4 changes: 2 additions & 2 deletions src/components/fieldset/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Use the fieldset component when you need to show a relationship between multiple

{{ example({ group: "components", item: "fieldset", example: "address-group", html: true, nunjucks: true, open: false, size: "xl", loading: "eager" }) }}

If you’re using the examples or macros for [radios](/components/radios/), [checkboxes](/components/checkboxes/) or [date input](/components/date-input/), the fieldset will already be included.
If you’re using the examples or macros for a [Radios component](/components/radios/), [Checkboxes component](/components/checkboxes/) or [Date input component](/components/date-input/), the fieldset will already be included.

## How it works

Expand All @@ -29,6 +29,6 @@ Read more about [why and how to set legends as headings](/get-started/labels-leg

{{ example({ group: "components", item: "fieldset", example: "default", html: true, nunjucks: true, open: false }) }}

On [question pages](/patterns/question-pages/) containing a group of inputs, including the question as the legend helps users of screen readers to understand that the inputs are all related to that&nbsp;question.
On [Question pages](/patterns/question-pages/) containing a group of inputs, including the question as the legend helps users of screen readers to understand that the inputs are all related to that&nbsp;question.

Include general help text in the legend if it would help the user fill in the form, and you cannot write it as [hint text](/components/text-input/#hint-text). However, try to keep it as short as possible.
2 changes: 1 addition & 1 deletion src/components/file-upload/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ Error messages should be styled like this:

{{ example({ group: "components", item: "file-upload", example: "error", html: true, nunjucks: true, open: false, size: "m" }) }}

Make sure errors follow the guidance in [error message](/components/error-message/) and have specific error messages for specific error states.
Make sure errors follow the guidance in the [Error message component](/components/error-message/) and have specific error messages for specific error states.

#### If no file has been selected

Expand Down
2 changes: 1 addition & 1 deletion src/components/footer/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ You can add links to:

- [privacy notice](https://www.gov.uk/service-manual/design/collecting-personal-information-from-users)
- [accessibility statement](https://www.gov.uk/service-manual/helping-people-to-use-your-service/publishing-information-about-your-services-accessibility)
- [cookies page](/patterns/cookies-page/)
- [Cookies page](/patterns/cookies-page/)
- terms and conditions
- other language options
- help content
Expand Down
Loading

0 comments on commit 0066be7

Please sign in to comment.