User Documentation Joomla 5.2 introdujo discretamente una nueva y potente función de contenido: acordeones nativos en TinyMCE, basados en HTML estándar en lugar de JavaScript. Esto proporciona a los creadores de contenido una forma sencilla de añadir secciones plegables manteniendo el marcado limpio, accesible y preparado para el futuro.
En lugar de depender de widgets de acordeón pesados en JavaScript, Joomla ahora adopta los elementos de divulgación integrados del navegador: <details> y <summary>. Este pequeño cambio tiene grandes implicaciones para la accesibilidad, el rendimiento y el mantenimiento, y se integra perfectamente con las plantillas de Joomla basadas en Bootstrap.
El acordeón de TinyMCE en Joomla
El flujo de trabajo es sencillo:
- Abrir un artículo o un campo HTML personalizado con TinyMCE.
- Introducir un encabezado o una línea de texto.
- Seleccionar el texto y pulsar el botón Acordeón.
- Añadir contenido debajo del encabezado.
Internamente, TinyMCE genera HTML estándar:
<details>
<summary>Encabezado de sección</summary>
<p>Su contenido aquí — texto, imágenes, listas, etc.</p>
</details>No hay marcado propietario, ninguna dependencia de JavaScript ni ninguna sintaxis específica de Joomla. Lo que ve es lo que el navegador entiende de forma nativa.
Abierto o cerrado de forma predeterminada
Después de crear un acordeón en TinyMCE, puede controlar si está expandido o contraído cuando la página se carga por primera vez.
Seleccione el resumen del acordeón y pulse el botón de alternar acordeón en la barra de herramientas del editor. Esta acción agrega o elimina el atributo open en el elemento <details>.
Cuando el atributo está presente:
<details open="open">
el acordeón se muestra abierto de forma predeterminada.
Cuando se elimina:
<details>
el acordeón se carga cerrado, requiriendo la interacción del usuario para revelar su contenido.
Dado que este comportamiento está controlado totalmente por HTML nativo, funciona de forma coherente en todos los navegadores y permanece totalmente accesible, sin necesidad de JavaScript.
Impulsado por HTML nativo: <details> y <summary>
La función de acordeón se basa en elementos de divulgación HTML estándar:
<details>define un contenedor plegable<summary>proporciona el alternador visible
Estos elementos forman parte de la especificación HTML y son compatibles con todos los navegadores modernos.
Por qué esto importa
- Interacción incorporada: Al hacer clic en el resumen se abre y cierra automáticamente el panel.
- Compatibilidad con teclado de forma predeterminada: Los usuarios pueden alternar el acordeón usando Intro o Espacio.
- Significado semántico: Los lectores de pantalla reconocen la relación y anuncian los cambios de estado.
- No requiere JavaScript: El navegador se encarga de todo.
Esto es accesibilidad hecha de la manera correcta: intrínseca al marcado, no añadida posteriormente.
Accesibilidad sin trabajo adicional
Los acordeones tradicionales a menudo requieren JavaScript además de atributos ARIA cuidadosamente gestionados para que puedan ser utilizados por el teclado y las tecnologías de asistencia.
Con <details> y <summary>:
- El estado abierto y cerrado se expone automáticamente
- El comportamiento del foco es correcto de forma predeterminada
- Los lectores de pantalla anuncian correctamente el control
No es necesario añadir aria-expanded, role="button", ni una gestión personalizada del teclado. El acordeón de TinyMCE de Joomla es accesible de forma predeterminada.
Esto funciona en cualquier lugar donde Joomla renderice HTML: artículos, módulos y campos personalizados.
Estilizar acordeones con CSS
Los navegadores aplican un estilo predeterminado mínimo a los elementos de divulgación. El CSS es donde reside el verdadero poder, y la integración de Joomla con Bootstrap, por ejemplo con Cassiopeia, hace que esto sea especialmente elegante.
Encabezados de resumen estilo botón
summary {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--primary);
color: var(--white);
padding: .75rem 1rem;
border-radius: .375rem;
}
details[open] summary {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}Agregar un indicador simple de abierto/cerrado:
summary::after {
content: "+";
font-weight: bold;
}
details[open] summary::after {
content: "–";
}Eliminar el marcador predeterminado del navegador
summary::-webkit-details-marker {
display: none;
}
summary {
list-style: none;
}
Modificaciones de Joomla y estrategia de integración
La principal ventaja de este enfoque es que no necesita modificar la salida de TinyMCE. En su lugar:
- Agregue CSS a la hoja de estilos personalizada de su plantilla
- Delimite los estilos si es necesario (por ejemplo
.article-content details) - Utilice las variables CSS de Bootstrap para una compatibilidad a largo plazo
Si decide crear modificaciones de presentación, mantenga intacta la estructura de <details> y <summary>. Sustituirlos por marcado genérico de <div> implica reconstruir la accesibilidad desde cero.
Casos de uso creativos
- Preguntas frecuentes y documentación de ayuda
- Artículos largos con secciones opcionales de profundización
- Ejemplos de código o instrucciones de configuración
- Diseños de contenido adaptados a dispositivos móviles
Un mejor acordeón de forma predeterminada
El acordeón de TinyMCE en Joomla es una mejora discreta pero importante:
- HTML nativo, no widgets personalizados
- Accesible de forma predeterminada
- Sin dependencia de JavaScript
- Totalmente personalizable con CSS
- Integrado sin inconvenientes con las plantillas de Bootstrap
Esto es Joomla eligiendo estándares, accesibilidad y facilidad de mantenimiento por encima de la complejidad, dando a los creadores de sitios más poder con menos código.