From c371e4cdc3271346f9dcd6c6ecae9c23f2c41398 Mon Sep 17 00:00:00 2001
From: JKuijperM <jkmontero17@gmail.com>
Date: Fri, 28 Aug 2026 13:29:35 +0200
Subject: [PATCH] Mejoras de accesibilidad en formularios, progreso y
 navegacion

- Anade la utilidad .sr-only en base.css para labels ocultos
  visualmente pero accesibles a lectores de pantalla.
- dashboard.html: labels sr-only en los selects de cuenta/ano/mes del
  formulario de filtros; ARIA completo (role=progressbar,
  aria-valuemin/max/now/label/valuetext) en la barra de progreso del
  widget de objetivos; corrige el bug real de esa barra, que usaba
  goal.percentage en vez de goal.bar_width y podia desbordar el 100%;
  corrige colspan="7" a colspan="5" en la fila vacia de gastos
  recientes (la tabla tiene 5 columnas).
- expense_list.html: id + label sr-only en los selects de ano/mes/
  cuenta; label explicito para el select de categoria; role="group"
  y aria-label en el bloque de filtros por etiquetas (con
  aria-hidden en el texto "Tags:" para evitar doble lectura);
  paginacion pasada de <div> a <nav aria-label="Paginacion de
  gastos">; corrige colspan="4" a colspan="6" en el estado vacio de
  la tabla (6 columnas).
- goals/list.html: mismo ARIA de progreso que en dashboard.html;
  <h2>Objetivos</h2> a <h1>, para que la pagina empiece en h1 como
  el resto.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../expenses/static/expenses/css/base.css     | 17 ++++++
 .../templates/expenses/dashboard.html         | 17 ++++--
 .../templates/expenses/expense_list.html      | 57 ++++++++++---------
 .../expenses/templates/goals/list.html        | 10 +++-
 4 files changed, 67 insertions(+), 34 deletions(-)

diff --git a/expenses_manager/expenses/static/expenses/css/base.css b/expenses_manager/expenses/static/expenses/css/base.css
index 22b7b85..41e7f7d 100644
--- a/expenses_manager/expenses/static/expenses/css/base.css
+++ b/expenses_manager/expenses/static/expenses/css/base.css
@@ -282,6 +282,19 @@ a.danger:visited,
     font-size: 0.85rem;
 }
 
+/* Oculta visualmente sin ocultar a lectores de pantalla. */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
 /* ========================= */
 /* Buttons */
 /* ========================= */
@@ -737,12 +750,16 @@ tr:hover {
 
 .progress-label {
     min-width: 90px;
+    flex-shrink: 0;
+    white-space: nowrap;
     font-size: 0.85rem;
     color: var(--color-text-muted);
 }
 
 .progress-bar {
     width: 100%;
+    flex: 1;
+    min-width: 0;
     background: var(--color-progress-track);
     border-radius: 6px;
     height: 10px;
diff --git a/expenses_manager/expenses/templates/expenses/dashboard.html b/expenses_manager/expenses/templates/expenses/dashboard.html
index 04480d9..49df5a5 100644
--- a/expenses_manager/expenses/templates/expenses/dashboard.html
+++ b/expenses_manager/expenses/templates/expenses/dashboard.html
@@ -56,6 +56,7 @@
                 <input type="hidden" name="period" value="{{ period }}" id="hiddenPeriod">
             {% endif %}
 
+            <label class="sr-only" for="account">Cuenta</label>
             <select name="account" id="account">
                 <option value="">Todas las cuentas</option>
                 {% for acc in accounts %}
@@ -66,6 +67,7 @@
             </select>
 
             {% if not period %}
+                <label class="sr-only" for="yearSelect">Año</label>
                 <select name="year" id="yearSelect">
                     {% for y in year_list %}
                         <option value="{{ y }}" {% if y == selected_year %}selected{% endif %}>
@@ -73,7 +75,8 @@
                         </option>
                     {% endfor %}
                 </select>
-            
+
+                <label class="sr-only" for="monthSelect">Mes</label>
                 <select name="month" id="monthSelect">
                     <option value="">Todo el año</option>
                     {% for m in months %}
@@ -245,7 +248,7 @@
                             <td style="color: var(--color-danger-accent); font-weight: bold;">{{ exp.amount|floatformat:2 }}</td>
                         </tr>
                     {% empty %}
-                        <tr><td colspan="7">No hay gastos recientes registrados</td></tr>
+                        <tr><td colspan="5">No hay gastos recientes registrados</td></tr>
                     {% endfor %}
                 </tbody>
             </table>
@@ -418,13 +421,19 @@
                 <div class="goal-card">
                     <strong>{{ goal.name }}</strong>
 
-                    <div class="progress-bar">
+                    <div class="progress-bar"
+                         role="progressbar"
+                         aria-valuemin="0"
+                         aria-valuemax="100"
+                         aria-valuenow="{{ goal.percentage|unlocalize }}"
+                         aria-label="Progreso de {{ goal.name }}"
+                         aria-valuetext="{{ goal.progress|floatformat:1 }}€ de {{ goal.target_amount|floatformat:1 }}€ ({{ goal.percentage|floatformat:1 }}%)">
                         <div class="progress-fill
                         {% if goal.percentage < 50 %} low
                         {% elif goal.percentage < 80 %} medium
                         {% else %} high
                         {% endif %}"
-                        style="width: {{ goal.percentage|unlocalize }}%"></div>
+                        style="width: {{ goal.bar_width|unlocalize }}%"></div>
                     </div>
 
                     <span class="progress-label">
diff --git a/expenses_manager/expenses/templates/expenses/expense_list.html b/expenses_manager/expenses/templates/expenses/expense_list.html
index f8a0c90..11b6134 100644
--- a/expenses_manager/expenses/templates/expenses/expense_list.html
+++ b/expenses_manager/expenses/templates/expenses/expense_list.html
@@ -11,35 +11,38 @@
     <form method="get" class="filters">
         <div class="filters-main">
 
-            <select name="year">
+            <label class="sr-only" for="filterYear">Año</label>
+            <select name="year" id="filterYear">
                 <option value="">Año</option>
                     {% for y in year_list %}
-                    <option value="{{ y }}" 
+                    <option value="{{ y }}"
                     {% if selected_year == y %}selected{% endif %}
                     >
                     {{ y }}
                 </option>
                 {% endfor %}
             </select>
-            
-            <select name="month">
+
+            <label class="sr-only" for="filterMonth">Mes</label>
+            <select name="month" id="filterMonth">
                 <option value="">Mes</option>
                     {% for m in months %}
-                    <option value="{{ m }}" 
+                    <option value="{{ m }}"
                     {% if selected_month == m %}selected{% endif %}
                     >
                     {{ m }}
                 </option>
                 {% endfor %}
             </select>
-            
-            <select name="account">
+
+            <label class="sr-only" for="filterAccount">Cuenta</label>
+            <select name="account" id="filterAccount">
                 <option value="">Cuenta</option>
                 {% for acc in accounts %}
                     <option value="{{ acc.id }}"
                         {% if selected_account == acc.id %}selected{% endif %}
                     >
-                        {{ acc.name }}    
+                        {{ acc.name }}
                 </option>
                 {% endfor %}
             </select>
@@ -58,22 +61,20 @@
             <summary>Filtros avanzados</summary>
 
             <div class="advanced-content">
-                <label>
-                    Categoría:
-                    <select name="category" onchange="this.form.submit()">
-                        <option value="">Todas</option>
-                        {% for cat in categories %}
-                            <option value="{{ cat.id }}"
-                                {% if selected_category == cat.id %}selected{% endif%}
-                            >
-                                {{ cat.name }}
-                            </option>
-                        {% endfor %}
-                    </select>
-                </label>
-        
-                <div class="tags-filters">
-                    <span>Tags:</span>
+                <label for="filterCategory">Categoría:</label>
+                <select name="category" id="filterCategory" onchange="this.form.submit()">
+                    <option value="">Todas</option>
+                    {% for cat in categories %}
+                        <option value="{{ cat.id }}"
+                            {% if selected_category == cat.id %}selected{% endif%}
+                        >
+                            {{ cat.name }}
+                        </option>
+                    {% endfor %}
+                </select>
+
+                <div class="tags-filters" role="group" aria-label="Filtrar por etiquetas">
+                    <span aria-hidden="true">Tags:</span>
                     <div class="active-tags">
                         {% for tag in tags_with_state %}
                         <a href="?{{ tag.query }}"
@@ -140,7 +141,7 @@
                 </tr>
             {% empty %}
                 <tr>
-                    <td colspan="4"  class="empty-state">
+                    <td colspan="6" class="empty-state">
                         <p>No hay gastos</p>
                         <a href="{% url 'expense_create' %}">Añade el primero</a>
                     </td>
@@ -150,8 +151,8 @@
     </table>
     </div>
 
-    <div class="pagination">
-        <span class="step-links">            
+    <nav class="pagination" aria-label="Paginación de gastos">
+        <span class="step-links">
             {% if page_obj.has_previous %}
                 <a href="?page=1{% if query_params %}&{{ query_params }}{% endif %}">&laquo; Primero</a>
                 <a href="?page={{ page_obj.previous_page_number }}{% if query_params %}&{{ query_params }}{% endif %}">Anterior</a>
@@ -164,6 +165,6 @@
                 <a href="?page={{ page_obj.paginator.num_pages }}{% if query_params %}&{{ query_params }}{% endif %}">Último &raquo;</a>
             {% endif %}
         </span>
-    </div>
+    </nav>
 
 {% endblock %}
\ No newline at end of file
diff --git a/expenses_manager/expenses/templates/goals/list.html b/expenses_manager/expenses/templates/goals/list.html
index c7c0028..9806361 100644
--- a/expenses_manager/expenses/templates/goals/list.html
+++ b/expenses_manager/expenses/templates/goals/list.html
@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block content %}
-<h2>Objetivos</h2>
+<h1>Objetivos</h1>
 
 <a class="btn btn-primary" href="{% url 'goal_create' %}">➕ Nuevo objetivo</a>
 
@@ -34,7 +34,13 @@
                 <span class="progress-label">
                     {{ goal.progress|floatformat:1 }}€ / {{ goal.target_amount|floatformat:1 }}€
                 </span>
-                <div class="progress-bar">
+                <div class="progress-bar"
+                     role="progressbar"
+                     aria-valuemin="0"
+                     aria-valuemax="100"
+                     aria-valuenow="{{ goal.percentage|unlocalize }}"
+                     aria-label="Progreso de {{ goal.name }}"
+                     aria-valuetext="{{ goal.progress|floatformat:1 }}€ de {{ goal.target_amount|floatformat:1 }}€ ({{ goal.percentage|floatformat:1 }}%)">
                     <div class="progress-fill {{ goal.progress_state }}"
                         style="width: {{ goal.bar_width|unlocalize }}%"></div>
                 </div>