124 lines
5.5 KiB
Markdown
124 lines
5.5 KiB
Markdown
# 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):
|
|
```bash
|
|
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:
|
|
```bash
|
|
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.
|
|
```
|