From e81138d8a83f7407db3d169528dc47b7abd277c9 Mon Sep 17 00:00:00 2001
From: "beeps (Kim Grey)" <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Tue, 2 May 2023 12:32:18 +0100
Subject: [PATCH] Remove unnecesary class from Warning Text component

---
 CHANGELOG.md                                       | 8 ++++++++
 src/govuk/components/warning-text/_index.scss      | 4 ----
 src/govuk/components/warning-text/template.njk     | 2 +-
 src/govuk/components/warning-text/template.test.js | 4 ++--
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c00e3078a..55f608579b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,14 @@ We no longer support link buttons being disabled or using disabled styles.
 
 This change was introduced in [pull request #3557: Remove deprecated `.govuk-button--disabled` class](https://github.com/alphagov/govuk-frontend/pull/3557).
 
+#### Update the HTML for warning text
+
+We've removed the `.govuk-warning-text__assistive` class and its styles from GOV.UK Frontend. This class is unnecessary, as it duplicates the functionality of the `.govuk-visually-hidden` class already present in Frontend.
+
+If you’re not using Nunjucks macros, update your warning text HTML to replace the `govuk-warning-text__assistive` class with the `govuk-visually-hidden` class.
+
+This change was introduced in [pull request #3569: Remove unnecesary class from Warning Text component](https://github.com/alphagov/govuk-frontend/pull/3569).
+
 ## 4.6.0 (Feature release)
 
 ### New features
diff --git a/src/govuk/components/warning-text/_index.scss b/src/govuk/components/warning-text/_index.scss
index a0d5edb943..59235c0edc 100644
--- a/src/govuk/components/warning-text/_index.scss
+++ b/src/govuk/components/warning-text/_index.scss
@@ -5,10 +5,6 @@
     padding: govuk-spacing(2) 0;
   }
 
-  .govuk-warning-text__assistive {
-    @include govuk-visually-hidden;
-  }
-
   .govuk-warning-text__icon {
     @include govuk-font($size: false, $weight: bold);
 
diff --git a/src/govuk/components/warning-text/template.njk b/src/govuk/components/warning-text/template.njk
index 7172ed6f80..03bc0a5e7c 100644
--- a/src/govuk/components/warning-text/template.njk
+++ b/src/govuk/components/warning-text/template.njk
@@ -3,7 +3,7 @@
   >
   <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
   <strong class="govuk-warning-text__text">
-    <span class="govuk-warning-text__assistive">{{ params.iconFallbackText | default("Warning") }}</span>
+    <span class="govuk-visually-hidden">{{ params.iconFallbackText | default("Warning") }}</span>
     {{ params.html | safe if params.html else params.text }}
   </strong>
 </div>
diff --git a/src/govuk/components/warning-text/template.test.js b/src/govuk/components/warning-text/template.test.js
index 40f73b749b..2fc2b42e31 100644
--- a/src/govuk/components/warning-text/template.test.js
+++ b/src/govuk/components/warning-text/template.test.js
@@ -19,7 +19,7 @@ describe('Warning text', () => {
     it('renders with default assistive text', () => {
       const $ = render('warning-text', examples.default)
 
-      const $assistiveText = $('.govuk-warning-text__assistive')
+      const $assistiveText = $('.govuk-visually-hidden')
       expect($assistiveText.text()).toEqual('Warning')
     })
 
@@ -42,7 +42,7 @@ describe('Warning text', () => {
     it('renders custom assistive text', () => {
       const $ = render('warning-text', examples['icon fallback text only'])
 
-      const $assistiveText = $('.govuk-warning-text__assistive')
+      const $assistiveText = $('.govuk-visually-hidden')
       expect($assistiveText.html()).toContain('Some custom fallback text')
     })