Use a caption to identify budget phases table

This makes the table easier to identify when writing tests and using
screen readers.

Since we do not render any other table captions anywhere else, we're
making the caption invisible so only screen reader users will be
affected by this change.

app/assets/stylesheets/admin.scss

@@ -212,6 +212,10 @@ $table-header:   #ecf1f6;
 
   table {
 
+    caption {
+      @include element-invisible;
+    }
+
     thead {
 
       &,

app/components/admin/budget_phases/phases_component.html.erb

@@ -1,5 +1,6 @@
 <% if phases.present? %>
-  <table id="budget-phases-table" class="budget-phases-table table-for-mobile">
+  <table class="budget-phases-table table-for-mobile">
+    <caption><%= t("admin.budgets.edit.phases_caption") %></caption>
     <thead>
       <tr>
         <th><%= t("admin.budgets.edit.phase") %></th>

config/locales/en/admin.yml

@@ -94,6 +94,7 @@ en:
         publish: "Publish budget"
         delete: Delete budget
         phase: Phase
+        phases_caption: "Phases"
         dates: Dates
         enabled: Enabled
         actions: Actions

config/locales/es/admin.yml

@@ -94,6 +94,7 @@ es:
         publish: "Publicar presupuesto"
         delete: Eliminar presupuesto
         phase: Fase
+        phases_caption: "Fases"
         dates: Fechas
         enabled: Habilitada
         actions: Acciones

spec/system/admin/budgets_spec.rb

@@ -255,7 +255,7 @@ describe "Admin budgets", :admin do
 
         expect(page).to have_select "Phase", selected: "Selecting projects"
 
-        expect(page).to have_table "budget-phases-table", with_cols: [
+        expect(page).to have_table "Phases", with_cols: [
           [
             "Information",
             "Accepting projects",
@@ -278,7 +278,7 @@ describe "Admin budgets", :admin do
           ]
         ]
 
-        within_table "budget-phases-table" do
+        within_table "Phases" do
           within "tr", text: "Information" do
             expect(page).to have_css ".budget-phase-enabled.enabled"
             expect(page).to have_link "Edit phase"