Onglets

Composant permettant d’optimiser l’affichage du contenu d’une page dans un espace réduit grâce à un système d’étiquettes.

Démonstration

  • Onglet no 1
  • Onglet no 2
  • Onglet no 3
  • Onglet no 4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, ut deserunt? Minima ullam quis veniam rerum non est voluptatem voluptates, fugiat dolorum odit, sed excepturi explicabo, porro velit temporibus ducimus!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non distinctio, corporis, sapiente in accusantium perferendis consectetur quos quis, fugiat assumenda obcaecati. Reiciendis culpa, ut repellendus suscipit, iste rem. Animi, reprehenderit. Lien

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, eos, cumque. Suscipit, eius, cupiditate! Placeat voluptate quis, iste iure culpa, sequi, inventore ducimus vel voluptates nam, ut architecto ab reprehenderit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, eos, cumque. Suscipit, eius, cupiditate! Placeat voluptate quis, iste iure culpa, sequi, inventore ducimus vel voluptates nam, ut architecto ab reprehenderit.

Implémentation

HTML

<ul role="tablist">
  <li role="tab" aria-controls="panneau-1">Onglet n<sup>o</sup> 1</li>
  <li role="tab" aria-controls="panneau-2">Onglet n<sup>o</sup> 2</li>
  <li role="tab" aria-disabled="true" aria-controls="panneau-3">Onglet n<sup>o</sup> 3</li>
  <li role="tab" aria-controls="panneau-4">Onglet n<sup>o</sup> 4</li>
</ul>

<div role="tabpanel" id="panneau-1">
  <p>---</p>
</div>
<div role="tabpanel" id="panneau-2">
  <p>---</p>
</div>
<div role="tabpanel" id="panneau-3">
  <p>---</p>
</div>
<div role="tabpanel" id="panneau-4">
  <p>---</p>
</div>

CSS

/* Pour un simple afficher-masquer */
[role="tabpanel"][aria-hidden="true"] {
  display: none;
}

/* Pour un effet sur les éléments désactivés */
[role="tab"][aria-disabled="true"] {
  opacity: 0.5;
}

JavaScript

// Instanciation des onglets
var list = document.querySelector( '[role="tablist"]' );
var tablist = new Tablist( list );

// il est possible d'ajouter des écouteurs sur l'ouverture et la fermeture des onglets
tablist.on( 'show', function( tab, tabPanel ){
  …
});

tablist.on( 'hide', function( tab, tabPanel ){
  …
});

// démarage du plugin
tablist.mount();

Description

Pour fonctionner, les onglets ont besoin d’un conteneur parent avec le rôle tablist. Ces onglets sont définis par l’attribut role ayant pour valeur tab. Afin de lier les onglets aux panneaux, il faut rajouter l’attribut aria-controls avec pour valeur l’id du panneau que l’on souhaite lier. Les panneaux doivent avoir le rôle tabpanel et un identifiant unique : l’attribut id.

Attributs

Conteneur

Onglets

Panneaux

Script

Le script est disponible sur npm :

$ npm install @accede-web/tablist

Il ne reste alors qu'à l'appeler dans le script souhaité :

import Tablist from '@accede-web/tablist';

var tablist = new Tablist( el );

Dans le cas où ce script est utilisé avec babel et Webpack ou Rollup, il faut configurer babel afin qu'il compile ce plugin. Cela est possible via le fichier .babelrc ou dans les configurations de Webpack et Rollup :

{
  "exclude": "node_modules/!(@accede-web)/**",
}

Cette ligne continura d'exclure les scripts contenus dans le répertoire node_modules sauf ceux s'appelant @accede-web.

Le plugin est aussi téléchargeable depuis Github :
https://github.com/AcceDe-Web/tablist.

Le fichier est disponible en version minifiée ou non-minifiée dans le répertoire dist. Il est ensuite disponible sur l'objet window :

<script src="tablist.min.js"></script>

<script>
  var tablist = new window.Tablist( el );
</script>

Compatibilité

Ce composant a été testé sur les navigateurs suivants :

Aller plus loin

Le script de cette page est basé sur la notice d’accessibilité pour les composants d’interface riche des onglets AcceDe Web d’Atalan.

N’hésitez pas à aller faire un tour chez eux pour approfondir le sujet.