Lien

Lien dans Storybook

Utilisation

Présentation

Un lien est un composant qui fait office d'élément de navigation. Il peut apparaître en ligne avec du texte ou seul. Vous pouvez associer un lien à une icône, une image ou un texte.

Quand l'utiliser

Pour diriger les utilisateurs vers un autre emplacement, soit sur la même page, soit vers une autre page ou un autre site.

Quand ne pas l'utiliser

• Pour soumettre des données ou prendre des mesures. Utilisez le composant Bouton.
• Pour créer les barres de navigation d'un site. Utilisez un composant Barre de navigation dédié.

Utilisez un composant Lien si l'action est purement liée à la navigation, notamment si elle dirige les utilisateurs vers un autre emplacement où ils effectuent la tâche.

N'utilisez pas de bouton tertiaire pour la navigation, car cela pourrait dérouter les utilisateurs. Les boutons d'actions tertiaires sont plus appropriés pour exécuter des actions dans le contexte ou la page en cours.

Types

Il existe 2 types de liens : autonomes et intégrés.

Les liens autonomes apparaissent seuls ou directement après le contenu.

Les liens intégrés apparaissent dans un corps de texte, tel qu'une phrase ou un paragraphe.

Formatage

Structure

Le composant Lien se compose des éléments suivants :

1. Libellé : texte descriptif qui fournit le contexte et explique où mène le lien.
2. Icône (facultatif) : indicateur visuel qui aide les utilisateurs à reconnaître plus facilement ce qui se passe après avoir cliqué.

Liens externes

Lorsqu'un lien dirige l'utilisateur en dehors d'une application, utilisez l'icône gw-open-in-new.

Utilisez l'icône `gw-open-in-new` pour les liens externes.

N'utilisez pas d'autres icônes pour les liens externes.

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.

Liens autonomes

Le texte des liens doit être court et précis. Utilisez des phrases nominales, des phrases verbales ou de courtes phrases descriptives qui intègrent des mots-clés pertinents liés à la destination du lien.

N'utilisez pas de phrases complètes pour les liens autonomes.

Fournissez un texte de lien spécifique qui aide les utilisateurs à savoir à quoi s'attendre.

N'utilisez pas d'expressions génériques comme « En savoir plus » ou « Cliquez ici », car elles manquent de contexte et peuvent être ambiguës.

Liens intégrés

Le texte d'un lien doit inclure suffisamment de contexte pour communiquer l'objectif ou la destination du lien sans dépendre du contexte environnant. De nombreux utilisateurs ne lisent pas le contenu adjacent. Pour cette raison, les termes utilisés dans les liens doivent être compréhensibles lorsqu'ils sont sortis de leur contexte et lus seuls. Rédigez des phrases courtes mais significatives qui indiquent le contenu lié à l'aide de mots-clés pertinents.

Utilisez un texte de lien descriptif qui informe les utilisateurs du contenu qu'ils trouveront.

N'utilisez pas de termes vagues ou génériques comme « ceci ».

Essayez de trouver le juste équilibre. Le texte des liens doit être concis, mais suffisamment descriptif pour faire sens hors contexte.

N'intégrez pas une phrase entière ou un bloc de texte dans un lien. Cela peut frustrer les utilisateurs de lecteurs d'écran qui doivent écouter l'intégralité du lien.

Placez les liens à la fin d'une phrase. Cela permet de préserver la syntaxe.

Évitez de placer des liens au milieu des phrases, car ils peuvent détourner l'attention. Ils interrompent le flux pour les personnes qui scannent le texte, ce qui les oblige à s'arrêter pour lire les mots qui se trouvent autour du lien. Cela peut également rendre la lecture plus difficile pour les utilisateurs autistes.

Utilisez des libellés significatifs

Les liens doivent être spécifiques, descriptifs et autonomes. Rédigez le texte du lien de sorte que même si vos utilisateurs ne lisent que l'étiquette du lien sans regarder le texte qui l'entoure, ils puissent tout de même comprendre parfaitement ce qu'ils trouveront au bout de ce lien.

Utilisez un texte de lien bref mais descriptif qui indique les mots-clés les plus pertinents au sujet de la destination du lien.

N'utilisez pas l'URL ou le nom de domaine comme étiquette de lien. Ces deux éléments manquent de valeur descriptive claire, ce qui rend difficile pour les utilisateurs de prévoir ce que le lien leur réserve.

Soyez succinct

Bien qu'il n'existe aucune limite maximale en termes de nombre de mots pour les liens, chaque mot inclus dans le lien doit permettre d'aider les utilisateurs à trouver ce dont ils ont besoin. Allez droit au but pour que les utilisateurs comprennent rapidement le lien lorsqu'ils parcourent et traitent la page. Essayez de placer les liens au début avec les mots les plus importants.

Soyez concis et placez les liens au début en utilisant un langage riche en informations.

Ne gaspillez pas les mots et ne placez pas le texte riche en informations à la fin.

Ponctuation dans les liens

Les liens autonomes ne sont pas des phrases complètes et ne comportent pas de ponctuation à la fin.

Si un lien intégré se trouve à la fin d'une phrase, n'incluez pas le signe de ponctuation dans le lien.

Traitez les liens autonomes comme des phrases courtes.

N'ajoutez pas de ponctuation finale aux liens autonomes.

Usage des majuscules

Mettez la 1re lettre du 1er mot en majuscule lorsque vous rédigez un texte de lien. Mettez une majuscule uniquement aux mots suivants :

• La première lettre du premier mot d'une phrase
• Les noms propres, comme les noms de marques, de produits et de services

Pour en savoir plus sur l'utilisation des majuscules dans des phrases, reportez-vous à Utilisation des majuscules.

Mettez la 1re lettre du 1er mot en majuscule pour le texte du lien.

Ne mettez pas la première lettre de chaque mot en majuscule.

Comportements

États

Le composant lien possède plusieurs états : activé, survol, actif, focus, désactivé, et visité.

Visuel	État	Description
	Activé (par défaut)	Indique à l'utilisateur que l'élément est prêt à interagir.
	Survol	Fournit des informations indiquant que l'utilisateur a positionné le curseur de la souris sur l'élément (uniquement sur la version pour ordinateur de bureau). Les liens sont soulignés lorsque l'utilisateur les survole.
	Actif	Fournit des informations indiquant que l'utilisateur clique ou appuie sur l'élément.
	Focus	Fournit des informations indiquant que l'utilisateur a mis l'élément en évidence, généralement en utilisant une méthode de saisie comme un clavier ou la voix.
	Désactivé	Indique à l'utilisateur que l'élément n'est actuellement pas disponible pour interagir.
	Visité	Indique que l'utilisateur a précédemment cliqué sur le contenu lié et l'a visualisé.

Interactions

Souris

Les utilisateurs peuvent ouvrir le lien en cliquant n'importe où sur l'étiquette ou l'icône associée.

Clavier

Le fait d'appuyer sur la touche Enter d'un lien ciblé active le lien et déplace le focus vers la destination du lien.

Lecteur d'écran

Lors du focus, le lecteur d'écran prononce le rôle « lien », ainsi que sa valeur textuelle (par exemple, « Lien, plus d'informations »). Lorsque vous utilisez le lien désactivé, l'état ARIA est défini sur aria-disabled='true'. L'état est lu par un lecteur d'écran sous la forme « grisé/non disponible ». Lorsque le lien devient actif, l'état aria-disabled prend la valeur « false ».

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.

Suivez les conseils ci-dessous lors de l'utilisation de ce composant dans vos applications :

• Veillez à ce que tous les changements de couleur respectent le seuil requis de 4.5:1.
• Évitez d'utiliser des mots et des phrases comme « Cliquez ici » ou « ici » en tant que texte de lien. Créez plutôt un texte de lien significatif qui fait sens en soi.

Code

Instruction d'importation

import { Link } from '@jutro/router/';

Cahier des charges du composant

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.

Propriétés

children

Type

React.ReactNode | IntlMessageShape

Description

The children elements to render inside the Link.

className

Type

string

Description

CSS class name for this component.

disabled

Type

string

Description

If set to true, the link is rendered in a disabled state.

history

Type

historyPropTypes

Description

Specific router history to use for navigation. It is imported from the history npm package. You can learn more here.

href

Type

IntlMessageShape

Description

The destination path when the link is clicked. Use this for paths external to the application.

icon

Type

string | Icon

Description

An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.

iconPosition

Type

'left' | 'right'

Description

Indicates where the icon is placed relative to the text.

Valeur par défaut

'left'

inline

Type

boolean

Description

If set to true, the link is displayed inline and not as a block element.

onClick

Type

function (React.MouseEvent<HTMLElement>)

Description

On click event handler.

onKeyPress

Type

() => void

Description

Callback when the link is focused and keyboard key pressed.

rel

Type

string

Description

The relationship attribute of the linked URL. Used only for external paths.

target

Type

string: _blank | _self | _parent | _top | framename

Description

Where to display the linked URL. Used only for external paths.

to

Type

IntlMessageShape | { pathname?: IntlMessageShape; hash?: IntlMessageShape }

hash

Type

IntlMessageShape

Description

Hash to put in the URL.

pathname

Type

IntlMessageShape

Description

Link path.

Description

The destination path when the link is clicked. Use this for paths internal to the application.

activeClassNameobsolète

Type

string

Description

CSS class name for the element when it is active.

exactobsolète

Type

boolean

Description

When set to true, the activeClassName is only applied if the location is matched exactly.

idobsolète

Type

string

Description

Unique identifier for the component.

textClassNameobsolète

Type

string

Description

CSS class name for the link text.

Crochets

Aucun crochet n'est disponible pour Link.

Clés de traduction

Aucune clé de traduction n'est associée au composant Link.

Portes de sortie

Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.

Les options suivantes sont disponibles :

• Jetons de conception
• Propriété className
• Transmission d'attributs HTML natifs
• Référence avec gestionnaires impératifs
• Propriété d'événement natif

Exemples

Consultez la section Utilisation pour en savoir plus sur la façon d'utiliser le composant Link et quand l'utiliser.

Lien de base

Cet exemple montre la différence entre la propriété to et la propriété href. Vous pouvez utiliser to pour spécifier une URL cible dans l'application et href pour accéder aux URL internes et externes. Lorsque vous ajoutez la propriété disabled, les liens ne sont pas cliquables.

À l'aide de la propriété icon, vous pouvez définir une icône personnalisée pour le lien.

import React from 'react';
import { Link } from '@jutro/router/';

export const BasicLink = () => {

  return (
    <div>
        This is an <Link to="/link#examples" icon="gw-bathtub">internal link</Link>.
        This is an <Link target="_blank" href="https://docs.guidewire.com/">external link</Link>.
        This is a <Link disabled>disabled link</Link>.
    </div>
  );
};

Gestion des événements de lien

Le composant Link peut gérer les événements à l'aide de la propriété onClick lorsque l'utilisateur clique sur le lien ou à l'aide de onKeyPress lorsque l'utilisateur appuie sur une touche pendant que le focus est sur le lien.

import React, { useState } from 'react';
import { Link } from '@jutro/router/';

export const EventsLink = () => {
  const [linkText, setLinkText] = useState("Click me!");
  const handleClick = () => {
    setLinkText("Clicked");
  }; 
  const handlePress = () => {
    setLinkText("Pressed");
  };      
  return (
    <Link
        onClick={handleClick}
        onKeyPress={handlePress}
    >
        {linkText}
    </Link>
  );
};

Lier des éléments enfants

Vous pouvez placer n'importe quel élément dans un lien pour qu'il s'affiche, comme dans cet exemple, à l'endroit où un lien contient un élément strong. Toutefois, l'ajout de certains éléments, tels qu'un champ de saisie ou un lien à l'intérieur d'un autre lien, peut nuire à l'accessibilité.

import React from 'react';
import { Link } from '@jutro/router/';

export const ChildrenLink = () => {
      
  return (
    <div>
        <Link>
            <strong>This is a child element.</strong>
        </Link>
    </div>
  );
};

Journal des modifications

10.1.0

• La prise en charge des jetons de conception a été ajoutée.

• Les propriétés suivantes sont désormais obsolètes :

  • id
  • activeClassName
  • textClassName
  • exact