From c1b8fb7531bc6c39197b18ea18b59fb77dc82c58 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 21 Oct 2019 15:18:25 +0100
Subject: [PATCH] Replace all visually-hidden classes

These have been replaced:

https://design-system.service.gov.uk/get-started/updating-your-code/#helper-class-names
---
 app/assets/javascripts/collapsibleCheckboxes.js |  4 ++--
 app/assets/javascripts/listEntry.js             |  4 ++--
 app/assets/javascripts/templateFolderForm.js    |  2 +-
 app/templates/components/file-upload.html       |  2 +-
 app/templates/components/list-entry.html        |  2 +-
 app/templates/components/select-input.html      |  2 +-
 app/templates/components/table.html             |  6 +++---
 app/templates/components/tick-cross.html        |  4 ++--
 app/templates/views/check/column-errors.html    |  4 ++--
 app/templates/views/check/ok.html               |  4 ++--
 app/templates/views/check/row-errors.html       |  4 ++--
 app/templates/views/choose-account.html         |  2 +-
 app/templates/views/dashboard/dashboard.html    |  2 +-
 app/templates/views/register.html               |  2 +-
 app/templates/views/signedout.html              | 10 +++++-----
 app/templates/views/templates/_move_to.html     |  6 +++---
 tests/javascripts/collapsibleCheckboxes.test.js |  2 +-
 17 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/app/assets/javascripts/collapsibleCheckboxes.js b/app/assets/javascripts/collapsibleCheckboxes.js
index 3eea8693d..7d92b273e 100644
--- a/app/assets/javascripts/collapsibleCheckboxes.js
+++ b/app/assets/javascripts/collapsibleCheckboxes.js
@@ -53,7 +53,7 @@
   }
   Footer.prototype.buttonContent = {
     change: (fieldLabel) => `Choose ${fieldLabel}s`,
-    done: (fieldLabel) => `Done<span class="visuallyhidden"> choosing ${fieldLabel}s</span>`
+    done: (fieldLabel) => `Done<span class="govuk-visually-hidden"> choosing ${fieldLabel}s</span>`
   };
   Footer.prototype.getEl = function (expanded) {
     const buttonState = expanded ? 'done' : 'change';
@@ -118,7 +118,7 @@
     this.$heading = $(`<h${headingLevel} class="heading-small">${this.legendText}</h${headingLevel}>`);
     this.$fieldset.before(this.$heading);
 
-    this.$fieldset.find('legend').addClass('visuallyhidden');
+    this.$fieldset.find('legend').addClass('govuk-visually-hidden');
   };
   CollapsibleCheckboxes.prototype.expand = function(e) {
     if (e !== undefined) { e.preventDefault(); }
diff --git a/app/assets/javascripts/listEntry.js b/app/assets/javascripts/listEntry.js
index b5dd7c88e..211d42764 100644
--- a/app/assets/javascripts/listEntry.js
+++ b/app/assets/javascripts/listEntry.js
@@ -28,7 +28,7 @@
   ListEntry.prototype.entryTemplate = Hogan.compile(
     '<div class="list-entry">' +
       '<label for="{{{id}}}" class="text-box-number-label">' +
-        '<span class="visuallyhidden">{{listItemName}} number </span>{{number}}.' +
+        '<span class="govuk-visually-hidden">{{listItemName}} number </span>{{number}}.' +
       '</label>' +
       '<input' +
         ' name="{{name}}-{{index}}"' +
@@ -38,7 +38,7 @@
       '/>' +
       '{{#button}}' +
         '<button type="button" class="button-secondary list-entry-remove">' +
-          'Remove<span class="visuallyhidden"> {{listItemName}} number {{number}}</span>' +
+          'Remove<span class="govuk-visually-hidden"> {{listItemName}} number {{number}}</span>' +
         '</button>' +
       '{{/button}}' +
     '</div>'
diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js
index b85ab7ead..c643b12fb 100644
--- a/app/assets/javascripts/templateFolderForm.js
+++ b/app/assets/javascripts/templateFolderForm.js
@@ -127,7 +127,7 @@
                     });
 
         if (opts.hasOwnProperty('nonvisualText')) {
-          $btn.append(`<span class="visuallyhidden"> ${opts.nonvisualText}</span>`);
+          $btn.append(`<span class="govuk-visually-hidden"> ${opts.nonvisualText}</span>`);
         }
 
         return $btn;
diff --git a/app/templates/components/file-upload.html b/app/templates/components/file-upload.html
index b7acf0c56..edadbc3be 100644
--- a/app/templates/components/file-upload.html
+++ b/app/templates/components/file-upload.html
@@ -10,7 +10,7 @@
 ) %}
   <form method="post" enctype="multipart/form-data" {% if action %}action="{{ action }}"{% endif %} class="{% if field.errors and show_errors %}form-group-error{% endif %}" data-module="file-upload">
     <label class="file-upload-label" for="{{ field.name }}">
-      <span class="visually-hidden">{{ field.label.text }}</span>
+      <span class="govuk-visually-hidden">{{ field.label.text }}</span>
       {% if hint %}
         <span class="form-hint">
           {{ hint }}
diff --git a/app/templates/components/list-entry.html b/app/templates/components/list-entry.html
index 714950c8a..56d2e7e54 100644
--- a/app/templates/components/list-entry.html
+++ b/app/templates/components/list-entry.html
@@ -28,7 +28,7 @@
         {% for index in range(0, field.entries|length) %}
           <div class="list-entry">
             <label for="input-{{ field.name }}-{{ index }}" class="text-box-number-label">
-              <span class="visuallyhidden">{{ item_name }} number </span>{{ index + 1 }}.
+              <span class="govuk-visually-hidden">{{ item_name }} number </span>{{ index + 1 }}.
             </label>
             <input
               type="text"
diff --git a/app/templates/components/select-input.html b/app/templates/components/select-input.html
index f8387c68e..21f075dd9 100644
--- a/app/templates/components/select-input.html
+++ b/app/templates/components/select-input.html
@@ -43,7 +43,7 @@
     {% endif %}
     <fieldset id="{{ field.id }}" {% if inline %}class="inline"{% endif %}>
       <legend class="{{ 'form-label' if not hide_legend else '' }}{% if legend_style != 'text' %} {{ legend_style }}{% endif %}">
-        {% if hide_legend %}<span class="visually-hidden">{% endif %}
+        {% if hide_legend %}<span class="govuk-visually-hidden">{% endif %}
           {{ field.label.text|safe }}
         {% if hide_legend %}</span>{% endif %}
         {% if hint %}
diff --git a/app/templates/components/table.html b/app/templates/components/table.html
index 0571fc5d4..8cbce0241 100644
--- a/app/templates/components/table.html
+++ b/app/templates/components/table.html
@@ -2,7 +2,7 @@
 
 {% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False) -%}
   <table class="table table-font-xsmall">
-    <caption class="heading-medium table-heading{{ ' visuallyhidden' if not caption_visible}}">
+    <caption class="heading-medium table-heading{{ ' govuk-visually-hidden' if not caption_visible}}">
       {{ caption }}
     </caption>
     <thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">
@@ -12,7 +12,7 @@
             {% if field_headings_visible %}
               {{ field_heading }}
             {% else %}
-              <span class="visuallyhidden">{{ field_heading }}</span>
+              <span class="govuk-visually-hidden">{{ field_heading }}</span>
             {% endif %}
           </th>
         {% endfor %}
@@ -138,7 +138,7 @@
 {%- endmacro %}
 
 {% macro hidden_field_heading(text) %}
-  <span class="visuallyhidden">{{ text }}</span>
+  <span class="govuk-visually-hidden">{{ text }}</span>
 {%- endmacro %}
 
 
diff --git a/app/templates/components/tick-cross.html b/app/templates/components/tick-cross.html
index 3a8a21acc..8ab8faaff 100644
--- a/app/templates/components/tick-cross.html
+++ b/app/templates/components/tick-cross.html
@@ -2,12 +2,12 @@
   <li>
     {% if yes %}
       <span class="tick-cross-tick">
-        <span class="visually-hidden">{{ truthy_hint }}</span>
+        <span class="govuk-visually-hidden">{{ truthy_hint }}</span>
         {{ label}}
       </span>
     {% else %}
       <span class="tick-cross-cross">
-        <span class="visually-hidden">{{ falsey_hint }}</span>
+        <span class="govuk-visually-hidden">{{ falsey_hint }}</span>
         {{ label}}
       </span>
     {% endif %}
diff --git a/app/templates/views/check/column-errors.html b/app/templates/views/check/column-errors.html
index 3269850da..c193cfa28 100644
--- a/app/templates/views/check/column-errors.html
+++ b/app/templates/views/check/column-errors.html
@@ -8,7 +8,7 @@
 
 {% set file_contents_header_id = 'file-preview' %}
 {% macro skip_to_file_contents() %}
-  <p class="visually-hidden">
+  <p class="govuk-visually-hidden">
     <a href="#{{ file_contents_header_id }}">Skip to file contents</a>
   </p>
 {% endmacro %}
@@ -165,7 +165,7 @@
         caption=original_file_name,
         caption_visible=False,
         field_headings=[
-          '<span class="visually-hidden">Row in file</span><span aria-hidden="true">1</span>'|safe
+          '<span class="govuk-visually-hidden">Row in file</span><span aria-hidden="true">1</span>'|safe
         ] + column_headers
       ) %}
         {% call index_field() %}
diff --git a/app/templates/views/check/ok.html b/app/templates/views/check/ok.html
index 3f665d683..b6e3012b7 100644
--- a/app/templates/views/check/ok.html
+++ b/app/templates/views/check/ok.html
@@ -9,7 +9,7 @@
 
 {% set file_contents_header_id = 'file-preview' %}
 {% macro skip_to_file_contents() %}
-  <p class="visually-hidden">
+  <p class="govuk-visually-hidden">
     <a href="#{{ file_contents_header_id }}">Skip to file contents</a>
   </p>
 {% endmacro %}
@@ -62,7 +62,7 @@
         caption=original_file_name,
         caption_visible=False,
         field_headings=[
-          '<span class="visually-hidden">Row in file</span><span aria-hidden="true">1</span>'|safe
+          '<span class="govuk-visually-hidden">Row in file</span><span aria-hidden="true">1</span>'|safe
         ] + recipients.column_headers
       ) %}
         {% call index_field() %}
diff --git a/app/templates/views/check/row-errors.html b/app/templates/views/check/row-errors.html
index 1bd71859e..d2dbf10ff 100644
--- a/app/templates/views/check/row-errors.html
+++ b/app/templates/views/check/row-errors.html
@@ -8,7 +8,7 @@
 
 {% set file_contents_header_id = 'file-preview' %}
 {% macro skip_to_file_contents() %}
-  <p class="visually-hidden">
+  <p class="govuk-visually-hidden">
     <a href="#{{ file_contents_header_id }}">Skip to file contents</a>
   </p>
 {% endmacro %}
@@ -64,7 +64,7 @@
       caption=original_file_name,
       caption_visible=False,
       field_headings=[
-        '<span class="visually-hidden">Row in file</span><span aria-hidden="true" class="table-field-invisible-error">1</span>'|safe
+        '<span class="govuk-visually-hidden">Row in file</span><span aria-hidden="true" class="table-field-invisible-error">1</span>'|safe
       ] + recipients.column_headers
     ) %}
       {% call index_field() %}
diff --git a/app/templates/views/choose-account.html b/app/templates/views/choose-account.html
index 62924ed19..654988510 100644
--- a/app/templates/views/choose-account.html
+++ b/app/templates/views/choose-account.html
@@ -53,7 +53,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large {% if current_user.has_access_to_live_and_trial_mode_services %}visually-hidden{% endif %}">
+  <h1 class="heading-large {% if current_user.has_access_to_live_and_trial_mode_services %}govuk-visually-hidden{% endif %}">
     Choose service
   </h1>
 
diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html
index ea02f16e7..5f69b2c10 100644
--- a/app/templates/views/dashboard/dashboard.html
+++ b/app/templates/views/dashboard/dashboard.html
@@ -14,7 +14,7 @@
 
   <div class="dashboard">
 
-    <h1 class="visuallyhidden">Dashboard</h1>
+    <h1 class="govuk-visually-hidden">Dashboard</h1>
     {% if current_user.has_permissions('manage_templates') and not current_service.all_templates %}
       {% include 'views/dashboard/write-first-messages.html' %}
     {% endif %}
diff --git a/app/templates/views/register.html b/app/templates/views/register.html
index a8a29bf87..d0c4c9c2d 100644
--- a/app/templates/views/register.html
+++ b/app/templates/views/register.html
@@ -18,7 +18,7 @@ Create an account
       <div class="extra-tracking">
         {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
       </div>
-      <input class="visually-hidden" aria-hidden="true" tabindex="-1" id="defeat-chrome-autocomplete">
+      <input class="govuk-visually-hidden" aria-hidden="true" tabindex="-1" id="defeat-chrome-autocomplete">
       {{ textbox(form.password, hint="At least 8 characters", width='3-4', autocomplete='new-password') }}
       {{form.auth_type}}
       {{ page_footer("Continue") }}
diff --git a/app/templates/views/signedout.html b/app/templates/views/signedout.html
index e78999d2d..6ff7c97fa 100644
--- a/app/templates/views/signedout.html
+++ b/app/templates/views/signedout.html
@@ -119,12 +119,12 @@
       <h2>Who’s using GOV.UK Notify</h2>
       <div class="grid-row bottom-gutter">
         <div class="column-half">
-          <h3 class="visually-hidden">Services</h3>
+          <h3 class="govuk-visually-hidden">Services</h3>
           <div class="product-page-big-number">{{ counts.services|format_thousands }}</div>
           services
         </div>
         <div class="column-half">
-          <h3 class="visually-hidden">Organisations</h3>
+          <h3 class="govuk-visually-hidden">Organisations</h3>
           <div class="product-page-big-number">{{ counts.organisations|format_thousands }}</div>
           organisations
         </div>
@@ -140,18 +140,18 @@
       <h2>Pricing</h2>
       <div class="grid-row bottom-gutter">
         <div class="column-half">
-          <h3 class="visually-hidden">Emails</h3>
+          <h3 class="govuk-visually-hidden">Emails</h3>
           <div class="product-page-big-number">Unlimited</div>
           free emails
         </div>
         <div class="column-half">
-          <h3 class="visually-hidden">Text messages</h3>
+          <h3 class="govuk-visually-hidden">Text messages</h3>
           <div class="product-page-big-number">Up to 250,000</div>
           free text messages a year,<br>
           then 1.58 pence per message
         </div>
         <div class="column-half">
-          <h3 class="visually-hidden">Letters</h3>
+          <h3 class="govuk-visually-hidden">Letters</h3>
           <div class="product-page-big-number">35 pence</div>
           to print and post a one page letter
         </div>
diff --git a/app/templates/views/templates/_move_to.html b/app/templates/views/templates/_move_to.html
index 05334cec0..f4d2ee494 100644
--- a/app/templates/views/templates/_move_to.html
+++ b/app/templates/views/templates/_move_to.html
@@ -15,7 +15,7 @@
     </div>
     <div id="move_to_new_folder_form">
       <fieldset class="js-will-stick-at-bottom-when-scrolling">
-        <legend class="visuallyhidden">Add to new folder</legend>
+        <legend class="govuk-visually-hidden">Add to new folder</legend>
         {{ textbox(templates_and_folders_form.move_to_new_folder_name, width='1-1') }}
         {{ page_footer('Add to new folder', button_name='operation', button_value='move-to-new-folder') }}
       </fieldset>
@@ -23,7 +23,7 @@
   {% endif %}
   <div id="add_new_folder_form">
     <fieldset class="js-will-stick-at-bottom-when-scrolling">
-      <legend class="visuallyhidden">Add new folder</legend>
+      <legend class="govuk-visually-hidden">Add new folder</legend>
       {{ textbox(templates_and_folders_form.add_new_folder_name, width='1-1') }}
       {{ page_footer('Add new folder', button_name='operation', button_value='add-new-folder') }}
     </fieldset>
@@ -36,7 +36,7 @@
     {{ page_footer('Continue', button_name='operation', button_value='add-new-template') }}
     </div>
   </div>
-  <div class="selection-counter visuallyhidden" role="status" aria-live="polite">
+  <div class="selection-counter govuk-visually-hidden" role="status" aria-live="polite">
     Nothing selected
   </div>
 </div>
diff --git a/tests/javascripts/collapsibleCheckboxes.test.js b/tests/javascripts/collapsibleCheckboxes.test.js
index 88cc74e17..c3c582525 100644
--- a/tests/javascripts/collapsibleCheckboxes.test.js
+++ b/tests/javascripts/collapsibleCheckboxes.test.js
@@ -113,7 +113,7 @@ describe('Collapsible fieldset', () => {
 
       const legend = helpers.element(fieldset.querySelector('legend'));
 
-      expect(legend.hasClass('visuallyhidden')).toBe(true);
+      expect(legend.hasClass('govuk-visually-hidden')).toBe(true);
 
     });