Passer au contenu principal

Avatar

Avatar dans Storybook

Utilisation​

Présentation​

L'avatar est un objet qui apparaît dans l'en-tête global et qui représente l'identité d'un utilisateur. Il donne accès au profil de l'utilisateur et à des paramètres génériques, le cas échéant. Les avatars renforcent le lien qui unit les utilisateurs et les produits. Ils donnent également aux utilisateurs un certain degré de personnalisation.

Structure​

Image de l'avatar​

Image de l'avatar

Liste déroulante de l'avatar​

Liste déroulante de l'avatar

Les avatars apparaissent sous la forme d'une image circulaire dans le coin supérieur droit d'un en-tête et de son menu déroulant associé. Les utilisateurs peuvent charger une image à afficher. Par défaut (si aucune image n'est chargée), l'avatar affiche les initiales du prénom et du nom de l'utilisateur. Le menu déroulant de l'avatar indique également le nom et la fonction de l'utilisateur sous la forme d'étiquettes.

Avatar avec une image chargée (contenue)​

Les avatars comprennent les éléments suivants :

  1. Image par défaut ou chargée : les utilisateurs peuvent charger une image qui apparaît sous la forme d'une image circulaire et fait office d'avatar.
  2. Étiquette du nom : dans le menu déroulant de l'avatar, le nom de l'utilisateur apparaît sous la forme d'une étiquette ancrée.
  3. Fonction : dans le menu déroulant de l'avatar, la fonction ou le rôle de l'utilisateur apparaît sous son nom.

Meilleures pratiques​

  • Utilisez les avatars pour indiquer aux utilisateurs où ils peuvent accéder à leur profil et paramètres génériques.
  • Utilisez les avatars de façon cohérente dans le cadre d'une expérience ou dans un ensemble de produits liés entre eux.
  • Utilisez les avatars pour renforcer le lien qui unit un produit et ses utilisateurs.
  • Utilisez les avatars pour concéder aux utilisateurs un certain degré de personnalisation.

Réactivité/Adaptabilité​

  • Les avatars de Jutro sont disponibles en diverses tailles pour répondre à différents facteurs de forme.
  • À l'instar de la plupart des composants, les avatars peuvent être diffusés, dimensionnés et organisés par nos composants <Grid> et <Flex> dans le cadre de l'engagement de Jutro en faveur de la conception réactive.

Réactivité et adaptabilité de l&#39;avatar

(Remplacez cette image par une nouvelle de la taille relative de l'en-tête à utiliser avec chaque avatar, et qui indique les dimensions utilisées sur un ordinateur de bureau, une tablette et un téléphone portable.)

Interactions​

Souris​

  • Le survol de l'image circulaire de l'avatar avec la souris affiche une info-bulle révélant le nom de l'utilisateur.
  • Un clic sur l'image circulaire de l'avatar affiche un menu déroulant.
  • Le déplacement du curseur de la souris sur les étiquettes du menu déroulant les met en évidence.

Clavier​

L'en-tête de l'avatar fonctionne comme un bouton. La barre d'espace et la touche Entrée développent et réduisent le contenu du panneau qu'il comporte.

Lecteur d'écran​

Un texte alternatif peut être défini dans le champ du nom d'utilisateur. Si aucune valeur n'est précisée, la valeur est par défaut définie sur « Avatar utilisateur ». L'attribut WAI-ARIA de aria-haspopup="true" informe les utilisateurs du lecteur d'écran de la présence de contenu dans l'avatar. L'attribut aria-expanded bascule entre 'tr

Conditions d'erreur​

Lorsqu'aucune image n'est disponible pour l'avatar, les initiales de l'utilisateur sont indiquées à la place. Si les initiales de l'utilisateur ne peuvent pas être affichées (par exemple, si le nom de l'utilisateur ne comporte pas de caractères latins), une icône par défaut apparaît à leur place.

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.

Dans votre application, veillez à ce que le texte alternatif éventuellement présent soit significatif.

Note:

La dépendance @jutro/auth est désormais facultative pour les packages @jutro/router et @jutro/components . Cependant, Avatar component nécessite que @jutro/auth soit ajouté aux dépendances de votre application pour être utilisé.