Fix: affichage & rectif wording + disabled input

src/components/commun/Input.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export default function Input({ children, id, isRequired = true, autoComplete = 'on', testId = '', type = 'text',
-  pattern, onChange, list, min, readOnly, isLoading, ariaBusy, value }) {
+  pattern, onChange, list, min, disabled, isLoading, ariaBusy, value }) {
   return (
     <div className="fr-fieldset__element">
       <div className="fr-input-group">
@@ -17,7 +17,7 @@ export default function Input({ children, id, isRequired = true, autoComplete =
           onChange={onChange}
           list={list}
           min={min}
-          readOnly={readOnly}
+          disabled={disabled}
           name={id}
           value={value?.trim()}
           aria-busy={ariaBusy}
@@ -43,7 +43,7 @@ Input.propTypes = {
   onChange: PropTypes.func,
   list: PropTypes.string,
   min: PropTypes.string,
-  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
   isLoading: PropTypes.bool,
   ariaBusy: PropTypes.bool,
   value: PropTypes.string,

src/views/candidature-conseiller/CandidatureConseiller.test.jsx

@@ -56,7 +56,7 @@ describe('candidature conseiller', () => {
     expect(nom).toHaveAttribute('type', 'text');
     expect(nom).toBeRequired();
 
-    const email = within(etapeInformationsDeContact).getByLabelText('Adresse e-mail * Format attendu : [email protected]');
+    const email = within(etapeInformationsDeContact).getByLabelText('Adresse électronique * Format attendu : [email protected]');
     expect(email).toHaveAttribute('type', 'email');
     expect(email).toBeRequired();
 
@@ -369,7 +369,7 @@ describe('candidature conseiller', () => {
     fireEvent.change(prenom, { target: { value: 'Jean' } });
     const nom = screen.getByLabelText('Nom *');
     fireEvent.change(nom, { target: { value: 'Dupont' } });
-    const email = screen.getByLabelText('Adresse e-mail * Format attendu : [email protected]');
+    const email = screen.getByLabelText('Adresse électronique * Format attendu : [email protected]');
     fireEvent.change(email, { target: { value: '[email protected]' } });
     const adresse = screen.getByLabelText('Votre lieu d’habitation * Saississez le nom ou le code postal de votre commune.');
     fireEvent.change(adresse, { target: { value: '93100 Montreuil' } });
@@ -408,7 +408,7 @@ describe('candidature conseiller', () => {
     fireEvent.change(prenom, { target: { value: 'Jean' } });
     const nom = screen.getByLabelText('Nom *');
     fireEvent.change(nom, { target: { value: 'Dupont' } });
-    const email = screen.getByLabelText('Adresse e-mail * Format attendu : [email protected]');
+    const email = screen.getByLabelText('Adresse électronique * Format attendu : [email protected]');
     fireEvent.change(email, { target: { value: '[email protected]' } });
     const adresse = screen.getByLabelText('Votre lieu d’habitation * Saississez le nom ou le code postal de votre commune.');
     fireEvent.change(adresse, { target: { value: '93100 Montreuil' } });
@@ -450,7 +450,7 @@ describe('candidature conseiller', () => {
     fireEvent.change(prenom, { target: { value: 'Jean' } });
     const nom = screen.getByLabelText('Nom *');
     fireEvent.change(nom, { target: { value: 'Dupont' } });
-    const email = screen.getByLabelText('Adresse e-mail * Format attendu : [email protected]');
+    const email = screen.getByLabelText('Adresse électronique * Format attendu : [email protected]');
     fireEvent.change(email, { target: { value: '[email protected]' } });
     const adresse = screen.getByLabelText('Votre lieu d’habitation * Saississez le nom ou le code postal de votre commune.');
     fireEvent.change(adresse, { target: { value: '93100 Montreuil' } });
@@ -499,7 +499,7 @@ describe('candidature conseiller', () => {
     fireEvent.change(prenom, { target: { value: 'Jean' } });
     const nom = screen.getByLabelText('Nom *');
     fireEvent.change(nom, { target: { value: 'Dupont' } });
-    const email = screen.getByLabelText('Adresse e-mail * Format attendu : [email protected]');
+    const email = screen.getByLabelText('Adresse électronique * Format attendu : [email protected]');
     const adresse = screen.getByLabelText('Votre lieu d’habitation * Saississez le nom ou le code postal de votre commune.');
     fireEvent.change(adresse, { target: { value: '93100 Montreuil' } });
     fireEvent.change(email, { target: { value: '[email protected]' } });
@@ -545,7 +545,7 @@ describe('candidature conseiller', () => {
     fireEvent.change(prenom, { target: { value: 'Jean' } });
     const nom = screen.getByLabelText('Nom *');
     fireEvent.change(nom, { target: { value: 'Dupont' } });
-    const email = screen.getByLabelText('Adresse e-mail * Format attendu : [email protected]');
+    const email = screen.getByLabelText('Adresse électronique * Format attendu : [email protected]');
     fireEvent.change(email, { target: { value: '[email protected]' } });
     const adresse = screen.getByLabelText('Votre lieu d’habitation * Saississez le nom ou le code postal de votre commune.');
     fireEvent.change(adresse, { target: { value: '93100 Montreuil' } });
@@ -687,7 +687,7 @@ describe('candidature conseiller', () => {
     fireEvent.change(prenom, { target: { value: 'Jean' } });
     const nom = screen.getByLabelText('Nom *');
     fireEvent.change(nom, { target: { value: 'Dupont' } });
-    const email = screen.getByLabelText('Adresse e-mail * Format attendu : [email protected]');
+    const email = screen.getByLabelText('Adresse électronique * Format attendu : [email protected]');
     fireEvent.change(email, { target: { value: '[email protected]' } });
     const adresse = screen.getByLabelText('Votre lieu d’habitation * Saississez le nom ou le code postal de votre commune.');
     fireEvent.change(adresse, { target: { value: '93100 Montreuil' } });

src/views/candidature-conseiller/InformationsDeContact.jsx

@@ -21,7 +21,7 @@ export default function InformationsDeContact() {
         id="email"
         type="email"
       >
-        Adresse e-mail <span className="cc-obligatoire">*</span> <span className="fr-hint-text">Format attendu : [email protected]</span>
+        Adresse électronique <span className="cc-obligatoire">*</span> <span className="fr-hint-text">Format attendu : [email protected]</span>
       </Input>
       <Input
         id="telephone"

src/views/candidature-coordinateur/BesoinEnCoordinateur.jsx

@@ -10,7 +10,7 @@ export default function BesoinEnCoordinateur() {
       <legend className="fr-h5">Votre besoin en coordinateur</legend>
       <hr />
       <p className="fr-mb-3w cc-bold">
-        Avez-vous déjà identifié un candidat pour le poste de coordinateur de conseiller numérique ?<span className="cc-obligatoire">*</span>
+        Avez-vous déjà identifié un candidat pour le poste de coordinateur de conseiller numérique ? <span className="cc-obligatoire">*</span>
       </p>
       <p className="fr-text--sm fr-hint-text">Si oui, merci d’inviter ce candidat à s’inscrire sur la plateforme Conseiller numérique</p>
       <BoutonRadio id="oui" nomGroupe="aIdentifieCoordinateur">
@@ -27,7 +27,7 @@ export default function BesoinEnCoordinateur() {
         Accompagnera également des publics
       </BoutonRadio>
       <hr />
-      <p className="fr-mb-3w cc-bold">À partir de quand êtes vous prêt à accueillir votre coordinateur ?<span className="cc-obligatoire">*</span></p>
+      <p className="fr-mb-3w cc-bold">À partir de quand êtes vous prêt à accueillir votre coordinateur ? <span className="cc-obligatoire">*</span></p>
       <Datepicker id="dateDebutMission" min={dateDuJour}>
         Choisir une date
       </Datepicker>

src/views/candidature-coordinateur/CandidatureCoordinateur.test.jsx

@@ -111,7 +111,7 @@ describe('candidature coordinateur', () => {
     expect(fonction).toHaveAttribute('type', 'text');
     expect(fonction).toBeRequired();
 
-    const email = within(etapeInformationsDeContact).getByLabelText('Adresse e-mail *');
+    const email = within(etapeInformationsDeContact).getByLabelText('Adresse électronique *');
     expect(email).toHaveAttribute('type', 'email');
     expect(email).toBeRequired();
 
@@ -131,7 +131,7 @@ describe('candidature coordinateur', () => {
     expect(etapeBesoinCoordinateur).toHaveAttribute('id', 'votre-besoin-en-coordinateur');
 
     const identificationCandidat = within(etapeBesoinCoordinateur).getByText(
-      textMatcher('Avez-vous déjà identifié un candidat pour le poste de coordinateur de conseiller numérique ?*'),
+      textMatcher('Avez-vous déjà identifié un candidat pour le poste de coordinateur de conseiller numérique ? *'),
       { selector: 'p' }
     );
     expect(identificationCandidat).toBeInTheDocument();
@@ -163,7 +163,7 @@ describe('candidature coordinateur', () => {
     expect(publics).toHaveAttribute('name', 'coordinateurTypeContrat');
 
     const dateAccueilCoordinateur = within(etapeBesoinCoordinateur).getByText(
-      textMatcher('À partir de quand êtes vous prêt à accueillir votre coordinateur ?*'),
+      textMatcher('À partir de quand êtes vous prêt à accueillir votre coordinateur ? *'),
       { selector: 'p' }
     );
     expect(dateAccueilCoordinateur).toBeInTheDocument();
@@ -226,11 +226,11 @@ describe('candidature coordinateur', () => {
     const engagements = screen.getByTestId('votre-engagement');
 
     const listDetail = within(engagements).getAllByRole('listitem');
-    within(listDetail[0]).getByText('Renforcer le maillage et les synergies territoriales');
-    within(listDetail[1]).getByText('Être le relais principal des employeurs, des Conseillers numériques et de l’équipe d’animation nationale');
-    within(listDetail[2]).getByText('Imaginer et mettre en place des collaborations sur la base des besoins de la communauté des Conseillers numériques');
-    within(listDetail[3]).getByText('Signer dans les 15 jours suivants un contrat avec ce candidat');
-    within(listDetail[4]).getByText('Laisser partir le conseiller numérique en formation initiale ou continue');
+    within(listDetail[0]).getByText('Renforcer le maillage et les synergies territoriales,');
+    within(listDetail[1]).getByText('Être le relais principal des employeurs, des Conseillers numériques et de l’équipe d’animation nationale,');
+    within(listDetail[2]).getByText('Imaginer et mettre en place des collaborations sur la base des besoins de la communauté des Conseillers numériques,');
+    within(listDetail[3]).getByText('Signer dans les 15 jours suivants un contrat avec ce candidat,');
+    within(listDetail[4]).getByText('Laisser partir le conseiller numérique en formation initiale ou continue,');
     within(listDetail[5]).getByText('Mettre à sa disposition les moyens et équipements pour réaliser sa mission (ordinateur, ' +
       'téléphone portable, voiture si nécessaire)');
 
@@ -276,7 +276,7 @@ describe('candidature coordinateur', () => {
     fireEvent.change(nom, { target: { value: 'Dupont' } });
     const fonction = screen.getByLabelText('Fonction *');
     fireEvent.change(fonction, { target: { value: 'Test' } });
-    const email = screen.getByLabelText('Adresse e-mail *');
+    const email = screen.getByLabelText('Adresse électronique *');
     fireEvent.change(email, { target: { value: '[email protected]' } });
     const telephone = screen.getByLabelText('Téléphone *');
     fireEvent.change(telephone, { target: { value: '+33123456789' } });
@@ -335,7 +335,7 @@ describe('candidature coordinateur', () => {
     fireEvent.change(nom, { target: { value: 'Dupont' } });
     const fonction = screen.getByLabelText('Fonction *');
     fireEvent.change(fonction, { target: { value: 'Test' } });
-    const email = screen.getByLabelText('Adresse e-mail *');
+    const email = screen.getByLabelText('Adresse électronique *');
     fireEvent.change(email, { target: { value: '[email protected]' } });
     const telephone = screen.getByLabelText('Téléphone *');
     fireEvent.change(telephone, { target: { value: '+33123456789' } });
@@ -501,7 +501,7 @@ describe('candidature coordinateur', () => {
     fireEvent.change(nom, { target: { value: 'Dupont' } });
     const fonction = screen.getByLabelText('Fonction *');
     fireEvent.change(fonction, { target: { value: 'Test' } });
-    const email = screen.getByLabelText('Adresse e-mail *');
+    const email = screen.getByLabelText('Adresse électronique *');
     fireEvent.change(email, { target: { value: '[email protected]' } });
     const telephone = screen.getByLabelText('Téléphone *');
     fireEvent.change(telephone, { target: { value: '+33123456789' } });

src/views/candidature-coordinateur/Engagement.jsx

@@ -12,11 +12,11 @@ export default function Engagement() {
         Assurer que le conseiller réalise des activités visant à:
       </p>
       <ul data-testid="votre-engagement">
-        <li>Renforcer le maillage et les synergies territoriales</li>
-        <li>Être le relais principal des employeurs, des Conseillers numériques et de l’équipe d’animation nationale</li>
-        <li>Imaginer et mettre en place des collaborations sur la base des besoins de la communauté des Conseillers numériques</li>
-        <li>Signer dans les 15 jours suivants un contrat avec ce candidat</li>
-        <li>Laisser partir le conseiller numérique en formation initiale ou continue</li>
+        <li>Renforcer le maillage et les synergies territoriales,</li>
+        <li>Être le relais principal des employeurs, des Conseillers numériques et de l’équipe d’animation nationale,</li>
+        <li>Imaginer et mettre en place des collaborations sur la base des besoins de la communauté des Conseillers numériques,</li>
+        <li>Signer dans les 15 jours suivants un contrat avec ce candidat,</li>
+        <li>Laisser partir le conseiller numérique en formation initiale ou continue,</li>
         <li>Mettre à sa disposition les moyens et équipements pour réaliser sa mission (ordinateur, téléphone portable, voiture si nécessaire)</li>
       </ul>
       <Checkbox id="confirmationEngagement">

src/views/candidature-structure/BesoinEnConseillerNumerique.jsx

@@ -12,10 +12,10 @@ export default function BesoinEnConseillerNumerique() {
       <legend className="fr-h5">Votre besoin en conseiller(s) numérique(s)</legend>
       <hr />
       <Input id="nombreConseillersSouhaites" name="nombreConseillersSouhaites" type="number" min="1">
-        Combien de conseillers numériques souhaitez-vous accueillir ?<span className="cc-obligatoire">*</span>
+        Combien de conseillers numériques souhaitez-vous accueillir ? <span className="cc-obligatoire">*</span>
       </Input>
       <hr />
-      <p className="fr-mb-3w cc-bold">Avez-vous déjà identifié un candidat pour le poste de conseiller numérique ?<span className="cc-obligatoire">*</span></p>
+      <p className="fr-mb-3w cc-bold">Avez-vous déjà identifié un candidat pour le poste de conseiller numérique ? <span className="cc-obligatoire">*</span></p>
       <p className="fr-text--sm fr-hint-text">Si oui, merci d’inviter ce candidat à s’inscrire sur la plateforme Conseiller numérique.</p>
       <BoutonRadio id="oui" nomGroupe="aIdentifieCandidat">
         Oui
@@ -24,7 +24,7 @@ export default function BesoinEnConseillerNumerique() {
         Non
       </BoutonRadio>
       <hr />
-      <p className="fr-mb-3w cc-bold">À partir de quand êtes vous prêt à accueillir votre conseiller numerique ?<span className="cc-obligatoire">*</span></p>
+      <p className="fr-mb-3w cc-bold">À partir de quand êtes vous prêt à accueillir votre conseiller numerique ? <span className="cc-obligatoire">*</span></p>
       <Datepicker id="dateDebutMission" min={dateDuJour}>
         Choisir une date
       </Datepicker>