Nouveau Components

Sélecteur de date

Le sélecteur de date permet de choisir une date dans un calendrier visuel. Il se construit de deux manières : le champ de date natif, qui délègue le calendrier au navigateur, et un champ associé à un calendrier reconstruit, ouvert dans une boîte de dialogue. La seconde ne se justifie que lorsque la première ne peut pas convenir : le calendrier relève alors du motif grille, dont la gestion du focus est entièrement à écrire.

Sur cette page

Quand utiliser un sélecteur de date

  • Date précise à renseigner : une date d'arrivée, un rendez-vous, une échéance.
  • Dates indisponibles à montrer : quand certains jours sont fermés et que l'utilisateur doit les voir avant d'essayer.
  • Repérage dans le calendrier : quand la réponse dépend du jour de la semaine ou de la proximité d'une autre date.

Quand ne pas en utiliser

  • Date parfaitement connue : pour une date de naissance, la saisie directe est plus rapide que quatre-vingts clics de navigation.
  • Choix parmi quelques dates : trois créneaux se présentent mieux en boutons radio.
  • Mois ou année seuls : un calendrier complet pour choisir un mois demande un travail inutile.

Modes d'action

  • Souris : saisie dans le champ, ou ouverture du calendrier et clic sur un jour.
  • Clavier : la saisie dans le champ reste possible de bout en bout. Dans la grille, les flèches changent de jour, Page précédente et Page suivante changent de mois, Échap ferme.
  • Lecteur d'écran : le champ natif est restitué sans effort. Le calendrier sur mesure repose sur role="dialog" et une grille dont chaque cellule porte une date complète.

Contenu

  • Les bornes annoncées : la période autorisée figure dans l'aide, avant la saisie.
  • Un format d'exemple : pour un champ texte, montrer une date complète, « 31/12/2026 », plutôt qu'un gabarit abstrait.
  • Des erreurs distinctes : format non respecté, date inexistante, date hors bornes, date indisponible ; quatre situations, quatre messages.

Sur cette page

Mots-clés

  • input type="date" : champ natif qui apporte le calendrier du navigateur, la saisie clavier et le format local.
  • role="dialog" et aria-modal : déclarent une boîte de dialogue modale, dont la tabulation ne doit pas sortir.
  • Tabindex glissant : dans une grille, une seule cellule est tabulable et les flèches déplacent le focus.
  • aria-selected : état de sélection. Il doit se trouver sur l'élément qui reçoit le focus.

Champ de date natif

C'est le choix à privilégier chaque fois que le besoin ne demande pas un calendrier sur mesure.

  • L'ordre des sous-champs suit la locale du navigateur, jamais l'attribut lang de la page. Une aide qui annoncerait jour, mois, année serait fausse pour une partie des visiteurs : on n'indique que les bornes.
  • Une saisie partielle laisse value vide mais met validity.badInput à true. Sans ce test, on annoncerait « aucune date saisie » à quelqu'un qui voit sa saisie à l'écran (WCAG 3.3.1).
  • L'erreur et le succès ne passent pas par le même canal : l'erreur est rattachée au champ et lue à la prise de focus, le succès est une région live.

Champ de date avec calendrier

À n'employer que lorsque le champ natif ne peut pas convenir. Le coût est réel : tout le comportement est à écrire.

  • La saisie au clavier reste possible dans le champ. Le calendrier est une aide, jamais le seul chemin (WCAG 2.1.1).
  • Le calendrier est une boîte de dialogue modale : Échap ferme depuis n'importe où et un clic à l'extérieur ferme aussi. Sans ces deux précautions, le focus peut sortir vers une page que aria-modal déclare masquée (WCAG 2.1.2 et 2.4.3).
  • C'est la cellule elle-même qui est focalisable, et non un bouton posé dedans : aria-selected doit se trouver sur l'élément qui reçoit le focus, sinon le lecteur d'écran ne dit pas quel jour est retenu (WCAG 4.1.2).
  • Chaque jour porte un nom accessible complet, « 15 juin 2026 », et les jours indisponibles le disent dans leur nom : l'information arrive à l'arrivée sur la cellule, pas après un clic refusé.
  • Le composant écrit dans le champ par script : il émet donc input et change, sans quoi aucune validation de formulaire ne voit la valeur arriver.

Lecteur d'écran

  • Sur le champ natif, aucun rôle ARIA n'est ajouté : le doubler créerait une restitution contradictoire.
  • Dans la grille, le tabindex glissant est un focus réel. Il ne se mélange jamais avec aria-activedescendant.
  • Un « 15 » seul ne veut rien dire : le nom accessible de la cellule porte la date entière.
  • Les boutons de mois ne volent pas le focus et passent à aria-disabled quand il n'y a plus de mois autorisé de ce côté.

Les interactions clavier diffèrent selon la construction. Avec le champ natif, elles sont assurées par le navigateur et varient d'un moteur à l'autre. Avec un calendrier reconstruit, elles sont entièrement à implémenter.

Champ de date natif

Interactions clavier du champ de date natif
Touche Fonction
Tab Déplace le focus vers le champ, puis d'une composante à l'autre selon le navigateur.
Flèches haut et bas Incrémentent ou décrémentent la composante active : jour, mois ou année.
Flèches gauche et droite Déplacent le curseur d'une composante à l'autre.
Caractères numériques Saisissent directement la composante active.
Espace ou Entrée Ouvrent le calendrier du navigateur, lorsque celui-ci en propose un.

Champ associé à un calendrier

Interactions clavier du champ associé à un calendrier
Touche Fonction
Tab Déplace le focus vers le champ. Le bouton d'ouverture ne constitue pas un arrêt de tabulation.
Flèche bas ou Alt + Flèche bas Ouvrent la boîte de dialogue du calendrier. Le focus se place sur la date du champ si elle est valide, sinon sur la date du jour.
Touches d'édition Saisie et correction de la date dans le champ.

Boîte de dialogue du calendrier

Interactions clavier de la boîte de dialogue du calendrier
Touche Fonction
Échap Referme la boîte de dialogue et replace le focus sur le champ, sans modifier la valeur.
Tab Déplace le focus vers l'élément suivant de la boîte. La grille ne compte qu'un seul arrêt. Sur le dernier bouton, revient au premier.
Maj + Tab Déplace le focus vers l'élément précédent. Sur le premier bouton, va au dernier.
Espace ou Entrée Sur un bouton de navigation, change le mois ou l'année affichés. Sur le bouton de validation, retient la date et referme. Sur le bouton d'annulation, referme sans retenir.

Grille du calendrier

Interactions clavier de la grille du calendrier
Touche Fonction
Flèche droite Déplace le focus au jour suivant.
Flèche gauche Déplace le focus au jour précédent.
Flèche bas Déplace le focus au même jour de la semaine suivante.
Flèche haut Déplace le focus au même jour de la semaine précédente.
Début Déplace le focus au premier jour de la semaine en cours.
Fin Déplace le focus au dernier jour de la semaine en cours.
Page précédente Affiche le mois précédent et place le focus sur le jour de même numéro, ou sur le dernier jour du mois si ce numéro n'existe pas.
Page suivante Affiche le mois suivant, selon la même règle.
Maj + Page précédente Affiche le même mois de l'année précédente, selon la même règle.
Maj + Page suivante Affiche le même mois de l'année suivante, selon la même règle.
Espace Retient la date et met à jour la valeur du champ, sans refermer la boîte de dialogue.
Entrée Retient la date, met à jour la valeur du champ, referme la boîte de dialogue et replace le focus sur le champ.

Note : la grille du calendrier utilise un tabindex glissant, et non aria-activedescendant : le focus entre réellement dans la grille et s'y déplace. C'est la différence essentielle avec les listes déroulantes à liste d'options, où le focus reste sur le champ. Consultez la page du composant Liste déroulante pour ces dernières.