Accordéons natifs dans Joomla : accessibles, sémantiques et compatibles Bootstrap

Joomla 5.2 a discrètement introduit une nouvelle fonctionnalité puissante de contenu : des accordéons natifs dans TinyMCE, fonctionnant grâce au HTML standard plutôt qu'à JavaScript. Cela offre aux créateurs de contenu un moyen simple d'ajouter des sections rétractables tout en gardant un balisage propre, accessible et pérenne.

Plutôt que de dépendre de widgets d'accordéon lourds en JavaScript, Joomla adopte désormais les éléments de divulgation intégrés au navigateur : <details> et <summary>. Ce petit changement a de grandes implications en matière d'accessibilité, de performance et de maintenabilité, et s'intègre parfaitement avec les templates de Joomla basés sur Bootstrap.

L'accordéon TinyMCE dans Joomla

Le processus est simple :

1. Ouvrir un article ou un champ HTML personnalisé avec TinyMCE.
2. Saisir un titre ou une ligne de texte.
3. Sélectionner le texte et cliquer sur le bouton Accordéon.
4. Ajouter du contenu sous le titre.

En coulisse, TinyMCE génère du HTML standard :

<details>
  <summary>Titre de section</summary>
  <p>Votre contenu ici — texte, images, listes, etc.</p>
</details>

Il n'y a aucun balisage propriétaire, aucune dépendance à JavaScript, et aucune syntaxe spécifique à Joomla. Ce que vous voyez est exactement ce que le navigateur comprend nativement.

Ouvert ou fermé par défaut

Après avoir créé un accordéon dans TinyMCE, vous pouvez contrôler s'il est déplié ou replié au premier chargement de la page.

Sélectionner le résumé de l'accordéon et cliquer sur le bouton Basculer l'accordéon dans la barre d'outils de l'éditeur. Cette action ajoute ou supprime l'attribut open sur l'élément <details>.

Lorsque l'attribut est présent :

<details open="open">

l'accordéon s'affiche ouvert par défaut.

Lorsqu'il est supprimé :

<details>

l'accordéon se charge fermé, nécessitant une interaction de l'utilisateur pour révéler son contenu.

Comme ce comportement est entièrement contrôlé par du HTML natif, il fonctionne de manière cohérente sur tous les navigateurs et reste pleinement accessible, sans aucun JavaScript requis.

Basé sur le HTML natif : <details> et <summary>

La fonctionnalité d'accordéon s'appuie sur des éléments HTML de divulgation standard :

• <details> définit un conteneur repliable
• <summary> fournit le bouton visible

Ces éléments font partie de la spécification HTML et sont pris en charge par tous les navigateurs modernes.

Pourquoi cela compte

• Interaction intégrée : cliquer sur le résumé ouvre et ferme automatiquement le panneau.
• Prise en charge du clavier par défaut : les utilisateurs peuvent basculer l'accordéon avec Entrée ou Espace.
• Signification sémantique : les lecteurs d'écran reconnaissent la relation et annoncent les changements d'état.
• Aucun JavaScript requis : le navigateur gère tout.

C'est l'accessibilité faite correctement — intrinsèque au balisage, et non ajoutée après coup.

Accessibilité sans effort supplémentaire

Les accordéons traditionnels nécessitent souvent du JavaScript ainsi que des attributs ARIA soigneusement gérés pour être utilisables par les utilisateurs du clavier et des technologies d'assistance.

Avec <details> et <summary> :

• L'état ouvert et fermé est automatiquement exposé
• Le comportement de focus est correct par défaut
• Les lecteurs d'écran annoncent correctement le contrôle

Il n'est pas nécessaire d'ajouter aria-expanded, role="button", ou une gestion personnalisée du clavier. L'accordéon TinyMCE de Joomla! est accessible dès sa mise en place.

Cela fonctionne partout où Joomla! génère du HTML — articles, modules et champs personnalisés.

Styliser les accordéons avec CSS

Les navigateurs appliquent un style par défaut minimal aux éléments de divulgation. C'est au niveau du CSS que réside la véritable puissance, et l'intégration de Bootstrap par Joomla!, par exemple avec Cassiopeia, rend cela particulièrement élégant.

Titres de résumé façon bouton

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;
}

Ajouter un simple indicateur ouvert/fermé :

summary::after {
  content: "+";
  font-weight: bold;
}

details[open] summary::after {
  content: "–";
}

Suppression du marqueur par défaut du navigateur

summary::-webkit-details-marker {
  display: none;
}

summary {
  list-style: none;
}

Surcharges Joomla et stratégie d'intégration

Le principal avantage de cette approche est qu'il n'est pas nécessaire de surcharger la sortie de TinyMCE. À la place :

• Ajouter du CSS à la feuille de style personnalisée du template
• Restreindre la portée des styles si nécessaire (par exemple .article-content details)
• Utiliser les variables CSS de Bootstrap pour une compatibilité à long terme

Si vous choisissez malgré tout de créer des surcharges de mise en page, conservez intacte la structure <details> et <summary>. Les remplacer par un balisage <div> générique signifie reconstruire l'accessibilité depuis zéro.

Cas d'usage créatifs

• FAQ et documentation d'aide
• Articles longs avec des sections optionnelles plus détaillées
• Exemples de code ou instructions de configuration
• Mises en page de contenu adaptées au mobile

Un meilleur accordéon par défaut

L'accordéon TinyMCE dans Joomla! est une amélioration discrète mais importante :

• HTML natif, pas de widgets personnalisés
• Accessible par défaut
• Aucune dépendance JavaScript
• Entièrement personnalisable avec du CSS
• Intégration transparente avec les templates Bootstrap

C'est Joomla! qui choisit les standards, l'accessibilité et la maintenabilité plutôt que la complexité, offrant ainsi aux créateurs de sites plus de puissance avec moins de code.