Workshop Kit · referencia del widget

Publicado

tab-flip

Un widget de pestañas WAI-ARIA para comparaciones retóricas en línea. El Método lo usa para "copy bueno vs copy malo" lado a lado — tres estilos de respuesta a una mala reseña, cuatro versiones de una promesa de una frase. Solo lectura: el operador lee, elige, aprende. Sin escrituras a MuntinContext.

Demo en vivo

Las pestañas se renderizan en el orden especificado; defaultIndex determina cuál se abre primero. Haz clic en una pestaña, usa las flechas Izquierda/Derecha para previsualizar etiquetas, presiona Enter o Espacio para cambiar de panel. El modo de activación manual hace que un usuario de lector de pantalla pueda recorrer las etiquetas sin comprometerse a un cambio de panel.

Tres estilos de respuesta · defaultIndex: 2 (la pestaña "buena" abre primero)

Sin escrituras a MuntinContext — tab-flip es un widget solo de lectura. La elección del operador no persiste; leer-y-comparar ES el aprendizaje.

Contrato

El widget lee sus pestañas desde un bloque de configuración JSON en línea. El autor de la lección escribe las etiquetas de pestaña + el HTML del panel; los dos campos toman variantes opcionales -es para la copia en español. Sin atributos data más allá de data-widget.

Atributo / config	Tipo	Propósito
`data-widget`Requerido	literal	Siempre `"tab-flip"`.
`<script class="tab-flip-config" type="application/json">`Requerido	objeto JSON	`{ tabs: [...], defaultIndex: 0 }`. Cada pestaña es `{ id, label, label-es, body, body-es }`. `id` es el identificador estable (usado para el aria-controls del panel); `label` se renderiza en el botón de la pestaña; `body` es el HTML que se renderiza dentro del panel.
`tabs[*].body`	cadena HTML	Se renderiza tal cual dentro del panel — los autores de las lecciones controlan la seguridad de este contenido (son activos de la lección, no entrada del operador). Mantenlo pequeño; prefiere ejemplos de un solo párrafo con `<blockquote>` opcional para el sujeto del contraste y `<p class="meta">` para la conclusión retórica.
`defaultIndex`	entero	Índice de pestaña basado en cero que se abre primero. Usa la posición del "buen ejemplo" cuando la lección enseña la respuesta correcta; usa la posición del "mal ejemplo" cuando la lección enseña primero el modo de fallo.

Qué escribe: nada. tab-flip es solo de lectura; contextKeys es un arreglo vacío.

Marcado

<section class="course-widget" data-widget="tab-flip"> <script type="application/json" class="tab-flip-config"> { "tabs": [ {"id":"bad", "label":"Vague", "label-es":"Vago", "body":"<p>Great food, great vibes</p>", "body-es":"<p>Buena comida, buen ambiente</p>"}, {"id":"good", "label":"Specific", "label-es":"Específico", "body":"<p>The Tuesday-night taqueria your block tells other blocks about.</p>", "body-es":"<p>La taquería de los martes que tu cuadra recomienda a otras cuadras.</p>"} ], "defaultIndex": 1 } </script> </section>

Implementación completa del patrón WAI-ARIA Tabs:

role="tablist" en el contenedor de los disparadores con orientación horizontal.
role="tab" + aria-selected + aria-controls en cada botón disparador.
role="tabpanel" + aria-labelledby + tabindex="0" en cada panel.
Activación manual: las flechas mueven el foco a través de las etiquetas de las pestañas SIN cambiar el panel. Enter o Espacio se compromete a la pestaña enfocada. Esto permite a los usuarios de lector de pantalla previsualizar las etiquetas sin que el contenido del panel se re-renderice ruidosamente con cada flecha.
Home / End saltan a la primera / última pestaña.
Las pestañas inactivas tienen tabindex="-1" para que un paso de Tab salte sobre los disparadores no enfocados y entre al panel activo.

Dónde se publica

Código fuente

/tools/_shared/workshop/tab-flip.js — ~180 LOC. Exporta { tag, contextKeys, mount, serialize } según el contrato de widgets del Workshop Kit. Parsea la configuración JSON en línea, renderiza la tira de pestañas + paneles, conecta el modelo de teclado del patrón WAI-ARIA Tabs (flechas para el foco, Enter/Espacio para activar, Home/End para los bordes).

contextKeys es un arreglo vacío — tab-flip nunca escribe a MuntinContext. La elección de pestaña del operador es efímera (se resetea al recargar). Eso es deliberado: el aprendizaje ES la comparación, no la elección.

← Volver al Workshop Kit