From 65287774034bac5f3dba5b9e81ed6cc67cca0441 Mon Sep 17 00:00:00 2001
From: kiddhustle <kiddhustle@wiardweb.com>
Date: Thu, 28 Apr 2022 17:29:56 +0100
Subject: [PATCH] CLDC-1184: re-add tabindex to the logs table

---
 app/frontend/styles/_figure.scss       |  10 ---
 app/frontend/styles/application.scss   |   1 -
 app/views/case_logs/_log_list.html.erb | 108 +++++++++++++------------
 3 files changed, 55 insertions(+), 64 deletions(-)
 delete mode 100644 app/frontend/styles/_figure.scss

diff --git a/app/frontend/styles/_figure.scss b/app/frontend/styles/_figure.scss
deleted file mode 100644
index f1a895dfd..000000000
--- a/app/frontend/styles/_figure.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.app-figure {
-  margin: 0;
-}
-
-.app-figure__caption {
-  @include govuk-font($size: 19);
-  border-top: 1px solid $govuk-border-colour;
-  margin-bottom: govuk-spacing(6);
-  padding-top: govuk-spacing(4);
-}
diff --git a/app/frontend/styles/application.scss b/app/frontend/styles/application.scss
index 9d1103d56..abe376e99 100644
--- a/app/frontend/styles/application.scss
+++ b/app/frontend/styles/application.scss
@@ -18,7 +18,6 @@ $govuk-new-link-styles: true;
 @import "button";
 @import "card";
 @import "document-list";
-@import "figure";
 @import "filter";
 @import "filter-layout";
 @import "header";
diff --git a/app/views/case_logs/_log_list.html.erb b/app/views/case_logs/_log_list.html.erb
index 277997ac6..d2dd66b8c 100644
--- a/app/views/case_logs/_log_list.html.erb
+++ b/app/views/case_logs/_log_list.html.erb
@@ -1,57 +1,59 @@
-<table class="govuk-table">
-  <caption class="govuk-!-text-align-left govuk-!-margin-top-4 govuk-!-margin-bottom-4">
-    <span class="govuk-!-margin-right-4">
-      <strong><%= pagy.count %></strong> total <%= title.downcase %>
-    </span>
-    <%= govuk_link_to "Download (CSV)", "/logs.csv", type: "text/csv" %>
-  </caption>
-  <thead class="govuk-table__head">
-    <tr class="govuk-table__row">
-      <th class="govuk-table__header" scope="col">Log</th>
-      <th class="govuk-table__header" scope="col">Tenant</th>
-      <th class="govuk-table__header" scope="col">Property</th>
-      <th class="govuk-table__header" scope="col">Tenancy starts</th>
-      <th class="govuk-table__header" scope="col">Log created</th>
-      <th class="govuk-table__header" scope="col">Completed</th>
-      <% if current_user.support? %>
-        <th class="govuk-table__header" scope="col">Owning organisation</th>
-        <th class="govuk-table__header" scope="col">Managing organisation</th>
-      <% end %>
-    </tr>
-  </thead>
-  <tbody class="govuk-table__body">
-    <% case_logs.map do |log| %>
-    <tr class="govuk-table__row">
-      <th class="govuk-table__header" scope="row">
-        <%= govuk_link_to log.id, case_log_path(log) %>
-      </th>
-      <td class="govuk-table__cell app-!-font-tabular">
-        <%= log.tenant_code? ? log.tenant_code : "–" %>
-      </td>
-      <td class="govuk-table__cell app-!-font-tabular">
-        <%= log.propcode? ? log.propcode : "–" %>
-      </td>
-      <td class="govuk-table__cell">
-        <%= log.startdate.present? ? log.startdate.to_formatted_s(:govuk_date) : "–" %>
-      </td>
-      <td class="govuk-table__cell">
-        <%= log.created_at.to_formatted_s(:govuk_date) %>
-      </td>
-      <td class="govuk-table__cell">
-        <%= govuk_tag(
-          colour: log.status == "completed" ? "blue" : "grey",
-          text: log.status.humanize,
-        ) %>
-      </td>
-      <% if current_user.support? %>
+<section class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>">
+  <table class="govuk-table">
+    <caption id="<%= title.dasherize %>" class="govuk-!-text-align-left govuk-!-margin-top-4 govuk-!-margin-bottom-4">
+      <span class="govuk-!-margin-right-4">
+        <strong><%= pagy.count %></strong> total <%= title.downcase %>
+      </span>
+      <%= govuk_link_to "Download (CSV)", "/logs.csv", type: "text/csv" %>
+    </caption>
+    <thead class="govuk-table__head">
+      <tr class="govuk-table__row">
+        <th class="govuk-table__header" scope="col">Log</th>
+        <th class="govuk-table__header" scope="col">Tenant</th>
+        <th class="govuk-table__header" scope="col">Property</th>
+        <th class="govuk-table__header" scope="col">Tenancy starts</th>
+        <th class="govuk-table__header" scope="col">Log created</th>
+        <th class="govuk-table__header" scope="col">Completed</th>
+        <% if current_user.support? %>
+          <th class="govuk-table__header" scope="col">Owning organisation</th>
+          <th class="govuk-table__header" scope="col">Managing organisation</th>
+        <% end %>
+      </tr>
+    </thead>
+    <tbody class="govuk-table__body">
+      <% case_logs.map do |log| %>
+      <tr class="govuk-table__row">
+        <th class="govuk-table__header" scope="row">
+          <%= govuk_link_to log.id, case_log_path(log) %>
+        </th>
+        <td class="govuk-table__cell app-!-font-tabular">
+          <%= log.tenant_code? ? log.tenant_code : "–" %>
+        </td>
+        <td class="govuk-table__cell app-!-font-tabular">
+          <%= log.propcode? ? log.propcode : "–" %>
+        </td>
         <td class="govuk-table__cell">
-          <%= log.owning_organisation.name %>
+          <%= log.startdate.present? ? log.startdate.to_formatted_s(:govuk_date) : "–" %>
         </td>
         <td class="govuk-table__cell">
-          <%= log.managing_organisation.name %>
-      </td>
+          <%= log.created_at.to_formatted_s(:govuk_date) %>
+        </td>
+        <td class="govuk-table__cell">
+          <%= govuk_tag(
+            colour: log.status == "completed" ? "blue" : "grey",
+            text: log.status.humanize,
+          ) %>
+        </td>
+        <% if current_user.support? %>
+          <td class="govuk-table__cell">
+            <%= log.owning_organisation.name %>
+          </td>
+          <td class="govuk-table__cell">
+            <%= log.managing_organisation.name %>
+        </td>
+        <% end %>
+      </tr>
       <% end %>
-    </tr>
-    <% end %>
-  </tbody>
-</table>
+    </tbody>
+  </table>
+</section>