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

Add rel attribute to the Exit this Page button #4054

Merged
merged 2 commits into from
Aug 9, 2023
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
26 changes: 18 additions & 8 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -297,27 +297,37 @@ This change was introduced in [pull request #3949: Simplify font family settings

#### Update the Pagination component's default `aria-label`

The default value of the Pagination component's `aria-label` has been updated to be more descriptive of the contents of the region. If you are using the component's default label, you may wish to update it to the new value.
The default value of the Pagination component's `aria-label` has been updated to be more descriptive of the contents of the region. If you are using the component's default label, you may wish to update it to the new default of 'Pagination'.

You don't need to change anything if you're using the `govukPagination` Nunjucks macro.

This change was introduced in [pull request #3899: Update default `aria-label` in Pagination component](/~https://github.com/alphagov/govuk-frontend/pull/3899).

#### Update the Exit this Page button's default text

The default text of the Exit this Page button has been updated to indicate that the button is a safety tool and not a generic method of leaving the current page. If you are using the component's default label, you may wish to update it to the new value.
The default text of the Exit this Page button has been updated. It now includes visually-hidden text to clarify that the button is a safety tool and not a generic method of leaving the current page.

```diff
<a href="..." role="button" draggable="false" class="govuk-button govuk-button--warning govuk-exit-this-page__button govuk-js-exit-this-page-button" data-module="govuk-button">
- Exit this page
+ <span class="govuk-visually-hidden">Emergency</span> Exit this page
</a>
```
If you are using the component's default text, you may wish to update it to the new value: `<span class="govuk-visually-hidden">Emergency</span> Exit this page`

You don't need to change anything if you're using the `govukExitThisPage` Nunjucks macro.

This change was introduced in [pull request #3989: Update default Exit This Page button text](/~https://github.com/alphagov/govuk-frontend/pull/3989).

#### Add the `rel` attribute to the Exit this Page button and secondary link

Update the Exit this Page button and secondary link to include a new attribute and value: `rel="nofollow noreferrer"`.

Adding this attribute does two things:

1. It instructs search engines that your service does not endorse the external website for the purposes of determining search engine rankings.
2. It instructs web browsers to not send information about your service to the external website.

This fixes a potential risk where the external website could detect that a user had visited from a GOV.UK page and play that information back to the user, which could risk a user's personal safety in some contexts.

You don't need to change the Exit this Page button if you're using the `govukExitThisPage` Nunjucks macro. You will still have to update the secondary link manually.

This change was introduced in [pull request #4054: Add `rel` attribute to the Exit this Page button](/~https://github.com/alphagov/govuk-frontend/pull/4054). Thanks to [Greg Tyler](/~https://github.com/gregtyler) for reporting this issue.

### Fixes

We’ve made fixes to GOV.UK Frontend in the following pull requests:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@
{{ govukSkipLink({
href: "https://www.gov.uk/",
text: "Exit this page",
classes: "govuk-js-exit-this-page-skiplink"
classes: "govuk-js-exit-this-page-skiplink",
attributes: {
rel: "nofollow noreferrer"
}
}) }}
{% endblock %}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,11 @@ scenario: >-
{{ super() }}
{{ govukSkipLink({
href: "https://bbc.co.uk/weather/",
classes: "govuk-js-exit-this-page-skiplink"
text: "Exit this page",
classes: "govuk-js-exit-this-page-skiplink",
attributes: {
rel: "nofollow noreferrer"
}
}) }}
{% endblock %}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
html: params.html if (params.html or params.text) else defaultHtml,
text: params.text,
classes: "govuk-button--warning govuk-exit-this-page__button govuk-js-exit-this-page-button",
href: params.redirectUrl | default("https://www.bbc.co.uk/weather")
href: params.redirectUrl | default("https://www.bbc.co.uk/weather"),
attributes: {
rel: "nofollow noreferrer"
}
}) -}}
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ describe('Exit this page', () => {
expect($button.hasClass('govuk-button--warning')).toBeTruthy()
expect($button.html()).toContain('<span class="govuk-visually-hidden">Emergency</span> Exit this page')
expect($button.attr('href')).toBe('/full-page-examples/announcements')
expect($button.attr('rel')).toBe('nofollow noreferrer')
})
})

Expand Down