Add a caption to headings table in budgets admin

Captions benefit blind screen reader users who navigate through tables,
particularly in this case because we potentially have several tables
with headings (one table per group), so when navigating through tables
it might be hard to know which group the headings belong to.

In this case they also benefit sighted users. Usability tests have shown
the "Groups and headings" section is a bit confusing, so adding a
caption like "Headings in Districts" helps clarifying Districts is a
group and the table refers to headings in that group.

The very same table is rendered in the "headings" step of the budget
creation wizard. However, in that case the information of the caption is
redundant because the page is specific for headings belonging to a
certain group. We're making the element invisible but still keeping it
for screen reader users in order to ease their navigation through
tables.

app/assets/stylesheets/admin.scss

@@ -179,7 +179,10 @@ $table-header:   #ecf1f6;
   table {
 
     caption {
-      @include element-invisible;
+      font-style: italic;
+      font-weight: normal;
+      padding: 0;
+      text-align: $global-left;
     }
 
     thead {

app/assets/stylesheets/admin/budget_phases/phases.scss

@@ -1,5 +1,9 @@
 .budget-phases-table {
 
+  caption {
+    @include element-invisible;
+  }
+
   [aria-pressed] {
     @include switch;
     margin-bottom: 0;

app/assets/stylesheets/admin/budgets_wizard/headings/index.scss

@@ -0,0 +1,6 @@
+.admin-budgets-wizard-headings-index {
+
+  caption {
+    @include element-invisible;
+  }
+}

app/components/admin/budget_headings/headings_component.html.erb

@@ -1,5 +1,6 @@
 <% if headings.any? %>
   <table>
+    <caption><%= t("admin.budgets.show.headings_caption", group: group.name) %></caption>
     <thead>
       <tr>
         <th><%= Budget::Heading.human_attribute_name(:name) %></th>

app/components/admin/budgets_wizard/headings/index_component.html.erb

@@ -1,12 +1,14 @@
-<%= back_link_to admin_budgets_wizard_budget_groups_path(budget, url_params), back_link_text %>
+<main class="admin-budgets-wizard-headings-index">
+  <%= back_link_to admin_budgets_wizard_budget_groups_path(budget, url_params), back_link_text %>
 
-<%= header %>
+  <%= header %>
 
-<%= render Admin::Budgets::HelpComponent.new("headings") %>
+  <%= render Admin::Budgets::HelpComponent.new("headings") %>
-<%= render Admin::BudgetsWizard::CreationTimelineComponent.new("headings") %>
+  <%= render Admin::BudgetsWizard::CreationTimelineComponent.new("headings") %>
 
-<% unless single_heading? %>
+  <% unless single_heading? %>
-  <%= render Admin::BudgetsWizard::Headings::GroupSwitcherComponent.new(group) %>
+    <%= render Admin::BudgetsWizard::Headings::GroupSwitcherComponent.new(group) %>
-  <%= render Admin::BudgetHeadings::HeadingsComponent.new(headings) %>
+    <%= render Admin::BudgetHeadings::HeadingsComponent.new(headings) %>
-<% end %>
+  <% end %>
-<%= render Admin::BudgetsWizard::Headings::CreationStepComponent.new(new_heading) %>
+  <%= render Admin::BudgetsWizard::Headings::CreationStepComponent.new(new_heading) %>
+</main>

config/locales/en/admin.yml

@@ -157,6 +157,7 @@ en:
         add_group: "Add group"
         add_heading: "Add heading"
         groups_and_headings: "Groups and headings"
+        headings_caption: "Headings in %{group}"
       winners:
         calculate: Calculate Winner Investments
         calculated: Winners being calculated, it may take a minute.

config/locales/es/admin.yml

@@ -157,6 +157,7 @@ es:
         add_group: "Añadir grupo"
         add_heading: "Añadir partida"
         groups_and_headings: "Grupos y partidas"
+        headings_caption: "Partidas del grupo %{group}"
       winners:
         calculate: Calcular proyectos ganadores
         calculated: Calculando ganadores, puede tardar un minuto.

spec/system/admin/budgets_wizard/wizard_spec.rb

@@ -70,7 +70,7 @@ describe "Budgets creation wizard", :admin do
     click_button "Create new heading"
 
     expect(page).to have_content "Heading created successfully!"
-    within("table") { expect(page).to have_content "All city" }
+    within_table("Headings in All city") { expect(page).to have_content "All city" }
     expect(page).not_to have_content "There are no headings."
 
     click_link "Manage headings from the Districts group."
@@ -82,7 +82,7 @@ describe "Budgets creation wizard", :admin do
     click_button "Create new heading"
 
     expect(page).to have_content "Heading created successfully!"
-    within("table") { expect(page).to have_content "North" }
+    within_table("Headings in Districts") { expect(page).to have_content "North" }
     expect(page).not_to have_content "There are no headings."
 
     click_button "Add new heading"
@@ -91,7 +91,7 @@ describe "Budgets creation wizard", :admin do
     click_button "Create new heading"
 
     expect(page).to have_content "Heading created successfully!"
-    within("table") { expect(page).to have_content "South" }
+    within_table("Headings in Districts") { expect(page).to have_content "South" }
 
     click_link "Continue to phases"
 
@@ -113,15 +113,15 @@ describe "Budgets creation wizard", :admin do
 
     within "section", text: "Groups and headings" do
       within "section", text: "All city" do
-        within "tbody" do
+        within_table "Headings in All city" do
-          expect(page).to have_css "tr", count: 1
+          expect(page).to have_css "tbody tr", count: 1
           expect(page).to have_content "All city"
         end
       end
 
       within "section", text: "Districts" do
-        within "tbody" do
+        within_table "Headings in Districts" do
-          expect(page).to have_css "tr", count: 2
+          expect(page).to have_css "tbody tr", count: 2
           expect(page).to have_content "North"
           expect(page).to have_content "South"
         end