Tabs y paginación.
Tabs alternan paneles relacionados sin cambiar el nivel de navegación; paginación recorre recursos direccionables.
Cuándo usar
Tabs alternan paneles relacionados sin cambiar el nivel de navegación; paginación recorre recursos direccionables.
- Elegir el elemento HTML nativo antes de agregar una primitiva interactiva.
- Mantener el nombre, el resultado y la acción visibles sin depender de un icono.
- Documentar cualquier excepción en el producto consumidor.
Ejemplo visible
Anatomía
| Parte | Contrato |
|---|---|
| 1 | Tablist o nav |
| 2 | Tab o enlace activo |
| 3 | Panel o página destino |
| 4 | Conteo opcional |
Estados y variantes
| Estado | Comportamiento esperado |
|---|---|
| active/current | Estado semántico visible |
| inactive | Activable |
| disabled | Excepcional y explicado |
| overflow | Scroll visible o salto a lista |
| first/last page | Control anterior o siguiente no disponible |
Accesibilidad
- Tabs implementan el patrón de teclado completo.
- Si cada vista tiene URL útil, preferir enlaces con aria-current.
- La paginación conserva query y filtros.
- El título anuncia la página actual.
HTML de referencia
<nav aria-label="Páginas">
<a href="?page=1" aria-current="page">1</a>
<a href="?page=2">2</a>
</nav>Definition of Done
- Ejemplo visible y código copiable coinciden.
- Teclado, foco, nombre accesible y estado fueron probados.
- El componente funciona sin JavaScript o declara una mejora progresiva acotada.
- Los mensajes cumplen core/prosa en modo estricto.
- La promoción registra versión, compatibilidad y prueba de regresión.