Pestañas

La plantilla ya trae la lista dibujada, la pestaña inicial marcada y los demás paneles con hidden — la página nace correcta antes del script. El JavaScript pone lo que el HTML no da: los roles que hacen que el lector de pantalla anuncie "pestaña, 2 de 4", la conexión entre pestaña y panel y el teclado, en el que la lista es una sola parada del Tab.

Ejemplos

El mismo marcado, con una clase o un atributo más.

Cómo usar

Escribe las clases, aria-selected="true" en la pestaña inicial y hidden en los demás paneles. Las pestañas y los paneles se emparejan por orden: la tercera pestaña abre el tercer panel.

<div class="tuc-tabs" data-tuc-tabs>
  <div class="tuc-tabs__list">
    <button class="tuc-tabs__tab" aria-selected="true">Datos</button>
    <button class="tuc-tabs__tab">Dirección</button>
  </div>
  <div class="tuc-tabs__panel">…</div>
  <div class="tuc-tabs__panel" hidden>…</div>
</div>

Sin aria-selected en ninguna, se abre la primera pestaña activa. El script da type="button" a las pestañas que no tienen type — sin eso, cambiar de pestaña dentro de un <form> enviaría el formulario —, crea los id que faltan y conecta pestaña y panel mediante aria-controls y aria-labelledby.

Con HTMX, panel bajo demanda

Para no cargar el contenido de todas las pestañas a la vez, cada pestaña busca su propio panel la primera vez que se abre. Activa data-manual="true": en el modo manual, abrir es siempre un clic — de ratón, de Enter o de Espacio —, así que el hx-trigger en la pestaña cubre todos los caminos.

<div class="tuc-tabs" data-tuc-tabs data-manual="true">
  <div class="tuc-tabs__list">
    <button class="tuc-tabs__tab" aria-selected="true">Resumen</button>
    <button class="tuc-tabs__tab" hx-get="{% url 'customer-invoices' customer.pk %}"
            hx-target="#invoices" hx-trigger="click once">Facturas</button>
  </div>
  <div class="tuc-tabs__panel">{% include "customers/summary.html" %}</div>
  <div class="tuc-tabs__panel" id="invoices" hidden></div>
</div>

En JavaScript

const tabs = new Tucano.Tabs('#customer', {
  selected: 1,        // índice de la pestaña inicial
  manual: true,
  onChange: (index, { tab, panel }) => console.log(index, tab.textContent),
});

tabs.select(2);                     // abre la tercera; dispara onChange
tabs.select(0, { silent: true });   // abre sin disparar nada
tabs.index;                         // índice de la pestaña abierta, o -1
tabs.tabs;                          // las pestañas, en orden
tabs.panels;                        // los paneles, en orden

Cada cambio — por la persona o por select() — dispara tucano:change en el elemento de las pestañas, y el evento burbujea. select() en una pestaña desactivada no hace nada.

document.addEventListener('tucano:change', (e) => {
  if (!e.target.matches('.tuc-tabs')) return;
  e.detail.value;      // índice de la pestaña abierta
  e.detail.tab;        // el botón de la pestaña
  e.detail.panel;      // el panel
  e.detail.instance;   // las Tabs
});

Las pestañas dentro de un panel son otro conjunto: el componente solo mira la lista y los paneles que son hijos directos de su elemento.

Teclado y accesibilidad

El teclado sigue el patrón de pestañas del ARIA APG. Toda la lista es una sola parada del Tab — si no, quien navega con teclado recorrería todas las pestañas antes de llegar al contenido de la abierta.

La lista recibe role="tablist", cada pestaña role="tab" con aria-selected, y cada panel role="tabpanel". El panel sin nada enfocable dentro recibe tabindex="0", para que el Tab llegue al contenido; con un campo o un enlace dentro, no — sería una parada inútil antes de él.

API

Generada a partir del código en cada build — si algo no está aquí, no existe.

Opciones

Las notas de esta tabla salen de los comentarios del código fuente, que están escritos en portugués.