Rangée de filtres

2026.08.22 Données

Utilisez une rangée de filtres lorsqu’une page permet de réduire un jeu de données sans quitter la page. Elle se place immédiatement avant la table, la liste ou le jeu de données groupé qu’elle contrôle, après l’introduction, les sources ou le changelog.

Couleur	Fondations
Typographie	Fondations
Fil d’Ariane	Composants
Cartes	Composants

Quand l’utiliser#

La page permet de réduire un jeu de données sans quitter la page; placez la rangée immédiatement avant la table, la liste ou le jeu de données groupé qu’elle contrôle, après l’introduction, les sources ou le changelog
Les rangées de filtres sont des contrôles interactifs, pas des métadonnées — n’utilisez pas les classes de tags de métadonnées pour elles; les filter chips changent les lignes visibles, les tags de métadonnées décrivent seulement le contenu
Utilisez toujours le partiel partagé pour garder cohérents l’espacement, les classes de boutons, le style des nombres et l’éventuel wrapper de débordement horizontal
Utilisez un bouton de réinitialisation lorsqu’une seule table filtrée est affichée et que la page a un état « tout » explicite; omettez-le lorsque les filtres sont des chips additives pour des cartes, des listes groupées ou des sections où l’état non filtré correspond simplement à aucune chip sélectionnée
Pas pour sauter vers une section — un index d’ancrage déplace le lecteur, une rangée de filtres change ce qui est visible
Utilisateurs actuels : téléphonie NANP, archive des conférences, publications, recommandations et reconnaissance

Implémentation#

{{ partial "data-page/filter-row.html" (dict
  "wrapClass" "overflow-x-auto pb-1"
  "class" "filter-chip-list flex-nowrap"
  "ariaLabel" "Filtrer par sujet"
  "reset" (dict "label" (i18n "all") "count" $total "attrs" "data-table-filter-reset" "countAttrs" "data-table-visible-count" "active" true)
  "items" $filterItems
) }}

Chaque item fournit label, count et les attributs de données requis par le comportement de la page :

dict "label" "Sécurité" "count" 12 "attrs" "data-table-filter-group=\"tag\" data-table-filter-value=\"security\""

<nav class="filter-chip-list" aria-label="Filtrer par sujet">
  <button class="filter-chip filter-chip-button tag-pill-active" type="button" data-table-filter-reset aria-pressed="true">Tout <span class="filter-chip-count" data-table-visible-count aria-live="polite" aria-atomic="true">34</span></button>
  <button class="filter-chip filter-chip-button" type="button" data-table-filter-group="tag" data-table-filter-value="security" aria-pressed="false">Sécurité <span class="filter-chip-count">12</span></button>
</nav>

Le partiel rend seulement le balisage; le comportement vient du script de page qui reconnaît les attributs de données passés par attrs et navAttrs. Trois comportements existent dans assets/js/site.js :

initTableLists (pages avec un conteneur data-table-list) : les chips utilisent data-table-filter-group et data-table-filter-value, la réinitialisation utilise data-table-filter-reset, le compte visible utilise data-table-visible-count
initTalksArchive (archive des conférences) : les chips utilisent data-talks-filter-group et data-talks-filter-value, la réinitialisation data-filter-reset, le compte data-talks-visible-count
Le bloc de filtres de recommandations (navAttrs réglé à data-recommendation-filters) : les chips utilisent data-filter-group et data-filter-value — recommandations, reconnaissance et téléphonie NANP

Le partiel Hugo est layouts/partials/data-page/filter-row.html. Il rend le <nav> et ses chips — des boutons avec aria-pressed, ou des liens lorsqu’un item porte href — et rien d’autre; câbler les chips aux lignes est la responsabilité de la page hôte. Le style des chips vient des classes filter-chip-* dans assets/css/site.css.

Options#

Option	Rôle
`items`	Liste de dicts de chips : `label`, `count`, `attrs`, `countAttrs`, et `href` pour rendre un lien plutôt qu’un bouton
`reset`	Dict de la chip d’état « tout » en tête : `label`, `count`, `attrs`, `countAttrs`, `active`, `href`
`ariaLabel` / `ariaLabelKey`	Libellé accessible du `<nav>`, littéral ou résolu par `i18n`
`class`	Classes sur le `<nav>` (défaut `filter-chip-list`)
`navAttrs`	Attributs supplémentaires sur le `<nav>`
`wrapClass`	Si présent, enveloppe le `<nav>` dans un div avec ces classes, habituellement pour le débordement horizontal
`buttonClass`	Classes des chips (défaut `filter-chip filter-chip-button`)

Manifeste d’interface

Nature: Composant
Catégorie: Données
Statut: Implémenté
Implémentation: Partial:layouts/partials/data-page/filter-row.htmlCSS:assets/css/site.cssJavaScript:assets/js/site.js

Accessibilité#

La rangée est un <nav> nommé par ariaLabel ou ariaLabelKey; fournissez-en toujours un, parce que le partiel rend l’attribut tel quel et qu’un libellé omis livre un repère sans nom avec aria-label=""
Les chips sont de vrais <button type="button"> qui portent aria-pressed; le comportement de page le bascule avec la classe tag-pill-active, et la chip de réinitialisation reste aria-pressed="true" tant qu’aucun filtre n’est sélectionné
Tab passe d’une chip à l’autre et Entrée ou Espace en bascule une — comportement natif des boutons, sans gestion de touches particulière
Le compte dans la chip de réinitialisation porte aria-live="polite" et aria-atomic="true", pour que les lecteurs d’écran entendent le nouveau compte visible après un changement de filtre, pas seulement le voient changer; un message d’état vide propre à la page suit le même motif
Évitez une chip-lien (href) pour un filtre qui bascule sur place — le partiel rend les liens sans aria-pressed, et un lien annonce une navigation