From c1ccf5c96f90ae4b682058ee278b556aef553deb Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <christophe@delicious-insights.com>
Date: Wed, 30 Aug 2023 15:15:51 +0200
Subject: [PATCH 1/2] copy(select): first full translation

---
 .../reference/react-dom/components/select.md  | 213 +++++++++---------
 .../react-dom/components/textarea.md          |   4 +-
 2 files changed, 112 insertions(+), 105 deletions(-)

diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 46710908c..3454e913a 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -4,12 +4,12 @@ title: "<select>"
 
 <Intro>
 
-The [built-in browser `<select>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) lets you render a select box with options.
+Le  [composant natif `<select>` du navigateur](https://developer.mozilla.org/fr/docs/Web/HTML/Element/select) vous permet d'afficher une liste de sélection (éventuellement déroulante) d'options.
 
 ```js
 <select>
-  <option value="someOption">Some option</option>
-  <option value="otherOption">Other option</option>
+  <option value="someOption">Une option</option>
+  <option value="otherOption">Une autre option</option>
 </select>
 ```
 
@@ -19,68 +19,68 @@ The [built-in browser `<select>` component](https://developer.mozilla.org/en-US/
 
 ---
 
-## Reference {/*reference*/}
+## Référence {/*reference*/}
 
 ### `<select>` {/*select*/}
 
-To display a select box, render the [built-in browser `<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) component.
+Pour afficher une liste de sélection, utilisez le [composant natif `<select>` du navigateur](https://developer.mozilla.org/fr/docs/Web/HTML/Element/select).
 
 ```js
 <select>
-  <option value="someOption">Some option</option>
-  <option value="otherOption">Other option</option>
+  <option value="someOption">Une option</option>
+  <option value="otherOption">Une autre option</option>
 </select>
 ```
 
-[See more examples below.](#usage)
+[Voir plus d'exemples ci-dessous](#usage).
 
 #### Props {/*props*/}
 
-`<select>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<select>` prend en charge toutes les [props communes aux éléments](/reference/react-dom/components/common#props).
 
-You can [make a select box controlled](#controlling-a-select-box-with-a-state-variable) by passing a `value` prop:
+Une liste de sélection peut devenir un [champ contrôlé](#controlling-a-select-box-with-a-state-variable) en lui passant une prop `value` :
 
-* `value`: A string (or an array of strings for [`multiple={true}`](#enabling-multiple-selection)). Controls which option is selected. Every value string match the `value` of some `<option>` nested inside the `<select>`.
+* `value` : une chaîne de caractères (ou un tableau de chaînes de caractères pour [`multiple={true}`](#enabling-multiple-selection)). Contrôle la ou les options sélectionnées dans la liste.  Chaque valeur textuelle doit correspondre à la `value` d'une des `<option>` à l'intérieur du `<select>`.
 
-When you pass `value`, you must also pass an `onChange` handler that updates the passed value.
+Lorsque vous passez `value`, vous devez également passer un gestionnaire d'événement `onChange` qui met à jour la valeur passée.
 
-If your `<select>` is uncontrolled, you may pass the `defaultValue` prop instead:
+Si votre `<select>` n'est pas contrôlée, passez plutôt la prop `defaultValue` :
 
-* `defaultValue`: A string (or an array of strings for [`multiple={true}`](#enabling-multiple-selection)). Specifies [the initially selected option.](#providing-an-initially-selected-option)
+* `defaultValue` : une chaîne de caractères (ou un tableau de chaînes de caractères pour [`multiple={true}`](#enabling-multiple-selection)). Spécifie [la ou les options initialement sélectionnées](#providing-an-initially-selected-option).
 
-These `<select>` props are relevant both for uncontrolled and controlled select boxes:
+Ces props de `<select>` sont compatibles avec les listes de sélection contrôlées et non contrôlées :
 
-* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autocomplete): A string. Specifies one of the possible [autocomplete behaviors.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
-* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autofocus): A boolean. If `true`, React will focus the element on mount.
-* `children`: `<select>` accepts [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), and [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) components as children. You can also pass your own components as long as they eventually render one of the allowed components. If you pass your own components that eventually render `<option>` tags, each `<option>` you render must have a `value`.
-* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#disabled): A boolean. If `true`, the select box will not be interactive and will appear dimmed.
-* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#form): A string. Specifies the `id` of the `<form>` this select box belongs to. If omitted, it's the closest parent form.
-* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#multiple): A boolean. If `true`, the browser allows [multiple selection.](#enabling-multiple-selection)
-* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#name): A string. Specifies the name for this select box that's [submitted with the form.](#reading-the-select-box-value-when-submitting-a-form)
-* `onChange`: An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Required for [controlled select boxes.](#controlling-a-select-box-with-a-state-variable) Fires immediately when the user picks a different option. Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
-* `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use `onChange` instead which works similarly.
-* `onInputCapture`: A version of `onInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires if an input fails validation on form submit. Unlike the built-in `invalid` event, the React `onInvalid` event bubbles.
-* `onInvalidCapture`: A version of `onInvalid` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#required): A boolean. If `true`, the value must be provided for the form to submit.
-* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#size): A number. For `multiple={true}` selects, specifies the preferred number of initially visible items.
+* [`autoComplete`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/select#autocomplete) : une chaîne de caractères. Spécifie un des [comportements de l'autocomplétion](https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/autocomplete#valeurs).
+* [`autoFocus`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/select#autofocus) : un booléen. Si `true`, React va activer l'élément après le montage _(l'apparition initiale dans le DOM, NdT)_.
+* `children` : `<select>` accepte comme enfants des composants [`<option>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/optgroup) et [`<datalist>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/datalist). Vous pouvez aussi passer vos propres composants à condition qu'ils finissent par produire un des composants natifs autorisés.  Si vous passez vos propres composants et que ceux-ci produisent au final des balises `<option>`, chaque `<option>` que vous affichez doit avoir une `value`.
+* [`disabled`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/select#disabled) : un booléen. Si `true`, la liste de sélection ne sera pas interactive et sera grisée.
+* [`form`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/select#form) : une chaîne de caractères. Spécifie l'`id` du `<form>` auquel appartient cette liste de sélection. S'il est absent, la zone de saisie sera associée au formulaire parent le plus proche.
+* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#multiple) : un booléen. Si `true`, le navigateur autorisera la [sélection multiple](#enabling-multiple-selection).
+* [`name`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/select#name) : une chaîne de caractères. Spécifie le nom de cette liste de sélection au sein de [l'envoi du formulaire](#reading-the-select-box-when-submitting-a-form).
+* `onChange` : une fonction [gestionnaire d'événement](/reference/react-dom/components/common#event-handler). Requis pour [les listes de sélection contrôlées](#controlling-a-select-box-with-a-state-variable). Se déclenche immédiatement lorsque l'utilisateur sélectionne une option différente. Se comporte comme [l'événement `input`](https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/input_event) du navigateur.
+* `onChangeCapture` : une version de `onChange` qui se déclenche lors de la [phase de capture](/learn/responding-to-events#capture-phase-events).
+* [`onInput`](https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/input_event) : une fonction [gestionnaire d'événement](/reference/react-dom/components/common#event-handler). Se déclenche immédiatement lorsque la valeur de la liste de sélection est modifiée par l'utilisateur. Pour des raisons historiques, en React l'usage consiste à plutôt utiliser `onChange`, qui fonctionne de manière similaire.
+* `onInputCapture` : une version de `onInput` qui se déclenche lors de la [phase de capture](/learn/responding-to-events#capture-phase-events).
+* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) : une fonction [gestionnaire d'événement](/reference/react-dom/components/common#event-handler). Se déclenche si une liste de sélection échoue à la validation lors de la soumission du formulaire. Contrairement à l'événement natif `invalid`, l'événement React `onInvalid` se propage.
+* `onInvalidCapture` : une version de `onInvalid` qui se déclenche lors de la [phase de capture](/learn/responding-to-events#capture-phase-events).
+* [`required`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/select#required) : un booléen. Si `true`, la valeur doit être fournie pour que le formulaire puisse être soumis.
+* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#size) : un nombre. Pour les listes de sélection avec `multiple={true}`, spécifie le nombre souhaitable d'éléments initialement visibles.
 
-#### Caveats {/*caveats*/}
+#### Limitations {/*caveats*/}
 
-- Unlike in HTML, passing a `selected` attribute to `<option>` is not supported. Instead, use [`<select defaultValue>`](#providing-an-initially-selected-option) for uncontrolled select boxes and [`<select value>`](#controlling-a-select-box-with-a-state-variable) for controlled select boxes.
-- If a select box receives a `value` prop, it will be [treated as controlled.](#controlling-a-select-box-with-a-state-variable)
-- A select box can't be both controlled and uncontrolled at the same time.
-- A select box cannot switch between being controlled or uncontrolled over its lifetime.
-- Every controlled select box needs an `onChange` event handler that synchronously updates its backing value.
+- Contrairement à HTML, vous n'avez pas le droit de passer un attribut `selected` aux composants `<option>`. Utilisez plutôt [`<select defaultValue>`](#providing-an-initially-selected-option) pour les listes de sélection non contrôlées et [`<select value>`](#controlling-a-select-box-with-a-state-variable) pour celles qui sont contrôlées.
+- Si une liste de sélection reçoit une prop `value` textuelle, elle sera [traitée comme contrôlée](#controlling-a-select-box-with-a-state-variable).
+- Une liste de sélection ne peut pas être à la fois contrôlée et non contrôlée.
+- Une liste de sélection ne peut pas basculer entre un statut contrôlé et non contrôlé au cours de son existence.
+- Une liste de sélection contrôlée doit avoir un gestionnaire `onChange` qui met à jour sa valeur de façon synchrone.
 
 ---
 
-## Usage {/*usage*/}
+## Utilisation {/*usage*/}
 
-### Displaying a select box with options {/*displaying-a-select-box-with-options*/}
+### Afficher une liste de sélection d'options {/*displaying-a-select-box-with-options*/}
 
-Render a `<select>` with a list of `<option>` components inside to display a select box. Give each `<option>` a `value` representing the data to be submitted with the form.
+Utiliser un `<select>` avec une série de composants `<option>` à l'intérieur pour afficher une liste de sélection.  Donnez une `value` à chaque `<option>` pour représenter les données qui seront soumises avec le formulaire.
 
 <Sandpack>
 
@@ -88,10 +88,10 @@ Render a `<select>` with a list of `<option>` components inside to display a sel
 export default function FruitPicker() {
   return (
     <label>
-      Pick a fruit:
+      Choisissez un fruit :
       <select name="selectedFruit">
-        <option value="apple">Apple</option>
-        <option value="banana">Banana</option>
+        <option value="apple">Pomme</option>
+        <option value="banana">Banane</option>
         <option value="orange">Orange</option>
       </select>
     </label>
@@ -103,15 +103,15 @@ export default function FruitPicker() {
 select { margin: 5px; }
 ```
 
-</Sandpack>  
+</Sandpack>
 
 ---
 
-### Providing a label for a select box {/*providing-a-label-for-a-select-box*/}
+### Fournir une légende pour une liste de sélection {/*providing-a-label-for-a-select-box*/}
 
-Typically, you will place every `<select>` inside a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) tag. This tells the browser that this label is associated with that select box. When the user clicks the label, the browser will automatically focus the select box. It's also essential for accessibility: a screen reader will announce the label caption when the user focuses the select box.
+Vous placerez généralement chaque `<select>` à l'intérieur d'une balise [`<label>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/label). Ça indique au navigateur que cette légende est associée à cette liste de sélection. Lorsque l'utilisateur cliquera sur la légende, le navigateur activera la liste de sélection. C'est également essentiel pour l'accessibilité : un lecteur d'écran annoncera la légende lorsque l'utilisateur activera la liste de sélection.
 
-If you can't nest `<select>` into a `<label>`, associate them by passing the same ID to `<select id>` and [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) To avoid conflicts between multiple instances of one component, generate such an ID with [`useId`.](/reference/react/useId)
+Si vous ne pouvez pas imbriquer votre `<select>` dans un `<label>`, associez-les en passant le même `id` à `<select id>` et [`<label htmlFor>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor). Pour éviter les conflits entre les instances d'un composant, générez un `id` avec [`useId`](/reference/react/useId).
 
 <Sandpack>
 
@@ -123,21 +123,21 @@ export default function Form() {
   return (
     <>
       <label>
-        Pick a fruit:
+        Choisissez un fruit :
         <select name="selectedFruit">
-          <option value="apple">Apple</option>
-          <option value="banana">Banana</option>
+          <option value="apple">Pomme</option>
+          <option value="banana">Banane</option>
           <option value="orange">Orange</option>
         </select>
       </label>
       <hr />
       <label htmlFor={vegetableSelectId}>
-        Pick a vegetable:
+        Choisissez un légume :
       </label>
       <select id={vegetableSelectId} name="selectedVegetable">
-        <option value="cucumber">Cucumber</option>
-        <option value="corn">Corn</option>
-        <option value="tomato">Tomato</option>
+        <option value="cucumber">Concombre</option>
+        <option value="corn">Maïs</option>
+        <option value="tomato">Tomate</option>
       </select>
     </>
   );
@@ -153,9 +153,9 @@ select { margin: 5px; }
 
 ---
 
-### Providing an initially selected option {/*providing-an-initially-selected-option*/}
+### Passer une option initialement sélectionnée {/*providing-an-initially-selected-option*/}
 
-By default, the browser will select the first `<option>` in the list. To select a different option by default, pass that `<option>`'s `value` as the `defaultValue` to the `<select>` element.
+Par défaut, le navigateur sélectionnera la première `<option>` de la liste. Pour spécifier une autre option par défaut, passez la `value` de cette `<option>` dans la prop `defaultValue` de l'élément `<select>` :
 
 <Sandpack>
 
@@ -163,10 +163,10 @@ By default, the browser will select the first `<option>` in the list. To select
 export default function FruitPicker() {
   return (
     <label>
-      Pick a fruit:
+      Choisissez un fruit :
       <select name="selectedFruit" defaultValue="orange">
-        <option value="apple">Apple</option>
-        <option value="banana">Banana</option>
+        <option value="apple">Pomme</option>
+        <option value="banana">Banane</option>
         <option value="orange">Orange</option>
       </select>
     </label>
@@ -178,19 +178,19 @@ export default function FruitPicker() {
 select { margin: 5px; }
 ```
 
-</Sandpack>  
+</Sandpack>
 
 <Pitfall>
 
-Unlike in HTML, passing a `selected` attribute to an individual `<option>` is not supported.
+Contrairement à HTML, passer un attribut `selected` à une `<option>` individuelle n'est pas pris en charge.
 
 </Pitfall>
 
 ---
 
-### Enabling multiple selection {/*enabling-multiple-selection*/}
+### Autoriser la sélection multiple {/*enabling-multiple-selection*/}
 
-Pass `multiple={true}` to the `<select>` to let the user select multiple options. In that case, if you also specify `defaultValue` to choose the initially selected options, it must be an array.
+Passez `multiple={true}` au `<select>` pour permettre à l'utilisateur de sélectionner plusieurs options.  Dans ce cas, si vous précisez aussi une `defaultValue` pour les options initialement sélectionnées, il doit s'agir d'un tableau.
 
 <Sandpack>
 
@@ -198,14 +198,14 @@ Pass `multiple={true}` to the `<select>` to let the user select multiple options
 export default function FruitPicker() {
   return (
     <label>
-      Pick some fruits:
+      Choisissez des fruits :
       <select
         name="selectedFruit"
         defaultValue={['orange', 'banana']}
         multiple={true}
       >
-        <option value="apple">Apple</option>
-        <option value="banana">Banana</option>
+        <option value="apple">Pomme</option>
+        <option value="banana">Banane</option>
         <option value="orange">Orange</option>
       </select>
     </label>
@@ -221,42 +221,49 @@ select { display: block; margin-top: 10px; width: 200px; }
 
 ---
 
-### Reading the select box value when submitting a form {/*reading-the-select-box-value-when-submitting-a-form*/}
+### Lire la valeur d'une liste de sélection lors de la soumission d'un formulaire {/*reading-the-select-box-value-when-submitting-a-form*/}
+
+Ajoutez un [`<form>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/form) autour de votre liste de sélection avec un [`<button type="submit">`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/button) à l'intérieur. Il appellera votre gestionnaire d'événement `<form onSubmit>`. Par défaut, le navigateur enverra les données du formulaire à l'URL actuelle et rechargera la page. Vous pouvez remplacer ce comportement en appelant `e.preventDefault()`. Lisez les données du formulaire avec [`new FormData(e.target)`](https://developer.mozilla.org/fr/docs/Web/API/FormData).
 
-Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your select box with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) inside. It will call your `<form onSubmit>` event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling `e.preventDefault()`. Read the form data with [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
 <Sandpack>
 
 ```js
 export default function EditPost() {
   function handleSubmit(e) {
-    // Prevent the browser from reloading the page
+    // Empêche le navigateur de recharger la page
     e.preventDefault();
-    // Read the form data
+
+    // Lit les données du formulaire
     const form = e.target;
     const formData = new FormData(form);
-    // You can pass formData as a fetch body directly:
+
+    // Vous pouvez passer formData directement comme corps de la requête fetch :
     fetch('/some-api', { method: form.method, body: formData });
-    // You can generate a URL out of it, as the browser does by default:
+
+    // Vous pouvez générer une URL sur cette base, comme le fait
+    // par défaut le navigateur :
     console.log(new URLSearchParams(formData).toString());
-    // You can work with it as a plain object.
+
+    // Ou vous pouvez travailler avec comme un objet simple :
     const formJson = Object.fromEntries(formData.entries());
-    console.log(formJson); // (!) This doesn't include multiple select values
-    // Or you can get an array of name-value pairs.
+    console.log(formJson); // (!) Ça ne gère pas les sélections multiples
+
+    // Ou vous pouvez obtenir un tableau de paires clé-value.
     console.log([...formData.entries()]);
   }
 
   return (
     <form method="post" onSubmit={handleSubmit}>
       <label>
-        Pick your favorite fruit:
+        Choisissez votre fruit préféré :
         <select name="selectedFruit" defaultValue="orange">
-          <option value="apple">Apple</option>
-          <option value="banana">Banana</option>
+          <option value="apple">Pomme</option>
+          <option value="banana">Banane</option>
           <option value="orange">Orange</option>
         </select>
       </label>
       <label>
-        Pick all your favorite vegetables:
+        Choisissez tous vos fruits préférés :
         <select
           name="selectedVegetables"
           multiple={true}
@@ -268,8 +275,8 @@ export default function EditPost() {
         </select>
       </label>
       <hr />
-      <button type="reset">Reset</button>
-      <button type="submit">Submit</button>
+      <button type="reset">Réinitialiser</button>
+      <button type="submit">Envoyer</button>
     </form>
   );
 }
@@ -284,44 +291,44 @@ label { margin-bottom: 20px; }
 
 <Note>
 
-Give a `name` to your `<select>`, for example `<select name="selectedFruit" />`. The `name` you specified will be used as a key in the form data, for example `{ selectedFruit: "orange" }`.
+Donnez un `name` à votre `<select>`, par exemple `<select name="selectedFruit" />`. Le `name` que vous avez spécifié sera utilisé comme clé dans les données du formulaire, par exemple `{ selectedFruit: "orange" }`.
 
-If you use `<select multiple={true}>`, the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) you'll read from the form will include each selected value as a separate name-value pair. Look closely at the console logs in the example above.
+Si vous utilisez `<select multiple={true}>`, le [`FormData`](https://developer.mozilla.org/fr/docs/Web/API/FormData) que vous récupèrerez du formulaire incluera chaque valeur sélectionnée comme une paire clé-valeur distincte.  Examinez attentivement les messages en console de l'exemple ci-dessus.
 
 </Note>
 
 <Pitfall>
 
-By default, *any* `<button>` inside a `<form>` will submit it. This can be surprising! If you have your own custom `Button` React component, consider returning [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) instead of `<button>`. Then, to be explicit, use `<button type="submit">` for buttons that *are* supposed to submit the form.
+Par défaut, *n'importe quel* `<button>` à l'intérieur d'un `<form>` va le soumettre. Ça peut surprendre ! Si vous avez votre propre composant React `Button`, envisagez de renvoyer [`<button type="button">`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/button) au lieu de `<button>`. Ensuite, pour être explicite, utilisez `<button type="submit">` pour les boutons qui *sont* censés soumettre le formulaire.
 
 </Pitfall>
 
 ---
 
-### Controlling a select box with a state variable {/*controlling-a-select-box-with-a-state-variable*/}
+### Contrôler une liste de sélection avec une variable d'état {/*controlling-a-select-box-with-a-state-variable*/}
 
-A select box like `<select />` is *uncontrolled.* Even if you [pass an initially selected value](#providing-an-initially-selected-option) like `<select defaultValue="orange" />`, your JSX only specifies the initial value, not the value right now.
+Une liste de sélection comme `<select />` est *non contrôlée*. Même si vous [passez une valeur initiale](#providing-an-initially-selected-option) comme `<select defaultValue="orange" />`, votre JSX ne spécifie que la valeur initiale, il ne contrôle pas la valeur actuelle.
 
-**To render a _controlled_ select box, pass the `value` prop to it.** React will force the select box to always have the `value` you passed. Typically, you will control a select box by declaring a [state variable:](/reference/react/useState)
+**Pour afficher une liste de sélection _contrôlée_, passez une prop `value` à `<select />`.** React forcera la liste de sélection à toujours avoir la valeur que vous avez passée. Généralement, vous contrôlerez une liste de sélection en déclarant une [variable d'état](/reference/react/useState) :
 
 ```js {2,6,7}
 function FruitPicker() {
-  const [selectedFruit, setSelectedFruit] = useState('orange'); // Declare a state variable...
+  const [selectedFruit, setSelectedFruit] = useState('orange'); // Déclare une variable d’état...
   // ...
   return (
     <select
-      value={selectedFruit} // ...force the select's value to match the state variable...
-      onChange={e => setSelectedFruit(e.target.value)} // ... and update the state variable on any change!
+      value={selectedFruit} // ...force la valeur du champ de saisie à la valeur de la variable d'état...
+      onChange={e => setSelectedFruit(e.target.value)} // ...et met à jour la variable d'état à chaque modification !
     >
-      <option value="apple">Apple</option>
-      <option value="banana">Banana</option>
+      <option value="apple">Pomme</option>
+      <option value="banana">Banane</option>
       <option value="orange">Orange</option>
     </select>
   );
 }
 ```
 
-This is useful if you want to re-render some part of the UI in response to every selection.
+C'est utile lorsque vous voulez rafraîchir une partie de l'interface utilisateur à chaque sélection.
 
 <Sandpack>
 
@@ -334,19 +341,19 @@ export default function FruitPicker() {
   return (
     <>
       <label>
-        Pick a fruit:
+        Choisissez un fruit :
         <select
           value={selectedFruit}
           onChange={e => setSelectedFruit(e.target.value)}
         >
-          <option value="apple">Apple</option>
-          <option value="banana">Banana</option>
+          <option value="apple">Pomme</option>
+          <option value="banana">Banane</option>
           <option value="orange">Orange</option>
         </select>
       </label>
       <hr />
       <label>
-        Pick all your favorite vegetables:
+        Choisissez tous vos légumes préférés :
         <select
           multiple={true}
           value={selectedVegs}
@@ -356,14 +363,14 @@ export default function FruitPicker() {
             setSelectedVegs(values);
           }}
         >
-          <option value="cucumber">Cucumber</option>
-          <option value="corn">Corn</option>
-          <option value="tomato">Tomato</option>
+          <option value="cucumber">Concombre</option>
+          <option value="corn">Maïs</option>
+          <option value="tomato">Tomate</option>
         </select>
       </label>
       <hr />
-      <p>Your favorite fruit: {selectedFruit}</p>
-      <p>Your favorite vegetables: {selectedVegs.join(', ')}</p>
+      <p>Votre fruit préféré : {selectedFruit}</p>
+      <p>Vos légumes préférés : {selectedVegs.join(', ')}</p>
     </>
   );
 }
@@ -377,8 +384,8 @@ select { margin-bottom: 10px; display: block; }
 
 <Pitfall>
 
-**If you pass `value` without `onChange`, it will be impossible to select an option.** When you control a select box by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the select box after every keystroke back to the `value` that you specified.
+**Si vous passez `value` sans `onChange`, il sera impossible de sélectionner une option.** Lorsque vous contrôlez une liste de sélection en passant une `value`, vous *forcez* la liste de sélection à toujours avoir la valeur que vous avez passée. Donc, si vous passez une variable d'état comme `value` mais oubliez de mettre à jour cette variable d'état de manière synchrone au sein du gestionnaire d'événement `onChange`, React réinitialisera la liste de sélection, après tentative de changement, à la `value` que vous avez spécifiée.
 
-Unlike in HTML, passing a `selected` attribute to an individual `<option>` is not supported.
+Contrairement à HTML, vous n'avez pas le droit de passer un attribut `selected` aux composants `<option>`
 
 </Pitfall>
diff --git a/src/content/reference/react-dom/components/textarea.md b/src/content/reference/react-dom/components/textarea.md
index 7fbf0d7e9..4d050d7da 100644
--- a/src/content/reference/react-dom/components/textarea.md
+++ b/src/content/reference/react-dom/components/textarea.md
@@ -20,7 +20,7 @@ Le  [composant natif `<textarea>` du navigateur](https://developer.mozilla.org/f
 
 ### `<textarea>` {/*textarea*/}
 
-Pour afficher une zone de texte, utilisez le [composant natif`<textarea>` du navigateur](https://developer.mozilla.org/fr/docs/Web/HTML/Element/textarea).
+Pour afficher une zone de texte, utilisez le [composant natif `<textarea>` du navigateur](https://developer.mozilla.org/fr/docs/Web/HTML/Element/textarea).
 
 ```js
 <textarea name="postContent" />
@@ -244,7 +244,7 @@ Donnez un `name` à votre `<textarea>`, par exemple `<textarea name="postContent
 
 <Pitfall>
 
-Par défaut, *n'importe quel* `<button>` à l'intérieur d'un `<form>` va le soumettre. Cela peut être surprenant ! Si vous avez votre propre composant React `Button`, envisagez de retourner [`<button type="button">`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/button) au lieu de `<button>`. Ensuite, pour être explicite, utilisez `<button type="submit">` pour les boutons qui *sont* censés soumettre le formulaire.
+Par défaut, *n'importe quel* `<button>` à l'intérieur d'un `<form>` va le soumettre. Cela peut être surprenant ! Si vous avez votre propre composant React `Button`, envisagez de renvoyer [`<button type="button">`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/button) au lieu de `<button>`. Ensuite, pour être explicite, utilisez `<button type="submit">` pour les boutons qui *sont* censés soumettre le formulaire.
 
 </Pitfall>
 

From 41c2df8b2ea8404d0872ef8776f09c4ef826351d Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <christophe@delicious-insights.com>
Date: Wed, 30 Aug 2023 15:27:41 +0200
Subject: [PATCH 2/2] copy(select): final review pass

---
 TRANSLATORS.md                                |  1 +
 .../reference/react-dom/components/select.md  | 32 +++++++++++--------
 .../react-dom/components/textarea.md          |  6 ++--
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/TRANSLATORS.md b/TRANSLATORS.md
index 5989ad2db..95f4aa299 100644
--- a/TRANSLATORS.md
+++ b/TRANSLATORS.md
@@ -96,6 +96,7 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis 
           <li><a href="https://fr.react.dev/reference/react/use-client"><code>'use client'</code></a></li>
           <li><a href="https://fr.react.dev/reference/react/use-server"><code>'use server'</code></a></li>
           <li><a href="https://fr.react.dev/reference/react-dom/components">react-dom : Composants</a> (accueil chapitre)</li>
+          <li><a href="https://fr.react.dev/reference/react-dom/components/select"><code>&lt;select&gt;</code></a></li>
           <li><a href="https://fr.react.dev/reference/react-dom">API React DOM intégrées</a></li>
           <li><a href="https://fr.react.dev/reference/react-dom/flushSync"><code>flushSync</code></a></li>
           <li><a href="https://fr.react.dev/reference/react-dom/hydrate"><code>hydrate</code></a></li>
diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 3454e913a..ba6182c90 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -71,8 +71,8 @@ Ces props de `<select>` sont compatibles avec les listes de sélection contrôl
 - Contrairement à HTML, vous n'avez pas le droit de passer un attribut `selected` aux composants `<option>`. Utilisez plutôt [`<select defaultValue>`](#providing-an-initially-selected-option) pour les listes de sélection non contrôlées et [`<select value>`](#controlling-a-select-box-with-a-state-variable) pour celles qui sont contrôlées.
 - Si une liste de sélection reçoit une prop `value` textuelle, elle sera [traitée comme contrôlée](#controlling-a-select-box-with-a-state-variable).
 - Une liste de sélection ne peut pas être à la fois contrôlée et non contrôlée.
-- Une liste de sélection ne peut pas basculer entre un statut contrôlé et non contrôlé au cours de son existence.
-- Une liste de sélection contrôlée doit avoir un gestionnaire `onChange` qui met à jour sa valeur de façon synchrone.
+- Une liste de sélection ne peut pas basculer entre un statut contrôlé et non contrôlé entre son montage et son démontage.
+- Une liste de sélection contrôlée doit avoir en plus de `value` un gestionnaire `onChange` qui met à jour sa valeur de façon synchrone.
 
 ---
 
@@ -80,7 +80,7 @@ Ces props de `<select>` sont compatibles avec les listes de sélection contrôl
 
 ### Afficher une liste de sélection d'options {/*displaying-a-select-box-with-options*/}
 
-Utiliser un `<select>` avec une série de composants `<option>` à l'intérieur pour afficher une liste de sélection.  Donnez une `value` à chaque `<option>` pour représenter les données qui seront soumises avec le formulaire.
+Utilisez un `<select>` avec une série de composants `<option>` à l'intérieur pour afficher une liste de sélection.  Donnez une `value` à chaque `<option>` pour représenter les données qui seront soumises avec le formulaire.
 
 <Sandpack>
 
@@ -182,7 +182,7 @@ select { margin: 5px; }
 
 <Pitfall>
 
-Contrairement à HTML, passer un attribut `selected` à une `<option>` individuelle n'est pas pris en charge.
+Contrairement à HTML, passer un attribut `selected` à une `<option>` individuelle n'est pas autorisé.
 
 </Pitfall>
 
@@ -190,7 +190,7 @@ Contrairement à HTML, passer un attribut `selected` à une `<option>` individue
 
 ### Autoriser la sélection multiple {/*enabling-multiple-selection*/}
 
-Passez `multiple={true}` au `<select>` pour permettre à l'utilisateur de sélectionner plusieurs options.  Dans ce cas, si vous précisez aussi une `defaultValue` pour les options initialement sélectionnées, il doit s'agir d'un tableau.
+Passez `multiple={true}` au `<select>` pour permettre à l'utilisateur de sélectionner plusieurs options.  Dans ce cas, si vous précisez aussi une `defaultValue` pour les options initialement sélectionnées (ou une `value` pour les options actuellement sélectionnées), il doit s'agir d'un tableau.
 
 <Sandpack>
 
@@ -237,18 +237,22 @@ export default function EditPost() {
     const form = e.target;
     const formData = new FormData(form);
 
-    // Vous pouvez passer formData directement comme corps de la requête fetch :
+    // Vous pouvez passer formData directement comme
+    // corps de la requête fetch :
     fetch('/some-api', { method: form.method, body: formData });
 
-    // Vous pouvez générer une URL sur cette base, comme le fait
-    // par défaut le navigateur :
+    // Vous pouvez générer une URL sur cette base, comme
+    // le fait par défaut le navigateur :
     console.log(new URLSearchParams(formData).toString());
 
-    // Ou vous pouvez travailler avec comme un objet simple :
+    // Ou vous pouvez travailler avec comme un objet
+    // simple :
     const formJson = Object.fromEntries(formData.entries());
-    console.log(formJson); // (!) Ça ne gère pas les sélections multiples
+    // (!) Ça ne gère pas les sélections multiples
+    console.log(formJson);
 
-    // Ou vous pouvez obtenir un tableau de paires clé-value.
+    // Ou vous pouvez obtenir un tableau de paires
+    // clé-valeur.
     console.log([...formData.entries()]);
   }
 
@@ -291,7 +295,7 @@ label { margin-bottom: 20px; }
 
 <Note>
 
-Donnez un `name` à votre `<select>`, par exemple `<select name="selectedFruit" />`. Le `name` que vous avez spécifié sera utilisé comme clé dans les données du formulaire, par exemple `{ selectedFruit: "orange" }`.
+Donnez un `name` à votre `<select>`, par exemple `<select name="selectedFruit" />`. Le `name` que vous avez spécifié sera utilisé comme clé dans les données du formulaire, par exemple `{ selectedFruit: "orange" }`.
 
 Si vous utilisez `<select multiple={true}>`, le [`FormData`](https://developer.mozilla.org/fr/docs/Web/API/FormData) que vous récupèrerez du formulaire incluera chaque valeur sélectionnée comme une paire clé-valeur distincte.  Examinez attentivement les messages en console de l'exemple ci-dessus.
 
@@ -307,7 +311,7 @@ Par défaut, *n'importe quel* `<button>` à l'intérieur d'un `<form>` va le sou
 
 ### Contrôler une liste de sélection avec une variable d'état {/*controlling-a-select-box-with-a-state-variable*/}
 
-Une liste de sélection comme `<select />` est *non contrôlée*. Même si vous [passez une valeur initiale](#providing-an-initially-selected-option) comme `<select defaultValue="orange" />`, votre JSX ne spécifie que la valeur initiale, il ne contrôle pas la valeur actuelle.
+Une liste de sélection comme `<select />` est *non contrôlée*. Même si vous [passez une valeur initiale](#providing-an-initially-selected-option) comme `<select defaultValue="orange" />`, votre JSX ne spécifie que la ou les valeurs initiales, il ne contrôle pas la ou les valeurs actuelles.
 
 **Pour afficher une liste de sélection _contrôlée_, passez une prop `value` à `<select />`.** React forcera la liste de sélection à toujours avoir la valeur que vous avez passée. Généralement, vous contrôlerez une liste de sélection en déclarant une [variable d'état](/reference/react/useState) :
 
@@ -386,6 +390,6 @@ select { margin-bottom: 10px; display: block; }
 
 **Si vous passez `value` sans `onChange`, il sera impossible de sélectionner une option.** Lorsque vous contrôlez une liste de sélection en passant une `value`, vous *forcez* la liste de sélection à toujours avoir la valeur que vous avez passée. Donc, si vous passez une variable d'état comme `value` mais oubliez de mettre à jour cette variable d'état de manière synchrone au sein du gestionnaire d'événement `onChange`, React réinitialisera la liste de sélection, après tentative de changement, à la `value` que vous avez spécifiée.
 
-Contrairement à HTML, vous n'avez pas le droit de passer un attribut `selected` aux composants `<option>`
+Contrairement à HTML, passer un attribut `selected` aux composants `<option>` n'est pas autorisé.
 
 </Pitfall>
diff --git a/src/content/reference/react-dom/components/textarea.md b/src/content/reference/react-dom/components/textarea.md
index 4d050d7da..562273e4a 100644
--- a/src/content/reference/react-dom/components/textarea.md
+++ b/src/content/reference/react-dom/components/textarea.md
@@ -199,10 +199,12 @@ export default function EditPost() {
     const form = e.target;
     const formData = new FormData(form);
 
-    // Vous pouvez passer formData directement comme corps de la requête fetch :
+    // Vous pouvez passer formData directement comme
+    // corps de la requête fetch :
     fetch('/some-api', { method: form.method, body: formData });
 
-    // Ou vous pouvez travailler avec comme un objet simple :
+    // Ou vous pouvez travailler avec comme un
+    // objet simple :
     const formJson = Object.fromEntries(formData.entries());
     console.log(formJson);
   }