Le sélecteur de mois est un élément de contrôle dans lequel l'utilisateur sélectionne un mois spécifique dans un calendrier ou le saisit manuellement. Ce composant est couramment utilisé dans les applications d'assurance où les utilisateurs doivent spécifier un mois, par exemple pour sélectionner la date de début d'une police d'assurance ou filtrer des données par date.
Le composant Sélecteur de mois est constitué des éléments suivants :
Champ du sélecteur de date : champ de saisie dans lequel l'utilisateur peut entrer manuellement le mois et l'année.
Icône Calendrier : bouton avec icône qui déclenche le calendrier déroulant lorsque l'utilisateur clique dessus.
Bouton Année précédente : commande de navigation permettant d'afficher et de sélectionner les mois de l'année précédente.
Bouton Année : commande permettant de sélectionner une année différente.
Bouton Année suivante : commande de navigation permettant d'afficher et de sélectionner les mois de l'année suivante.
Mois sélectionné : mois spécifique choisi par l'utilisateur et mis en surbrillance ou mis en évidence dans l'interface du sélecteur de mois.
Bouton « Mois en cours » : bouton qui renseigne automatiquement le champ du sélecteur de mois avec le mois et l'année en cours lorsque l'utilisateur clique dessus.
Un espace réservé MM/YYYY dans le champ de saisie guide les utilisateurs au sujet du format du mois et de l'année attendu au fur et à mesure de leur saisie.
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.
Renseignez un texte clair et descriptif pour l'étiquette du sélecteur de mois. Cette étiquette doit indiquer sa fonction et le type de mois spécifique sélectionné.
Placez une étiquette permanente en dehors du champ.
N'utilisez pas de texte de l'espace réservé pour remplacer l'étiquette.
Utilisez le texte d'aide pour fournir du contexte et indiquer le mois à sélectionner. Voici quelques exemples de ce que vous pouvez inclure :
Des conseils qui aident l'utilisateur à choisir le mois approprié
Plus de contexte pour expliquer pourquoi l'utilisateur doit sélectionner un mois spécifique
N'utilisez le texte d'aide que pour les informations pertinentes. Évitez de reformuler les détails qui apparaissent dans l'étiquette. Rédigez le texte d'aide en 1 ou 2 phrases courtes et complètes se terminant par un point. Mettez une majuscule en début de phrase.
N'utilisez pas de texte d'aide pour indiquer le contexte.
N'utilisez pas le texte d'aide pour simplement reformuler les mêmes informations que celles qui apparaissent dans l'étiquette.
Les utilisateurs peuvent entrer le mois et l'année manuellement dans le champ du sélecteur de date ou cliquer sur l'icône Calendrier pour sélectionner le mois et l'année dans une liste déroulante.
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.
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 ».
Le composant Sélecteur de mois permet de déplacer le caret (curseur de texte clignotant) entre les différentes sections de la date (MM/AAAA). Toutefois, les utilisateurs ne peuvent pas supprimer des chiffres individuels au sein d’une section. La suppression d’un chiffre efface la section entière (MM ou AAAA), obligeant les utilisateurs à la saisir de nouveau. Ce comportement est constant dans tous les composants de date, où le masque de saisie formate la saisie au fur et à mesure de la saisie de l’utilisateur.
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 l'étiquette indique clairement le mois que l'utilisateur doit saisir ou sélectionner.
Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.
If set to true, displays the component value in plain text. Consider using readonly instead, if possible, because plain text is worse for accessibility than readonly inputs.
Initial value of input. Value must be in object format with month and year property where month is indexed from 1. If value prop is specified along with this prop, this prop's value is discarded.
Value of input. Takes precedence over initialValue. Value must be in object format with month and year property where month is indexed from 1. If this prop is passed, component works in controlled mode and its value will change only if this prop changes.
La date est formatée en fonction des paramètres régionaux sélectionnés. Par exemple, si le paramètre régional est en-US, la date du 20 janvier 2024 prend le format « 01/20/2024 ». Si le paramètre régional est en-GB, le format est « 20/01/2024 ».
Les entrées Jutro ont implémenté des gestionnaires impératifs en tant que mécanisme permettant d'accéder à certaines fonctionnalités natives communes susceptibles de vous être utiles. Les fonctionnalités suivantes sont disponibles :
Définir le focus pour vous permettre de définir le focus utilisateur dans un composant spécifique
Flou pour supprimer le focus du composant
Faire défiler l'écran jusqu'au composant pour pouvoir amener l'utilisateur à une zone spécifique de la page.
Ces fonctionnalités sont fournies via la propriété ref, qui les expose comme suit :
Bien que certains composants de Jutro puissent fournir des fonctionnalités complémentaires ou une fonction d'aide pour faciliter le processus de validation, il vous appartient, en tant que développeur, de gérer la validation de toute entrée utilisateur (en utilisant ou non les fonctions d'aide complémentaires) et de déterminer les messages d'erreur à afficher.
Le comportement des composants Jutro est basé sur l'implémentation du développeur.
Quand est-ce que des messages d'erreur s'affichent ?
Les messages d'erreur ne s'affichent que lorsque vous les transmettez au composant via la propriété stateMessages. Cette propriété reçoit un objet avec le contenu suivant :
Le composant affiche chaque message d'erreur fourni dans le même ordre que dans la série.
Quand la validation a-t-elle lieu ?
Cette décision vous revient en tant que développeur. Étant donné que les composants ne déterminent pas le moment où la validation est effectuée ou le moment où l'erreur doit être affichée, vous devez implémenter la logique pour la traiter en fonction des exigences du projet, par exemple lorsque l'utilisateur modifie le contenu, lorsque le composant active une autre fenêtre et lors de la soumission du formulaire.
Si l'utilisateur saisit une date non valide ou une date située en dehors des limites min/max, une erreur de validation apparaît comme troisième paramètre dans le gestionnaire onChange. Le paramètre ressemble à ce qui suit :
{ errorCode:ERROR.<ERROR_CODE_GOES_HERE>, }
Le code d'erreur peut être l'un des suivants :
INVALID_DATE - lorsque l'utilisateur saisit une date non valide, par exemple « 32 janvier ».
MIN_DATE_EXCEEDED - lorsque l'utilisateur saisit une date antérieure à minDate.
MAX_DATE_EXCEEDED - lorsque l'utilisateur saisit une date postérieure à maxDate.
Consultez la section Utilisation pour découvrir comment concevoir correctement un sélecteur de mois et connaître les différentes options de configuration que nous proposons.
Vous pouvez autoriser l'utilisateur à choisir un mois à l'aide du composant MonthPicker, puis utiliser le gestionnaire pour obtenir le mois sélectionné. Les utilisateurs sélectionneront un mois et une année combinés.
Vous pouvez contrôler le sélecteur de mois en transmettant la propriété value. Ceci est utile si vous souhaitez utiliser le sélecteur de mois comme composant contrôlé.
Il est préférable d'utiliser l'API Intl.DateTimeFormat pour formater la valeur du sélecteur de mois, car à chaque appel de toLocaleString, une recherche doit être effectuée dans une grosse base de données de chaînes de localisation, ce qui peut être inefficace. La création d'un objet Intl.DateTimeFormat et l'utilisation de sa méthode format() peuvent éviter ce problème, car un objet DateTimeFormat se souvient des arguments qui lui ont été transmis et peut décider de mettre en cache une partie de la base de données.
Vous pouvez spécifier la plage de dates « min » et « max » pour limiter le nombre d'options valides, par exemple « janvier 2024 » et « décembre 2024 » la limiteraient à n'importe quel mois de 2024.
Un chemin d’importation à partir de @jutro/components a été ajouté pour le composant MonthPicker.
L’ancien chemin d’importation à partir de @jutro/components/new sera supprimé dans une prochaine version majeure.
Il est conseillé aux utilisateurs d’exécuter la commande suivante pour appliquer un codemod afin de mettre à jour les chemins d’importation dans votre code.
