Merge accessibility changes into main

Procfile.webpack

@@ -0,0 +1,3 @@
+web: bundle exec rake cf:run_migrations db:migrate && bin/rails server -p $PORT
+worker: bundle exec sidekiq -L ./log/worker.log -C ./config/sidekiq.yml
+webpack: bin/webpack-dev-server

app/assets/javascripts/admin/comments.js.coffee

@@ -1,5 +1,5 @@
 ready = ->
-  $('body').on 'submit', '.new_comment', (e) ->
+  $(document).on 'submit', '.new_comment', (e) ->
     that = $(this)
     e.preventDefault()
     $.ajax
@@ -30,8 +30,9 @@ ready = ->
         else
           signatureWrapper.html("")
 
+        window.fire(that[0], 'ajax:x:success', data)
 
-  $('body').on 'submit', '.destroy-comment', (e) ->
+  $(document).on 'submit', '.destroy-comment', (e) ->
     e.preventDefault()
     $.ajax
       url: $(this).attr('action')

app/assets/javascripts/admin/financial_data.js.coffee

@@ -6,14 +6,13 @@ jQuery ->
     overallBenchmarksTable = ($ "#overall-financial-benchmarks")
     financialTable = ($ "#financial-table")
 
-    ($ "input", form).on "change keyup keydown paste", ->
-      timer ||= setTimeout(saveFinancials, 500 )
+    $("input", form).on "change keyup keydown paste", ->
+      timer ||= setTimeout(saveFinancials, 500)
 
     ($ "button", form).on "click", (event) ->
       do event.preventDefault
       $(this).closest(".form-group").removeClass("form-edit")
 
-
     updateExportsGrowth = (exports) ->
       exportsGrowth = ($ 'tr.exports-growth td.value', benchmarksTable)
       values = exports.map (i, td) ->
@@ -91,13 +90,13 @@ jQuery ->
       url = form.attr('action')
       formData = form.serialize()
       updateBenchmarks()
-
-      jqXHR = $.ajax({
+      $.ajax
         url: url
         data: formData
         type: 'POST'
-        dataType: 'js'
-      })
+        dataType: 'script'
+        success: (_data) ->
+          window.fire(form[0], 'ajax:x:success', null)
 
       ($ 'td.value', financialTable).each (i, td) ->
         input = ($ 'input', ($ td))

app/assets/javascripts/admin/focusable.js.coffee

@@ -0,0 +1,25 @@
+FOCUSABLE_ELEMENTS = 'input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [href], [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)'
+FOCUSABLE_FORM_ELEMENTS = 'input:not([disabled]), select:not([disabled]), textarea:not([disabled])'
+
+window.FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS
+window.FOCUSABLE_FORM_ELEMENTS = FOCUSABLE_FORM_ELEMENTS
+
+visible = (el) ->
+  !el.hidden and (!el.type or el.type != 'hidden') and (el.offsetWidth > 0 or el.offsetHeight > 0)
+
+focusable = (el) ->
+  el.tabIndex >= 0 and !el.disabled and visible(el)
+
+window.focusElement = (el, elements = FOCUSABLE_ELEMENTS) ->
+  autofocusElement = Array.from(el.querySelectorAll(elements)).filter(focusable)[0]
+  if autofocusElement
+    autofocusElement.focus()
+  return
+
+window.autofocusElement = (el) ->
+  autofocusElement = Array.from(el.querySelectorAll('[autofocus]')).filter(focusable)[0]
+  if !autofocusElement
+    autofocusElement = el
+    el.setAttribute('tabindex', '-1')
+  autofocusElement.focus()
+  return

app/assets/javascripts/admin/form_answers.js.coffee

@@ -314,9 +314,12 @@ ready = ->
     if $('.form_answer_attachment').length == 0
       sidebarSection.find(".document-list .p-empty").removeClass("visuallyhidden")
 
-  $(document).on "click", ".form-edit-link", (e) ->
+  $(document).on 'click', '.form-edit-link', (e) ->
     e.preventDefault()
-    $(this).closest(".form-group").addClass("form-edit")
+    element = this.closest('.form-group')
+    if (element)
+      element.classList.add('form-edit')
+
   $(".submit-assessment").on "ajax:error", (e, data, status, xhr) ->
     errors = data.responseJSON
     $(this).addClass("field-with-errors")
@@ -431,24 +434,28 @@ editFormAnswerAutoUpdate = ->
   $(".sic-code .form-save-link").on "click", (e) ->
     e.preventDefault()
     e.stopPropagation()
-    that = $("#form_answer_sic_code")
-    form = $(".edit_form_answer")
+    input = $("#form_answer_sic_code")
+    form = $(e.target).closest('form')
     $.ajax
       action: form.attr("action")
       data: form.serialize()
       method: "PATCH"
       dataType: "json"
 
       success: (result) ->
-        formGroup = that.parents(".form-group")
+        formGroup = input.parents(".form-group")
         formGroup.removeClass("form-edit")
-        formGroup.find(".form-value p").text(that.find("option:selected").text())
+        console.log(formGroup, input)
+        formGroup.find(".form-value p").text(input.val())
         sicCodes = result["form_answer"]["sic_codes"]
         counter = 1
         for row in $(".sector-average-growth td")
           $(row).text(sicCodes[counter.toString()])
           counter += 1
         $(".avg-growth-legend").text(result["form_answer"]["legend"])
+
+        window.fire(form[0], 'ajax:x:success', null)
+
 bindRags =(klass) ->
   $(document).on "click", "#{klass} .btn-rag .dropdown-menu a", (e) ->
     e.preventDefault()

app/assets/javascripts/admin/settings.js.coffee

@@ -117,20 +117,20 @@ jQuery ->
     settingsWrapper.on "click", ".btn-cancel", (e) ->
       e.preventDefault()
 
-      form_well = ($ e.currentTarget).closest('.well')
+      well = ($ e.currentTarget).closest('.well')
 
-      if form_well.hasClass("deadline-form")
+      if well.hasClass("deadline-form")
         wrapper = ($ e.currentTarget).closest('.deadline')
         ($ ".form-value", wrapper).removeClass("hidden")
         ($ ".deadline-form", wrapper).addClass("hidden")
         ($ ".edit-deadline", wrapper).removeClass("hidden")
 
-      else if form_well.hasClass("notification-edit-form")
+      else if well.hasClass("notification-edit-form")
         wrapper = ($ e.currentTarget).closest('li')
         ($ ".form-value", wrapper).removeClass("hidden")
         ($ ".notification-edit-form", wrapper).addClass("hidden")
         ($ ".actions", wrapper).removeClass("hidden")
 
-      else if form_well.hasClass("notification-new-form")
+      else if well.hasClass("notification-new-form")
         wrapper = ($ e.currentTarget).closest('.panel-section')
         ($ ".notification-form", wrapper).addClass("hidden")

app/assets/javascripts/application-admin.js.coffee

@@ -26,7 +26,18 @@
 #= require clean-paste
 
 $(document).ready(() ->
-  $("html").removeClass("no-js").addClass("js")
-  ($ ".timepicker").timePicker()
-  ($ ".datepicker").datepicker({dateFormat: "dd/mm/yy"})
+  $('html').removeClass('no-js').addClass('js')
+  ($ '.timepicker').timePicker()
+  ($ '.datepicker').datepicker({dateFormat: 'dd/mm/yy'})
 )
+
+$(document).on 'ajax:success', 'form', (event, data, _status, _xhr) ->
+  fire(this, 'ajax:x:success', data)
+
+$(document).on 'ajax:error', 'form', (event, data, _status, _xhr) ->
+  fire(this, 'ajax:x:error', data)
+
+window.fire = (obj, name, data) ->
+  event = new CustomEvent(name, detail: data, bubbles: true, cancelable: true)
+  obj.dispatchEvent(event)
+  !event.defaultPrevented

app/assets/javascripts/frontend/form-validation.js.coffee

@@ -145,11 +145,49 @@ window.FormValidation =
       for subquestion in subquestions
         if not @validateSingleQuestion($(subquestion))
           @logThis(question, "validateRequiredQuestion", "This field is required")
-          @addErrorMessage($(subquestion), "This field is required")
+          @addSubfieldError(question, subquestion)
     else
       if not @validateSingleQuestion(question)
         @logThis(question, "validateRequiredQuestion", "This field is required")
-        @addErrorMessage(question, "This field is required")
+        @addQuestionError(question)
+
+  addSubfieldError: (question, subquestion) ->
+    questionRef = question.attr("data-question_ref")
+    input = $(subquestion).find('input,textarea,select').filter(':visible')
+    label = $("label[for='#{input.attr('id')}']").text()
+    incompleteMessage = "Question #{questionRef} is incomplete. It is required and must be filled in."
+
+    if question.hasClass('date-DDMMYYYY')
+      @addErrorMessage($(subquestion), "#{incompleteMessage} Use the format DD/MM/YYYY.")
+    else if question.hasClass('date-MMYYYY')
+      @addErrorMessage($(subquestion), "#{incompleteMessage} Use the format MM/YYYY.")
+    else if question.hasClass('date-YYYY')
+      @addErrorMessage($(subquestion), "#{incompleteMessage} Use the format YYYY.")
+    else if input.hasClass("autocomplete__input")
+      @addErrorMessage($(subquestion), "Question #{questionRef} is incomplete. #{label} is required and an option must be selected from the following dropdown list.")
+    else
+      if question.find(".js-financial-year-latest").length
+        #avoid duplicate errors for financial year questions
+        return
+      else
+        @addErrorMessage($(subquestion), "Question #{questionRef} is incomplete. #{label} is required and must be filled in.")
+
+  addQuestionError: (question) ->
+    questionRef = question.attr("data-question_ref")
+    incompleteMessage = "Question #{questionRef} is incomplete. It is required"
+    if @isOptionsQuestion(question)
+      @addErrorMessage(question, "#{incompleteMessage} and an option must be chosen from the following list.")
+    else if @isSelectQuestion(question)
+      @addErrorMessage(question, "#{incompleteMessage} and an option must be selected from the following dropdown list.")
+    else if @isTextishQuestion(question) && !question.hasClass("question-year")
+      @addErrorMessage(question, "#{incompleteMessage} and must be filled in.")
+    else if question.hasClass("question-year")
+      @addErrorMessage(question, "#{incompleteMessage} and must be filled in. Use the format YYYY.")
+    else if @isCheckboxQuestion(question)
+      if question.find("input[type='checkbox']").length > 1
+        @addErrorMessage(question, "#{incompleteMessage} and at least one option must be chosen from the following list.")
+      else
+        @addErrorMessage(question, "#{incompleteMessage} and confirmation must be given by ticking the checkbox.")
 
   validateMatchQuestion: (question) ->
     q = question.find(".match")
@@ -161,6 +199,7 @@ window.FormValidation =
 
   validateMaxDate: (question) ->
     val = question.find("input[type='number']").val()
+    questionRef = question.attr("data-question_ref")
 
     questionYear = question.find(".js-date-input-year").val()
     questionMonth = question.find(".js-date-input-month").val()
@@ -175,7 +214,7 @@ window.FormValidation =
 
     if not @toDate(questionDate).isValid()
       @logThis(question, "validateMaxDate", "Not a valid date")
-      @addErrorMessage(question, "Not a valid date")
+      @addErrorMessage(question, "Question #{questionRef} is incomplete. The date entered is not valid. Use the format DD/MM/YYYY.")
       return
 
     if diff > 0
@@ -291,6 +330,7 @@ window.FormValidation =
       @addErrorMessage(question, "Not a valid number")
 
   validateEmployeeMin: (question) ->
+    questionRef = question.attr("data-question_ref")
     for subquestion in question.find("input")
       shownQuestion = true
       for conditional in $(subquestion).parents('.js-conditional-question')
@@ -299,9 +339,10 @@ window.FormValidation =
 
       if shownQuestion
         subq = $(subquestion)
+        label = $("label[for='#{subq.attr('id')}']").text()
         if not subq.val() and question.hasClass("question-required")
           @logThis(question, "validateEmployeeMin", "This field is required")
-          @appendMessage(subq.closest(".span-financial"), "This field is required")
+          @appendMessage(subq.closest(".span-financial"), "Question #{questionRef} is incomplete. #{label} is required and must be filled in. Enter '0' if none.")
           @addErrorClass(question)
           continue
         else if not subq.val()
@@ -374,6 +415,7 @@ window.FormValidation =
 
   validateCurrentAwards: (question) ->
     $(".govuk-error-message", question).empty()
+    questionRef = question.attr("data-question_ref")
 
     for subquestion in question.find(".list-add li")
       errors = false
@@ -382,7 +424,7 @@ window.FormValidation =
         if !$(input).val()
           fieldName = $(input).data("dependable-option-siffix")
           fieldName = fieldName[0].toUpperCase() + fieldName.slice(1)
-          fieldError = "#{fieldName} can't be blank. "
+          fieldError = "Question #{questionRef} is incomplete. #{fieldName} is required and an option must be selected from the following list. "
           @logThis(question, "validateCurrentAwards", fieldError)
           @appendMessage($(input).closest('.govuk-form-group'), fieldError)
           errors = true
@@ -402,6 +444,7 @@ window.FormValidation =
       subq = $(subquestion)
       qParent = subq.closest(".js-fy-entries")
       errContainer = subq.closest(".span-financial")
+      questionRef = question.attr("data-question_ref")
 
       shownQuestion = true
       for conditional in $(subquestion).parents('.js-conditional-question')
@@ -413,7 +456,8 @@ window.FormValidation =
 
         if not subq.val() and question.hasClass("question-required")
           @logThis(question, "validateMoneyByYears", "This field is required")
-          @appendMessage(errContainer, "This field is required")
+          label = $("label[for='#{subq.attr('id')}']").text()
+          @appendMessage(errContainer, "Question #{questionRef} is incomplete. #{label} is required and must be filled in. Enter '0' if none.")
           @addErrorClass(question)
           continue
         else if not subq.val()
@@ -448,41 +492,54 @@ window.FormValidation =
     if !conditional
       return
     # end of conditional validation
+    questionRef = question.attr("data-question_ref")
 
     for subquestionBlock in question.find(".by-years-wrapper.show-question .govuk-date-input")
       subq = $(subquestionBlock)
       qParent = subq.closest(".js-fy-entries")
+      label = qParent.find(".js-year-default").text()
       errorsContainer = qParent.find(".govuk-error-message").html()
 
       day = subq.find("input.js-fy-day").val()
       month = subq.find("input.js-fy-month").val()
       year = subq.find("input.js-fy-year").val()
 
-      if (not day or not month or not year)
-        if question.hasClass("question-required") && errorsContainer.length < 1
+      if question.hasClass("question-required") && errorsContainer.length < 1
+        if (not day and not month and not year)
           @logThis(question, "validateDateByYears", "This field is required")
-          @appendMessage(qParent, "This field is required")
+          @appendMessage(qParent, "Question #{questionRef} is incomplete. #{label} is required and must be filled in. Use the format DD/MM/YYYY.")
           @addErrorClass(question)
-      else
-        complexDateString = day + "/" + month + "/" + year
-        date = @toDate(complexDateString)
+        else if (not day)
+          @appendMessage(qParent, "Question #{questionRef} is incomplete. #{label} day is required and must be filled in. Use the format DD.")
+        else if (not month)
+          @appendMessage(qParent, "Question #{questionRef} is incomplete. #{label} month is required and must be filled in. Use the format MM.")
+        else if (not year)
+          @appendMessage(qParent, "Question #{questionRef} is incomplete. #{label} year is required and must be filled in. Use the format YYYY.")
+        else
+          complexDateString = day + "/" + month + "/" + year
+          date = @toDate(complexDateString)
 
-        if not date.isValid()
-          @logThis(question, "validateDateByYears", "Not a valid date")
-          @appendMessage(qParent, "Not a valid date")
-          @addErrorClass(question)
+          if not date.isValid()
+            @logThis(question, "validateDateByYears", "Not a valid date")
+            @appendMessage(qParent, "Not a valid date")
+            @addErrorClass(question)
 
   validateInnovationFinancialDate: (question) ->
-
     val = question.find("input[type='number']").val()
-
+    questionRef = question.attr("data-question_ref")
     questionDay = parseInt(question.find(".innovation-day").val())
     questionMonth = parseInt(question.find(".innovation-month").val())
     questionDate = "#{questionDay}/#{questionMonth}/#{moment().format('Y')}"
 
-    if not @toDate(questionDate).isValid()
+    if (not questionDay and not questionMonth)
+      @addErrorMessage(question, "Question #{questionRef} is incomplete. Year-end is required and must be filled in. Use the format DD/MM.")
+    else if not questionDay
+      @addErrorMessage(question, "Question #{questionRef} is incomplete. Day is required and must be filled in. Use the format DD/MM.")
+    else if not questionMonth
+      @addErrorMessage(question, "Question #{questionRef} is incomplete. Month is required and must be filled in. Use the format DD/MM.")
+    else if not @toDate(questionDate).isValid()
       @logThis(question, "validateMaxDate", "Not a valid date")
-      @addErrorMessage(question, "Not a valid date")
+      @addErrorMessage(question, "Question #{questionRef} is incomplete. It is required and must be filled in. Use the format DD/MM.")
       return
 
   validateDiffBetweenDates: (question) ->

app/assets/javascripts/frontend/js_detector.js.coffee

@@ -0,0 +1,3 @@
+jQuery ->
+  # if the user has javascript enabled, remove non js step value
+  $("#non_js_step_title").val("")