ansforge / ansforge/DesignSystem

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

Open
#24 2 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
HTML
Stars
6
Forks
1
PR merge metrics
No merged PRs in 30d

Description

## 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.

![date-chrome](https://github.com/ansforge/DesignSystem/assets/67279825/085769b3-eb0d-45a1-bf0a-ee59486a42b3)

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.

![date-firefox](https://github.com/ansforge/DesignSystem/assets/67279825/ad8f62d2-5819-4a75-8fa0-530fd560ac7b)

## 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

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue does not name a source file or test. Start by locating the date input component and reproducing its behavior in Chrome and Firefox; done means the native calendar control is available consistently and keyboard and pointer interaction remain accessible.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.