Added a label to the index table's "actions" columns

pangolingo · pangolingo · commit 3f94f4be0ea6 · 2025-05-02T16:15:22.000-05:00
The "actions" columns in the collection table did not have any text in the column header cells. This was fine visually because it's a common pattern to use the final cells for action buttons. But people using a screen readers may not have this visual context. By adding a title of "Actions" to the column, this title is now announced by screen readers when moving into that column.
diff --git a/app/views/administrate/application/_collection_header_actions.html.erb b/app/views/administrate/application/_collection_header_actions.html.erb
@@ -1,4 +1,9 @@
-<% [existing_action?(collection_presenter.resource_name, :edit),
-    existing_action?(collection_presenter.resource_name, :destroy)].count(true).times do %>
-  <th scope="col" class="cell-label--action-button"></th>
+<% colspan = [
+  existing_action?(collection_presenter.resource_name, :edit),
+  existing_action?(collection_presenter.resource_name, :destroy),
+].count(true)
+%>
+
+<% if colspan > 0 %>
+<th scope="col" class="cell-label--action-button" colspan="<%= colspan %>">Actions</th>
 <% end %>
diff --git a/config/locales/administrate.ar.yml b/config/locales/administrate.ar.yml
@@ -28,3 +28,5 @@ ar:
     search:
       clear: مسح البحث
       label: بحث %{resource}
+    table:
+      actions: العمليات
diff --git a/config/locales/administrate.bs.yml b/config/locales/administrate.bs.yml
@@ -27,3 +27,5 @@ bs:
     search:
       clear: Izbriši pretraživanje
       label: Pretraga %{resource}
+    table:
+      actions: Akcije
diff --git a/config/locales/administrate.ca.yml b/config/locales/administrate.ca.yml
@@ -28,3 +28,5 @@ ca:
     search:
       clear: Esborrar la cerca
       label: Cerca %{resource}
+    table:
+      actions: Accions
diff --git a/config/locales/administrate.da.yml b/config/locales/administrate.da.yml
@@ -28,3 +28,5 @@ da:
     search:
       clear: Ryd søgning
       label: Søg %{resource}
+    table:
+      actions: Handlinger
diff --git a/config/locales/administrate.de.yml b/config/locales/administrate.de.yml
@@ -28,3 +28,5 @@ de:
     search:
       clear: Suche zurücksetzen
       label: "%{resource} durchsuchen"
+    table:
+      actions: Aktionen
diff --git a/config/locales/administrate.en.yml b/config/locales/administrate.en.yml
@@ -28,3 +28,5 @@ en:
     search:
       clear: Clear search
       label: Search %{resource}
+    table:
+      actions: Actions
diff --git a/config/locales/administrate.es.yml b/config/locales/administrate.es.yml
@@ -28,3 +28,5 @@ es:
     search:
       clear: Borrar búsqueda
       label: Buscar %{resource}
+    table:
+      actions: Acciones
diff --git a/config/locales/administrate.fi.yml b/config/locales/administrate.fi.yml
@@ -28,3 +28,5 @@ fi:
     search:
       clear: Tyhjennä haku
       label: Etsi %{resource}
+    table:
+      actions: Toiminnot
diff --git a/config/locales/administrate.fr.yml b/config/locales/administrate.fr.yml
@@ -28,3 +28,5 @@ fr:
     search:
       clear: Effacer la recherche
       label: Chercher %{resource}
+    table:
+      actions: Actions
diff --git a/config/locales/administrate.id.yml b/config/locales/administrate.id.yml
@@ -28,3 +28,5 @@ id:
     search:
       clear: Kosongkan pencarian
       label: Cari %{resource}
+    table:
+      actions: Aksi
diff --git a/config/locales/administrate.it.yml b/config/locales/administrate.it.yml
@@ -28,3 +28,5 @@ it:
     search:
       clear: Cancella ricerca
       label: Ricerca %{resource}
+    table:
+      actions: Azioni
diff --git a/config/locales/administrate.ja.yml b/config/locales/administrate.ja.yml
@@ -28,3 +28,5 @@ ja:
     search:
       clear: 検索をクリアする
       label: "%{resource}を検索"
+    table:
+      actions: 操作
diff --git a/config/locales/administrate.ko.yml b/config/locales/administrate.ko.yml
@@ -28,3 +28,5 @@ ko:
     search:
       clear: 검색 초기화
       label: "%{resource} 검색"
+    table:
+      actions: 작업
diff --git a/config/locales/administrate.nl.yml b/config/locales/administrate.nl.yml
@@ -28,3 +28,5 @@ nl:
     search:
       clear: Wissen
       label: Zoeken %{resource}
+    table:
+      actions: Acties
diff --git a/config/locales/administrate.pl.yml b/config/locales/administrate.pl.yml
@@ -28,3 +28,5 @@ pl:
     search:
       clear: Wyczyść wyszukiwanie
       label: Szukanie %{resource}
+    table:
+      actions: Akcje
diff --git a/config/locales/administrate.pt-BR.yml b/config/locales/administrate.pt-BR.yml
@@ -29,3 +29,5 @@ pt-BR:
     search:
       clear: Limpar pesquisa
       label: Pesquisa %{resource}
+    table:
+      actions: Ações
diff --git a/config/locales/administrate.pt.yml b/config/locales/administrate.pt.yml
@@ -29,3 +29,5 @@ pt:
     search:
       clear: Limpar pesquisa
       label: Pesquisa %{resource}
+    table:
+      actions: Ações
diff --git a/config/locales/administrate.ru.yml b/config/locales/administrate.ru.yml
@@ -28,3 +28,5 @@ ru:
     search:
       clear: Очистить поиск
       label: Поиск %{resource}
+    table:
+      actions: Действия
diff --git a/config/locales/administrate.sl.yml b/config/locales/administrate.sl.yml
@@ -28,3 +28,5 @@ sl:
     search:
       clear: Počisti iskanje
       label: Išči %{resource}
+    table:
+      actions: Dejanja
diff --git a/config/locales/administrate.sq.yml b/config/locales/administrate.sq.yml
@@ -28,3 +28,5 @@ sq:
     search:
       clear: Pastro kërkimin
       label: Kërko %{resource}
+    table:
+      actions: Veprime
diff --git a/config/locales/administrate.sv.yml b/config/locales/administrate.sv.yml
@@ -28,3 +28,5 @@ sv:
     search:
       clear: Rensa sökningen
       label: Sök %{resource}
+    table:
+      actions: Åtgärder
diff --git a/config/locales/administrate.tr.yml b/config/locales/administrate.tr.yml
@@ -28,3 +28,5 @@ tr:
     search:
       clear: Temizle
       label: "%{resource} içerisinde ara"
+    table:
+      actions: İşlemler
diff --git a/config/locales/administrate.uk.yml b/config/locales/administrate.uk.yml
@@ -28,3 +28,5 @@ uk:
     search:
       clear: Очистити пошук
       label: пошук %{resource}
+    table:
+      actions: Дії
diff --git a/config/locales/administrate.vi.yml b/config/locales/administrate.vi.yml
@@ -28,3 +28,5 @@ vi:
     search:
       clear: Tìm kiếm rõ ràng
       label: Tìm kiếm %{resource}
+    table:
+      actions: Hành động
diff --git a/config/locales/administrate.zh-CN.yml b/config/locales/administrate.zh-CN.yml
@@ -28,3 +28,5 @@ zh-CN:
     search:
       clear: 清除搜索
       label: 搜索 %{resource}
+    table:
+      actions: 操作
diff --git a/config/locales/administrate.zh-TW.yml b/config/locales/administrate.zh-TW.yml
@@ -27,4 +27,6 @@ zh-TW:
       back_to_app: 返回首頁
     search:
       clear: 清除搜尋
-      label: 搜尋 %{resource}
+      label: 搜尋 %{resource} 
+    table:
+      actions: 操作
diff --git a/spec/example_app/app/views/admin/customers/_collection_header_actions.html.erb b/spec/example_app/app/views/admin/customers/_collection_header_actions.html.erb
@@ -1,8 +1,11 @@
-<%
-  [
-    existing_action?(collection_presenter.resource_name, :edit),
-    existing_action?(collection_presenter.resource_name, :destroy),
-    resources.klass == Customer, # "Become" action
-  ].count(true).times do %>
-  <th scope="col" class="cell-label--action-button"></th>
+<% colspan = [
+  existing_action?(collection_presenter.resource_name, :edit),
+  existing_action?(collection_presenter.resource_name, :destroy),
+  # "Become" action
+  resources.klass == Customer
+].count(true)
+%>
+
+<% if colspan > 0 %>
+<th scope="col" class="cell-label--action-button" colspan="<%= colspan %>">Actions</th>
 <% end %>
diff --git a/spec/features/index_page_spec.rb b/spec/features/index_page_spec.rb
@@ -11,6 +11,14 @@
     expect(page).to have_content(customer.email)
   end
 
+  it "displays table headers" do
+    visit admin_customers_path
+
+    expect(page).to have_table_header("Name")
+    expect(page).to have_table_header("Email")
+    expect(page).to have_table_header("Actions")
+  end
+
   it "adds resource/attribute name to table headers" do
     visit admin_customers_path
 
