Eliminate accessibility violations on collections pages

Fixes #3151 Fixes #3152 This deals with a11y violations of the A/AA/aria variety as identified by the Siteimprove Accessibility Checker extension and the WAVE extension.
sul-dlss · Jun 29, 2023 · 47b1ee0 · 47b1ee0
1 parent 1c0f90d
commit 47b1ee0
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 6 deletions.
diff --git a/app/components/collections/detail_component.html.erb b/app/components/collections/detail_component.html.erb
@@ -1,9 +1,10 @@
 <table class="table table-sm mb-5 caption-header">
   <caption>Details
-    <%= helpers.turbo_frame_tag dom_id(collection_version, :edit),
+    <%= helpers.turbo_frame_tag dom_id(collection_version, :edit_details),
           src: edit_link_collection_version_path(
             collection_version,
-            label: "Edit details"
+            label: "Edit details",
+            ref: "details"
           ),
           target: "_top" %>
   </caption>

diff --git a/app/components/collections/show/deposits_header_component.html.erb b/app/components/collections/show/deposits_header_component.html.erb
@@ -11,7 +11,7 @@
       <%= render CitationModalComponent.new %>
     </div>
   </div>
-  <span class="header-text"><%= name %></span><%= render Collections::DraftComponent.new(collection_version: collection_version) %>
+  <h1 class="header-text d-inline-block"><%= name %></h1><%= render Collections::DraftComponent.new(collection_version: collection_version) %>
   <%= helpers.turbo_frame_tag dom_id(collection_version, :edit),
         src: edit_link_collection_version_path(collection_version),
         target: "_top" %>

diff --git a/app/components/collections/show/details_header_component.html.erb b/app/components/collections/show/details_header_component.html.erb
@@ -12,7 +12,7 @@
       <%= render CitationModalComponent.new %>
     </div>
   </div>
-  <span class="header-text"><%= name %></span><%= render Collections::DraftComponent.new(collection_version: collection_version) %>
+  <h1 class="header-text d-inline-block"><%= name %></h1><%= render Collections::DraftComponent.new(collection_version: collection_version) %>
   <%= helpers.turbo_frame_tag dom_id(collection_version, :edit),
         src: edit_link_collection_version_path(collection_version),
         target: "_top" %>

diff --git a/app/components/collections/show/settings_header_component.html.erb b/app/components/collections/show/settings_header_component.html.erb
@@ -11,7 +11,7 @@
       <%= render CitationModalComponent.new %>
     </div>
   </div>
-  <span class="header-text"><%= name %></span><%= render Collections::DraftComponent.new(collection_version: collection_version) %>
+  <h1 class="header-text d-inline-block"><%= name %></h1><%= render Collections::DraftComponent.new(collection_version: collection_version) %>
   <% if collection.head&.decommissioned? %>
     <span class="state">Decommissioned</span>
   <% end %>

diff --git a/app/components/collections/show/tabs_component.html.erb b/app/components/collections/show/tabs_component.html.erb
@@ -1,5 +1,5 @@
 <section class="collection-nav">
-  <nav class="nav">
+  <nav class="nav" role="tablist">
     <%= collection_details_link %>
     <%= collection_settings_link %>
     <%= deposits_link %>

diff --git a/app/javascript/controllers/datatable_works_controller.js b/app/javascript/controllers/datatable_works_controller.js
@@ -12,13 +12,33 @@ export default class extends Controller {
       { select: [1, 5, 6, 7, 8], sortable: false } // Disable unsortable columns
     ]
     if (this.hideDepositorValue) columns.push({ select: 2, hidden: true})
+
     const dt = new DataTable("#worksTable", {
       columns: columns,
       searchable: true
     })
+
     // This scrolls the top of the table into view when paging.
     dt.on('datatable.page', () => {
       dt.table.scrollIntoView()
     })
+
+    // This removes the pagination list and if it is empty, and adds an aria
+    // label for its parent nav, which is done to improve accessibility.
+    dt.on('datatable.init', () => {
+      const paginationList = document.querySelector("ul.dataTable-pagination-list")
+      if (paginationList === null) return
+
+      paginationList.parentNode.setAttribute("aria-label", "Pagination Controls for Deposits")
+
+      if (!paginationList.hasChildNodes()) paginationList.remove()
+    })
+
+    // This adds a label for the datatables search input, which is done to improve accessibility.
+    dt.on('datatable.init', () => {
+      const searchInput = document.querySelector("input.dataTable-input")
+      searchInput.setAttribute("id", "dataTable-search")
+      searchInput.insertAdjacentHTML("afterend", '<label for="dataTable-search" class="visually-hidden">Search for works</label>')
+    })
   }
 }