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 remaining links on component and pattern edits from worksheet #4319

Merged
merged 1 commit into from
Nov 22, 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
2 changes: 1 addition & 1 deletion src/components/checkboxes/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ Do not use links in hint text. While screen readers will read out the link text

When 'none' would be a valid answer, give users the option to check a box to say none of the other options apply to them – without this option, users would have to leave all of the boxes unchecked. Giving users this option also makes sure they do not skip the question by accident.

Remember to [start by asking one question per page](/patterns/question-pages/#start-by-asking-one-question-per-page). You might be able to remove the need for a 'none' option by asking the user a better question or filtering them out with a ‘filter question’ beforehand. The GOV.UK Service Manual has guidance on [designing good questions](https://www.gov.uk/service-manual/design/designing-good-questions).
Remember to [start by asking one question per page in your service](/patterns/question-pages/#start-by-asking-one-question-per-page). You might be able to remove the need for a 'none' option by asking the user a better question or filtering them out with a ‘filter question’ beforehand. The GOV.UK Service Manual has guidance on [designing good questions](https://www.gov.uk/service-manual/design/designing-good-questions).

Show the ‘none’ option last. Separate it from the other options using a divider. The text is usually the word ‘or’.

Expand Down
4 changes: 2 additions & 2 deletions src/components/date-input/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ Use the date input component when you’re asking users for a date they’ll alr

Do not use the date input component if users are unlikely to know the exact date of the event you’re asking about.

Read more about how to [ask users for dates](/patterns/dates/).
Read more in the [Ask users for dates pattern](/patterns/dates/).

## How it works

The date input component consists of 3 fields to let users enter a day, month and year.

The 3 date fields are grouped together in a `<fieldset>` with a `<legend>` that describes them, as shown in the examples on this page. This is usually a question, like ‘What is your date of birth?’.

If you’re asking [one question per page](/patterns/question-pages/#start-by-asking-one-question-per-page), you can set the contents of the `<legend>` as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.
If you’re asking [one question per page in your service](/patterns/question-pages/#start-by-asking-one-question-per-page), you can set the contents of the `<legend>` as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.

Read more about [why and how to set legends as headings](/get-started/labels-legends-headings/).

Expand Down
6 changes: 3 additions & 3 deletions src/components/fieldset/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Use the fieldset component to group related form inputs.

## When to use this component

Use the fieldset component when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single fieldset when [asking for an address](/patterns/addresses/).
Use the fieldset component when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single fieldset when [asking for an address in your service](/patterns/addresses/).

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

Expand All @@ -23,12 +23,12 @@ If you’re using the examples or macros for a [Radios component](/components/ra

The first element inside a fieldset must be a `legend` which describes the group of inputs. This could be a question, such as ‘What is your current address?’ or a statement like ‘Personal details’.

If you’re asking just [one question per page](/patterns/question-pages/#start-by-asking-one-question-per-page) as recommended, you can set the contents of the `<legend>` as the page heading, as shown in the example below. This is good practice as it means that users of screen readers will only hear the contents once.
If you’re asking just [one question per page in your service](/patterns/question-pages/#start-by-asking-one-question-per-page) as recommended, you can set the contents of the `<legend>` as the page heading, as shown in the example below. This is good practice as it means that users of screen readers will only hear the contents once.

Read more about [why and how to set legends as headings](/get-started/labels-legends-headings/).

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

On [Question pages in your service](/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.
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.
4 changes: 2 additions & 2 deletions src/components/password-input/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ Some browsers might automatically change what the user is typing when the input

You can tell browsers not to correct spellings by setting the `spellcheck` attribute to `false`.

Doing this can also prevent ['spell-jacking'](https://www.otto-js.com/news/article/chrome-and-edge-enhanced-spellcheck-features-expose-pii-even-your-passwords), where security researchers have found some spell checking tools gathering personal identifiable information, even user’s passwords, from password input fields to send to third party services.
Doing this can [avoid making your service vulnerable to ‘spell-jacking](https://www.itpro.com/security/vulnerability/370010/what-is-spell-jacking), where security researchers have found some spell checking tools gathering personal identifiable information, even user’s passwords, from password input fields to send to third party services.

You can tell browsers not to autocapitalise values by setting the `autocapitalize` attribute to `off`.

Expand All @@ -167,7 +167,7 @@ We’ve tried to minimise duplicate functionality by hiding other types of ‘sh

There’s also other instances where a password could be ‘shown’ or ‘hidden’ without the use of a button – causing a mismatch with the button label (in other words, the user would see a button to ‘show’ a password that’s already visible).

We found [this happens in some browsers](https://github.com/alphagov/govuk-design-system/issues/3552#issuecomment-1976660248) when:
[We found this mismatch happens in some browsers](https://github.com/alphagov/govuk-design-system/issues/3552#issuecomment-1976660248) when:

- a keyboard shortcut is pressed
- a suggested password is created
Expand Down
2 changes: 1 addition & 1 deletion src/components/phase-banner/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,4 @@ Use a ‘feedback’ link to collect on-page feedback about your service. This c

Whatever option you use, make sure that users do not lose their place in the service and can return to the page they were on.

Find out what [feedback you need to collect at each phase](https://www.gov.uk/service-manual/measuring-success/measuring-user-satisfaction#user-satisfaction-through-each-service-phase) in the GOV.UK Service Manual.
[Find out what feedback you need to collect at each phase](https://www.gov.uk/service-manual/measuring-success/measuring-user-satisfaction#user-satisfaction-through-each-service-phase) in the GOV.UK Service Manual.
2 changes: 1 addition & 1 deletion src/components/radios/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ Group radios together in a `<fieldset>` with a `<legend>` that describes them, a

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

If you are asking just [one question per page](/patterns/question-pages/#start-by-asking-one-question-per-page) as recommended, you can set the contents of the `<legend>` as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.
If you are asking just [one question per page in your service](/patterns/question-pages/#start-by-asking-one-question-per-page) as recommended, you can set the contents of the `<legend>` as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.

Read more about [why and how to set legends as headings](/get-started/labels-legends-headings/).

Expand Down
6 changes: 3 additions & 3 deletions src/components/summary-list/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ Use a summary list to show information as a list of key facts.

You can use it to display metadata like ‘Last updated’ with a date like ‘22 June 2018’, or to summarise a user’s responses at the end of a form like the [Check answers pattern](/patterns/check-answers/).

[Summary cards](#summary-cards) are a variant within this component. You can use summary cards to show multiple summary lists that describe the same type of thing, such as people. You can also add card actions that apply to the entire summary list.
[Summary cards are a variant within this component](#summary-cards). You can use summary cards to show multiple summary lists that describe the same type of thing, such as people. You can also add card actions that apply to the entire summary list.

## When not to use this component

Expand Down Expand Up @@ -167,8 +167,8 @@ This component was developed and tested by the Government Digital Service as par

The Department for Education contributed the summary card. It’s being used in some of their services, such as:

- [apply for teacher training](https://www.gov.uk/apply-for-teacher-training), used by the general public
- [register trainee teachers](https://www.register-trainee-teachers.service.gov.uk/), used by people that work for training providers
- [Apply for teacher training](https://www.gov.uk/apply-for-teacher-training), used by the general public
- [Register trainee teachers](https://www.register-trainee-teachers.service.gov.uk/), used by people that work for training providers

The summary card is also used in services run by other departments, such us:

Expand Down
2 changes: 1 addition & 1 deletion src/components/text-input/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ Do not use placeholder text in place of a label, or for hints or examples, as:

### If you're asking one question on the page

If you’re asking just [one question per page](/patterns/question-pages/#start-by-asking-one-question-per-page) as recommended, you can set the contents of the `<label>` as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.
If you’re asking just [one question per page in your service](/patterns/question-pages/#start-by-asking-one-question-per-page) as recommended, you can set the contents of the `<label>` as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.

Read more about [why and how to set legends as headings](/get-started/labels-legends-headings/).

Expand Down
2 changes: 1 addition & 1 deletion src/patterns/dates/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ Never make a calendar control that depends on JavaScript as the only input optio

### How to write dates

See the [GOV.UK style for writing dates](https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style#dates) and [date ranges](https://www.gov.uk/guidance/content-design/writing-for-gov-uk#date-ranges).
See the [GOV.UK style for writing dates](https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style#dates) and [writing date ranges](https://www.gov.uk/guidance/content-design/writing-for-gov-uk#date-ranges).

If you give an example date, use 13 or more for the day and 9 or less for the month - for example ‘27 3 2007’. This helps users enter the date in the correct order and shows them they do not need to include leading zeroes.

Expand Down
6 changes: 3 additions & 3 deletions src/patterns/equality-information/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ These patterns are based on the [harmonised standards developed by the Governmen

Collecting equality information in a consistent way across the public sector makes the data more useful. For example, an organisation can benchmark its own services against other public sector services or the population in general. And it can adjust its approach if it finds a particular group is under-represented.

Do not use this pattern to collect information for operational reasons - especially if you’re legally required to ask for the information in a particular way. For example, you’re [asking about the user’s gender or sex](/patterns/gender-or-sex/) to work out how much State Pension they’re entitled to.
Do not use this pattern to collect information for operational reasons - especially if you’re legally required to ask for the information in a particular way. For example, you’re [asking about the user’s gender or sex in your service](/patterns/gender-or-sex/) to work out how much State Pension they’re entitled to.

## How it works

Expand Down Expand Up @@ -126,7 +126,7 @@ If the user answers ‘yes’, ask about the impact of their condition or illnes

### Asking about ethnic group

The ethnic groups used here are for England. The Government Statistical Service harmonised standard for ethnicity uses [different categories for Wales, Scotland and Northern Ireland](https://gss.civilservice.gov.uk/policy-store/ethnicity/). This is to reflect differences in local populations.
The ethnic groups used here are for England. The Government Statistical Service harmonised standard uses [different categories for ethnicity data collected in Wales, Scotland and Northern Ireland](https://gss.civilservice.gov.uk/policy-store/ethnicity/). This is to reflect differences in local populations.

If your service covers more than one of England, Wales, Scotland or Northern Ireland, you should accommodate these differences in your design. For example, by changing the ethnic groups shown depending on where the user is based. Where this is not possible, use the English categories.

Expand All @@ -150,7 +150,7 @@ Use this approach to ask about marriage or civil partnership status.

### Asking about religion

The categories used here are for England. The Government Statistical Service harmonised standard for religion uses [different categories for Wales, Scotland and Northern Ireland](https://gss.civilservice.gov.uk/policy-store/religion/). This is to reflect differences in local populations.
The categories used here are for England. The Government Statistical Service harmonised standard uses [different categories for religion data collected in Wales, Scotland and Northern Ireland](https://gss.civilservice.gov.uk/policy-store/religion/). This is to reflect differences in local populations.

If your service covers more than one of England, Wales, Scotland or Northern Ireland, you should accommodate these differences in your design. For example, by changing the categories shown depending on where the user is based. Where this is not possible, use the English categories.

Expand Down
2 changes: 1 addition & 1 deletion src/patterns/exit-a-page-quickly/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ The page should tell the user:
The page should also tell the user that:

- their internet browsing history will not be erased, which can still put them at risk
- any information they’ve entered will not be saved, depending on what you’ve [decided to do with user session data](/components/exit-this-page/#consider-what-to-do-with-user-session-data)
- any information they’ve entered will not be saved, depending on what you’ve [decided to do with your service's user session data](/components/exit-this-page/#consider-what-to-do-with-user-session-data)
- to return to the service, they can search for the site they were using, or find it in their internet browsing history
- there are other things they can do to stay safe online (include a link to a ‘safety content page’ where the user can learn more)

Expand Down
2 changes: 1 addition & 1 deletion src/patterns/navigate-a-service/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ Consider showing external links in the page body instead.

### GOV.UK One Login

GOV.UK One Login [publishes its own header component](https://www.sign-in.service.gov.uk/documentation/design-recommendations/let-users-navigate-sign-out/) for services to give users an easy, consistent route to their GOV.UK One Login and a way to sign out.
[GOV.UK One Login publishes its own header component](https://www.sign-in.service.gov.uk/documentation/design-recommendations/let-users-navigate-sign-out/) for services to give users an easy, consistent route to their GOV.UK One Login and a way to sign out.

## Adding other header and navigation elements

Expand Down
2 changes: 1 addition & 1 deletion src/patterns/phone-numbers/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ See the [GOV.UK style for writing telephone numbers](https://www.gov.uk/guidance

### Avoid input masking

Avoid [input masking](https://css-tricks.com/input-masking/) because it makes it harder for users to:
Avoid 'input masking', or showing placeholder answer, because it makes it harder for users to:

- type a number in their preferred way
- transcribe a number from another place and check that they’ve got it right
Expand Down
2 changes: 1 addition & 1 deletion src/patterns/problem-with-the-service-pages/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ Contact information should either:
- include all numbers and opening times in one place on the page
- be a link out to a page that includes numbers and opening times

You might choose to link to a ‘contact information’ page, such as one shown in the ‘[Contact a department or service team](https://design-system.service.gov.uk/patterns/contact-a-department-or-service-team/)’ pattern.
You might choose to link to a ‘contact information’ page, such as one shown in the [‘Contact a department or service team’ pattern](https://design-system.service.gov.uk/patterns/contact-a-department-or-service-team/).

{% call wcagNote({id: "wcag-consistent-content-problem-service"}) %}

Expand Down
2 changes: 1 addition & 1 deletion src/patterns/validation/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ Generally speaking, avoid validating the information in a field before the user

Only add this sort of validation if your user research shows that, on balance, it solves more problems for users than it causes. For example, the [Character count component](/components/character-count/) shows users an error message when they go over the character limit. Because it’s important that users do not spend time and effort writing out a response that turns out to be too long.

If you do use this sort of validation, [make sure you do it in a way that’s accessible](https://www.gov.uk/service-manual/technology/accessibility-for-developers-an-introduction).
If you do use this sort of validation, [make sure you validate in a way that’s accessible](https://www.gov.uk/service-manual/technology/accessibility-for-developers-an-introduction).

## Client side and server side validation

Expand Down