From a2a6ae7bdd0a41863e68f2d8e315a6558b1b636f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 7 Mar 2021 16:50:35 +0100
Subject: [PATCH] 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                            | 4 ++++
 app/components/admin/budget_phases/phases_component.html.erb | 3 ++-
 config/locales/en/admin.yml                                  | 1 +
 config/locales/es/admin.yml                                  | 1 +
 spec/system/admin/budgets_spec.rb                            | 4 ++--
 5 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 21d0e064a..e96a34cfd 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -212,6 +212,10 @@ $table-header:   #ecf1f6;
 
   table {
 
+    caption {
+      @include element-invisible;
+    }
+
     thead {
 
       &,
diff --git a/app/components/admin/budget_phases/phases_component.html.erb b/app/components/admin/budget_phases/phases_component.html.erb
index 425823203..3e5a2d069 100644
--- a/app/components/admin/budget_phases/phases_component.html.erb
+++ b/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>
diff --git a/config/locales/en/admin.yml b/config/locales/en/admin.yml
index 64437f83c..ecbae70e3 100644
--- a/config/locales/en/admin.yml
+++ b/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
diff --git a/config/locales/es/admin.yml b/config/locales/es/admin.yml
index 7eb81bd86..0a7212b3a 100644
--- a/config/locales/es/admin.yml
+++ b/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
diff --git a/spec/system/admin/budgets_spec.rb b/spec/system/admin/budgets_spec.rb
index aab4f717c..b03c9f88e 100644
--- a/spec/system/admin/budgets_spec.rb
+++ b/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"