Groupes de boutons

Les groupes de boutons doivent rendre les actions liées reconnaissables. Utilisez-les pour des ensembles de commandes compacts ou des choix liés, pas comme décoration autour de liens sans rapport. Il n’existe pas de contrôle segmenté générique : le regroupement passe par trois conteneurs concrets, chacun appartenant au composant qui le rend.

Quand l’utiliser#

• Utilisez un groupe pour un ensemble de commandes compact ou des choix liés; jamais comme décoration autour de liens sans rapport
• Utilisez la grappe reliée lorsque les choix sont des positions dans une même séquence et qu’un seul est courant — les numéros de page sont le seul cas aujourd’hui
• Utilisez une rangée espacée lorsque les actions sont liées mais ont chacune leur sens — la paire du héros d’accueil, les filter chips
• Montrez l’état de sélection sur le membre, pas sur le conteneur : tag-pill-active avec aria-pressed pour les filtres, aria-current pour la page courante
• Donnez à chaque groupe un aria-label nommant ce que le groupe fait, sur le <nav> ou l’élément englobant

Implémentation#

<nav class="filter-chip-list" aria-label="Filtrer par sujet">
  <button class="filter-chip filter-chip-button tag-pill-active" type="button" aria-pressed="true">Tout <span class="filter-chip-count">24</span></button>
  <button class="filter-chip filter-chip-button" type="button" aria-pressed="false">Sécurité <span class="filter-chip-count">9</span></button>
</nav>

<nav aria-label="Numéros de page">
  <ol class="pagination-pages">
    <li><span class="pagination-button pagination-button-current" aria-current="page">1</span></li>
    <li><a class="pagination-button" href="/fr/blog/page/2/">2</a></li>
  </ol>
</nav>

<button class="filter-chip filter-chip-button" type="button" data-table-filter-group="tag" data-table-filter-value="security" aria-pressed="false">Sécurité</button>

Il n’y a pas de classe de groupe partagée. Les trois conteneurs sont home-hero-actions (layouts/index.html), filter-chip-list (rendu par partials/data-page/filter-row.html — voir Rangée de filtres) et pagination-pages (rendu par partials/pagination.html — voir Pagination). Le style vient de classes de composants dans assets/css/site.css. Le comportement vit dans assets/js/site.js : initTableLists() branche les boutons portant data-table-filter-group et data-table-filter-value, plus un bouton optionnel data-table-filter-reset, en basculant tag-pill-active et aria-pressed; initTalksArchive() fait de même pour l’archive des conférences.

Variantes#

Accessibilité#

• Chaque conteneur est un point de repère ou un groupe nommé : la pagination et filter-chip-list se rendent en <nav> avec un aria-label — fourni par les cinq appelants actuels de filter-row.html — et home-hero-actions porte role="group" avec son aria-label
• La sélection s’annonce sur le membre : les bascules sont des éléments <button> dont l’aria-pressed est tenu à jour par initTableLists() et initTalksArchive(); une chip rendue en <a> navigue plutôt et ne porte aucun état
• Chaque membre est un arrêt de tabulation distinct et bascule avec l’activation native Entrée et Espace du <button>; aucun script ne gère le focus ni les flèches
• Les flèches de pagination désactivées sont des <span> aria-hidden hors de l’ordre de tabulation, et les liens précédent, suivant et de numéro de page portent chacun un aria-label
• Évitez role="toolbar" : il promet une navigation aux flèches entre les membres que ces groupes n’implémentent pas