From dae6ca616e57edb197bfbd6e5574615be3bdca08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matte=CC=80o=20Gauthier?= Date: Wed, 26 Apr 2023 15:02:32 +0200 Subject: [PATCH 1/5] =?UTF-8?q?D=C3=A9but=20de=20la=20traduction=20de=20la?= =?UTF-8?q?=20page=20useId?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/useId.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 4ea029f27..a6445a06e 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -4,7 +4,7 @@ title: useId -`useId` is a React Hook for generating unique IDs that can be passed to accessibility attributes. +`useId` est un React Hook permettant de générer des identifiants uniques qui peuvent être transmis aux attributs d'accessibilité. ```js const id = useId() @@ -16,11 +16,11 @@ const id = useId() --- -## Reference {/*reference*/} +## Référence {/*reference*/} ### `useId()` {/*useid*/} -Call `useId` at the top level of your component to generate a unique ID: +Appelez `useId` au niveau supérieur de votre composant pour générer un identifiant unique : ```js import { useId } from 'react'; @@ -30,17 +30,17 @@ function PasswordField() { // ... ``` -[See more examples below.](#usage) +[Voir d'autres exemples ci-dessous.](#usage) -#### Parameters {/*parameters*/} +#### Arguments {/*parameters*/} -`useId` does not take any parameters. +`useId` n'accepte aucun argument. -#### Returns {/*returns*/} +#### Valeur renvoyer {/*returns*/} -`useId` returns a unique ID string associated with this particular `useId` call in this particular component. +`useId` renvoie un identifiant unique en chaîne de charactères associée à cet appel `useId` particulier le composant en question. -#### Caveats {/*caveats*/} +#### Limitations {/*caveats*/} * `useId` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it. From dc8fca288ce9b286cd630274387a67250a76acf7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matte=CC=80o=20Gauthier?= Date: Fri, 5 May 2023 17:34:43 +0200 Subject: [PATCH 2/5] Sections Limitations --- src/content/reference/react/useId.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index a6445a06e..81b8813c5 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -42,9 +42,9 @@ function PasswordField() { #### Limitations {/*caveats*/} -* `useId` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it. +* `useId` est un Hook, vous pouvez donc uniquement l'appeler **au niveau supérieur de votre composant** ou de vos propres Hooks. Vous ne pouvez pas l'appeler à l'intérieur de boucles ou de conditions. Si nécessaire, extrayez un nouveau composant et déplacez l'état dans celui-ci. -* `useId` **should not be used to generate keys** in a list. [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key) +* `useId` ne doit pas être utilisé pour générer des clés dans une liste. [Les clés doivent être obtenues à partir de vos données.](/learn/rendering-lists#where-to-get-your-key) --- From fa0e485a901a2968abf10d8177dcec238c8f9a98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matte=CC=80o=20Gauthier?= Date: Fri, 5 May 2023 18:30:34 +0200 Subject: [PATCH 3/5] Finitions de la plage useId --- src/content/reference/react/useId.md | 74 ++++++++++++++-------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 81b8813c5..5bb0ada27 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -38,7 +38,7 @@ function PasswordField() { #### Valeur renvoyer {/*returns*/} -`useId` renvoie un identifiant unique en chaîne de charactères associée à cet appel `useId` particulier le composant en question. +`useId` renvoie un identifiant unique en chaîne de caractères associée à cet appel `useId` particulier le composant en question. #### Limitations {/*caveats*/} @@ -52,13 +52,13 @@ function PasswordField() { -**Do not call `useId` to generate keys in a list.** [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key) +**N'appelez pas `useId` pour générer des clés dans une liste.** [Les clés doivent être obtenues à partir de vos données.](/learn/rendering-lists#where-to-get-your-key) -### Generating unique IDs for accessibility attributes {/*generating-unique-ids-for-accessibility-attributes*/} +### Générer des identifiants uniques pour les attributs d'accessibilité {/*generating-unique-ids-for-accessibility-attributes*/} -Call `useId` at the top level of your component to generate a unique ID: +Appelez `useId` au niveau supérieur de votre composant pour générer un identifiant unique : ```js [[1, 4, "passwordHintId"]] import { useId } from 'react'; @@ -68,7 +68,7 @@ function PasswordField() { // ... ``` -You can then pass the generated ID to different attributes: +Vous pouvez ensuite transmettre l'identifiant généré à différents attributs : ```js [[1, 2, "passwordHintId"], [1, 3, "passwordHintId"]] <> @@ -77,26 +77,26 @@ You can then pass the generated ID to different at ``` -**Let's walk through an example to see when this is useful.** +**Prenons un exemple pour mieux saisir l'utilité de cette méthode.** -[HTML accessibility attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) like [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) let you specify that two tags are related to each other. For example, you can specify that an element (like an input) is described by another element (like a paragraph). +[Les attributs d'accessibilité HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) tels que [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) vous permettent de spécifier que deux balises sont liées l'une à l'autre. Par exemple, vous pouvez spécifier qu'un élément (exemple : un champ de saisie) est décrit par un autre élément (un paragraphe). -In regular HTML, you would write it like this: +En HTML classique, vous l'écririez comme suit : ```html {5,8}

- The password should contain at least 18 characters + Le mot de passe doit contenir au moins 18 caractères

``` -However, hardcoding IDs like this is not a good practice in React. A component may be rendered more than once on the page--but IDs have to be unique! Instead of hardcoding an ID, generate a unique ID with `useId`: +Cependant, coder des ID en dur comme cela n'est pas une bonne pratique avec React. Un composant pourrait être rendu plus d'une fois sur la page--mais les ID doivent être uniques ! Au lieu de coder en dur un identifiant, générez un identifiant unique avec `useId` : ```js {4,11,14} import { useId } from 'react'; @@ -106,21 +106,21 @@ function PasswordField() { return ( <>

- The password should contain at least 18 characters + Le mot de passe doit contenir au moins 18 caractères

); } ``` -Now, even if `PasswordField` appears multiple times on the screen, the generated IDs won't clash. +Désormais, même si `PasswordField` apparaît plusieurs fois à l'écran, les identifiants générés ne seront pas en conflit. @@ -132,14 +132,14 @@ function PasswordField() { return ( <>

- The password should contain at least 18 characters + Le mot de passe doit contenir au moins 18 caractères

); @@ -148,9 +148,9 @@ function PasswordField() { export default function App() { return ( <> -

Choose password

+

Choisissez un mot de passe

-

Confirm password

+

Confirmez le mot de passe

); @@ -163,33 +163,33 @@ input { margin: 5px; } -[Watch this video](https://www.youtube.com/watch?v=0dNzNcuEuOo) to see the difference in the user experience with assistive technologies. +[Regardez cette vidéo](https://www.youtube.com/watch?v=0dNzNcuEuOo) pour voir la différence d'expérience de l'utilisateur avec l'utilisation des technologies d'assistance. -With [server rendering](/reference/react-dom/server), **`useId` requires an identical component tree on the server and the client**. If the trees you render on the server and the client don't match exactly, the generated IDs won't match. +Avec [le rendu côté serveur](/reference/react-dom/server), **`useId` requiert une arborescence de composants identique sur le serveur et sur le client**. Si les arborescences que vous rendez sur le serveur et sur le client ne correspondent pas exactement, les identifiants générés ne correspondront donc pas. -#### Why is useId better than an incrementing counter? {/*why-is-useid-better-than-an-incrementing-counter*/} +#### Pourquoi utiliser useId plutôt qu'un compteur incrémental ? {/*why-is-useid-better-than-an-incrementing-counter*/} -You might be wondering why `useId` is better than incrementing a global variable like `nextId++`. +Vous vous demandez peut-être pour quelle raison il vaut mieux utiliser `useId` plutôt que d'incrémenter une variable globale comme `nextId++`. -The primary benefit of `useId` is that React ensures that it works with [server rendering.](/reference/react-dom/server) During server rendering, your components generate HTML output. Later, on the client, [hydration](/reference/react-dom/client/hydrateRoot) attaches your event handlers to the generated HTML. For hydration to work, the client output must match the server HTML. +Le principal avantage de `useId` est que React s'assure de son bon fonctionnement avec [le rendu serveur.](/reference/react-dom/server) Lors du rendu serveur, vos composants génèrent une sortie HTML. Plus tard, sur le client, le processus d'[hydratation](/reference/react-dom/client/hydrateRoot) attache vos gestionnaires d'événements au HTML généré. Pour que l'hydratation fonctionne, la sortie du client doit correspondre au HTML du serveur. -This is very difficult to guarantee with an incrementing counter because the order in which the client components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client. +Il est très difficile de garantir cela avec un compteur incrémentiel, car l'ordre dans lequel les composants du client sont hydratés peut ne pas correspondre à l'ordre dans lequel le code HTML du serveur a été émis. En appelant `useId`, vous vous assurez que l'hydratation fonctionnera et que la sortie correspondra entre le serveur et le client. -Inside React, `useId` is generated from the "parent path" of the calling component. This is why, if the client and the server tree are the same, the "parent path" will match up regardless of rendering order. +Dans React, `useId` est généré à partir du "chemin parent" du composant appelant. C'est pourquoi, si l'arbre du client et celui du serveur sont identiques, le "chemin parent" correspondra quel que soit l'ordre de rendu. --- -### Generating IDs for several related elements {/*generating-ids-for-several-related-elements*/} +### Générer des identifiants pour plusieurs éléments liés {/*generating-ids-for-several-related-elements*/} -If you need to give IDs to multiple related elements, you can call `useId` to generate a shared prefix for them: +Si vous devez attribuer des identifiants à plusieurs éléments liés, vous pouvez appeler `useId` pour leur attribuer un préfixe commun : @@ -200,10 +200,10 @@ export default function Form() { const id = useId(); return (
- +
- +
); @@ -216,20 +216,20 @@ input { margin: 5px; } -This lets you avoid calling `useId` for every single element that needs a unique ID. +Cela permet d'éviter d'appeler `useId` pour chaque élément qui a besoin d'un identifiant unique. --- -### Specifying a shared prefix for all generated IDs {/*specifying-a-shared-prefix-for-all-generated-ids*/} +### Préciser un préfixe partagé pour tous les identifiants générés {/*specifying-a-shared-prefix-for-all-generated-ids*/} -If you render multiple independent React applications on a single page, pass `identifierPrefix` as an option to your [`createRoot`](/reference/react-dom/client/createRoot#parameters) or [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) calls. This ensures that the IDs generated by the two different apps never clash because every identifier generated with `useId` will start with the distinct prefix you've specified. +Si vous rendez plusieurs applications React indépendantes sur une même page, passez `identifierPrefix` comme option à vos appels [`createRoot`](/reference/react-dom/client/createRoot#parameters) ou [`hydrateRoot`](/reference/react-dom/client/hydrateRoot). Cela garantira que les identifiants générés par les deux applications distinctes ne seront jamais en conflit, car chaque identifiant généré avec `useId` commencera par le préfixe distinct que vous avez spécifié. ```html index.html - My app + Mon app
@@ -242,18 +242,18 @@ import { useId } from 'react'; function PasswordField() { const passwordHintId = useId(); - console.log('Generated identifier:', passwordHintId) + console.log('Identifiant généré :', passwordHintId) return ( <>

- The password should contain at least 18 characters + Le mot de passe doit contenir au moins 18 caractères

); @@ -262,7 +262,7 @@ function PasswordField() { export default function App() { return ( <> -

Choose password

+

Choisissez un mot de passe

); From 44d9aa82a4a6d16eb457bcc1ccb84ddb179a9f89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matte=CC=80o=20Gauthier?= Date: Wed, 17 May 2023 14:09:12 +0200 Subject: [PATCH 4/5] Apply suggestions from code review Co-authored-by: Christophe Porteneuve --- src/content/reference/react/useId.md | 46 ++++++++++++++-------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 5bb0ada27..9eb026038 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -4,7 +4,7 @@ title: useId -`useId` est un React Hook permettant de générer des identifiants uniques qui peuvent être transmis aux attributs d'accessibilité. +`useId` est un Hook React permettant de générer des identifiants uniques qui peuvent être passés comme attributs d'accessibilité. ```js const id = useId() @@ -20,7 +20,7 @@ const id = useId() ### `useId()` {/*useid*/} -Appelez `useId` au niveau supérieur de votre composant pour générer un identifiant unique : +Appelez `useId` à la racine de votre composant pour générer un identifiant unique : ```js import { useId } from 'react'; @@ -32,33 +32,33 @@ function PasswordField() { [Voir d'autres exemples ci-dessous.](#usage) -#### Arguments {/*parameters*/} +#### Paramètres {/*parameters*/} -`useId` n'accepte aucun argument. +`useId` ne prend aucun paramètre. -#### Valeur renvoyer {/*returns*/} +#### Valeur renvoyée {/*returns*/} -`useId` renvoie un identifiant unique en chaîne de caractères associée à cet appel `useId` particulier le composant en question. +`useId` renvoie un identifiant textuel unique associé à cet appel `useId` particulier dans ce composant spécifique. #### Limitations {/*caveats*/} -* `useId` est un Hook, vous pouvez donc uniquement l'appeler **au niveau supérieur de votre composant** ou de vos propres Hooks. Vous ne pouvez pas l'appeler à l'intérieur de boucles ou de conditions. Si nécessaire, extrayez un nouveau composant et déplacez l'état dans celui-ci. +* `useId` est un Hook, vous pouvez donc uniquement l'appeler **à la racine de votre composant** ou de vos propres Hooks. Vous ne pouvez pas l'appeler à l'intérieur de boucles ou de conditions. Si nécessaire, extrayez un nouveau composant et déplacez l'état dans celui-ci. -* `useId` ne doit pas être utilisé pour générer des clés dans une liste. [Les clés doivent être obtenues à partir de vos données.](/learn/rendering-lists#where-to-get-your-key) +* `useId` ne doit pas être utilisé pour générer des clés dans une liste. [Les clés devraient être basées sur vos données.](/learn/rendering-lists#where-to-get-your-key) --- -## Usage {/*usage*/} +## Utilisation {/*usage*/} -**N'appelez pas `useId` pour générer des clés dans une liste.** [Les clés doivent être obtenues à partir de vos données.](/learn/rendering-lists#where-to-get-your-key) +**N'appelez pas `useId` pour générer des clés dans une liste.** [Les clés devraient être basées sur vos données.](/learn/rendering-lists#where-to-get-your-key) ### Générer des identifiants uniques pour les attributs d'accessibilité {/*generating-unique-ids-for-accessibility-attributes*/} -Appelez `useId` au niveau supérieur de votre composant pour générer un identifiant unique : +Appelez `useId` à la racine de votre composant pour générer un identifiant unique : ```js [[1, 4, "passwordHintId"]] import { useId } from 'react'; @@ -79,7 +79,7 @@ Vous pouvez ensuite transmettre l'identifiant généré ``` -Cependant, coder des ID en dur comme cela n'est pas une bonne pratique avec React. Un composant pourrait être rendu plus d'une fois sur la page--mais les ID doivent être uniques ! Au lieu de coder en dur un identifiant, générez un identifiant unique avec `useId` : +Cependant, définir des ID en dur comme ça constitue une mauvaise pratique en React. Un composant pourrait être présent plusieurs fois sur la page--mais les ID doivent être uniques ! Au lieu d'utiliser un identifiant fixe, générez un identifiant unique avec `useId` : ```js {4,11,14} import { useId } from 'react'; @@ -132,7 +132,7 @@ function PasswordField() { return ( <> -Cela permet d'éviter d'appeler `useId` pour chaque élément qui a besoin d'un identifiant unique. +Vous évitez ainsi d'appeler `useId` pour chaque élément nécessitant un identifiant unique. --- ### Préciser un préfixe partagé pour tous les identifiants générés {/*specifying-a-shared-prefix-for-all-generated-ids*/} -Si vous rendez plusieurs applications React indépendantes sur une même page, passez `identifierPrefix` comme option à vos appels [`createRoot`](/reference/react-dom/client/createRoot#parameters) ou [`hydrateRoot`](/reference/react-dom/client/hydrateRoot). Cela garantira que les identifiants générés par les deux applications distinctes ne seront jamais en conflit, car chaque identifiant généré avec `useId` commencera par le préfixe distinct que vous avez spécifié. +Si vous affichez plusieurs applications React indépendantes sur une même page, passez `identifierPrefix` comme option à vos appels [`createRoot`](/reference/react-dom/client/createRoot#parameters) ou [`hydrateRoot`](/reference/react-dom/client/hydrateRoot). Ça garantira que les identifiants générés par les deux applications distinctes ne seront jamais en conflit, car chaque identifiant généré avec `useId` commencera par le préfixe distinct que vous aurez spécifié. ```html index.html - Mon app + Mon appli
From 797c535de9da7516db183d1dfd3c2437591ddda8 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Wed, 17 May 2023 16:27:51 +0200 Subject: [PATCH 5/5] copy(use-id): final review pass --- src/content/reference/react/useId.md | 57 ++++++++++++++-------------- 1 file changed, 28 insertions(+), 29 deletions(-) diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 9eb026038..b27db0a29 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -4,7 +4,7 @@ title: useId -`useId` est un Hook React permettant de générer des identifiants uniques qui peuvent être passés comme attributs d'accessibilité. +`useId` est un Hook React permettant de générer des identifiants uniques qui peuvent être passés comme attributs d’accessibilité. ```js const id = useId() @@ -30,7 +30,7 @@ function PasswordField() { // ... ``` -[Voir d'autres exemples ci-dessous.](#usage) +[Voir d’autres exemples ci-dessous.](#usage) #### Paramètres {/*parameters*/} @@ -38,13 +38,13 @@ function PasswordField() { #### Valeur renvoyée {/*returns*/} -`useId` renvoie un identifiant textuel unique associé à cet appel `useId` particulier dans ce composant spécifique. +`useId` renvoie un identifiant textuel unique, associé à cet appel `useId` précis au sein de ce composant. #### Limitations {/*caveats*/} -* `useId` est un Hook, vous pouvez donc uniquement l'appeler **à la racine de votre composant** ou de vos propres Hooks. Vous ne pouvez pas l'appeler à l'intérieur de boucles ou de conditions. Si nécessaire, extrayez un nouveau composant et déplacez l'état dans celui-ci. +* `useId` est un Hook, vous pouvez donc uniquement l’appeler **à la racine de votre composant** ou de vos propres Hooks. Vous ne pouvez pas l’appeler à l’intérieur de boucles ou de conditions. Si nécessaire, extrayez un nouveau composant et déplacez l'état dans celui-ci. -* `useId` ne doit pas être utilisé pour générer des clés dans une liste. [Les clés devraient être basées sur vos données.](/learn/rendering-lists#where-to-get-your-key) +* `useId` ne doit pas être utilisé pour générer des clés dans une liste. [Les clés devraient toujours être basées sur vos données.](/learn/rendering-lists#where-to-get-your-key) --- @@ -52,13 +52,13 @@ function PasswordField() { -**N'appelez pas `useId` pour générer des clés dans une liste.** [Les clés devraient être basées sur vos données.](/learn/rendering-lists#where-to-get-your-key) +**N'appelez pas `useId` pour générer des clés dans une liste.** [Les clés devraient toujours être basées sur vos données.](/learn/rendering-lists#where-to-get-your-key) -### Générer des identifiants uniques pour les attributs d'accessibilité {/*generating-unique-ids-for-accessibility-attributes*/} +### Générer des identifiants uniques pour les attributs d’accessibilité {/*generating-unique-ids-for-accessibility-attributes*/} -Appelez `useId` à la racine de votre composant pour générer un identifiant unique : +Appelez `useId` à la racine de votre composant pour générer un identifiant unique : ```js [[1, 4, "passwordHintId"]] import { useId } from 'react'; @@ -68,7 +68,7 @@ function PasswordField() { // ... ``` -Vous pouvez ensuite transmettre l'identifiant généré à différents attributs : +Vous pouvez ensuite transmettre l’identifiant généré à différents attributs : ```js [[1, 2, "passwordHintId"], [1, 3, "passwordHintId"]] <> @@ -77,15 +77,15 @@ Vous pouvez ensuite transmettre l'identifiant généré ``` -**Prenons un exemple pour mieux saisir l'utilité de cette méthode.** +**Prenons un exemple pour mieux saisir l’utilité de cette méthode.** -[Les attributs d'accessibilité HTML](https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA) tels que [`aria-describedby`](https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) vous permettent de spécifier que deux balises sont liées l'une à l'autre. Par exemple, vous pouvez spécifier qu'un élément (tel qu'un champ de saisie) est décrit par un autre élément (tel qu'un paragraphe). +[Les attributs d’accessibilité HTML](https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA) tels que [`aria-describedby`](https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) vous permettent de spécifier que deux balises sont liées l’une à l’autre. Par exemple, vous pouvez spécifier qu'un élément (tel qu'un champ de saisie) est décrit par un autre élément (tel qu'un paragraphe). -En HTML classique, vous l'écririez comme suit : +En HTML classique, vous l'écririez comme suit : ```html {5,8}