Add attributes support to the Exit this Page button

CHANGELOG.md

@@ -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 attributes support 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:

packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.yaml

@@ -66,6 +66,10 @@ examples:
       classes: 'test-class'
       attributes:
         test-attribute: true
+      button:
+        attributes:
+          rel: 'nofollow noreferrer noopener'
+          test-attribute: true
   - name: testing-html
     hidden: true
     data:

packages/govuk-frontend/src/govuk/components/exit-this-page/template.njk

@@ -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>

packages/govuk-frontend/src/govuk/components/exit-this-page/template.test.js

@@ -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')
     })
   })
 
@@ -61,6 +62,14 @@ describe('Exit this page', () => {
 
       expect($component.attr('test-attribute')).toBe('true')
     })
+
+    it('renders with custom button attributes', () => {
+      const $ = render('exit-this-page', examples.testing)
+      const $button = $('.govuk-exit-this-page').find('.govuk-button')
+
+      expect($button.attr('rel')).toBe('nofollow noreferrer noopener')
+      expect($button.attr('test-attribute')).toBe('true')
+    })
   })
 
   describe('Translated', () => {