Merge pull request #3989 from alphagov/update-etp-default-text

Update default Exit This Page button text

CHANGELOG.md

@@ -303,6 +303,21 @@ You don't need to change anything if you're using the `govukPagination` Nunjucks
 
 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.
+
+```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>
+```
+
+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).
+
 ### 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

@@ -2,11 +2,11 @@ params:
   - name: text
     type: string
     required: false
-    description: Text for the link. If `html` is provided, the `text` option will be ignored. Defaults to 'Exit this page'.
+    description: Text for the link. If `html` is provided, the `text` option will be ignored. Defaults to 'Emergency Exit this page' with 'Emergency' visually hidden.
   - name: html
     type: string
     required: false
-    description: HTML for the link. If `html` is provided, the `text` option will be ignored.
+    description: HTML for the link. If `html` is provided, the `text` option will be ignored. Defaults to 'Emergency Exit this page' with 'Emergency' visually hidden.
   - name: redirectUrl
     type: string
     required: false

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

@@ -1,5 +1,9 @@
 {% from "../button/macro.njk" import govukButton -%}
 
+{% set defaultHtml -%}
+  <span class="govuk-visually-hidden">Emergency</span> Exit this page
+{%- endset -%}
+
 <div
   {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-exit-this-page {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="govuk-exit-this-page" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
   {%- if params.activatedText %} data-i18n.activated="{{ params.activatedText | escape }}"{% endif %}
@@ -8,8 +12,8 @@
   {%- if params.pressOneMoreTimeText %} data-i18n.press-one-more-time="{{ params.pressOneMoreTimeText | escape }}"{% endif %}
 >
   {{- govukButton({
-    html: params.html,
-    text: params.text | default("Exit this page"),
+    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")
   }) -}}

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

@@ -14,7 +14,7 @@ describe('Exit this page', () => {
       const $button = $('.govuk-exit-this-page').find('.govuk-button')
 
       expect($button.hasClass('govuk-button--warning')).toBeTruthy()
-      expect($button.text()).toContain('Exit this page')
+      expect($button.html()).toContain('<span class="govuk-visually-hidden">Emergency</span> Exit this page')
       expect($button.attr('href')).toBe('/full-page-examples/announcements')
     })
   })