Description

Ce composant permet d'implémenter un calendrier de saisie, analogue au type "date" de HTML5.

Restitution

• Le jour sélectionné doit être vocalisé.
• Lorsque l'utilisateur change de mois, le mois sélectionné est vocalisé.
• Lorsque l'utilisateur change d'année, l'année sélectionnée est vocalisée.

Interactions de base au clavier

Les interactions au clavier sont :

• À la première activation du calendrier de saisie, la touche Majuscule + Tabulation permet d'atteindre la date du jour dans l'ordre de la séquence de tabulation, en avant ou en arrière.
• Les flèches haut et bas permettent de sélectionner le jour équivalent pour la semaine suivante ou précédente. Si la première ou la dernière semaine du mois en cours est atteinte, le processus se poursuit pour le mois suivant ou précédent.
• Les flèches gauche et droite permettent de sélectionner la date suivante ou précédente. Si le premier ou le dernier jour est atteint, le processus se poursuit pour le mois suivant ou précédent.
• Les touches Espace et Entrée permettent de sélectionner la date en cours.
• Si le calendrier de saisie est proposé sous la forme d'une fenêtre, la touche Échap ferme la fenêtre.

Motif de conception : Accordion (WAI-ARIA Authoring Practices 1.1)

Exemple de DatePicker

Test du sélecteur de dates avec JAWS

Étape 1

1. Utiliser la touche Tabulation pour atteindre le calendrier.
   JAWS annonce « tableau vec x lignes et x colones, + [nom du jour]e + [numéro du jour] ».

Étape 2

1. Se déplacer avec les flèches de direction pour sélectionner une entrée de calendrier. JAWS annonce le « [nom du jour] et le [numéro du jour] ».
2. Utiliser les touches Majuscule + Tabulation pour atteindre le bouton « suivant ». L'activer avec la barre d'espace.
   JAWS annonce « hors du tableau bouton suivant » et le mois sélectionné lorsqu'on active le bouton.

Étape 3

1. Utiliser à nouveau la touche Tabulation pour retourner dans le calendrier. JAWS annonce à nouveau le jour sélectionné.
2. Choisir un jour avec les flèches et valider avec la touche Entrée.
   JAWS quitte le mode formulaire et se positionne sur le champ de saisie où s'inscrit la date sélectionnée. Il vocalise cette date en annonçant : « Hors du tableau, fin de la région d'application, édition date jj/mm/aaa ».

Test du sélecteur de dates avec NVDA

Étape 1

1. Utiliser la touche Tabulation pour atteindre le calendrier.
   NVDA annonce « Application, [mois et année en cours] tableau éditable, date du jour, cadre de texte ».
2. NVDA entre mode application sans prévenir l'utilisateur avec un signal sonore. Appuyer sur NVDA  +  Espace pour activer le mode formulaire s'il ne l'est pas.

Étape 2

1. Se déplacer avec les flèches de direction pour sélectionner une entrée de calendrier.
   NVDA vocalise le jour de la semaine et la date, le numéro de colonne du tableau suivis de « cadre de texte ».
2. Utiliser les touches Majuscule + Tabulation pour atteindre le bouton « suivant ». L'activer avec la barre d'espace. NVDA annonce le mois suivant.

Étape 3

1. Utiliser à nouveau la touche Tabulation pour retourner dans le calendrier. NVDA annonce à nouveau le jour sélectionné.
2. Choisir un jour avec les flèches et valider avec la touche Entrée. NVDA quitte le mode formulaire et se positionne sur le champ de saisie où s'inscrit la date sélectionnée. NVDA vocalise cette date en annonçant : « édition avec auto-complétion [date du jour] ».

Test du sélecteur de date avec VoiceOver

Étape 1

1. Utiliser la touche Tabulation pour atteindre le calendrier.
   VoiceOver annonce : « [date du jour], [mois actuel], tableau X colonnes, x lignes. »

Étape 2

1. Se déplacer avec les flèches de direction pour sélectionner une date. VoiceOver annonce le jour et la date, suivi de groupe.
2. Utiliser Majuscule + Tabulation pour atteindre le bouton « suivant ». VoiceOver annonce « suivant bouton, principal 1 élément ».
3. Activer le bouton avec VO + Espace. VoiceOver annonce : « appuyé, suivant ».

Étape 3

1. Tabuler à nouveau dans le calendrier. Choisir un jour avec les flèches et valider avec Entrée. VoiceOver n'annonce pas que le jour a été sélectionné.
2. Appuyer sur la touche Tabulation pour sortir du calendrier. Vous arrivez sur le champ de saisie où la date choisie s'est inscrite. VoiceOver annonce : « [date du jour], contenu sélectionné, date jj/mm/aaaa, modifiez le texte ».