Affichage du champ input type date différent sur Chrome et Firefox

[pckerneis-nx]

Description de l'anomalie

Je remarque que le composant de sélection de date n'a pas le même rendu ni les mêmes modalités d'interaction sur Chrome et Firefox.

Sur Chrome :

• Il y a une icône "Calendrier" en bout de champ
• Peu importe où est fait le clic, le composant modal "Calendrier" natif est affiché
• Pour modifier la date au clavier, il est nécessaire de cliquer sur le champ puis d'appuyer sur la touche Echap afin de refermer le calendrier modal ou alors d'attribuer le focus au champ à l'aide de la touche Tab.

Sur Firefox :

• Il y a deux icônes "Calendrier" (à la suite du texte et en bout de champ)
• Au clic sur le calendrier natif, le composant modal "Calendrier" natif est affiché
• Au clic ailleurs dans le champ (texte ou calendrier personnalisé en bout de champ), le texte est mis en surbrillance et accepte les entrées au clavier.

Suggestion de correction

Je suggère d'afficher le bouton calendrier natif sur les deux navigateurs car celui-ci permet, sans code additionnel, de distinguer l'édition au clavier (clic dans le champ hors du bouton natif) et l'édition à la souris avec affichage du calendrier modal (clic sur le bouton calendrier natif). Ce comportement me paraît plus en accords avec les bonnes pratiques d'accessibilité (faciliter les modalités d'interaction souris/pointeur/clavier).

Il est possible de préserver le bouton calendrier natif tout en modifiant son apparence, tel que démontré ici, dans la section "Autres types de champs" : https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/champ-de-saisie

[pckerneis-nx]

Pour information, je travaille actuellement sur la refonte de Finess. C'est en implémentant le composant date que j'ai remarqué cet écart.

Pierre-Clément KERNEIS, société Henix

[ANS-publications]

Merci pour votre partage. Nous ne manquerons pas d'en tenir compte dans les futures évolutions.