Collection filtrable

Tâche#

Utilisez ce motif lorsqu’une personne doit parcourir une collection délimitée et la réduire selon des valeurs déjà présentes dans les données. Il est utilisé pour les publications, l’archive des conférences et les recommandations. Ce n’est pas une recherche dans le site : le filtrage agit sur une collection déjà rendue et connue, non sur l’index de toutes les pages.

Composition#

La page commence avec l’En-tête de page standard. Une Rangée de filtres est facultative : utilisez-la seulement lorsqu’elle réduit utilement la collection. Les résultats utilisent un Tableau de données lorsque des colonnes doivent être comparées, ou une liste sémantique lorsque les entrées sont narratives. La Pagination est ajoutée seulement lorsque le modèle de résultat le demande.

Contenu et données#

La source de données reste l’autorité. Les clés de filtre doivent être des valeurs stables des données, tandis que les libellés visibles peuvent être localisés ou dérivés par le layout. Chaque jeu de données exige une forme de résultat intentionnelle : les publications sont des rangées comparables, les conférences sont des enregistrements d’archive triables et les recommandations sont des citations individuelles. Ne forcez pas les trois dans les mêmes cartes ou le même tableau.

Comportement adaptatif#

Les contrôles de filtre passent à la ligne ou défilent horizontalement selon la variante documentée de la rangée de filtres. Les tableaux conservent leur largeur minimale lisible dans la région de défilement partagée; les résultats narratifs restent une liste verticale. Le filtrage et la pagination côté client conservent le fil de lecture de la page à toutes les largeurs plutôt que de remplacer les résultats par une interface mobile distincte.

Implémentation#

Le layout de page dérive les éléments de filtre et les rangées de résultats d’un fichier de données, puis passe les contrôles à data-page/filter-row.html. Les publications utilisent les attributs data-table-* avec des rangées triables et data-page/table-pagination.html; l’archive des conférences utilise un contrôleur data-talks-* plus ancien mais équivalent; les recommandations filtrent une liste sémantique. Le CSS partagé fournit les états visuels et assets/js/site.js ne modifie que les résultats visibles.

Accessibilité#

• La rangée de filtres est un point de repère de navigation nommé qui contient des boutons natifs. L’état actif est exposé par le comportement ARIA documenté du composant; la couleur n’est jamais le seul signal.
• Une mise à jour de filtre annonce le nombre de résultats visibles ou l’état vide au moyen d’une région dynamique polie. Ne remplacez pas toute la région de résultats sans message d’état.
• Les tableaux conservent leurs en-têtes, portées et nom de région de défilement. Les listes conservent la sémantique <ol> ou <ul> et <li> plutôt que de simuler une liste avec des conteneurs génériques.
• Les contrôles de tri sont de vrais boutons avec une direction de tri exposée. La pagination utilise des liens ou boutons natifs et annonce la plage actuellement visible.
• Utilisez ce motif seulement pour un jeu de données connu et délimité. Pour la découverte globale de contenu, utilisez la Recherche; pour des sauts vers des sections répétées déjà visibles, utilisez l’Index de référence.