Publié le 16 décembre 2024
En septembre, nous vous avons demandé votre avis sur la fonctionnalité expérimentale de sélection personnalisable. Les commentaires que vous avez partagés incluaient des cas d'utilisation (par exemple, des systèmes de conception, des boîtes de dialogue), des réflexions sur le mode de saisie de l'API et des commentaires sur les styles de base. Les préoccupations concernaient l'accessibilité, la compatibilité avec les navigateurs, la nécessité d'une fonctionnalité de recherche et la prise en charge de la sélection multiple. Il semble que vous souhaitiez utiliser l'API en production, mais que vous ayez quelques réserves et des demandes de fonctionnalités spécifiques.
Toutes ces informations ont été utilisées par les ingénieurs et les responsables Chrome pour prendre des décisions éclairées sur cette fonctionnalité. Cet article présente les principaux points à retenir de chacune des questions de l'enquête de sélection personnalisable.
Que pourriez-vous créer avec cette nouvelle API ?
De nombreux cas d'utilisation ont été partagés, en général les suivants:
- Créer des composants de système de conception: créez des composants sélectionnés pour vos systèmes de conception, en veillant à la cohérence et à la personnalisation de vos projets.
- Créer différents types de sélecteurs: sélecteurs de langue, de pays, d'autorisations utilisateur, etc.
- Améliorer les éléments de sélection existants: améliorez les éléments de sélection existants avec des fonctionnalités telles que des images, des SVG et un style plus riche.
- Remplacement des implémentations de sélection personnalisées: remplacez les composants de sélection personnalisés par une solution native et standardisée.
- Créer des listes déroulantes et des sélecteurs personnalisés: fonctionnalités plus complexes telles que les listes déroulantes et les sélecteurs personnalisés pour les numéros de téléphone, les fuseaux horaires, les devises et d'autres types de données.
- Amélioration des interfaces utilisateur des formulaires: améliorez les formulaires en créant des éléments de sélection plus attrayants et fonctionnels.
Ces réponses soulignent la polyvalence de la nouvelle API et son potentiel pour améliorer l'expérience utilisateur et l'efficacité du développement d'un large éventail d'applications Web.
Prévoyez-vous d'utiliser cette API en production une fois qu'elle sera largement disponible en version de référence ?
Avez-vous déjà essayé la nouvelle API ? Si oui, avez-vous pu créer ce que vous souhaitiez ?
Que pensez-vous du mode de saisie pour la sélection personnalisable (appearance: base-select
sur l'élément <select>
et ::picker(select)
) ?
Les commentaires sur ce mode de saisie sont mitigés:
- Certains la trouvent acceptable, raisonnable ou même meilleure que la situation actuelle. Ils considèrent qu'il s'agit d'un moyen "logique" ou "approprié" d'améliorer progressivement l'élément
<select>
. - D'autres expriment leur confusion ou trouvent la syntaxe malaisée. L'utilisation de deux propriétés (
appearance: base-select
et::picker(select)
) est considérée comme redondante ou inutile. Des inquiétudes sont soulevées concernant le nom (base-select
peut être trompeur) et la confusion potentielle pour les nouveaux utilisateurs qui ne connaissent pas les concepts sous-jacents. - Quelques personnes suggèrent d'autres approches, comme utiliser une seule propriété ou un seul sélecteur, ou éviter complètement la propriété
appearance
.
Globalement, si certains participants sont satisfaits du mode de saisie actuel, d'autres le trouvent déroutant ou suggèrent des améliorations pour plus de clarté et de simplicité. Ces commentaires soulignent l'importance de la documentation et des exemples clairs pour guider les développeurs dans l'utilisation efficace de la nouvelle API.
Avez-vous des commentaires sur les styles de base (user-agent) existants pour la sélection personnalisable ?
Certains participants trouvent les styles acceptables ou bons, tandis que d'autres ont des critiques ou des suggestions spécifiques. Voici quelques-uns des points soulevés:
- L'icône de coche n'est pas jolie et pourrait être plus simple.
- Il n'y a pas assez d'espace pour placer une coche à côté des éléments.
- Les styles de base semblent serrés, avec l'anneau de sélection tronqué et aucun espace entre l'icône cochée et le texte.
- Les styles peuvent être plus proches du style de la plate-forme d'OS ou d'un élément
<dialog>
. - La flèche par défaut doit être orientée vers le bas et se retourner vers le haut lorsqu'elle est ouverte.
- Une réinitialisation peut être nécessaire pour supprimer les styles de base de l'user-agent.
Avez-vous des questions ou des commentaires concernant cette fonctionnalité ?
Nous avons reçu de nombreux commentaires, questions et préoccupations concernant la nouvelle API de sélection personnalisable. Voici quelques-uns des thèmes clés:
- Accessibilité: plusieurs personnes ont exprimé des inquiétudes concernant l'accessibilité, en particulier en ce qui concerne les lecteurs d'écran et la navigation au clavier.
- Sélection multiple et cases combinées: les utilisateurs souhaitent vivement que la fonctionnalité de sélection multiple et les cases combinées soient prises en charge.
- Fonctionnalité de recherche: la possibilité de rechercher des options dans la sélection est une fonctionnalité demandée.
- Style et compatibilité des navigateurs: des inquiétudes ont été soulevées concernant les options de style, la compatibilité des navigateurs et la nécessité de réinitialiser le CSS.
- Détails de l'implémentation: des questions ont été posées sur des détails d'implémentation spécifiques, comme le verrouillage de la sélection, le comportement de rendu et les enfants personnalisés.
- Commentaires généraux: certains participants ont partagé des commentaires généraux, comme le souhait d'un mode de saisie d'API plus simple et la possibilité d'afficher en dehors du navigateur.
Globalement, les commentaires soulignent la nécessité d'améliorer l'accessibilité, d'ajouter des fonctionnalités telles que la sélection multiple et la recherche, et de fournir des consignes claires sur le style et la compatibilité avec les navigateurs.
Avez-vous d'autres commentaires à ajouter ?
Voici les principaux thèmes qui ressortent des réflexions et suggestions des personnes interrogées:
- Demande de fonctionnalités de sélection multiple et de liste déroulante: plusieurs personnes interrogées demandent spécifiquement l'ajout de fonctionnalités de sélection multiple et de liste déroulante.
- Importance de l'accessibilité: certains répondants soulignent la nécessité de continuer à se concentrer sur les fonctionnalités d'accessibilité.
- Commentaires positifs et demandes de fonctionnalités: certains utilisateurs sont enthousiastes à l'égard de l'API et proposent des suggestions, comme une option de recherche ou la possibilité de détecter la compatibilité à l'aide de
@supports
. - Cas d'utilisation spécifiques: quelques personnes ont mentionné des cas d'utilisation spécifiques qu'ils aimeraient voir pris en charge, comme le rendu en dehors du navigateur ou l'autorisation de valeurs personnalisées dans l'élément
<select>
. - Commentaires généraux: certains utilisateurs émettent des éloges généraux ou expriment le souhait d'une apparence cohérente entre les navigateurs.
Dans l'ensemble, ces commentaires renforcent la demande de fonctionnalités de sélection multiple et de boîtes de dialogue combinées, soulignent l'importance de l'accessibilité et fournissent des insights supplémentaires sur les cas d'utilisation potentiels et les axes d'amélioration.
Nous vous remercions encore une fois. Nous espérons que ce résumé des commentaires de la communauté sera utile aux développeurs et aux implémentateurs, et qu'il leur permettra de proposer une expérience de sélection plus personnalisable aux utilisateurs et aux développeurs.