Fix: Accessibility fixes for WCAG 2.2 update

app/assets/stylesheets/admin/_variables.scss

@@ -32,3 +32,6 @@ $blue-link-colour: #3264A3;
 $govuk-light-blue: #5694ca;
 $govuk-highlight-yellow: #fd0;
 $govuk-warning-red: #d4351c;
+
+$deactivated: #687173;
+$activated: #387A6A;

app/assets/stylesheets/admin/base.scss

@@ -2254,3 +2254,13 @@ label.govuk-label.govuk-checkboxes__label.boolean.optional.govuk-label {
 .alert button.close {
   font-size: pxToRem(18);
 }
+
+.label-status-deactivated {
+  border-color: $deactivated;
+  color: $deactivated;
+}
+
+.label-status-activated {
+  border-color: $activated;
+  color: $activated;
+}

app/assets/stylesheets/admin/forms.scss

@@ -60,6 +60,14 @@ input.form-control, select.form-control,
   }
 }
 
-.qae-form { 
+.qae-form {
   margin-bottom: 50px;
 }
+
+.section-contact-preferences .selectable {
+  cursor: auto;
+
+  input[type="checkbox"] {
+    margin-top: 10px;
+  }
+}

app/assets/stylesheets/admin/layout.scss

@@ -59,6 +59,10 @@ body {
   color: #fff;
   position: relative;
   top: pxToRem(-40);
+
+  a {
+    color: white;
+  }
 }
 
 .dev-banner {

app/assets/stylesheets/admin/page-applications.scss

@@ -134,6 +134,11 @@
   > tbody > tr:first-child > td {
     padding-top: pxToRem(16);
   }
+
+  > tbody > tr > .form_answer_select,
+  > thead > tr > .form_answer_select {
+    text-align: center !important;
+  }
 }
 
 .applications-table, .assessor-table {
@@ -153,7 +158,6 @@
   td > a {
     color: $blue-link-colour;
   }
-
 }
 
 .nav-tabs.submitted-tabs {

app/assets/stylesheets/frontend/layout.scss

@@ -42,6 +42,10 @@ details + details {
   text-align: center;
   font-weight: bold;
   color: #fff;
+
+  a {
+    color: #fff;
+  }
 }
 
 .dev-banner {

app/views/admin/assessors/_form.html.slim

@@ -94,13 +94,13 @@
         = f.label :suspended_at, "Account status"
         br
         - if f.object.suspended?
-          span.label-status.label-status-grey DEACTIVATED
+          span.label-status.label-status-deactivated DEACTIVATED
 
           = link_to "Re-activate",
                     confirm_activate_admin_assessor_path(f.object),
                     class: "govuk-link govuk-link--no-visited-state"
         - else
-          span.label-status.label-status-green ACTIVE
+          span.label-status.label-status-activated ACTIVE
 
           = link_to "Temporarily deactivate",
                     confirm_deactivate_admin_assessor_path(f.object),

app/views/admin/assessors/suspension_status.html.slim

@@ -17,10 +17,10 @@
         | Assessors assigned to Sustainable Development and International Trade awards
     p.govuk-body
       - if @dt_status == "active"
-        span.label-status.label-status-green ACTIVE
+        span.label-status.label-status-activated ACTIVE
         = link_to "Temporarily deactivate", confirm_bulk_deactivate_dt_admin_assessors_path, class: "govuk-link govuk-link--no-visited-state text-danger"
       - else
-        span.label-status.label-status-grey DEACTIVATED
+        span.label-status.label-status-deactivated DEACTIVATED
         = link_to "Re-activate", confirm_bulk_activate_dt_admin_assessors_path, class: "govuk-link govuk-link--no-visited-state"
 
 br
@@ -32,10 +32,10 @@ br
         | Assessors assigned to Promoting Opportunity and Innovation awards
     p.govuk-body
       - if @pi_status == "active"
-        span.label-status.label-status-green ACTIVE
+        span.label-status.label-status-activated ACTIVE
         = link_to "Temporarily deactivate", confirm_bulk_deactivate_pi_admin_assessors_path, class: "govuk-link govuk-link--no-visited-state text-danger"
       - else
-        span.label-status.label-status-grey DEACTIVATED
+        span.label-status.label-status-deactivated DEACTIVATED
         = link_to "Re-activate", confirm_bulk_activate_pi_admin_assessors_path, class: "govuk-link govuk-link--no-visited-state"
 
 br

app/views/admin/comments/_form.html.slim

@@ -4,6 +4,7 @@
   = f.hidden_field :section, id: "#{f.object.section}_section_hidden_field"
   = f.text_area :body, id: "#{f.object.section}_comment_body", class: 'form-control', rows: 4, "data-behavior" => "autosave", "data-autosave-key" => "#{@form_answer.id}-#{f.object.section}-new-comment", required: true
   .comment-actions
+    = f.label :flagged, "Select", for: "#{f.object.section}_flagged_hidden_checkbox"
     = f.check_box :flagged, id: "#{f.object.section}_flagged_hidden_checkbox"
     = link_to "#flag-comment", class: "link-flag-comment js-link-flag-comment"
       span.unflagged-visible

app/views/admin/feedbacks/_overall_feedback_field.html.slim

@@ -1,6 +1,5 @@
 .form-group[data-controller="element-focus"]
   .form-container
-    label.strong
     label.form-label for="feedback_overall_summary" Overall Summary
     .form-value.no-js-update
       - if feedback.overall_summary.present?

app/views/admin/form_answer_attachments/_form.html.slim

@@ -14,11 +14,11 @@
           span[aria-hidden="true"] ×
 
     .attachment-link.if-js-hide
-      = form.label :file, "Attach document", class: "hide"
+      = form.label :file, "Attach document", class: "visuallyhidden"
       = form.file_field :file
 
     .form-group
-      label.form-label Document title
+      = form.label :title, "Document title"
       = form.text_field :title, class: "form-control attachment-title"
       - if current_subject.is_a?(Admin)
         .checkbox

app/views/admin/form_answers/_comment.html.slim

@@ -36,7 +36,7 @@
              remote: true,
              authenticity_token: true) do |f|
 
-    label.if-js-hide Flag
+    = f.label :flagged, "Flag", class: "if-js-hide", for: "flag-comment-#{comment.id}"
     = f.check_box :flagged, class: "flag-comment-checkbox if-js-hide", id: "flag-comment-#{comment.id}"
     .comment-action
       = l comment.created_at, format: :date_at_time

app/views/admin/form_answers/_states_list.html.slim

@@ -1,5 +1,5 @@
 - if policy
   ul.dropdown-menu.pull-right role="menu"
     - collection.each do |state|
-      li.checkbox role="presentation"
+      li.checkbox role="menuitem"
         = link_to t(state, scope: "form_answers.state"), "#", "data-state" => state.to_s, "data-label" => t("#{state}_html", scope: "form_answers.state_short")

app/views/admin/form_answers/appraisal_form_components/_rag_section.html.slim

@@ -24,7 +24,7 @@
       - if editable
         ul.dropdown-menu role="menu"
           - form.options.each do |opt|
-            li class="rag-#{opt[1]}"
+            li class="rag-#{opt[1]}" role="menuitem"
               = link_to "#"
                 - if !esg_section
                   span.icon-rag

app/views/admin/form_answers/appraisal_form_components/_verdict_section.html.slim

@@ -21,7 +21,7 @@
       - if rag_editable
         ul.dropdown-menu role="menu"
           - form.options.each do |opt|
-            li class="rag-#{opt[1]}"
+            li class="rag-#{opt[1]}" role="menuitem"
               = link_to "#"
                 span.icon-rag
                 span.rag-text= opt[0]

app/views/admin/form_answers/collaborators/_form.html.slim

@@ -6,7 +6,7 @@
                   html: { class: "admin-search-collaborators-form" } do |f|
 
   .form-container
-    label.form-label Add collaborator
+    label.form-label for="admin-search-collaborators-query" Add collaborator
 
     .alert.alert-danger.hidden.js-admin-search-collaborators-error-box role="alert"
 

app/views/admin/form_answers/company_details/_address_form.html.slim

@@ -172,8 +172,9 @@
 
                   = f.input :organization_address_street,
                             as: :string,
-                            label: false,
-                            input_html: { class: "form-control" }
+                            label: "Street",
+                            input_html: { class: "form-control" },
+                            label_html: { class: "visuallyhidden" }
               .row
                 .col-md-6
                   = f.input :organization_address_city,

app/views/admin/form_answers/company_details/_company_name_form.html.slim

@@ -8,7 +8,7 @@
 
       = hidden_field_tag :section, "company_name", id: "section_company_name_hidden_field"
       .form-container
-        label.form-label = account_name
+        label.form-label for="form_answer_company_or_nominee_name" = account_name
         .form-value
           p
             - if @form_answer.promotion?

app/views/admin/form_answers/company_details/_goods_services_form.html.slim

@@ -1,7 +1,7 @@
 - unless @form_answer.promotion?
   .form-group[data-controller="element-focus"]
     .form-container
-      label.form-label Description of goods/services
+      label.form-label for="form_answer_data_#{@form_answer.goods_and_services_key}" Description of goods/services
       .form-value
         - if !@form_answer.trade?
           p = @form_answer.goods_and_services
@@ -20,15 +20,15 @@
           .form-fields.form-block
             = f.simple_fields_for :data, include_id: false do |f|
               - if !@form_answer.trade?
-                = f.input @form_answer.goods_and_services_key, as: :text, label: false, input_html: { class: "form-control js-char-count", rows: 3, "data-word-max" => 15 }
+                = f.input @form_answer.goods_and_services_key, as: :text, label: false, input_html: { class: "form-control js-char-count", rows: 3, "data-word-max" => 15, id: "form_answer_data_#{@form_answer.goods_and_services_key}" }
               - elsif @form_answer.document["trade_goods_and_services_explanations"].present?
                 ul.list-unstyled.good-services-list
                   - @form_answer.document["trade_goods_and_services_explanations"].each_with_index do |service, index|
                     - if index < @form_answer.document["trade_goods_and_services_explanations"].length
                       li.well
                         label
                           = "Goods/services #{index + 1}"
-                        input.form-control.js-chart-count type="text" name="form_answer[data_attributes][trade_goods_and_services_explanations][#{index}][desc_short]" value="#{service["desc_short"]}" rows= 3 data-word-max = 15
+                        input.form-control.js-chart-count type="text" name="form_answer[data_attributes][trade_goods_and_services_explanations][#{index}][desc_short]" value="#{service["desc_short"]}" rows= 3 data-word-max = 15 id="form_answer_data_#{@form_answer.goods_and_services_key}"
             .form-actions.text-right
               = link_to "Cancel", "#", class: "btn btn-default form-cancel-link if-no-js-hide", data: { element_focus_target: "dismiss" }
               = f.submit "Save", class: "btn btn-primary pull-right"

app/views/admin/form_answers/company_details/_registration_number_form.html.slim

@@ -7,7 +7,7 @@
                         html: { data: { type: "html", inline_flash_target: "form" }, class: "registration-number-form", id: "registration_number_form_admin_appraisal" } do |f|
         = hidden_field_tag :section, "registration_number", id: "section_registration_number_hidden_field"
         .form-container
-          label.form-label Company/charity registration number
+          label.form-label for="form_answer_data_attributes_registration_number" Company/charity registration number
 
           .form-value
             p

app/views/admin/form_answers/company_details/previous_wins/_form.html.slim

@@ -16,7 +16,10 @@
             .pull-right
               = link_to "Remove", "#", class: "if-no-js-hide remove-link"
               .remove-section.if-js-hide
-                = check_box_tag "form_answer[data_attributes][applied_for_queen_awards_details][#{index}][_destroy]"
+                - checkbox_id = "form_answer_data_attributes_applied_for_queen_awards_details_#{index}__destroy"
+                .input
+                  = check_box_tag "form_answer[data_attributes][applied_for_queen_awards_details][#{index}][_destroy]"
+                = label_tag checkbox_id, "Remove"
 
             .row
               .col-sm-5

app/views/admin/users/_fields_contact_preferences.html.slim

@@ -22,7 +22,7 @@
   = f.input :agree_sharing_of_details_with_lieutenancies, label: "I am happy for my and my organisation's name, contact details and application status to be shared with Lieutenancies so that they can contact us to assist as appropriate.", wrapper_class: "selectable"
 
 .question-group
-  h3 = f.label :qae_info_source, label: "How did the #{controller_name == "users" ? "applicant" : controller_name.singularize} hear about The King's Awards?"
+  h3 = "How did the #{controller_name == "users" ? "applicant" : controller_name.singularize} hear about The King's Awards?"
   .row
     .col-md-4.col-sm-5
       = f.input :qae_info_source,

app/views/admin/users/_fields_organisation_details.html.slim

@@ -1,5 +1,5 @@
 .question-group
-  h3 = f.label :company_name, label: "Name of the organisation"
+  h3 Name of the organisation
   .row
     .col-md-4.col-sm-5
       = f.input :company_name,
@@ -8,7 +8,7 @@
                 label_html: { class: "visuallyhidden" }
 
 .question-group
-  h3 = f.label :company_phone_number, label: "Main telephone number"
+  h3 Main telephone number
   .row
     .col-md-4.col-sm-5
       = f.input :company_phone_number,

app/views/assessor/form_answers/_list_body.html.slim

@@ -2,7 +2,7 @@ tbody
   - FormAnswerDecorator.decorate_collection(@form_answers).each do |obj|
     tr
       - if current_subject.categories_as_lead.include?(category_picker.current_award_type)
-        td = check_box_tag :check, obj.id, false, class: "form-answer-check", id: "check_nomination_#{obj.id}", aria: { label: "Select nomination #{obj.id} for bulk action" }
+        td.form_answer_select = check_box_tag :check, obj.id, false, class: "form-answer-check", id: "check_nomination_#{obj.id}", aria: { label: "Select nomination #{obj.id} for bulk action" }
 
       td.td-title
         - unless obj.company_or_nominee_name.nil?

app/views/assessor/form_answers/index.html.slim

@@ -9,6 +9,7 @@ h1.admin-page-heading
         = f.label :query, "Search", class: "search-input__label"
         = f.hint "By company name, reference number or category", class: "search-input__hint"
         .form-group.search-input
+          = label_tag :award_type, "Award Type", class: "visuallyhidden", aria: { hidden: true }
           = text_field_tag :award_type, params[:award_type], class: "visuallyhidden", aria: { hidden: true }, tabindex: "-1"
           = f.input :query, label: false, input_html: { class: "form-control", type: "search", aria: {label: 'Search applications'} }
           = submit_tag :submit, class: 'search-submit'
@@ -54,7 +55,9 @@ h1.admin-page-heading
         thead
           tr
             - if current_subject.categories_as_lead.include?(category_picker.current_award_type)
-              th
+              th.form_answer_select
+                span.visuallyhidden
+                  | Select
                 span.if-no-js-hide
                   = check_box_tag :check_all, "Check all", false, aria: { label: "Select all applications for bulk action" }
             th.sortable width="250"

app/views/assessor/reports/_case_status_report.html.slim

@@ -1,5 +1,6 @@
 .well
-  h2
+  h1
+    ' Reports
   ul.list-unstyled.list-actions
     li
       = link_to assessor_report_path("cases-status", format: :csv, year: @award_year.year), class: "action-title" do

app/views/shared/form_answers/_top_statuses_filters.html.slim

@@ -7,7 +7,7 @@
                 collection: options,
                 label: false,
                 input_html: { multiple: true, class: 'js-admin-filter-option if-js-hide', aria: {label: 'Status select'} }
-    label.applications-filter__label
+    label.applications-filter__label for="status_application_table_search_form"
       ' Status
     .dropdown.if-no-js-hide
       a.dropdown-toggle.btn.btn-block.btn-default href="#" role="button" aria-expanded="false"
@@ -38,7 +38,7 @@
                 collection: sub_options,
                 label: false,
                 input_html: { multiple: true, class: 'js-admin-filter-option if-js-hide', aria: {label: 'Post Submission Status select'}}
-    label.applications-filter__label
+    label.applications-filter__label for="sub_status_application_table_search_form"
       ' Post Submission Status
     .dropdown.if-no-js-hide
       a.dropdown-toggle.btn.btn-block.btn-default href="#" role="button" aria-expanded="false"

public/404.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
     <title>Page not found (404)</title>