ansforge / ansforge/DesignSystem

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

Aperta
#24 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub
bug
Lingua principale
HTML
Stelle
6
Fork
1
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

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

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Direzione di ricerca

La issue non indica alcun file sorgente né alcun test. Inizia individuando il componente di input della data e riproducendone il comportamento in Chrome e Firefox; il lavoro è completato quando il controllo calendario nativo è disponibile in modo coerente e l’interazione tramite tastiera e puntatore rimane accessibile.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
html
Ambito
accessibility, frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.