Accessibility updates

app/assets/javascripts/fileUpload.js

@@ -12,12 +12,13 @@
         </button>
       `);
 
-      // Screen reader live region
       const $srStatus = $('#upload-status-live');
       if ($srStatus.length) {
-        $srStatus.text('File is uploading');
+        // Clear and re-set the content to ensure it's treated as a change
-      } else {
+        $srStatus.html('');
-        this.$form.prepend(`<span id="upload-status-live" class="usa-sr-only" role="status" aria-live="polite">File is uploading</span>`);
+        setTimeout(() => {
+          $srStatus.html('<span>File is uploading</span>');
+        }, 50);
       }
     };
 
@@ -25,19 +26,21 @@
 
       this.$form = $(component);
 
-      // The label gets styled like a button and is used to hide the native file upload control. This is so that
+      // Handle "Upload your file" button click — CSP-safe version
-      // users see a button that looks like the others on the site.
+      this.$form.on('click', '[data-module="upload-trigger"]', function () {
-
+        const inputId = $(this).data('file-input-id');
-      this.$form.find('label.file-upload-button').addClass('usa-button margin-bottom-1').attr( {role: 'button', tabindex: '0'} );
+        const fileInput = document.getElementById(inputId);
+        if (fileInput) fileInput.click();
+      });
 
       // Clear the form if the user navigates back to the page
       $(window).on("pageshow", () => this.$form[0].reset());
 
-      // Need to put the event on the container, not the input for it to work properly
+      // Watch for file input changes
-      this.$form.on(
+      this.$form.on('change', '.file-upload-field', () => {
-        'change', '.file-upload-field',
+        this.submit();
-        () => this.submit() && this.showCancelButton()
+        this.showCancelButton();
-      );
+      });
 
     };
 

app/templates/components/file-upload.html

@@ -27,17 +27,21 @@
     </label>
     {{ field(**{
       'class': 'file-upload-field',
+      'id': field.name,
       'accept': allowed_file_extensions|format_list_items('.{item}')|join(',')|e
     }) }}
-    <label class="file-upload-button" for="{{ field.name }}">
+    <button type="button"
-      {{ button_text }}
+        class="usa-button file-upload-button"
-    </label>
+        data-module="upload-trigger"
+        data-file-input-id="{{ field.name }}">
+    {{ button_text }}
+    </button>
     {% if alternate_link and alternate_link_text %}
       <span class="file-upload-alternate-link">
         or <a class="usa-link" href="{{ alternate_link }}">{{ alternate_link_text }}</a>
       </span>
     {% endif %}
-    <label class="file-upload-filename" for="{{ field.name }}"></label>
+    <span class="file-upload-filename" aria-live="polite"></span>
     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
     {{ usaButton({ "text": "Submit", "classes": "file-upload-submit" }) }}
   </form>

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

@@ -21,7 +21,6 @@ Error
 {% block maincolumn_content %}
 
 <div class="">
-  {% call banner_wrapper(type='dangerous') %}
 
   {% if recipients.too_many_rows %}
 
@@ -132,7 +131,6 @@ Error
 
   {% endif %}
 
-  {% endcall %}
 </div>
 
 <!--hide the upload button and back to top link for one off sends-->
@@ -150,7 +148,7 @@ Error
     ) }}
     {% endif %}
   </div>
-  <a href="#content" class="usa-link back-to-top-link">Back to top</a>
+  <a href="#content" class="usa-link back-to-top-link display-block margin-top-2">Back to top</a>
 </div>
 {% endif %}
 

app/templates/views/send.html

@@ -27,6 +27,7 @@
       show_errors=False
     )}}
   </div>
+  <span id="upload-status-live" class="usa-sr-only" role="status" aria-live="polite" aria-atomic="true"></span>
 
   <h2 class="font-body-lg">Your file needs to look like this example</h2>