ETAPA CALIDAD — Contraste, mobile, conectividad, touch (Sprint 5)

1. Objetivo

Resolver los 4 problemas de calidad identificados en la auditoría del 27 jun 2026, en orden de impacto. Un solo commit al terminar todo.

2. Contexto

Diagnóstico base: auditoría de solidez/usabilidad (27 jun 2026, sin modificaciones). Todos los problemas tienen archivo y línea exacta identificados.

3. DECISIONES YA TOMADAS — no consultar

Contraste teal: Opción B — #43BBC8 queda SOLO para decoración (fondos, bordes, barras, elementos gráficos). Cuando se usa como COLOR DE TEXTO, reemplazar por #494F4F (carbón de marca). No crear variante oscura del teal.
Mobile bottombar: flex-wrap en el contenedor, no width fijo en los botones.
Submit sin try/catch: agregar manejo de error de red que muestre el estado 'error' propio del wizard, no la pantalla cruda de React.
Autocomplete touch: agregar onTouchEnd como fallback junto al onMouseDown existente — no reemplazarlo.
Sin librerías nuevas en ningún fix.

4. Tareas en orden

P1 — Contraste teal como texto (CRÍTICO — sistemático)

En app/globals.css, reemplazar color: var(--color-re-teal) por color: #494F4F en estas clases específicas:

.btn-secondary (botón "Anterior") — línea ~380
.wizard-section-number ("Sección X de Y") — línea ~569
.summary-code — línea ~431
.barrio-autocomplete-item--active (texto del ítem activo) — línea ~319
.consent-required-badge — línea ~490

NO tocar usos de var(--color-re-teal) como background-color, border-color, fill, o en las clases .db-* del dashboard — esos son usos decorativos correctos.

Verificar después del cambio que no quedó ningún color: var(--color-re-teal) en clases del wizard (grep en globals.css sección wizard):

grep -n "color: var(--color-re-teal)" app/globals.css

Los únicos resultados aceptables son en sección .db-* del dashboard.

P2 — Submit sin try/catch (red se cae al enviar)

En components/wizard-form.tsx, función handleSubmit (líneas ~212-226): Envolver el await submitSurvey(...) en try/catch. Si el catch recibe un error de red (fetch failed, network error), setear el estado del wizard a 'error' con mensaje accionable: "No pudimos enviar tu respuesta. Verificá tu conexión e intentá de nuevo." El botón de reintento ya existe en el estado 'error' (wizard-form.tsx:136-152) — solo hay que llegar a ese estado correctamente. No crear app/error.tsx — el estado de error propio del wizard es suficiente.

P3 — Botones bottombar en mobile ≤480px

En app/globals.css, sección .wizard-bottombar (~línea 653): Agregar flex-wrap: wrap al contenedor .wizard-bottombar. En el breakpoint @media (max-width: 480px):

.wizard-bottombar → flex-direction: column-reverse (Siguiente arriba, Anterior abajo)
.btn dentro del bottombar → width: 100%
El span hint entre los botones → order: 3 para que quede al final column-reverse porque el botón primario (Siguiente/Enviar) debe estar arriba en mobile — el pulgar llega más fácil al centro que a la base.

P4 — Autocomplete touch frágil

En components/widgets/barrio-autocomplete-field.tsx y components/widgets/ciudad-select-field.tsx: En el handler de selección de ítem del dropdown, agregar onTouchEnd junto al onMouseDown existente (no reemplazarlo). El onTouchEnd debe llamar e.preventDefault() antes de ejecutar la selección para evitar el blur sintético que cierra la lista antes de que se procese la selección.

5. DoD antes de reportar

git log --name-only -1 — listar todos los archivos tocados

grep de verificación P1:

grep -n "color: var(--color-re-teal)" app/globals.css

Solo resultados en sección .db-*

Build sin errores: npm run build
P2 verificado: en handleSubmit, el catch existe y setea estado 'error' con mensaje accionable (pegar el bloque try/catch completo en el reporte)
P3 verificado: describir el CSS resultante del bottombar en mobile
P4 verificado: describir el handler resultante de selección en autocomplete
Commit: fix(quality): contraste teal, submit red, bottombar mobile, autocomplete touch
Push a Gitea

6. Qué reportar

P1 — Contraste:
- Clases modificadas: [lista con línea antes → después]
- grep verificación: [output]

P2 — Submit try/catch:
- Bloque handleSubmit completo después del fix: [código]

P3 — Bottombar mobile:
- CSS resultante de .wizard-bottombar y el breakpoint: [código]

P4 — Autocomplete touch:
- Handler de selección resultante (onMouseDown + onTouchEnd): [código]

Verificado:
- Build: ✓/✗
- git log --name-only -1: [lista]
- Commit: [hash]

7. Qué NO hacer

❌ No tocar var(--color-re-teal) en usos decorativos (background, border, fill)
❌ No tocar clases .db-* del dashboard
❌ No crear app/error.tsx
❌ No reemplazar onMouseDown — agregar onTouchEnd junto a él
❌ No agregar librerías nuevas
❌ No hacer deploy — solo commit y push a Gitea
❌ No mezclar con los fixes rápidos de la etapa anterior

8. Versionado

fix(quality): contraste teal, submit red, bottombar mobile, autocomplete touch

P1: color de texto teal → #494F4F en 5 clases del wizard (WCAG AA).
P2: try/catch en handleSubmit — error de red muestra estado error del wizard.
P3: flex-wrap + column-reverse en bottombar ≤480px.
P4: onTouchEnd fallback en autocomplete barrio y ciudad.

5.5 KiB Raw Blame History