Merge pull request #213 from unboxed/accessibility-audit

Accessibility audit
unboxed · Mar 5, 2024 · 4ef24c2 · 4ef24c2
2 parents 13816a9 + 0dd2c43
commit 4ef24c2
Show file tree

Hide file tree

Showing 35 changed files with 192 additions and 184 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -4,7 +4,6 @@ $govuk-font-family: open-sans, sans-serif;
 @import "accessible-autocomplete/dist/accessible-autocomplete.min";
 @import "components/buttons";
 @import "components/flashes";
-@import "task-list";
 
 .image-border {
   width: 276px;
@@ -30,3 +29,13 @@ $govuk-font-family: open-sans, sans-serif;
 .govuk-tag {
   max-width: none;
 }
+
+.govuk-list--number ::marker {
+  font-weight: bold;
+}
+
+.skip-to-content-link {
+  left: 50%;
+  position: absolute;
+  transform: translateY(-100%);
+}
diff --git a/app/assets/stylesheets/task-list.scss b/app/assets/stylesheets/task-list.scss
diff --git a/app/views/additional_document_validation_requests/edit.html.erb b/app/views/additional_document_validation_requests/edit.html.erb
@@ -1,5 +1,5 @@
 <% content_for :page_title do %>
-  Additional document validation request #<%= @validation_request["id"] %> - Back-Office Planning System
+  <%= t(".page_title", id:  @validation_request["id"]) %>
 <% end %>
 
 <div class="govuk-grid-row govuk-!-margin-top-7">

diff --git a/app/views/additional_document_validation_requests/show.html.erb b/app/views/additional_document_validation_requests/show.html.erb
@@ -1,5 +1,5 @@
 <% content_for :page_title do %>
-  Additional document validation request #<%= @validation_request["id"] %> - Back-Office Planning System
+  <%= t(".page_title", id:  @validation_request["id"]) %>
 <% end %>
 
 <div class="govuk-grid-row govuk-!-margin-top-7">

diff --git a/app/views/description_change_validation_requests/show.html.erb b/app/views/description_change_validation_requests/show.html.erb
@@ -1,5 +1,5 @@
 <% content_for :page_title do %>
-  Description change validation request #<%= @validation_request["id"] %> - Back-Office Planning System
+  <%= t(".page_title", id:  @validation_request["id"]) %>
 <% end %>
 
 <div class="govuk-grid-row govuk-!-margin-top-7 govuk-!-padding-bottom-8">

diff --git a/app/views/fee_change_validation_requests/show.html.erb b/app/views/fee_change_validation_requests/show.html.erb
@@ -1,5 +1,5 @@
 <% content_for :page_title do %>
-  Other change validation request #<%= @validation_request["id"] %> - Back-Office Planning System
+  <%= t(".page_title", id:  @validation_request["id"]) %>
 <% end %>
 
 <div class="govuk-grid-row govuk-!-padding-bottom-8">

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <a class="skip-to-content-link" href="#main">
+      Skip to content
+    </a>
     <title><%= content_for?(:page_title) ? yield(:page_title) : "Back-Office Planning System" %></title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= csrf_meta_tags %>

diff --git a/app/views/neighbour_responses/_about_you.html.erb b/app/views/neighbour_responses/_about_you.html.erb
@@ -1,3 +1,7 @@
+<% content_for :page_title do %>
+  About you
+<% end %>
+
 <div class="govuk-form-group" data-controller="address-fill">
   <h1 class="govuk-heading-l">Your details</h1>
   <%= form.govuk_text_field :name, label: { text: 'Full name' } %>

diff --git a/app/views/neighbour_responses/_check.html.erb b/app/views/neighbour_responses/_check.html.erb
@@ -1,3 +1,7 @@
+<% content_for :page_title do %>
+  Check your comments before sending
+<% end %>
+
 <h1 class="govuk-heading-l">Check your comments before sending</h1>
 
 <p class="govuk-body">

diff --git a/app/views/neighbour_responses/_response.html.erb b/app/views/neighbour_responses/_response.html.erb
@@ -1,3 +1,7 @@
+<% content_for :page_title do %>
+  Share your comments about the work
+<% end %>
+
 <%= form.govuk_check_boxes_fieldset :tags, multiple: true, legend: { text: "Share your comments about the proposed work", size: "l" }, hint: { text: "Select the topics you want to comment on. You can attach documents to help the planning officer understand your comments on the next page." } do %>
   <%= form.govuk_check_box :tags, :design, label: { text: "Design, size or height of new buildings or extensions" }, checked: response.tags&.include?("design") do %>
     <%= form.govuk_text_area :design, label: { text: "We cannot consider comments about loss of view" } %>

diff --git a/app/views/neighbour_responses/_thoughts.html.erb b/app/views/neighbour_responses/_thoughts.html.erb
@@ -1,3 +1,7 @@
+<% content_for :page_title do %>
+  How do you feel about the proposed work?
+<% end %>
+
 <%= form.govuk_radio_buttons_fieldset(:summary_tag, legend: { size: "l", text: "How do you feel about the proposed work?" }) do %>
   <%= form.govuk_radio_button :summary_tag, 'supportive', label: { text: 'I support the application' } %>
   <%= form.govuk_radio_button :summary_tag, 'neutral', label: { text: "I want to make general comments" } %>

diff --git a/app/views/neighbour_responses/new.html.erb b/app/views/neighbour_responses/new.html.erb
@@ -1,8 +1,6 @@
-<section aria-labelledby="page-heading">
-  <%= form_for @new_response,
+<%= form_for @new_response,
   url: planning_application_neighbour_responses_path(@planning_application["id"]),
   builder: GOVUKDesignSystemFormBuilder::FormBuilder do |form| %>
     <%= hidden_field_tag :stage, @new_response.stage %>
     <%= render @new_response.stage, form: form, response: form.object %>
-  <% end %>
-</section>
+<% end %>
diff --git a/app/views/neighbour_responses/start.html.erb b/app/views/neighbour_responses/start.html.erb
@@ -1,3 +1,7 @@
+<% content_for :page_title do %>
+  Comment on a planning application
+<% end %>
+
 <h1 class="govuk-heading-l">Comment on a planning application</h1>
 
 <h2 class="govuk-heading-m">

diff --git a/app/views/neighbour_responses/thank_you.html.erb b/app/views/neighbour_responses/thank_you.html.erb
@@ -1,3 +1,7 @@
+<% content_for :page_title do %>
+  We've got your comments
+<% end %>
+
 <div class="govuk-panel govuk-panel--confirmation">
   <h1 class="govuk-panel__title">
     We've got your comments

diff --git a/app/views/other_change_validation_requests/show.html.erb b/app/views/other_change_validation_requests/show.html.erb
@@ -1,5 +1,5 @@
 <% content_for :page_title do %>
-  Other change validation request #<%= @validation_request["id"] %> - Back-Office Planning System
+  <%= t(".page_title", id:  @validation_request["id"]) %>
 <% end %>
 
 <div class="govuk-grid-row govuk-!-margin-top-7 govuk-!-padding-bottom-8">

diff --git a/app/views/ownership_certificate_validation_requests/show.html.erb b/app/views/ownership_certificate_validation_requests/show.html.erb
@@ -1,5 +1,5 @@
 <% content_for :page_title do %>
-  Other change validation request #<%= @validation_request["id"] %> - Back-Office Planning System
+  <%= t(".page_title", id:  @validation_request["id"]) %>
 <% end %>
 
 <div class="govuk-grid-row govuk-!-padding-bottom-8">

diff --git a/app/views/ownership_certificates/edit.html.erb b/app/views/ownership_certificates/edit.html.erb
@@ -1,8 +1,7 @@
-<section aria-labelledby="page-heading">
-  <% content_for :page_title do %>
-    Confirm ownership
-  <% end %>
-</section>
+<% content_for :page_title do %>
+  <%= t(".page_title", id:  @validation_request["id"]) %>
+<% end %>
+
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
     <h1 class="govuk-heading-l">Confirm ownership</h1>

diff --git a/app/views/ownership_certificates/show.html.erb b/app/views/ownership_certificates/show.html.erb
@@ -1,3 +1,7 @@
+<% content_for :page_title do %>
+  Confirm ownership
+<% end %>
+
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
     <h1 class="govuk-heading-l">Confirm ownership</h1>

diff --git a/app/views/planning_applications/show.html.erb b/app/views/planning_applications/show.html.erb
@@ -1,3 +1,10 @@
+<% content_for :page_title do %>
+  Planning application for 
+  <%= @planning_application["site"]["address_1"] %>, 
+  <%= @planning_application["site"]["address_2"] %>, 
+  <%= @planning_application["site"]["postcode"] %>
+<% end %>
+
 <h1 class="govuk-heading-l">
   <%= @planning_application["site"]["address_1"] %>, 
   <%= @planning_application["site"]["address_2"] %>, 

diff --git a/app/views/pre_commencement_condition_validation_requests/show.html.erb b/app/views/pre_commencement_condition_validation_requests/show.html.erb
@@ -1,5 +1,5 @@
 <% content_for :page_title do %>
-  Pre-commencement conditions request - Back-Office Planning System
+  <%= t(".page_title", id:  @validation_request["id"]) %>
 <% end %>
 
 <div class="govuk-grid-row govuk-!-padding-bottom-8">

diff --git a/app/views/red_line_boundary_change_validation_requests/show.html.erb b/app/views/red_line_boundary_change_validation_requests/show.html.erb
@@ -1,5 +1,5 @@
 <% content_for :page_title do %>
-  Red line boundary change validation request #<%= @validation_request["id"] %> - Back-Office Planning System
+  <%= t(".page_title", id:  @validation_request["id"]) %>
 <% end %>
 
 <div class="govuk-grid-row govuk-!-margin-top-7 govuk-!-padding-bottom-8">

diff --git a/app/views/replacement_document_validation_requests/show.html.erb b/app/views/replacement_document_validation_requests/show.html.erb
@@ -1,5 +1,5 @@
 <% content_for :page_title do %>
-  Replacement document validation request #<%= @validation_request["id"] %> - Back-Office Planning System
+  <%= t(".page_title", id:  @validation_request["id"]) %>
 <% end %>
 
 <div class="govuk-grid-row govuk-!-margin-top-7">

diff --git a/app/views/site_notices/download.html.erb b/app/views/site_notices/download.html.erb
@@ -1,3 +1,5 @@
+<% content_for :page_title, "Download your site notice" %>
+
 <h1 class="govuk-heading-l">
   <%= @planning_application["site"]["address_1"] %>, 
   <%= @planning_application["site"]["address_2"] %>, 

diff --git a/app/views/validation_requests/_additional_document_validation_requests.html.erb b/app/views/validation_requests/_additional_document_validation_requests.html.erb
@@ -1,15 +1,17 @@
-<li>
-  <h2 class="moj-task-list__section">
-    <span class="moj-task-list__section-number"><%= count_total_requests(@validation_requests, "additional_document_validation_requests") %> </span>Provide new or missing documents
-  </h2>
-  <ul class="moj-task-list__items" id="additional-document-validation-requests">
+<li class="govuk-!-margin-top-8">
+  <h3 class="app-task-list__section">
+    Provide new or missing documents
+  </h3>
+  <ul class="app-task-list__items" id="additional-document-validation-requests">
     <% @validation_requests["data"]["additional_document_validation_requests"].each do |change_request| %>
-      <li class="moj-task-list__item">
-        <% if change_request["state"] == "open" %>
-          <%= link_to "New document", edit_additional_document_validation_request_path(change_request["id"], planning_application_id: params["planning_application_id"], change_access_id: params["change_access_id"]), class: "moj-task-list__task-name" %>
-        <% else %>
-          <%= link_to "New document", additional_document_validation_request_path(change_request["id"], planning_application_id: params["planning_application_id"], change_access_id: params["change_access_id"]), class: "moj-task-list__task-name" %>
-        <% end %>
+      <li class="govuk-task-list__item govuk-task-list__item--with-link">
+        <div class="govuk-task-list__name-and-hint">
+          <% if change_request["state"] == "open" %>
+            <%= link_to "New document", edit_additional_document_validation_request_path(change_request["id"], planning_application_id: params["planning_application_id"], change_access_id: params["change_access_id"]), class: "govuk-link govuk-task-list__link" %>
+          <% else %>
+            <%= link_to "New document", additional_document_validation_request_path(change_request["id"], planning_application_id: params["planning_application_id"], change_access_id: params["change_access_id"]), class: "govuk-link govuk-task-list__link" %>
+          <% end %>
+        </div>
 
         <%= render "validation_requests/change_request_state", change_request: change_request %>
       </li>

diff --git a/app/views/validation_requests/_change_request_state.html.erb b/app/views/validation_requests/_change_request_state.html.erb
@@ -1,13 +1,13 @@
 <% if change_request["state"] == 'open' %>
-  <strong class="govuk-tag govuk-tag--grey" style="float: right;">
+  <div class="govuk-tag govuk-tag--grey govuk-task-list__status" style="float: right;">
     Not started
-  </strong>
+  </div>
 <% elsif change_request["state"] == 'cancelled' %>
-  <strong class="govuk-tag app-task-list__tag" style="float: right;">
+  <div class="govuk-tag app-task-list__tag govuk-task-list__status" style="float: right;">
     Cancelled
-  </strong>
+  </div>
 <% else %>
-  <strong class="govuk-tag app-task-list__tag" style="float: right;">
+  <div class="govuk-tag app-task-list__tag govuk-task-list__status" style="float: right;">
     Complete
-  </strong>
+  </div>
 <% end %>
diff --git a/app/views/validation_requests/_description_change_validation_requests.html.erb b/app/views/validation_requests/_description_change_validation_requests.html.erb
@@ -1,15 +1,17 @@
-<li>
-  <h2 class="moj-task-list__section">
-    <span class="moj-task-list__section-number">1. </span>Confirm changes to your application description
-  </h2>
-  <ul class="moj-task-list__items" id="description-change-validation-requests">
+<li class="govuk-!-margin-top-8">
+  <h3 class="app-task-list__section">
+    Confirm changes to your application description
+  </h3>
+  <ul class="app-task-list__items" id="description-change-validation-requests">
     <% @validation_requests["data"]["description_change_validation_requests"].each do |change_request| %>
-      <li class="moj-task-list__item">
-        <% if change_request["state"] == "open" %>
-          <%= link_to "Description", edit_description_change_validation_request_path(change_request["id"], planning_application_id: params["planning_application_id"], change_access_id: params["change_access_id"]), class: "moj-task-list__task-name" %>
-        <% else %>
-          <%= link_to "Description", description_change_validation_request_path(change_request["id"], planning_application_id: params["planning_application_id"], change_access_id: params["change_access_id"]), class: "moj-task-list__task-name" %>
-        <% end %>
+      <li class="govuk-task-list__item govuk-task-list__item--with-link">
+        <div class="govuk-task-list__name-and-hint">
+          <% if change_request["state"] == "open" %>
+            <%= link_to "Description", edit_description_change_validation_request_path(change_request["id"], planning_application_id: params["planning_application_id"], change_access_id: params["change_access_id"]), class: "moj-task-list__task-name" %>
+          <% else %>
+            <%= link_to "Description", description_change_validation_request_path(change_request["id"], planning_application_id: params["planning_application_id"], change_access_id: params["change_access_id"]), class: "moj-task-list__task-name" %>
+          <% end %>
+        </div>
 
         <%= render "validation_requests/change_request_state", change_request: change_request %>
       </li>

diff --git a/app/views/validation_requests/_fee_change_validation_requests.html.erb b/app/views/validation_requests/_fee_change_validation_requests.html.erb
@@ -1,16 +1,17 @@
-<li>
-  <h2 class="moj-task-list__section">
-    <span class="moj-task-list__section-number"><%= count_total_requests(@validation_requests, "fee_change_validation_requests") %></span>
+<li class="govuk-!-margin-top-8">
+  <h3 class="app-task-list__section">
     Respond to fee change request
-  </h2>
-  <ul class="moj-task-list__items" id="other-change-validation-requests">
+  </h3>
+  <ul class="app-task-list__items" id="other-change-validation-requests">
     <% @validation_requests["data"]["fee_change_validation_requests"].each do |change_request| %>
-      <li class="moj-task-list__item">
-        <% if change_request["state"] == "open" %>
-          <%= link_to "Fee change", edit_fee_change_validation_request_path(change_request["id"], planning_application_id: params["planning_application_id"], change_access_id: params["change_access_id"]), class: "moj-task-list__task-name" %>
-        <% else %>
-          <%= link_to "Fee change", fee_change_validation_request_path(change_request["id"], planning_application_id: params["planning_application_id"], change_access_id: params["change_access_id"]), class: "moj-task-list__task-name" %>
-        <% end %>
+      <li class="govuk-task-list__item govuk-task-list__item--with-link">
+        <div class="govuk-task-list__name-and-hint">
+          <% if change_request["state"] == "open" %>
+            <%= link_to "Fee change", edit_fee_change_validation_request_path(change_request["id"], planning_application_id: params["planning_application_id"], change_access_id: params["change_access_id"]), class: "moj-task-list__task-name" %>
+          <% else %>
+            <%= link_to "Fee change", fee_change_validation_request_path(change_request["id"], planning_application_id: params["planning_application_id"], change_access_id: params["change_access_id"]), class: "moj-task-list__task-name" %>
+          <% end %>
+        </div>
 
         <%= render "validation_requests/change_request_state", change_request: change_request %>
       </li>

diff --git a/app/views/validation_requests/_other_change_validation_requests.html.erb b/app/views/validation_requests/_other_change_validation_requests.html.erb
@@ -1,15 +1,17 @@
-<li>
-  <h2 class="moj-task-list__section">
-    <span class="moj-task-list__section-number"><%= count_total_requests(@validation_requests, "other_change_validation_requests")   %></span>Respond to other request
-  </h2>
-  <ul class="moj-task-list__items" id="other-change-validation-requests">
+<li class="govuk-!-margin-top-8">
+  <h3 class="app-task-list__section">
+    Respond to other request
+  </h3>
+  <ul class="app-task-list__items" id="other-change-validation-requests">
     <% @validation_requests["data"]["other_change_validation_requests"].each do |change_request| %>
-      <li class="moj-task-list__item">
-        <% if change_request["state"] == "open" %>
-          <%= link_to "Other request", edit_other_change_validation_request_path(change_request["id"], planning_application_id: params["planning_application_id"], change_access_id: params["change_access_id"]), class: "moj-task-list__task-name" %>
-        <% else %>
-          <%= link_to "Other request", other_change_validation_request_path(change_request["id"], planning_application_id: params["planning_application_id"], change_access_id: params["change_access_id"]), class: "moj-task-list__task-name" %>
-        <% end %>
+      <li class="govuk-task-list__item govuk-task-list__item--with-link">
+        <div class="govuk-task-list__name-and-hint">
+          <% if change_request["state"] == "open" %>
+            <%= link_to "Other request", edit_other_change_validation_request_path(change_request["id"], planning_application_id: params["planning_application_id"], change_access_id: params["change_access_id"]), class: "moj-task-list__task-name" %>
+          <% else %>
+            <%= link_to "Other request", other_change_validation_request_path(change_request["id"], planning_application_id: params["planning_application_id"], change_access_id: params["change_access_id"]), class: "moj-task-list__task-name" %>
+          <% end %>
+        </div>
 
         <%= render "validation_requests/change_request_state", change_request: change_request %>
       </li>