États des éléments de l'interface utilisateur

Synthèse des états

L'apparence et le comportement des éléments de l'interface utilisateur sont affectés par plusieurs facteurs : autorisations, cohérence des données, interactions disponibles... En raison de ces facteurs, il existe certains états standard que les éléments utilisent pour communiquer clairement à l'utilisateur ce qui se passe à tout moment et ce qu'ils peuvent autoriser l'utilisateur à faire.

Pour les composants Jutro, il s'agit de la liste des états prédéfinis et ils seront disponibles dans les cas où le cas d'utilisation s'applique :

• Lecture seule
• Désactivé
• Affichage uniquement
• Accessible et désactivé

Bien que certains de ces comportements puissent s'appliquer principalement aux composants liés à l'entrée, d'autres types de composants peuvent avoir des états associés (p. ex. « désactivé ») qui ont la même intention.

Lecture seule

L'état de lecture seule indique à l'utilisateur que la valeur d'entrée ne peut pas être modifiée en raison de facteurs externes (par exemple, l'absence d'accès en écriture).

Un utilisateur peut agir pour l'activer, par exemple en contactant un administrateur.

Exemple :

Désactivé

Indique à l'utilisateur que la valeur de l'élément d'interface utilisateur ne peut pas être modifiée en raison de facteurs locaux (p. ex. la case à cocher au-dessus d'un champ de saisie doit d'abord être cochée pour permettre l'accès à ce champ de saisie).

Un utilisateur peut agir pour l'activer en interagissant avec la page.

Les éléments désactivés ne sont pas interactifs et ne peuvent donc pas être ciblés (exception « éléments accessibles et désactivés »). Utilisez les flèches du clavier pour accéder aux éléments désactivés de l'interface utilisateur à l'aide d'un lecteur d'écran.

Affichage uniquement

Indique à l'utilisateur que l'élément de l'interface utilisateur est utilisé en mode affichage (p. ex. pages de résumé, etc.) ou en mode édition (p. ex. formulaires), mais qu'il ne peut jamais être modifiable.

Accessible et désactivé

L'état accessible et désactivé est une approche qui permet de maintenir l'accessibilité des composants désactivés en modifiant certains des comportements associés aux désactivés :

Tout composant implémentant cet état effectuera ce qui suit :

• Supprimer l'attribut HTML disabled
• Ajouter l'attribut HTML aria-disabled
• Mettre en sourdine et empêcher l'appel de toutes les fonctions de rappel telles que onClick et onBlur

Selon le composant, d'autres modifications personnalisées peuvent être nécessaires.

Note: Seul le composant Button implémente cet état. Consultez sa documentation pour en savoir plus.

Priorité des états

Si au moins deux des propriétés disabled, displayOnly, et readOnly sont définies sur true en même temps, l'ordre de préséance suivant s'applique :

displayOnly > readOnly > disabled