Créer un composant à sélection multiple

Présentation de base sur la création d'un composant multisélection responsif, adaptatif et accessible pour trier et filtrer les expériences utilisateur.

Adam Argyle

Dans cet article, je vais vous expliquer comment créer un composant de sélection multiple. Essayez la démo.

Si vous préférez regarder une vidéo, voici une version YouTube de cet article:

Présentation

Les utilisateurs sont souvent confrontés à des éléments, parfois de nombreux éléments. Dans ce cas, il peut être judicieux de leur fournir un moyen de réduire la liste pour éviter une surcharge de choix. Cet article de blog explore l'interface utilisateur de filtrage comme moyen de réduire les choix. Pour ce faire, il présente des attributs d'article que les utilisateurs peuvent sélectionner ou désélectionner, ce qui réduit les résultats et, par conséquent, la surcharge de choix.

Interactions

L'objectif est de permettre un parcours rapide des options de filtrage pour tous les utilisateurs et leurs différents types d'entrées. Cela sera fourni avec une paire de composants adaptables et responsifs. Barre latérale de cases à cocher classique pour ordinateur, clavier et lecteurs d'écran, et <select multiple> pour les utilisateurs tactiles.

Cette décision d'utiliser la sélection multiple intégrée pour les appareils tactiles, et non pour les ordinateurs, permet de gagner du temps et de créer du travail, mais je pense qu'elle offre des expériences appropriées avec moins de dette de code que de créer l'ensemble de l'expérience responsive dans un seul composant.

Toucher

Le composant tactile permet de gagner de l'espace et de faciliter la précision des interactions utilisateur sur mobile. Il économise de l'espace en réduisant une barre latérale entière de cases à cocher dans une expérience tactile superposée intégrée à <select>. Il améliore la précision de la saisie en affichant une grande expérience de superposition tactile fournie par le système.

Clavier et manette

Vous trouverez ci-dessous une démonstration de l'utilisation d'un <select multiple> depuis le clavier.

Cette fonctionnalité de sélection multiple intégrée ne peut pas être stylisée et n'est proposée que dans une mise en page compacte qui n'est pas adaptée à la présentation de nombreuses options. Vous voyez que vous ne pouvez pas vraiment voir l'étendue des options dans cette petite boîte ? Bien que vous puissiez en modifier la taille, il n'est toujours pas aussi pratique qu'une barre latérale de cases à cocher.

Annoter

Les deux composants seront contenus dans le même élément <form>. Les résultats de ce formulaire, qu'il s'agisse de cases à cocher ou d'une sélection multiple, seront observés et utilisés pour filtrer la grille, mais peuvent également être envoyés à un serveur.

<form>

</form>

Composant "Cases à cocher"

Les groupes de cases à cocher doivent être encapsulés dans un élément <fieldset> et étiquetés avec un <legend>. Lorsque le code HTML est structuré de cette manière, les lecteurs d'écran et FormData comprennent automatiquement la relation entre les éléments.

<form>
  <fieldset>
    <legend>New</legend>
    … checkboxes …
  </fieldset>
</form>

Une fois le regroupement en place, ajoutez un <label> et un <input type="checkbox"> pour chacun des filtres. J'ai choisi d'encapsuler les miens dans un <div> afin que la propriété CSS gap puisse les espacer de manière uniforme et maintenir l'alignement lorsque les libellés se présentent sur plusieurs lignes.

<form>
  <fieldset>
    <legend>New</legend>
    <div>
      <input type="checkbox" id="last 30 days" name="new" value="last 30 days">
      <label for="last 30 days">Last 30 Days</label>
    </div>
    <div>
      <input type="checkbox" id="last 6 months" name="new" value="last 6 months">
      <label for="last 6 months">Last 6 Months</label>
    </div>
   </fieldset>
</form>

Composant <select multiple>

multiple est une fonctionnalité rarement utilisée de l'élément <select>. Lorsque l'attribut est utilisé avec un élément <select>, l'utilisateur est autorisé à en choisir plusieurs dans la liste. C'est comme si vous passiez d'une liste de cases d'option à une liste de cases à cocher.

<form>
  <select multiple="true" title="Filter results by category">
    …
  </select>
</form>

Pour ajouter un libellé et créer des groupes dans un <select>, utilisez l'élément <optgroup> et attribuez-lui un attribut et une valeur label. Cet élément et la valeur de l'attribut sont semblables aux éléments <fieldset> et <legend>.

<form>
  <select multiple="true" title="Filter results by category">
    <optgroup label="New">
      …
    </optgroup>
  </select>
</form>

Ajoutez maintenant les éléments <option> pour le filtre.

<form>
  <select multiple="true" title="Filter results by category">
    <optgroup label="New">
      <option value="last 30 days">Last 30 Days</option>
      <option value="last 6 months">Last 6 Months</option>
    </optgroup>
  </select>
</form>

Suivre les entrées avec des compteurs pour informer les technologies d'assistance

La technique de rôle d'état est utilisée dans cette expérience utilisateur pour suivre et gérer le nombre de filtres pour les lecteurs d'écran et les autres technologies d'assistance. La vidéo YouTube présente cette fonctionnalité. L'intégration commence par HTML et l'attribut role="status".

<div role="status" class="sr-only" id="applied-filters"></div>

Cet élément lit à voix haute les modifications apportées au contenu. Nous pouvons mettre à jour les contenus avec des compteurs CSS lorsque les utilisateurs interagissent avec les cases à cocher. Pour ce faire, nous devons d'abord créer un compteur avec un nom sur un élément parent des éléments d'entrée et d'état.

aside {
  counter-reset: filters;
}

Par défaut, le nombre sera 0, ce qui est excellent, car rien n'est :checked par défaut dans cette conception.

Ensuite, pour incrémenter le compteur que nous venons de créer, nous allons cibler les enfants de l'élément <aside> qui sont :checked. Lorsque l'utilisateur modifie l'état des entrées, le compteur filters s'accumule.

aside :checked {
  counter-increment: filters;
}

Le CSS est désormais au courant du total général de l'interface utilisateur de la case à cocher, et l'élément de rôle d'état est vide et attend des valeurs. Étant donné que le CSS gère le décompte en mémoire, la fonction counter() permet d'accéder à la valeur à partir du contenu du pseudo-élément:

aside #applied-filters::before {
  content: counter(filters) " filters ";
}

Le code HTML de l'élément de rôle d'état annoncera désormais "2 filtres" à un lecteur d'écran. C'est un bon début, mais nous pouvons faire mieux, par exemple en partageant le nombre de résultats mis à jour par les filtres. Nous allons effectuer ce travail à partir de JavaScript, car il ne relève pas des compteurs.

Imbriquer l'enthousiasme

L'algorithme des compteurs s'est avéré excellent avec imbrication CSS-1, car j'ai pu placer toute la logique dans un seul bloc. Il est portable et centralisé pour la lecture et la mise à jour.

aside {
  counter-reset: filters;

  & :checked {
    counter-increment: filters;
  }

  & #applied-filters::before {
    content: counter(filters) " filters ";
  }
}

Mises en page

Cette section décrit les mises en page entre les deux composants. La plupart des styles de mise en page sont destinés au composant de case à cocher pour ordinateur.

Le formulaire

Pour optimiser la lisibilité et la lisibilité pour les utilisateurs, la largeur maximale du formulaire est de 30 caractères, ce qui définit essentiellement une largeur de ligne optique pour chaque étiquette de filtre. Le formulaire utilise la mise en page en grille et la propriété gap pour espacer les champs de formulaire.

form {
  display: grid;
  gap: 2ch;
  max-inline-size: 30ch;
}

L'élément <select>

La liste des libellés et les cases à cocher occupent trop d'espace sur mobile. Par conséquent, la mise en page vérifie le dispositif de pointage principal de l'utilisateur pour modifier l'expérience pour le toucher.

@media (pointer: coarse) {
  select[multiple] {
    display: block;
  }
}

Une valeur coarse indique que l'utilisateur ne pourra pas interagir avec l'écran avec une grande précision avec son périphérique d'entrée principal. Sur un appareil mobile, la valeur du pointeur est souvent coarse, car l'interaction principale est le toucher. Sur un ordinateur de bureau, la valeur du pointeur est souvent fine, car il est courant d'avoir une souris ou un autre périphérique d'entrée haute précision connecté.

Les jeux de champs

Le style et la mise en page par défaut d'un <fieldset> avec un <legend> sont uniques:

Normalement, pour espacer mes éléments enfants, j'utilise la propriété gap, mais le positionnement unique de <legend> rend difficile la création d'un ensemble d'enfants espacés de manière uniforme. Au lieu de gap, le sélecteur de frère adjacent et margin-block-start sont utilisés.

fieldset {
  padding: 2ch;

  & > div + div {
    margin-block-start: 2ch;
  }
}

Cela évite d'ajuster l'espace de la <legend> en ne ciblant que les enfants <div>.

Libellé et case à cocher du filtre

En tant qu'enfant direct d'un <fieldset> et dans la largeur maximale du 30ch du formulaire, le texte du libellé peut se chevaucher s'il est trop long. Le retour à la ligne du texte est une bonne chose, mais le décalage entre le texte et la case à cocher ne l'est pas. Flexbox est idéal pour cela.

fieldset > div {
  display: flex;
  gap: 2ch;
  align-items: baseline;
}

Grille animée

L'animation de mise en page est effectuée par Isotope. Plug-in performant et puissant pour le tri et le filtrage interactifs.

JavaScript

En plus d'aider à orchestrer une grille interactive et animée soignée, JavaScript permet d'éliminer quelques aspérités.

Normaliser l'entrée utilisateur

Cette conception comporte un formulaire avec deux modes d'entrée différents, et ils ne sont pas sérialisés de la même manière. Toutefois, avec du code JavaScript, nous pouvons normaliser les données.

J'ai choisi d'aligner la structure de données de l'élément <select> sur la structure des cases à cocher groupées. Pour ce faire, un écouteur d'événements input est ajouté à l'élément <select>, à partir duquel ses selectedOptions sont mappés.

document.querySelector('select').addEventListener('input', event => {
  // make selectedOptions iterable then reduce a new array object
  let selectData = Array.from(event.target.selectedOptions).reduce((data, opt) => {
    // parent optgroup label and option value are added to the reduce aggregator
    data.push([opt.parentElement.label.toLowerCase(), opt.value])
    return data
  }, [])
})

Vous pouvez maintenant envoyer le formulaire ou, dans le cas de cette démonstration, indiquer à Isotope sur quoi filtrer.

Finaliser l'élément de rôle d'état

L'élément ne comptabilise et n'annonce que le nombre de filtres en fonction de l'interaction avec la case à cocher, mais j'ai pensé qu'il était également judicieux de partager le nombre de résultats et de s'assurer que les choix de l'élément <select> sont également comptabilisés.

Choix de l'élément <select> reflété dans counter()

Dans la section "Normalisation des données", un écouteur a déjà été créé pour l'entrée. À la fin de cette fonction, le nombre de filtres choisis et le nombre de résultats pour ces filtres sont connus. Les valeurs peuvent être transmises à l'élément de rôle d'état comme suit.

let statusRoleElement = document.querySelector('#applied-filters')
statusRoleElement.style.counterSet = selectData.length

Résultats reflétés dans l'élément role="status"

:checked fournit un moyen intégré de transmettre le nombre de filtres choisis à l'élément de rôle d'état, mais ne permet pas de voir le nombre de résultats filtrés. JavaScript peut surveiller les interactions avec les cases à cocher et, après avoir filtré la grille, ajouter textContent comme l'élément <select>.

document
  .querySelector('aside form')
  .addEventListener('input', e => {
    // isotope demo code
    let filterResults = IsotopeGrid.getFilteredItemElements().length
    document.querySelector('#applied-filters').textContent = `giving ${filterResults} results`
})

Au total, ce travail complète l'annonce "2 filtres donnant 25 résultats".

Notre excellente expérience d'assistance technologique sera désormais proposée à tous les utilisateurs, quelle que soit leur façon d'interagir avec elle.

Conclusion

Maintenant que vous savez comment j'ai fait, comment procéderiez-vous ? 🙂

Diversifions nos approches et découvrons toutes les façons de créer sur le Web. Créez une démo, tweetez-moi des liens et je les ajouterai à la section "Remix de la communauté" ci-dessous.

Remix de la communauté

Aucun élément à afficher pour l'instant.