Skip to content

Fix: mejoras de accesibilidad (WCAG AA) en toda la app

Agustín Cantero requested to merge fix/accesibilidad into dev

Qué

  • Mejor contraste en el texto secundario, los errores en rojo y el borde de los campos de formulario.
  • Las pestañas de la ficha del estudiante, los diálogos, la paginación y los spinners ahora se leen bien con lector de pantalla.
  • Las filas clicables de las tablas ya no duplican la parada de teclado, y los chips de grupo del formulario de estudiante se pueden usar con teclado.
  • Los listados anuncian los cambios de resultados.
  • Textos y etiquetas más consistentes (filtros, avisos de bloques confidenciales, ayuda del selector de instancia).

Por qué

  • Contraste: text-base-content/50 y /60 daban 3,07:1 y 4,12:1, el rojo de las alertas 4,13:1 y el borde de los campos 1,48:1 (1,9:1 en los filtros). WCAG pide 4,5:1 para texto y 3:1 para componentes.
  • Pestañas: tenían role="tab" pero sin aria-selected ni panel, así que el lector no sabía cuál estaba activa.
  • Filas de las tablas: tenían tabIndex y Enter además de los links de acción, por lo que el teclado paraba dos veces por fila y el lector anunciaba una fila sin rol.
  • Chips de grupo: el checkbox usaba display: none, así que no se podía enfocar, y el seleccionado se distinguía solo por el color.
  • Spinners, diálogos y paginación: no tenían nombre accesible, y el cambio de resultados al filtrar o paginar no se avisaba.
  • Etiquetas y avisos: los filtros de Instancias, Incidencias y Recordatorios llevaban "(todos)" o "(todas)" y el resto no, y los avisos confidenciales usaban raya larga.

Cambios

  • globals.css: --color-error pasa a red-700 (5,45:1 en las alertas) y el borde de input, select y textarea a #858585 (3,69:1), respetando los estados de error y foco. Se saca el código del datalist que ya nadie usaba.
  • Contraste del texto secundario: todos los text-base-content/50 y /60 pasan a /70 (5,66:1), en 16 archivos.
  • StudentProfile.tsx: pestañas con aria-selected, tabpanel y navegación con flechas, Inicio y Fin. La pestaña "Salud (confidencial)" pasa a "Salud".
  • StudentsListView, InstanciasTabla y RecordatoriosTabla: se quitan tabIndex y onKeyDown de las filas. En la tabla de recordatorios dentro de una instancia se muestra también "Ver detalle", que era la única entrada por teclado.
  • StudentForm.tsx: GrupoChip con el input sr-only, tilde en el seleccionado y contorno al enfocar.
  • Spinners: los sueltos llevan role="status" y aria-label, y los de dentro de botones aria-hidden (34 archivos).
  • PaginationFooter: región aria-live en el contador y aria-label en el nav. Los mensajes "No se encontraron..." llevan role="status", incluido CatalogoMarco.
  • ConfirmDialog e InstanciaDesdeRecordatorioDialog: aria-labelledby y aria-describedby, y type="submit" en el botón del fondo.
  • RecordatoriosTabla: role="img" en la campana de pendientes.
  • Toolbar.tsx: se elimina la propiedad searchOptions y el <datalist>, sin uso en ningún listado. Se saca además el borde puesto a mano en el buscador y los filtros.
  • IncidenciasListView, InstanciasListView y RecordatoriosListView: etiquetas de filtro sin "(todos)" ni "(todas)".
  • StudentProfile e InstanciaComentarios: avisos de bloques confidenciales con una frase directa.
  • RecordatorioForm: ayuda del selector de instancia reescrita.

Merge request reports

Loading