User Documentation Joomla 5.2 ha introdotto silenziosamente una potente nuova funzionalità per i contenuti: gli accordion nativi in TinyMCE, basati su HTML standard anziché su JavaScript. Questo offre a chi crea contenuti un modo semplice per aggiungere sezioni comprimibili mantenendo il markup pulito, accessibile e a prova di futuro.
Invece di affidarsi a widget accordion pesanti dal punto di vista JavaScript, Joomla ora adotta gli elementi di divulgazione integrati nel browser: <details> e <summary>. Questo piccolo cambiamento ha grandi implicazioni per l'accessibilità, le prestazioni e la manutenibilità, e si integra perfettamente con i template di Joomla basati su Bootstrap.
L'accordion di TinyMCE in Joomla
Il flusso di lavoro è semplice:
- Apri un articolo o un campo HTML personalizzato usando TinyMCE.
- Inserisci un'intestazione o una riga di testo.
- Seleziona il testo e clicca sul pulsante Accordion.
- Aggiungi i contenuti sotto l'intestazione.
Dietro le quinte, TinyMCE genera HTML standard:
<details>
<summary>Section heading</summary>
<p>Your content here — text, images, lists, etc.</p>
</details>Non c'è alcun markup proprietario, nessuna dipendenza da JavaScript e nessuna sintassi specifica di Joomla. Ciò che vedi è ciò che il browser comprende nativamente.
Aperto o chiuso per impostazione predefinita
Dopo aver creato un accordion in TinyMCE, puoi controllare se sarà espanso o compresso al primo caricamento della pagina.
Seleziona l'intestazione dell'accordion e clicca sul pulsante Toggle Accordion nella barra degli strumenti dell'editor. Questa azione aggiunge o rimuove l'attributo open sull'elemento <details>.
Quando l'attributo è presente:
<details open="open">
l'accordion viene mostrato aperto per impostazione predefinita.
Quando viene rimosso:
<details>
l'accordion viene caricato chiuso, richiedendo un'interazione dell'utente per rivelarne il contenuto.
Poiché questo comportamento è controllato interamente da HTML nativo, funziona in modo coerente tra browser diversi e rimane pienamente accessibile, senza bisogno di JavaScript.
Basato su HTML nativo: <details> e <summary>
La funzione accordion si basa su elementi standard di disclosure HTML:
<details>definisce un contenitore comprimibile<summary>fornisce l'elemento visibile per l'attivazione
Questi elementi fanno parte della specifica HTML e sono supportati da tutti i browser moderni.
Perché questo è importante
- Interazione integrata: cliccando sul summary si apre e chiude automaticamente il pannello.
- Supporto da tastiera predefinito: gli utenti possono attivare l'accordion usando Invio o Spazio.
- Significato semantico: gli screen reader riconoscono la relazione e annunciano i cambiamenti di stato.
- Nessun JavaScript richiesto: il browser gestisce tutto.
Questa è accessibilità fatta nel modo giusto — intrinseca al markup, non aggiunta successivamente.
Accessibilità senza lavoro aggiuntivo
Gli accordion tradizionali spesso richiedono JavaScript più attributi ARIA gestiti con attenzione per essere utilizzabili da tastiera e tecnologie assistive.
Con <details> e <summary>:
- Lo stato aperto e chiuso è esposto automaticamente
- Il comportamento del focus è corretto per impostazione predefinita
- Gli screen reader annunciano correttamente il controllo
Non è necessario aggiungere aria-expanded, role="button", o una gestione personalizzata della tastiera. L'accordion TinyMCE di Joomla è accessibile fin da subito.
Questo funziona ovunque Joomla renderizzi HTML — articoli, moduli e campi aggiuntivi.
Stilizzare gli accordion con CSS
I browser applicano uno stile predefinito minimo agli elementi di disclosure. Il CSS è dove risiede la vera potenza, e l'integrazione Bootstrap di Joomla, ad esempio con Cassiopeia, rende tutto questo particolarmente elegante.
Intestazioni summary in stile pulsante
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;
}Aggiungere un semplice indicatore di apertura/chiusura:
summary::after {
content: "+";
font-weight: bold;
}
details[open] summary::after {
content: "–";
}Rimozione del marcatore predefinito del browser
summary::-webkit-details-marker {
display: none;
}
summary {
list-style: none;
}
Override di Joomla e strategia di integrazione
Il vantaggio principale di questo approccio è che non è necessario eseguire l'override dell'output di TinyMCE. Invece:
- Aggiungi il CSS al foglio di stile personalizzato del tuo template
- Delimita gli stili se necessario (ad esempio
.article-content details) - Usa le variabili CSS di Bootstrap per una compatibilità a lungo termine
Se decidi di creare override del layout, mantieni intatta la struttura di <details> e <summary>. Sostituirli con un generico markup <div> significa ricostruire l'accessibilità da zero.
Casi d'uso creativi
- FAQ e documentazione di supporto
- Articoli lunghi con sezioni di approfondimento opzionali
- Esempi di codice o istruzioni di configurazione
- Layout di contenuti ottimizzati per dispositivi mobili
Un accordion migliore per impostazione predefinita
L'accordion di TinyMCE in Joomla è un miglioramento discreto ma importante:
- HTML nativo, non widget personalizzati
- Accessibile per impostazione predefinita
- Nessuna dipendenza da JavaScript
- Completamente personalizzabile con CSS
- Integrazione perfetta con i template Bootstrap
Questo dimostra come Joomla scelga standard, accessibilità e manutenibilità rispetto alla complessità, offrendo a chi costruisce siti più potenza con meno codice.