Le composant input-date est un type de champ de saisie de date dérivé du composant input. Les informations ici concernent uniquement l'input-date. Pour les caractéristiques communes à tous les inputs, consultez la documentation du dsa-input.
Navigation et interaction clavier
Touches supportées :
- Dans le sélecteur de date
- Esc → ferme le panneau
- Tab → fermeture du panneau si le focus devait en sortir
- Sur les champs de sélection de date :
- Flèche gauche → sélectionne le champ numérique précédent (jour/mois/année)
- Flèche droite → sélectionne le champ numérique suivant (jour/mois/année)
- Flèche haut → incrémente le champ sélectionné
- Flèche bas → décrémente le champ sélectionné
- Entrer → valide la saisie
- Sur le bouton de calendrier :
- Entrer, Espace → ouverture / fermeture du calendrier
- Sur une date du calendrier :
- Flèches → navigation entre les dates du calendrier
- Entrer, Espace → sélection de la date
Gestion du focus :
-
Lorsqu’une valeur est saisie, si l’ajout d’un autre chiffre ferait passer la valeur du champ au dessus de sa valeur maximale, le focus est automatiquement déplacé sur le prochain champ
Exemple : Si je saisie “12” dans le champ “jour”, l’ajout d’un autre chiffre ne correspondrait plus à une valeur de jour. Le focus passe donc automatiquement au champ suivant. - À la fermeture du calendrier, retour du focus sur le bouton calendrier.
Référence
Notice d'accessibilité AcceDeWeb : https://www.accede-web.com/notices/html-et-css/formulaires/