Update default EtP button text

alphagov · Jul 27, 2023 · fd7af09 · fd7af09
1 parent 80e1b90
commit fd7af09
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.yaml b/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

diff --git a/packages/govuk-frontend/src/govuk/components/exit-this-page/template.njk b/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")
   }) -}}

diff --git a/packages/govuk-frontend/src/govuk/components/exit-this-page/template.test.js b/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')
     })
   })