Fix: mejoras de accesibilidad (WCAG AA) en toda la app
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/50y/60daban 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 sinaria-selectedni panel, así que el lector no sabía cuál estaba activa. - Filas de las tablas: tenían
tabIndexy 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-errorpasa a red-700 (5,45:1 en las alertas) y el borde deinput,selectytextareaa#858585(3,69:1), respetando los estados de error y foco. Se saca el código deldatalistque ya nadie usaba. - Contraste del texto secundario: todos los
text-base-content/50y/60pasan a/70(5,66:1), en 16 archivos. -
StudentProfile.tsx: pestañas conaria-selected,tabpanely navegación con flechas, Inicio y Fin. La pestaña "Salud (confidencial)" pasa a "Salud". -
StudentsListView,InstanciasTablayRecordatoriosTabla: se quitantabIndexyonKeyDownde 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:GrupoChipcon el inputsr-only, tilde en el seleccionado y contorno al enfocar. - Spinners: los sueltos llevan
role="status"yaria-label, y los de dentro de botonesaria-hidden(34 archivos). -
PaginationFooter: regiónaria-liveen el contador yaria-labelen elnav. Los mensajes "No se encontraron..." llevanrole="status", incluidoCatalogoMarco. -
ConfirmDialogeInstanciaDesdeRecordatorioDialog:aria-labelledbyyaria-describedby, ytype="submit"en el botón del fondo. -
RecordatoriosTabla:role="img"en la campana de pendientes. -
Toolbar.tsx: se elimina la propiedadsearchOptionsy el<datalist>, sin uso en ningún listado. Se saca además el borde puesto a mano en el buscador y los filtros. -
IncidenciasListView,InstanciasListViewyRecordatoriosListView: etiquetas de filtro sin "(todos)" ni "(todas)". -
StudentProfileeInstanciaComentarios: avisos de bloques confidenciales con una frase directa. -
RecordatorioForm: ayuda del selector de instancia reescrita.