Remove unnecesary class from Warning Text component

alphagov · May 2, 2023 · e81138d · e81138d
1 parent a53c6a4
commit e81138d
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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')
     })