Passer au contenu principal

Plage de dates

Plage de dates dans Storybook

Utilisation​

Présentation​

Le sélecteur de plage de dates permet aux utilisateurs de spécifier des dates de début et de fin. Les utilisateurs peuvent sélectionner ces dates dans un calendrier ou les saisir manuellement. Ce composant est utilisé dans les applications d’assurance pour spécifier une plage de dates pour des tâches telles que les suivantes :

  • Sélection de la période de garantie d’une police d’assurance
  • Filtrage des données des sinistres

Quand l'utiliser​

Pour sélectionner une période avec une date de début et une date de fin distinctes.

Quand ne pas l'utiliser​

Pour sélectionner une seule date. Dans ce cas, utilisez le composant Sélecteur de date.

Voir également​

Formatage​

Structure​

Composant Plage de dates

Le composant Plage de dates comporte les éléments suivants :

  1. Date de début
  2. Toutes les dates intermédiaires
  3. Date de fin

La date de début et la date de fin comprennent toutes les deux un champ dans lequel les utilisateurs peuvent saisir une date manuellement. Quant à l'icône Calendrier, elle déclenche un menu déroulant en vue de la sélection d'une date lorsque l'utilisateur clique dessus.

Format de date​

Le format de la date affichée dans le sélecteur de date dépend des paramètres régionaux de l'utilisateur. Cela signifie que le format de date varie en fonction de la localisation et des paramètres linguistiques de l'utilisateur.

Par exemple, aux États-Unis, le format de date est généralement MM/DD/YYYY, alors que dans de nombreux pays européens, le format est DD/MM/YYYY.

Le format de date est affiché sous la forme d'un espace réservé dans le sélecteur de date pour aider l'utilisateur à saisir la date. Cela garantit que le format reste visible tout au long du processus de saisie.

Contenu​

Directives générales relatives à la rédaction​

  • Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
  • Utilisez des verbes au présent et la forme active dans la plupart des cas.
  • Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
  • Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
  • Utilisez des termes et des phrases concis.

Inclure une étiquette​

Renseignez un texte clair et descriptif pour l'étiquette du sélecteur de plage de dates. Cette étiquette doit indiquer sa fonction et le type spécifique d'année sélectionné.

Les libellés apparaissent au-dessus du champ de saisie de date, sont alignées à gauche et commencent par une majuscule.

Placez une étiquette permanente en dehors du champ.
N'utilisez pas de texte de l'espace réservé pour remplacer une étiquette.

Comportements​

États​

Le composant Sélecteur de plage de dates se comporte comme un champ de saisie, avec les mêmes états interactifs.

Interactions​

Souris​

Les utilisateurs peuvent interagir avec cet élément en cliquant dans la zone située à l'intérieur de la bordure.

Image illustrant un utilisateur cliquant dans le champ du sélecteur de plage de dates

Clavier​

Le sélecteur de date est développé et réduit avec Spacebar. Les utilisateurs naviguent parmi les options à l'aide des touches fléchées et les sélectionne à l'aide de la touche Spacebar ou Enter.

Un widget de calendrier apparaît lorsque l'utilisateur utilise la touche de tabulation pour accéder au champ de saisie du sélecteur de date. La date du jour est mise en surbrillance et les utilisateurs qui ne se servent que du clavier peuvent entrer la date manuellement ici. Les utilisateurs peuvent également placer le focus clavier sur le widget en appuyant sur la touche fléchée vers le bas lorsqu'il est développé. Parcourez le calendrier avec les touches fléchées. Il est possible de mettre les boutons « Précédent », « Mois », « Année » et « Suivant » en évidence via la touche Tab lorsque le widget est ouvert.

Lecteur d'écran​

Les utilisateurs sont informés de la valeur de date préremplie lorsqu'ils accèdent au champ de saisie du sélecteur de date à l'aide de la touche Tabulation, ainsi que du fait que cette valeur est actuellement sélectionnée. La date peut être saisie manuellement à partir de ce champ de saisie. Bien que le focus reste placé sur la date préremplie, un widget de calendrier est également disponible. Les utilisateurs peuvent également déplacer le focus sur le widget en appuyant sur la touche fléchée vers le bas. La navigation dans la partie calendrier du widget s'effectue à l'aide des touches fléchées, et la valeur actuellement sélectionnée est lue par les lecteurs d'écran via un attribut WAI-ARIA aria-label. Il est possible de mettre les boutons « Précédent », « Mois », « Année » et « Suivant » en évidence via la touche Tab lorsque le widget est ouvert. Le sélecteur de date React n'active actuellement pas la navigation au clavier vers le lien « Aujourd'hui ».

Accessibilité​

Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :

  • Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
  • Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
  • Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
  • Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.

La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.

Lorsque vous utilisez ce composant, assurez-vous que les étiquettes indiquent clairement les dates que l'utilisateur doit saisir ou sélectionner.