fix/PSD-3673 - Enhance table accessibility in notifications section

OfficeForProductSafetyAndStandards · Jan 29, 2025 · 523ab8d · 523ab8d
1 parent 6eaf90c
commit 523ab8d
Show file tree

Hide file tree

Showing 10 changed files with 225 additions and 83 deletions.
diff --git a/app/helpers/investigations_helper.rb b/app/helpers/investigations_helper.rb
@@ -568,6 +568,17 @@ def non_search_cases_page_names
     %w[team_cases your_cases assigned_cases].freeze
   end
 
+  def calculate_row_index(investigation_counter, row_number)
+    # Each investigation has 3 rows (title, meta, status)
+    # So for investigation 0, rows are 1,2,3
+    # For investigation 1, rows are 4,5,6 etc.
+    (investigation_counter * 3) + row_number
+  end
+
+  def investigation_owner(investigation)
+    sanitize(investigation.owner_display_name_for(viewer: current_user))
+  end
+
 private
 
   def search_result_values(_search_terms, number_of_results)

diff --git a/app/views/investigations/_full_table_body.html.erb b/app/views/investigations/_full_table_body.html.erb
@@ -1,54 +1,58 @@
 <tbody class="govuk-table__body" data-cy-case-id="<%= investigation.pretty_id %>">
-  <tr class="govuk-table__row">
-    <th class="govuk-visually-hidden">
-      Notification title
-    </th>
-    <th id="<%= dom_id investigation, :item %>" colspan="5" scope="colgroup" class="govuk-table__header">
-      <%= link_to sanitize(investigation.title), investigation_path(investigation), class: "govuk-link govuk-link--no-visited-state" %>
+  <tr class="govuk-table__row" id="<%= dom_id investigation, :title %>" aria-rowindex="<%= calculate_row_index(investigation_counter, 1) %>">
+    <th scope="row" class="govuk-table__header" colspan="5" headers="case">
+      <span id="desc-<%= investigation.id %>" class="govuk-visually-hidden">
+        Notification number: <%= investigation.pretty_id %>.
+        <%= non_search_cases_page_names.include?(@page_name) ? "Created: #{investigation.created_at.to_formatted_s(:govuk)}" : "Owner: #{investigation_owner(investigation)}" %>.
+        <%= @page_name == "assigned_cases" ? "Assigner: #{sanitize(investigation.owner_team&.name)}" : "Hazard type: #{sanitize(investigation.hazard_type.presence || "Not provided")}" %>.
+        Product count: <%= pluralize investigation.products.count, "product" %>.
+        <%= sorted_by == SortByHelper::SORT_BY_CREATED_AT ? "Created: #{time_ago_in_words(investigation.created_at)} ago" : "Updated: #{date_or_recent_time_ago investigation.updated_at}" %>.
+      </span>
+      <%= link_to sanitize(investigation.title), investigation_path(investigation), class: "govuk-link govuk-link--no-visited-state", "aria-describedby": "desc-#{investigation.id}" %>
     </th>
   </tr>
-  <tr class="govuk-table__row">
-    <th headers="<%= dom_id investigation, :item %>" id="<%= dom_id investigation, :meta %>" class="govuk-visually-hidden">
+  <tr class="govuk-table__row" id="<%= dom_id investigation, :meta %>" aria-rowindex="<%= calculate_row_index(investigation_counter, 2) %>">
+    <th headers="case" id="<%= dom_id investigation, :meta_header %>" class="govuk-visually-hidden">
       Metadata
     </th>
-    <td headers="case <%= dom_id investigation, :item %> <%= dom_id investigation, :meta %>" class="govuk-table__cell">
+    <td headers="case <%= dom_id investigation, :meta_header %>" class="govuk-table__cell">
       <%= investigation.pretty_id %>
     </td>
 
     <% if non_search_cases_page_names.include? @page_name %>
-      <td headers="casecreated <%= dom_id investigation, :item %> <%= dom_id investigation, :meta %>" class="govuk-table__cell">
+      <td headers="casecreated <%= dom_id investigation, :meta_header %>" class="govuk-table__cell">
         <%= investigation.created_at.to_formatted_s(:govuk) %>
       </td>
     <% else %>
-      <td headers="caseowner <%= dom_id investigation, :item %> <%= dom_id investigation, :meta %>" class="govuk-table__cell">
-        <%= sanitize(investigation.owner_display_name_for(viewer: current_user)) %>
+      <td headers="caseowner <%= dom_id investigation, :meta_header %>" class="govuk-table__cell">
+        <%= investigation_owner(investigation) %>
       </td>
     <% end %>
 
     <% if @page_name == "assigned_cases" %>
-      <td headers="assigner" class="govuk-table__cell">
+      <td headers="assigner <%= dom_id investigation, :meta_header %>" class="govuk-table__cell">
         <%= sanitize(investigation.owner_team&.name) %>
       </td>
     <% else %>
-      <td headers="haztype" class="govuk-table__cell">
+      <td headers="haztype <%= dom_id investigation, :meta_header %>" class="govuk-table__cell">
         <%= sanitize(investigation.hazard_type.presence || "Not provided") %>
       </td>
     <% end %>
 
-    <td headers="product_count" class="govuk-table__cell">
+    <td headers="prodcount <%= dom_id investigation, :meta_header %>" class="govuk-table__cell">
       <%= pluralize investigation.products.count, "product" %>
     </td>
 
     <% if sorted_by == SortByHelper::SORT_BY_CREATED_AT %>
-      <td headers="created <%= dom_id investigation, :item %> <%= dom_id investigation, :meta %>" class="govuk-table__cell">
+      <td headers="created <%= dom_id investigation, :meta_header %>" class="govuk-table__cell">
         <%= "#{time_ago_in_words(investigation.created_at)} ago" %>
       </td>
     <% else %>
-      <td headers="updated <%= dom_id investigation, :item %> <%= dom_id investigation, :meta %>" class="govuk-table__cell">
+      <td headers="updated <%= dom_id investigation, :meta_header %>" class="govuk-table__cell">
         <%= date_or_recent_time_ago investigation.updated_at %>
       </td>
     <% end %>
   </tr>
 
-  <%= render "investigations/status_table_row", investigation: investigation %>
+  <%= render "investigations/status_table_row", investigation: investigation, investigation_counter: investigation_counter %>
 </tbody>
diff --git a/app/views/investigations/_restricted_table_body.html.erb b/app/views/investigations/_restricted_table_body.html.erb
@@ -1,22 +1,25 @@
 <tbody class="govuk-table__body">
-  <tr class="govuk-table__row">
-    <th class="govuk-visually-hidden">
-      Notification title
-    </th>
-    <th id="<%= dom_id investigation, :item %>" colspan="4" scope="colgroup" class="govuk-table__header">
+  <tr class="govuk-table__row" id="<%= dom_id investigation, :title %>" aria-rowindex="<%= calculate_row_index(investigation_counter, 1) %>">
+    <th scope="row" class="govuk-table__header" colspan="4" headers="case">
+      <span id="desc-<%= investigation.id %>" class="govuk-visually-hidden">
+        Notification number: <%= investigation.pretty_id %>.
+        <%= non_search_cases_page_names.include?(page_name) ? "Created: #{investigation.created_at.to_formatted_s(:govuk)}" : "Owner: #{investigation_owner(investigation)}" %>.
+        <%= page_name == "assigned_cases" ? "Assigner: #{sanitize(investigation.owner_team&.name)}" : "Hazard type: #{sanitize(investigation.hazard_type.presence || "Not provided")}" %>.
+        Product count: <%= pluralize investigation.products.count, "product" %>.
+      </span>
       <%= "#{sanitize(investigation.case_type&.capitalize)} restricted" %>
     </th>
   </tr>
-  <tr class="govuk-table__row">
-    <th headers="<%= dom_id investigation, :item %>" id="<%= dom_id investigation, :meta %>" class="govuk-visually-hidden">
+  <tr class="govuk-table__row" id="<%= dom_id investigation, :meta %>" aria-rowindex="<%= calculate_row_index(investigation_counter, 2) %>">
+    <th headers="case" id="<%= dom_id investigation, :meta_header %>" class="govuk-visually-hidden">
       Metadata
     </th>
-    <td headers="case <%= dom_id investigation, :item %> <%= dom_id investigation, :meta %>" class="govuk-table__cell">
+    <td headers="case <%= dom_id investigation, :meta_header %>" class="govuk-table__cell">
       <%= investigation.pretty_id %>
     </td>
-    <td headers="caseowner <%= dom_id investigation, :item %> <%= dom_id investigation, :meta %>" class="govuk-table__cell" colspan="2">
+    <td headers="caseowner <%= dom_id investigation, :meta_header %>" class="govuk-table__cell" colspan="2">
       &nbsp;
     </td>
   </tr>
-  <%= render "investigations/status_table_row", investigation: investigation %>
+  <%= render "investigations/status_table_row", investigation: investigation, investigation_counter: investigation_counter %>
 </tbody>
diff --git a/app/views/investigations/_status_table_row.html.erb b/app/views/investigations/_status_table_row.html.erb
@@ -21,7 +21,7 @@
   <% end %>
 <% end %>
 
-<tr class="govuk-table__row">
+<tr class="govuk-table__row" aria-rowindex="<%= calculate_row_index(investigation_counter, 3) %>">
   <th headers="<%= dom_id investigation, :item %>" id="<%= dom_id investigation, :status %>" class="govuk-visually-hidden">
     Type
   </th>

diff --git a/app/views/investigations/_table_body.html.erb b/app/views/investigations/_table_body.html.erb
@@ -1,5 +1,5 @@
 <% if policy(investigation).view_non_protected_details? %>
-  <%= render "investigations/full_table_body", investigation: investigation.decorate, sorted_by: sorted_by, page_name: page_name %>
+  <%= render "investigations/full_table_body", investigation: investigation.decorate, sorted_by: sorted_by, page_name: page_name, investigation_counter: investigation_counter %>
 <% else %>
-  <%= render "investigations/restricted_table_body", investigation: investigation.decorate, page_name: page_name %>
+  <%= render "investigations/restricted_table_body", investigation: investigation.decorate, page_name: page_name, investigation_counter: investigation_counter %>
 <% end %>
diff --git a/app/views/notifications/create/search_for_or_add_a_business.html.erb b/app/views/notifications/create/search_for_or_add_a_business.html.erb
@@ -65,14 +65,14 @@
       <% if @records.any? %>
         <p class="govuk-body"><% if @records_count == 1 %>There is currently 1 business.<% else %>There are currently <%= @records_count %> businesses.<% end %></p>
         <%=
-          govuk_table do |table|
+          govuk_table(html_attributes: { role: "table" }) do |table|
             table.with_head do |head|
               head.with_row do |row|
-                row.with_cell(text: "Trading name")
-                row.with_cell(text: "Registered or Legal name")
-                row.with_cell(text: "Companies House number")
-                row.with_cell(text: "Address")
-                row.with_cell(text: "<span class=\"govuk-visually-hidden\">Select business</span>".html_safe)
+                row.with_cell(text: "Trading name", header: true, html_attributes: { scope: "col" })
+                row.with_cell(text: "Registered or Legal name", header: true, html_attributes: { scope: "col" })
+                row.with_cell(text: "Companies House number", header: true, html_attributes: { scope: "col" })
+                row.with_cell(text: "Address", header: true, html_attributes: { scope: "col" })
+                row.with_cell(text: "<span class=\"govuk-visually-hidden\">Select business</span>".html_safe, header: true, html_attributes: { scope: "col" })
               end
             end
 
@@ -86,20 +86,26 @@
                               end.join("<hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\">")
                             end
 
-                select_button = form_with url: "#{wizard_path}?business_id=#{record.id}", method: :put, builder: GOVUKDesignSystemFormBuilder::FormBuilder do |f|
-                  f.govuk_submit "Select", name: "draft", value: true, secondary: true
+                select_button = if @existing_business_ids.include?(record.id)
+                  ""
+                else
+                  "<span id=\"desc-#{record.id}\" class=\"govuk-visually-hidden\">
+                    Trading name: #{sanitize(record.trading_name)}.
+                    Registered or Legal name: #{sanitize(record.legal_name)}.
+                    Companies House number: #{sanitize(record.company_number)}.
+                    Address: #{sanitize(addresses)}.
+                  </span>".html_safe +
+                  form_with(url: "#{wizard_path}?business_id=#{record.id}", method: :put, builder: GOVUKDesignSystemFormBuilder::FormBuilder) do |f|
+                    f.govuk_submit "Select", name: "draft", value: true, secondary: true, "aria-describedby": "desc-#{record.id}"
+                  end
                 end
 
                 body.with_row do |row|
                   row.with_cell(text: sanitize(record.trading_name))
                   row.with_cell(text: sanitize(record.legal_name))
                   row.with_cell(text: sanitize(record.company_number))
                   row.with_cell(text: sanitize(addresses).html_safe)
-                  if @existing_business_ids.include?(record.id)
-                    row.with_cell(text: "")
-                  else
-                    row.with_cell(text: select_button)
-                  end
+                  row.with_cell(text: select_button.html_safe)
                 end
               end
             end

diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
@@ -30,25 +30,25 @@
               <thead class="govuk-table__head">
                 <tr class="govuk-table__row">
                   <th class="govuk-visually-hidden">&nbsp;</th>
-                  <th id="case" scope="col" class="govuk-table__header">Notification number</th>
+                  <th id="case" scope="col" class="govuk-table__header" aria-label="Notification number">Notification number</th>
                   <% if non_search_cases_page_names.include? @page_name %>
-                    <th id="casecreated" scope="col" class="govuk-table__header">Notification created</th>
+                    <th id="casecreated" scope="col" class="govuk-table__header" aria-label="Notification created">Notification created</th>
                   <% else %>
-                    <th id="caseowner" scope="col" class="govuk-table__header">Notification owner</th>
+                    <th id="caseowner" scope="col" class="govuk-table__header" aria-label="Notification owner">Notification owner</th>
                   <% end %>
 
                   <% if @page_name == "assigned_cases" %>
-                    <th id="assigner" scope="col" class="govuk-table__header">Assigner</th>
+                    <th id="assigner" scope="col" class="govuk-table__header" aria-label="Assigner">Assigner</th>
                   <% else %>
-                    <th id="haztype" scope="col" class="govuk-table__header">Hazard type</th>
+                    <th id="haztype" scope="col" class="govuk-table__header" aria-label="Hazard type">Hazard type</th>
                   <% end %>
 
-                  <th scope="col" class="govuk-table__header">Product count</th>
+                  <th id="prodcount" scope="col" class="govuk-table__header" aria-label="Product count">Product count</th>
 
                   <% if query_params[:sort_by] == SortByHelper::SORT_BY_CREATED_AT && non_search_cases_page_names.exclude?(@page_name) %>
-                    <th id="created" scope="col" class="govuk-table__header">Created</th>
+                    <th id="created" scope="col" class="govuk-table__header" aria-label="Created">Created</th>
                   <% else %>
-                    <th id="updated" scope="col" class="govuk-table__header">Updated</th>
+                    <th id="updated" scope="col" class="govuk-table__header" aria-label="Updated">Updated</th>
                   <% end %>
                 </tr>
               </thead>
@@ -63,21 +63,23 @@
                 <tfoot class="govuk-table__head">
                   <tr class="govuk-table__row">
                     <th class="govuk-visually-hidden">&nbsp;</th>
-                    <th scope="col" class="govuk-table__header">Notification number</th>
-                    <th scope="col" class="govuk-table__header">Notification <%= non_search_cases_page_names.include?(@page_name) ? "created" : "owner" %></th>
+                    <th scope="col" class="govuk-table__header" aria-label="Notification number">Notification number</th>
+                    <th scope="col" class="govuk-table__header" aria-label="<%= non_search_cases_page_names.include?(@page_name) ? "Notification created" : "Notification owner" %>">
+                      Notification <%= non_search_cases_page_names.include?(@page_name) ? "created" : "owner" %>
+                    </th>
 
                     <% if @page_name == "assigned_cases" %>
-                      <th scope="col" class="govuk-table__header">Assigner</th>
+                      <th scope="col" class="govuk-table__header" aria-label="Assigner">Assigner</th>
                     <% else %>
-                      <th scope="col" class="govuk-table__header">Hazard type</th>
+                      <th scope="col" class="govuk-table__header" aria-label="Hazard type">Hazard type</th>
                     <% end %>
 
-                    <th scope="col" class="govuk-table__header">Product count</th>
+                    <th scope="col" class="govuk-table__header" aria-label="Product count">Product count</th>
 
                     <% if query_params[:sort_by] == SortByHelper::SORT_BY_CREATED_AT && non_search_cases_page_names.exclude?(@page_name) %>
-                      <th scope="col" class="govuk-table__header">Created</th>
+                      <th scope="col" class="govuk-table__header" aria-label="Created">Created</th>
                     <% else %>
-                      <th scope="col" class="govuk-table__header">Updated</th>
+                      <th scope="col" class="govuk-table__header" aria-label="Updated">Updated</th>
                     <% end %>
                   </tr>
                 </tfoot>