Le composant LookupField permet aux utilisateurs de sélectionner une valeur parmi les valeurs disponibles à l'aide de mots-clés. Il peut s'agir d'une source principale pour la découverte ou le filtrage de contenu.
S'il est utilisé comme barre de recherche, l'emplacement de la barre de recherche détermine la plage de la recherche et ses résultats.
Les barres de recherche placées dans un en-tête permettent de rechercher des résultats dans l'ensemble de l'application.
Les barres de recherche placées dans un élément ne rechercheront des résultats que dans cet élément.
Utilisez un texte générique pour guider les utilisateurs sur les termes appropriés au contexte.
Ajoutez l'autosuggestion dans la mesure du possible.
Indiquez clairement les catégories des valeurs disponibles.
Créez un message d'état vide explicite qui dirige les utilisateurs vers l'étape suivante et propose des suggestions pour poursuivre. (Voir les considérations de rédaction de l'expérience utilisateur ci-dessous).
Utilisez les recherches avec parcimonie dans votre application. Tous les éléments ne nécessitent pas une recherche.
Mettez en évidence les termes que l'utilisateur a saisis dans les résultats.
Ajoutez des descriptions aux résultats pour aider les utilisateurs à naviguer et à choisir l'option la plus adéquate.
Affichez le nombre de résultats retournés.
Conservez le texte original après que les utilisateurs ont exécuté la requête.
Utilisez une icône de traitement si la récupération des valeurs prend plus de 5 secondes.
Les utilisateurs comprennent l'objectif d'un champ de recherche ; par conséquent, n'utilisez qu'une étiquette spécifique au contenu (au lieu du terme générique « rechercher »).
Le fait d'appuyer sur la touche Tab déplace le focus du clavier dans le champ de saisie. Appuyez sur la barre d'espace ou sur les touches fléchées vers le bas pour ouvrir un menu contextuel contenant une liste de valeurs. La liste est affinée lorsque vous saisissez les premiers caractères du nom souhaité.
Le champ de saisie et l’étiquette sont associés via l’attribut WAI-ARIA aria-labelledby. Le champ comprend également la valeur aria-autocomplete="list" pour indiquer qu'il contient une fenêtre contextuelle de liste avec fonction de saisie automatique. Au fur et à mesure de la saisie, le champ de saisie affiche une liste déroulante de valeurs qui correspondent le plus souvent à ce qui est entré dans le champ. L'option qui correspond aux informations saisies est automatiquement mise en évidence et elle est énoncée par un lecteur d'écran.
Lorsque vous rédigez du contenu pour des états vides (par exemple des recherches qui ne retournent aucun résultat), évitez de dire aux utilisateurs qu'il n'y a pas de résultat. Profitez plutôt de l'occasion pour indiquer les résultats qu'il y a.
N'utilisez PAS de termes tels que système, requêtes ou valeurs. Par exemple, « Aucun résultat n'a été trouvé pour les valeurs entrées » ou « La requête n'a retourné aucun résultat ».
Les états vides de résultats de recherche doivent diriger les utilisateurs vers l'étape suivante et leur permettre d'avancer dans le flux du produit.
Expliquez la situation. Informez les utilisateurs que vous n'avez pas trouvé ce qu'ils recherchent. Vous devez vous montrer compréhensif.
Suggérez des alternatives adaptées à votre type de contenu pour avancer, par exemple :
Il existe généralement plusieurs façons de rechercher la même chose. Vous pouvez ainsi effectuer une recherche par catégorie, rechercher un terme plus général ou spécifique, essayer d'utiliser des synonymes et vérifier l'orthographe.
Y a-t-il des éléments qui ressemblent à ce que l'utilisateur a recherché ? Vous pouvez suggérer des éléments ou des liens qui sont le plus proche possible de la recherche. Par exemple :
Éléments du même fabricant (par exemple, d'autres véhicules de la marque Ford).
Éléments avec des caractéristiques similaires d'autres fabricants (par exemple les véhicules de 2010).
Éléments de type, style ou caractéristique similaire (par exemple, berlines de taille moyenne).
Votre moteur de recherche trouve-t-il des termes similaires ? Si c'est le cas, pensez à proposer ces résultats aux utilisateurs pour leur éviter d'avoir à effectuer une autre recherche.
Il est primordial de comprendre ce que les utilisateurs essaient de faire avec leur recherche. Proposez aux utilisateurs des solutions qui les rapprochent de leur objectif.
Privilégiez un langage convivial et conversationnel, par exemple : « Nous n'avons trouvé aucun résultat. Vouliez-vous dire [lien vers un terme similaire] ? Essayez de chercher un autre élément ou d'élargir votre recherche. »
Utilisez un texte générique pour structurer l'expérience. Par exemple, vous pouvez réduire l'éventail des choix en définissant des catégories dans le champ de recherche. Cela permet aux utilisateurs de se concentrer sur les possibilités et de les guider dans leur recherche.
Vous pouvez également envisager de poser aux utilisateurs une question directe (de préférence à la deuxième personne du pluriel « vous ») dans des domaines particulièrement importants. Cela les incitera à trouver des réponses et à parcourir le site.
Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :
Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.
La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalis é. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.
Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.
If set to true, this field is required. If used with @jutro/validation, this prop can also be used to set the custom message overwrite. This can be done by using a tuple with the first value as true and the second value as the custom message. For example: required: [true, "a custom message"].
Shows an indicator that informs the user whether the current input value is valid. Whether the input is valid depends on the object entered in the validator prop.
An object which should contain a regex pattern as string and a validation message as string. If a user's input matches the regex pattern, the value will be valid, otherwise the message will be shown.
Consultez la section Utilisation pour découvrir comment concevoir correctement un élément look-up field et connaître les différentes options de configuration que nous proposons.
Un élément look-up field correspond à un champ de texte relié à un ensemble de valeurs qu’un utilisateur utilise pour rechercher des valeurs spécifiques. Pour un élément look-up field de base, vous définissez les valeurs valides à l’aide de la propriété availableValues, ainsi qu’une propriété optionTypes pour distinguer le type de valeur. Dans l’exemple ci-dessous, vous pouvez consulter le compte « John Doe » ou la police « Marine ». Vous pouvez cliquer sur la zone de recherche pour afficher les options valides ou saisir du texte pour vous limiter aux options qui contiennent les caractères saisis.
Si vous saisissez une option qui n’existe pas, l'élément look-up field vous indiquera qu’il n’y a pas d’options et que rien ne sera sélectionné.
Vous pouvez charger des valeurs depuis une source externe, par exemple une API. Pour ce faire, créez une fonction asynchrone et copiez-la dans la propriété onLoadValues.
Dans cet exemple, nous définissons une fonction pour simuler un appel asynchrone qui chargera les valeurs environ une seconde après votre saisie dans la zone.
