814 - Adding alert component to CSV error area

app/assets/javascripts/errorBanner.js

@@ -12,6 +12,5 @@
     hideBanner: () => $('.banner-dangerous').addClass('display-none'),
     showBanner: () => $('.banner-dangerous')
       .removeClass('display-none')
-      .trigger('focus'),
   };
 })(window);

app/assets/javascripts/fileUpload.js

@@ -15,9 +15,9 @@
 
       // The label gets styled like a button and is used to hide the native file upload control. This is so that
       // users see a button that looks like the others on the site.
-// 
-      this.$form.find('label.file-upload-button').addClass('usa-button margin-bottom-1');
 
+      this.$form.find('label.file-upload-button').addClass('usa-button margin-bottom-1').attr( {role: 'button', tabindex: '0'} );
+      
       // Clear the form if the user navigates back to the page
       $(window).on("pageshow", () => this.$form[0].reset());
 

app/assets/javascripts/main.js

@@ -16,8 +16,6 @@ $(() => GOVUK.modules.start());
 
 $(() => $('.error-message, .usa-error-message').eq(0).parent('label').next('input').trigger('focus'));
 
-$(() => $('.banner-dangerous').eq(0).trigger('focus'));
-
 $(() => $('.govuk-header__container').on('click', function() {
   $(this).css('border-color', '#005ea5');
 }));

app/templates/components/components/alert/template.njk

@@ -11,7 +11,7 @@
   <div class="usa-alert__body">
     <h{{params.header_level}} class="usa-alert__heading">{{params.heading}}</h{{params.header_level}}>
     <p class="usa-alert__text">
-      {{params.text}}
+      {{params.text | safe }}
     </p>
   </div>
 </div>

app/templates/views/check/column-errors.html

@@ -4,6 +4,8 @@
 {% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
 {% from "components/file-upload.html" import file_upload %}
 {% from "components/components/back-link/macro.njk" import usaBackLink %}
+{% from "components/components/alert/macro.njk" import usaAlert %}
+
 
 {% block service_page_title %}
   Error
@@ -64,34 +66,35 @@
 
       {% elif recipients.duplicate_recipient_column_headers %}
 
-        <h1 class='banner-title' data-module="track-error" data-error-type="Duplicate recipient columns" data-error-label="{{ upload_id }}">
+      {% set duplicate_recipient_column_headers = recipients.duplicate_recipient_column_headers
-          There’s a problem with your column names
+        | formatted_list(
-        </h1>
+        conjunction='or',
-           <p>
+        prefix='',
-            We found more than one column called {{ (
+        prefix_plural=''
-            recipients.duplicate_recipient_column_headers
+      ) %}
-            ) | formatted_list(
+      
-              conjunction='or',
+      {{ usaAlert({
-              prefix='',
+          "heading": "There’s a problem with your column names",
-              prefix_plural=''
+          "text": "We found more than one column called " + duplicate_recipient_column_headers + ". Delete or rename one of these columns and try again.",
-            ) }}.
+          "type": "error",
-          </p>
+        })
-        <p>
+      }}
-          Delete or rename one of these columns and try again.
-        </p>
 
       {% elif recipients.missing_column_headers %}
 
-        <h1 class='banner-title' data-module="track-error" data-error-type="Missing placeholder columns" data-error-label="{{ upload_id }}">
+      {% set missing_column_headers = recipients.missing_column_headers | formatted_list(
-          Your column names need to match the double brackets in your template
+        conjunction='and',
-        </h1>
+        prefix='a column called ',
-          <p>
+        prefix_plural='columns called ' 
-            Your file is missing {{ recipients.missing_column_headers | formatted_list(
+      )%}
-              conjunction='and',
+
-              prefix='a column called ',
+      {{ usaAlert({
-              prefix_plural='columns called '
+        "heading": "Your column names need to match the double brackets in your template",
-            ) }}.
+        "text": "Your file is missing " + missing_column_headers + ".",
-          </p>
+        "type": "error",
+        }) 
+      }}
+
 
       {% elif sent_previously %}