From d88174f034c68ce22ebd466846ff4db47a63b362 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Mon, 22 Jul 2024 19:25:24 +0200
Subject: [PATCH 1/8] =?UTF-8?q?fix:=20accessibilit=C3=A9=20sur=20les=20for?=
 =?UTF-8?q?mulaires?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/page/form/InputText.scss      |  3 ---
 .../components/common/page/form/Periode.scss        |  3 +--
 .../components/common/page/form/Select.jsx          |  1 +
 .../components/common/page/form/Select.scss         | 13 +++++++++----
 .../components/common/page/form/date/Date.scss      |  1 -
 5 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/ui/src/backoffice/components/common/page/form/InputText.scss b/ui/src/backoffice/components/common/page/form/InputText.scss
index aa73c55ba..4fa8be619 100644
--- a/ui/src/backoffice/components/common/page/form/InputText.scss
+++ b/ui/src/backoffice/components/common/page/form/InputText.scss
@@ -6,7 +6,6 @@
 
   .icon {
     flex: 0 0 auto;
-    background-color: $color-grey-25;
     color: $color-black-80;
     font-size: 1.125rem;
     padding: 0.5rem;
@@ -16,7 +15,6 @@
 
   .reset {
     flex: 0 0 auto;
-    background-color: $color-grey-25;
     color: $color-black-80;
     font-size: 1.125rem;
     padding: 0.5rem;
@@ -26,7 +24,6 @@
 
   input {
     flex: 1 1 auto;
-    background-color: $color-grey-25;
     border: none;
     border-radius: 0.25rem;
     box-shadow: none;
diff --git a/ui/src/backoffice/components/common/page/form/Periode.scss b/ui/src/backoffice/components/common/page/form/Periode.scss
index adeaed7a7..abdb2c400 100644
--- a/ui/src/backoffice/components/common/page/form/Periode.scss
+++ b/ui/src/backoffice/components/common/page/form/Periode.scss
@@ -2,8 +2,7 @@
 
 .Backoffice .Periode {
   padding: 0.50rem 0.30rem;
-  background-color: $color-grey-25;
-  border: 1px solid $color-grey-5;
+  border: 1px solid $color-black;
   border-radius: 6px;
   height: 49px;
 
diff --git a/ui/src/backoffice/components/common/page/form/Select.jsx b/ui/src/backoffice/components/common/page/form/Select.jsx
index 8fff71d59..6c2613b21 100644
--- a/ui/src/backoffice/components/common/page/form/Select.jsx
+++ b/ui/src/backoffice/components/common/page/form/Select.jsx
@@ -175,6 +175,7 @@ const Select = ({
         )}
         <button
           type="button"
+          className="expand-button"
           id={`${id}-button`}
           aria-label={placeholder}
           aria-expanded={isOpen}
diff --git a/ui/src/backoffice/components/common/page/form/Select.scss b/ui/src/backoffice/components/common/page/form/Select.scss
index b89e04a99..416c76b8f 100644
--- a/ui/src/backoffice/components/common/page/form/Select.scss
+++ b/ui/src/backoffice/components/common/page/form/Select.scss
@@ -1,12 +1,17 @@
+@import 'src/common/styles/variables';
+
 .combobox-list {
   position: relative;
 }
 
+.expand-button {
+  padding-bottom: 4px !important;
+}
+
 .combobox .group {
   display: inline-flex;
-  background-color: #c8cbce;
   box-shadow: unset;
-  border: 1px solid #f4f4f5;
+  border: 1px solid $color-black;
   border-radius: 6px;
   padding: .3rem;
   width: 100%;
@@ -24,13 +29,13 @@
   position: relative;
 }
 
+
 .combobox input {
   width: 150px;
   outline: none;
   font-size: 87.5%;
   padding: 1px 3px;
   border: none;
-  background-color: #c8cbce;
   -webkit-box-align: center;
   align-items: center;
   display: flex;
@@ -78,7 +83,7 @@
   border: none;
   outline: none;
   color: #11181E;
-  background-color: #c8cbce;
+  background-color: white;
   height: 100%;
 }
 
diff --git a/ui/src/backoffice/components/common/page/form/date/Date.scss b/ui/src/backoffice/components/common/page/form/date/Date.scss
index dab0753ba..f17970102 100644
--- a/ui/src/backoffice/components/common/page/form/date/Date.scss
+++ b/ui/src/backoffice/components/common/page/form/date/Date.scss
@@ -3,7 +3,6 @@
 .Backoffice .Date {
 
   input {
-    background-color: $color-grey-25;
     border: none;
     box-shadow: none;
     text-shadow: 0 0 0 gray;

From fa465d3c3986811bb06e50caa6c4877cf68e3f71 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Tue, 23 Jul 2024 15:51:10 +0200
Subject: [PATCH 2/8] =?UTF-8?q?feat:accessibilit=C3=A9=20:=20meilleure=20g?=
 =?UTF-8?q?estion=20des=20message=20d'erreur=20sur=20les=20formulaires?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/anonymous/LoginPage.jsx        | 13 +++----
 .../anonymous/MotDePasseOubliePage.jsx        |  6 ++--
 .../ReinitialisationMotDePassePage.jsx        |  4 +--
 .../anonymous/components/StatsForm.jsx        |  2 +-
 .../components/common/MonComptePage.jsx       | 36 +++++++++++--------
 .../components/common/avis/Notes.jsx          |  2 +-
 .../common/avis/charts/NoteExplications.jsx   |  4 +--
 .../common/avis/charts/NoteRepartition.jsx    |  4 +--
 .../components/common/header/Header.jsx       |  4 +--
 .../components/common/page/form/FormError.jsx |  5 +--
 .../components/common/page/form/InputText.jsx | 11 +++---
 .../financeur/components/FinanceurForm.jsx    | 14 ++++----
 .../GestionOrganismePage.jsx                  |  2 +-
 .../moderation-avis/ModerationAvisPage.jsx    |  2 +-
 14 files changed, 61 insertions(+), 48 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/LoginPage.jsx b/ui/src/backoffice/components/anonymous/LoginPage.jsx
index 3292e5441..13bc70421 100644
--- a/ui/src/backoffice/components/anonymous/LoginPage.jsx
+++ b/ui/src/backoffice/components/anonymous/LoginPage.jsx
@@ -45,17 +45,17 @@ export default class LoginPage extends React.Component {
         this.setState({ loading: true });
     
         if (this.state.password === '' && this.state.identifiant === '') {
-            this.setState({ errorMessage: "Veuillez remplir tous les champs.", emptyField: 'both', loading: false });
+            this.setState({ errorMessage: "Veuillez remplir tous les champs.", emptyField: 'both', loading: false, errorid: 'empty-error' });
             if (this.inputRef.current && this.inputRef.current.focus) {
                 this.inputRef.current.focus();
             }
         } else if (this.state.password === '') {
-            this.setState({ errorMessage: "Veuillez remplir votre mot de passe.", emptyField: 'password', loading: false });
+            this.setState({ errorMessage: "Veuillez remplir votre mot de passe.", emptyField: 'password', loading: false, errorid: 'empty-password-error' });
             if (this.passwordInputRef.current && this.passwordInputRef.current.focus) {
                 this.passwordInputRef.current.focus();
             }
         } else if (this.state.identifiant === '') {
-            this.setState({ errorMessage: "Veuillez remplir votre identifiant.", emptyField: 'identifiant', loading: false });
+            this.setState({ errorMessage: "Veuillez remplir votre identifiant.", emptyField: 'identifiant', loading: false, errorid: 'empty-identifiant-error' });
             if (this.inputRef.current && this.inputRef.current.focus) {
                 this.inputRef.current.focus();
             }
@@ -65,7 +65,7 @@ export default class LoginPage extends React.Component {
                 .catch(() => {
                     const errorMessage = 'Votre identifiant et/ou votre mot de passe sont incorrects. ' +
                         'Si vous êtes un organisme, vous devez désormais vous identifier avec votre numéro de SIRET';
-                    this.setState({ errorMessage: errorMessage, emptyField: 'incorrect' , loading: false });
+                    this.setState({ errorMessage: errorMessage, emptyField: 'incorrect' , loading: false, errorid: 'bad-password-or-id-error' });
                     if (this.inputRef.current && this.inputRef.current.focus) {
                         this.inputRef.current.focus();
                     }
@@ -110,7 +110,7 @@ export default class LoginPage extends React.Component {
                                 elements={
                                     <>
                                         <p className="clarification mt-1">Tous les champs sont obligatoires.</p>
-                                        <label for="identifiant">Identifiant</label>
+                                        <label htmlFor="identifiant">Identifiant</label>
                                         <InputText
                                             id="identifiant"
                                             value={this.state.identifiant}
@@ -120,6 +120,7 @@ export default class LoginPage extends React.Component {
                                                 (this.state.emptyField === 'identifiant' || this.state.emptyField === 'both' || this.state.emptyField === 'incorrect') ?
                                                 this.state.errorMessage : ''
                                             }
+                                            errorid={this.state.errorid}
                                             autoComplete="username"
                                             className="placeholder-opaque"
                                             inputRef={this.inputRef}
@@ -129,7 +130,7 @@ export default class LoginPage extends React.Component {
                                         />
                                         <p id="exemple-siret" className="clarification mt-1">Le numero de SIRET se compose de 14 chiffres.<br/>Exemple&nbsp;:&nbsp;01234567890123</p>
 
-                                        <label for="motDePasse" className="mt-3">Mot de passe</label>
+                                        <label htmlFor="motDePasse" className="mt-3">Mot de passe</label>
                                         <InputText
                                             id="motDePasse"
                                             type="password"
diff --git a/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx b/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
index bbaeb1c39..778517ce8 100644
--- a/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
+++ b/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
@@ -69,7 +69,7 @@ export default class MotDePasseOubliePage extends React.Component {
                                 title="Mot de passe oublié"
                                 elements={
                                     <>
-                                        <label for="identifiant">Entrez votre identifiant</label>
+                                        <label htmlFor="identifiant">Entrez votre identifiant</label>
                                         <InputText
                                             id="identifiant"
                                             value={this.state.identifiant}
@@ -78,8 +78,9 @@ export default class MotDePasseOubliePage extends React.Component {
                                             onChange={event => this.setState({ identifiant: event.target.value })}
                                             autoComplete="username"
                                             inputRef={this.inputRef}
+                                            aria-describedby="clarification-1"
                                         />
-                                        <p className="clarification mt-3">
+                                        <p className="clarification mt-3" id="clarification-1">
                                             Si vous êtes un organisme, vous devez désormais renseigner votre numéro de
                                             SIRET.
                                         </p>
@@ -101,7 +102,6 @@ export default class MotDePasseOubliePage extends React.Component {
                                     <>
                                         <Button
                                             size="small"
-                                            type="submit"
                                             onClick={this.props.router.goBack}
                                         >
                                             Retour
diff --git a/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx b/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
index 05752ae15..89215e389 100644
--- a/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
+++ b/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
@@ -108,7 +108,7 @@ export default class ReinitialisationMotDePassePage extends React.Component {
                                 title="Créer un nouveau mot de passe"
                                 elements={
                                     <>
-                                        <label for="newMotDePasse" className="mt-3">Nouveau mot de passe</label>
+                                        <label htmlFor="newMotDePasse" className="mt-3">Nouveau mot de passe</label>
                                         <InputText
                                             id="newMotDePasse"
                                             type="password"
@@ -122,7 +122,7 @@ export default class ReinitialisationMotDePassePage extends React.Component {
                                             aria-required="true"
                                         />
 
-                                        <label for="confMotDePasse" className="mt-3">Confirmer le nouveau mot de passe</label>
+                                        <label htmlFor="confMotDePasse" className="mt-3">Confirmer le nouveau mot de passe</label>
                                         <InputText
                                             id="confMotDePasse"
                                             type="password"
diff --git a/ui/src/backoffice/components/anonymous/components/StatsForm.jsx b/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
index 63c96b526..ce6008bc5 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
@@ -73,7 +73,7 @@ export default class StatsForm extends React.Component {
                 <Form className="a-width-50">
                     <div className="d-flex justify-content-between align-items-end">
                         <div className="flex-grow-1 mr-2">
-                            <label for="choix-region" style={{fontSize: "1.125rem", fontWeight: 700}}>Filtrer par région</label>
+                            <label htmlFor="choix-region" style={{fontSize: "1.125rem", fontWeight: 700}}>Filtrer par région</label>
                             <Select
                                 id="choix-region"
                                 placeholder={'Toutes les régions'}
diff --git a/ui/src/backoffice/components/common/MonComptePage.jsx b/ui/src/backoffice/components/common/MonComptePage.jsx
index a8aeaa96e..af35d3447 100644
--- a/ui/src/backoffice/components/common/MonComptePage.jsx
+++ b/ui/src/backoffice/components/common/MonComptePage.jsx
@@ -24,7 +24,10 @@ export default class MonComptePage extends React.Component {
             errors: {
                 passwordNotStrongEnough: null,
                 isNotSamePassword: null,
-                emptyField: null,
+                emptyCurrent: null,
+                emptyPasswordNew: null,
+                emptyPasswordConf: null,
+                invalidPassword: null,
             },
         };
     }
@@ -40,7 +43,9 @@ export default class MonComptePage extends React.Component {
                     null : 'Le mot de passe doit contenir au moins 8 caractères dont au moins une minuscule, une majuscule, un chiffre et un caractère spécial.',
                 isNotSamePassword: password === confirmation ?
                     null : 'Les mots de passes ne sont pas identiques.',
-                emptyField: (current === '' || password === '' || confirmation === '') ? 'Veuillez remplir tous les champs.' : null,
+                emptyCurrent: (current === '') ? 'Veuillez remplir tous les champs.' : null,
+                emptyPasswordNew: (password === '') ? 'Veuillez remplir tous les champs.' : null,
+                emptyPasswordConf: (confirmation === '') ? 'Veuillez remplir tous les champs.' : null,
             }
         }, async () => {
             let isFormValid = _.every(Object.values(this.state.errors), v => !v);
@@ -65,16 +70,16 @@ export default class MonComptePage extends React.Component {
                         confirmation: '',
                     });
                 })
-                .catch(async error => {
-                    let json = await error.json();
-
+                .catch(() => {
                     showMessage({
-                        text: json.message,
+                        text: "Le mot de passe n'est pas correct",
                         color: 'red',
                     });
-
                     this.setState({
-                        loading: false,
+                        errors: {
+                            invalidPassword: "Le mot de passe n'est pas correct",
+                            loading: false,
+                        }
                     });
                 });
             }
@@ -95,7 +100,7 @@ export default class MonComptePage extends React.Component {
                                 title="Mise à jour du mot de passe"
                                 elements={
                                     <>
-                                        <label for="motDePasseActu">Mot de passe actuel</label>
+                                        <label htmlFor="motDePasseActu">Mot de passe actuel</label>
                                         <InputText
                                             id="motDePasseActu"
                                             type="password"
@@ -103,28 +108,31 @@ export default class MonComptePage extends React.Component {
                                             placeholder="Mot de passe"
                                             onChange={event => this.setState({ current: event.target.value })}
                                             autoComplete="current-password"
-                                            error={errors.emptyField}
+                                            error={errors.emptyCurrent || errors.invalidPassword}
+                                            errorid={errors.emptyCurrent ? 'empty-password-actu' : (errors.invalidPassword ? 'password-invalid' : null)}
                                             inputRef={this.inputRef}
                                         />
 
-                                        <label for="motDePasseNew" className="mt-3">Nouveau mot de passe</label>
+                                        <label htmlFor="motDePasseNew" className="mt-3">Nouveau mot de passe</label>
                                         <InputText
                                             id="motDePasseNew"
                                             type="password"
                                             value={this.state.password}
                                             placeholder="Mot de passe"
-                                            error={errors.emptyField || errors.passwordNotStrongEnough}
+                                            error={errors.emptyPasswordNew || errors.passwordNotStrongEnough}
+                                            errorid={errors.emptyPasswordNew ? 'empty-password-new' : (errors.passwordNotStrongEnough ? 'password-not-strong-enough' : null)}
                                             onChange={event => this.setState({ password: event.target.value })}
                                             autoComplete="new-password"
                                         />
 
-                                        <label for="motDePasseConf" className="mt-3">Confirmer le nouveau mot de passe</label>
+                                        <label htmlFor="motDePasseConf" className="mt-3">Confirmer le nouveau mot de passe</label>
                                         <InputText
                                             id="motDePasseConf"
                                             type="password"
                                             value={this.state.confirmation}
                                             placeholder="Mot de passe"
-                                            error={errors.emptyField || errors.isNotSamePassword}
+                                            error={errors.emptyPasswordConf || errors.isNotSamePassword}
+                                            errorid={errors.emptyPasswordConf ? 'empty-password-conf' : (errors.isNotSamePassword ? 'not-same-password' : null)}
                                             onChange={event => this.setState({ confirmation: event.target.value })}
                                             autoComplete="new-password"
                                         />
diff --git a/ui/src/backoffice/components/common/avis/Notes.jsx b/ui/src/backoffice/components/common/avis/Notes.jsx
index d943c8748..3df84eea6 100644
--- a/ui/src/backoffice/components/common/avis/Notes.jsx
+++ b/ui/src/backoffice/components/common/avis/Notes.jsx
@@ -36,7 +36,7 @@ export default class Notes extends React.Component {
                 <div aria-hidden="true" className="text">
                     {note}/5 <Star />
                 </div>
-                <p class="sr-only">{note} sur 5</p>
+                <p className="sr-only">{note} sur 5</p>
             </div>
         );
     };
diff --git a/ui/src/backoffice/components/common/avis/charts/NoteExplications.jsx b/ui/src/backoffice/components/common/avis/charts/NoteExplications.jsx
index 733ebea5f..8b450f96b 100644
--- a/ui/src/backoffice/components/common/avis/charts/NoteExplications.jsx
+++ b/ui/src/backoffice/components/common/avis/charts/NoteExplications.jsx
@@ -12,7 +12,7 @@ const NoteCriteria = props => {
                     <span className="value">{props.note.moyenne}</span>/5
                     <Star svg={false} />
                 </div>
-                <p class="sr-only">{props.note.moyenne} sur 5</p>
+                <p className="sr-only">{props.note.moyenne} sur 5</p>
             </div>
             <div className="d-flex flex-column">
                 <div className="explication">
@@ -45,7 +45,7 @@ const NoteGlobale = props => {
                     <span className="value">{props.note.moyenne}</span>/5
                     <Star svg={false}/>
                 </div>
-                <p class="sr-only">{props.note.moyenne} sur 5</p>
+                <p className="sr-only">{props.note.moyenne} sur 5</p>
                 <div className="total">{props.total} notes</div>
             </div>
         </div>
diff --git a/ui/src/backoffice/components/common/avis/charts/NoteRepartition.jsx b/ui/src/backoffice/components/common/avis/charts/NoteRepartition.jsx
index bc6ee5808..0617b80a4 100644
--- a/ui/src/backoffice/components/common/avis/charts/NoteRepartition.jsx
+++ b/ui/src/backoffice/components/common/avis/charts/NoteRepartition.jsx
@@ -14,7 +14,7 @@ const NoteGauges = props => {
                 <div aria-hidden="true" className="note">
                     <span className="value">{props.note.moyenne}</span>/5<Star />
                 </div>
-                <p class="sr-only">{props.note.moyenne} sur 5</p>
+                <p className="sr-only">{props.note.moyenne} sur 5</p>
             </div>
             <ul className="d-flex flex-column no-space">
                 <li className="repartition">
@@ -91,7 +91,7 @@ const NoteGlobale = props => {
                 <div aria-hidden="true" className="note">
                     <span className="value">{props.note.moyenne}</span>/5<Star />
                 </div>
-                <p class="sr-only">{props.note.moyenne} sur 5</p>
+                <p className="sr-only">{props.note.moyenne} sur 5</p>
             </div>
             <div className="total">
                 {props.total} notes
diff --git a/ui/src/backoffice/components/common/header/Header.jsx b/ui/src/backoffice/components/common/header/Header.jsx
index c1354ea4e..87c63a466 100644
--- a/ui/src/backoffice/components/common/header/Header.jsx
+++ b/ui/src/backoffice/components/common/header/Header.jsx
@@ -18,8 +18,8 @@ const Header = ({ items, defaultPath, onLogout }) => {
 
     return (
         <header role="banner" className={`Header ${theme.backgroundColor}`}>
-            <div class="skip-link-group">
-                <a href="#contents" class="skip-link sr-only sr-only-focusable">Accéder au contenu principal</a>
+            <div className="skip-link-group">
+                <a href="#contents" className="skip-link sr-only sr-only-focusable">Accéder au contenu principal</a>
             </div>
             <div className="container">
                 <div className="row">
diff --git a/ui/src/backoffice/components/common/page/form/FormError.jsx b/ui/src/backoffice/components/common/page/form/FormError.jsx
index cf1b1ddf0..4da0d0395 100644
--- a/ui/src/backoffice/components/common/page/form/FormError.jsx
+++ b/ui/src/backoffice/components/common/page/form/FormError.jsx
@@ -6,13 +6,14 @@ export default class FormError extends React.Component {
 
     static propTypes = {
         children: PropTypes.node,
+        id: PropTypes.string,
     };
 
     render() {
-        let { children } = this.props;
+        let { children, id } = this.props;
 
         return (
-            <p className="FormError">
+            <p className="FormError" id={id}>
                 {children}
             </p>
         );
diff --git a/ui/src/backoffice/components/common/page/form/InputText.jsx b/ui/src/backoffice/components/common/page/form/InputText.jsx
index 66249a1cc..5e3368658 100644
--- a/ui/src/backoffice/components/common/page/form/InputText.jsx
+++ b/ui/src/backoffice/components/common/page/form/InputText.jsx
@@ -11,6 +11,7 @@ export default class InputText extends React.Component {
         icon: PropTypes.node,
         reset: PropTypes.func,
         error: PropTypes.string,
+        errorid: PropTypes.string,
         autoComplete: PropTypes.string,
         inputRef: PropTypes.object,
     };
@@ -21,7 +22,8 @@ export default class InputText extends React.Component {
     }
 
     render() {
-        let { id, icon, reset, error, inputRef } = this.props;
+        let { id, icon, reset, error, errorid, inputRef } = this.props;
+        let describedBy = this.props['aria-describedby'];
 
         return (
             <div className="InputText">
@@ -36,11 +38,12 @@ export default class InputText extends React.Component {
                     <input
                         type="text"
                         id={id}
-                        autocomplete={this.autoComplete?this.autoComplete:null}
+                        autoComplete={this.autoComplete?this.autoComplete:null}
                         className={`${this.icon ? 'with-icon' : ''} ${this.reset ? 'with-reset' : ''} ${this.error ? 'with-error' : ''}`}
                         ref={inputRef || this.inputRef}
                         aria-invalid={error ? true : undefined}
-                        {..._.omit(this.props, ['icon', 'reset', 'error'])}
+                        aria-describedby={describedBy ? (error ? (errorid ? `${describedBy} ${errorid}` : `${describedBy} ${id}-error`) : describedBy) : (error ? (errorid ? `${errorid}` : `${id}-error`) : null)}
+                        {..._.omit(this.props, ['icon', 'reset', 'error', 'errorid', 'aria-describedby', 'inputRef'])}
                     />
 
                     {reset &&
@@ -50,7 +53,7 @@ export default class InputText extends React.Component {
                     }
                 </div>
                 {error &&
-                <FormError>
+                <FormError id={errorid ? errorid : `${id}-error`}>
                     {error}
                 </FormError>
                 }
diff --git a/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx b/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
index c492e1da5..c34664d89 100644
--- a/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
+++ b/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
@@ -106,7 +106,7 @@ export default class FinanceurForm extends React.Component {
                     <div className="form-group col-lg-6 col-xl-3">
                         {this.mustShowCodeRegionFilter() ? (
                             <>
-                                <label for="combo1-label">Regions</label>
+                                <label htmlFor="combo1-label">Regions</label>
                                 <Select
                                     id="combo1-label"
                                     placeholder={'Toutes les régions'}
@@ -122,7 +122,7 @@ export default class FinanceurForm extends React.Component {
                             </>
                         ) : (
                             <>
-                                <label for="departements">Départements</label>
+                                <label htmlFor="departements">Départements</label>
                                 <Select
                                     id="departements"
                                     placeholder={'Tous les départements'}
@@ -141,7 +141,7 @@ export default class FinanceurForm extends React.Component {
 
                 <div className="form-row">
                     <div className="form-group col-lg-4">
-                        <label for="filtre-siret">SIRET de l&apos;organisme de formation</label>
+                        <label htmlFor="filtre-siret">SIRET de l&apos;organisme de formation</label>
                         <InputText
                             id="filtre-siret"
                             type="number"
@@ -168,7 +168,7 @@ export default class FinanceurForm extends React.Component {
                         />
                     </div>
                     <div className="form-group col-lg-4">
-                        <label for="nom-organisme">Nom de l&apos;organisme de formation</label>
+                        <label htmlFor="nom-organisme">Nom de l&apos;organisme de formation</label>
                         <Select
                             id="nom-organisme"
                             placeholder={'Tous les organismes'}
@@ -189,7 +189,7 @@ export default class FinanceurForm extends React.Component {
                     </div>
                     {this.state.siren && (
                         <div className={`form-group col-lg-4`}>
-                            <label for="formation">Formation</label>
+                            <label htmlFor="formation">Formation</label>
                             <Select
                                 id="formation"
                                 placeholder={'Toutes les formations'}
@@ -206,7 +206,7 @@ export default class FinanceurForm extends React.Component {
                     {this.mustShowFinanceurFilter() && (
                         <>
                             <div className="form-group col-lg-5 col-xl-5">
-                                <label for="financeur">Financeur</label>
+                                <label htmlFor="financeur">Financeur</label>
                                 <Select
                                   id="financeur"
                                     placeholder={'Tous les financeurs'}
@@ -220,7 +220,7 @@ export default class FinanceurForm extends React.Component {
                                 />
                             </div>
                             <div className="form-group col-lg-5 col-xl-5">
-                                <label for="dispositif">Dispositif de financement</label>
+                                <label htmlFor="dispositif">Dispositif de financement</label>
                                 <Select
                                   id="dispositif"
                                     placeholder={'Tous les dispositifs'}
diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
index db12bafb5..2a0b50515 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
@@ -98,7 +98,7 @@ export default class GestionOrganismePage extends React.Component {
                         <Form className="a-width-50">
                             <div className="d-flex" style={{ flexWrap: "wrap", justifyContent: "space-evenly" }}>
                                 <div className="flex-grow-1 mr-2">
-                                    <label className="sr-only" for="recherche-organisme">Rechercher un organisme</label>
+                                    <label className="sr-only" htmlFor="recherche-organisme">Rechercher un organisme</label>
                                     <InputText
                                         value={this.state.form.search}
                                         id="recherche-organisme"
diff --git a/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx b/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
index 649066f92..a8bf769b9 100644
--- a/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
+++ b/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
@@ -113,7 +113,7 @@ export default class ModerationAvisPage extends React.Component {
                         <Form className="a-width-50">
                             <div className="d-flex" style={{ flexWrap: "wrap", justifyContent: "space-evenly" }}>
                                 <div className="flex-grow-1 mr-2">
-                                    <label className="sr-only" for="recherche-avis">Rechercher un avis</label>
+                                    <label className="sr-only" htmlFor="recherche-avis">Rechercher un avis</label>
                                     <InputText
                                         id="recherche-avis"
                                         value={this.state.fulltext}

From 1b61cc58e612464dd436cf8e6a6828c8c5b68d10 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Tue, 23 Jul 2024 18:16:41 +0200
Subject: [PATCH 3/8] =?UTF-8?q?fix:accessibilit=C3=A9=20aria-invalid=3Dtru?=
 =?UTF-8?q?e=20seulement=20en=20cas=20d'erreur?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/backoffice/components/anonymous/LoginPage.jsx         | 3 +--
 .../components/anonymous/ReinitialisationMotDePassePage.jsx  | 2 --
 ui/src/backoffice/components/common/page/form/InputText.jsx  | 5 +++--
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/LoginPage.jsx b/ui/src/backoffice/components/anonymous/LoginPage.jsx
index 13bc70421..e83b66d81 100644
--- a/ui/src/backoffice/components/anonymous/LoginPage.jsx
+++ b/ui/src/backoffice/components/anonymous/LoginPage.jsx
@@ -125,7 +125,6 @@ export default class LoginPage extends React.Component {
                                             className="placeholder-opaque"
                                             inputRef={this.inputRef}
                                             aria-describedby="exemple-siret"
-                                            aria-invalid="true"
                                             aria-required="true"
                                         />
                                         <p id="exemple-siret" className="clarification mt-1">Le numero de SIRET se compose de 14 chiffres.<br/>Exemple&nbsp;:&nbsp;01234567890123</p>
@@ -143,9 +142,9 @@ export default class LoginPage extends React.Component {
                                             }
                                             autoComplete="current-password"
                                             className="placeholder-opaque"
-                                            aria-invalid="true"
                                             inputRef={this.passwordInputRef}
                                             aria-required="true"
+                                            invalid={this.state.emptyField === 'both' || this.state.emptyField === 'incorrect' || this.state.emptyField === 'password'}
                                         />
                                     </>
                                 }
diff --git a/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx b/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
index 89215e389..c30981d3b 100644
--- a/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
+++ b/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
@@ -117,7 +117,6 @@ export default class ReinitialisationMotDePassePage extends React.Component {
                                             error={errors.emptyField || errors.passwordNotStrongEnough}
                                             onChange={event => this.setState({ password: event.target.value })}
                                             autoComplete="new-password"
-                                            aria-invalid="true"
                                             inputRef={this.inputRef}
                                             aria-required="true"
                                         />
@@ -131,7 +130,6 @@ export default class ReinitialisationMotDePassePage extends React.Component {
                                             error={errors.emptyField || errors.isNotSamePassword}
                                             onChange={event => this.setState({ confirmation: event.target.value })}
                                             autoComplete="new-password"
-                                            aria-invalid="true"
                                             aria-required="true"
                                         />
                                     </>
diff --git a/ui/src/backoffice/components/common/page/form/InputText.jsx b/ui/src/backoffice/components/common/page/form/InputText.jsx
index 5e3368658..018dbae49 100644
--- a/ui/src/backoffice/components/common/page/form/InputText.jsx
+++ b/ui/src/backoffice/components/common/page/form/InputText.jsx
@@ -14,6 +14,7 @@ export default class InputText extends React.Component {
         errorid: PropTypes.string,
         autoComplete: PropTypes.string,
         inputRef: PropTypes.object,
+        invalid: PropTypes.string,
     };
 
     constructor(props) {
@@ -22,7 +23,7 @@ export default class InputText extends React.Component {
     }
 
     render() {
-        let { id, icon, reset, error, errorid, inputRef } = this.props;
+        let { id, icon, reset, error, errorid, inputRef, invalid } = this.props;
         let describedBy = this.props['aria-describedby'];
 
         return (
@@ -41,7 +42,7 @@ export default class InputText extends React.Component {
                         autoComplete={this.autoComplete?this.autoComplete:null}
                         className={`${this.icon ? 'with-icon' : ''} ${this.reset ? 'with-reset' : ''} ${this.error ? 'with-error' : ''}`}
                         ref={inputRef || this.inputRef}
-                        aria-invalid={error ? true : undefined}
+                        aria-invalid={error || invalid ? true : undefined}
                         aria-describedby={describedBy ? (error ? (errorid ? `${describedBy} ${errorid}` : `${describedBy} ${id}-error`) : describedBy) : (error ? (errorid ? `${errorid}` : `${id}-error`) : null)}
                         {..._.omit(this.props, ['icon', 'reset', 'error', 'errorid', 'aria-describedby', 'inputRef'])}
                     />

From a77dd483ef79eb384980a9093a34464bd12cb141 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Tue, 23 Jul 2024 18:56:05 +0200
Subject: [PATCH 4/8] =?UTF-8?q?fix:accessibilit=C3=A9=20permettre=20clavie?=
 =?UTF-8?q?r=20si=20clic=20sur=20bouton=20qui=20d=C3=A9roule=20dans=20les?=
 =?UTF-8?q?=20combobox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/backoffice/components/common/page/form/Select.jsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/src/backoffice/components/common/page/form/Select.jsx b/ui/src/backoffice/components/common/page/form/Select.jsx
index 6c2613b21..dcd095222 100644
--- a/ui/src/backoffice/components/common/page/form/Select.jsx
+++ b/ui/src/backoffice/components/common/page/form/Select.jsx
@@ -181,7 +181,11 @@ const Select = ({
           aria-expanded={isOpen}
           aria-controls={`${id}-listbox`}
           onClick={() => setIsOpen(!isOpen)}
+          onChange={handleInputChange}
+          onKeyDown={handleInputKeyDown}
+          onBlur={handleInputBlur}
           aria-hidden="true"
+          tabindex="-1"
         >
           <svg width="18" height="16" aria-hidden="true" focusable="false">
             <polygon className="arrow" strokeWidth="0" fillOpacity="0.75" fill="currentColor" points="3,6 15,6 9,14" />

From 78d77c6d5aaa11944a9309580b301794a15ab275 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Mon, 29 Jul 2024 12:04:53 +0200
Subject: [PATCH 5/8] fix: retour maj email

---
 .../api/backoffice/gestion-organismes-routes.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/backend/src/http/api/backoffice/gestion-organismes-routes.js b/backend/src/http/api/backoffice/gestion-organismes-routes.js
index d2b7c6743..34af9ad4a 100644
--- a/backend/src/http/api/backoffice/gestion-organismes-routes.js
+++ b/backend/src/http/api/backoffice/gestion-organismes-routes.js
@@ -135,7 +135,7 @@ module.exports = ({ db, configuration, emails, middlewares, logger }) => {
 
     router.put('/api/backoffice/moderateur/organismes/:id/updateCourriel', checkAuth, checkProfile('moderateur'), tryAndCatch(async (req, res) => {
 
-        let idNonModifie = (await Joi.validate(req.params, { id: Joi.required() }, { abortEarly: false })).id;
+        let idNonModifie = (await Joi.validate(req.params, { id: Joi.string().required() }, { abortEarly: false })).id;
                 
         let bonId = await recupererIdOrganisme(idNonModifie);
 
@@ -171,11 +171,22 @@ module.exports = ({ db, configuration, emails, middlewares, logger }) => {
             ip: getRemoteAddress(req)
         });
 
-        return res.status(201).send(result.value);
+        return res.status(201).send(await db.collection('accounts').findOne({ _id: organisme._id },
+            {
+                projection: {
+                    profile: true,
+                    codeRegion: true,
+                    siret: true,
+                    courriel: true,
+                    courriels: true,
+                    raison_sociale: true,
+                }
+            }
+        ));
     }));
 
     router.post('/api/backoffice/moderateur/organismes/:id/resendEmailAccount', checkAuth, checkProfile('moderateur'), tryAndCatch(async (req, res) => {
-        let idNonModifie = (await Joi.validate(req.params, { id: Joi.required() }, { abortEarly: false })).id;
+        let idNonModifie = (await Joi.validate(req.params, { id: Joi.string().required() }, { abortEarly: false })).id;
             
         let bonId = await recupererIdOrganisme(idNonModifie);
 

From c3a029dbaf474485e96b1347fb200880a07e461d Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@francetravail.fr>
Date: Fri, 15 Nov 2024 16:17:26 +0100
Subject: [PATCH 6/8] fix:souci affichage chart dans stats organismes

---
 .../components/common/avis/charts/CommentairesPies.scss          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss
index 19e5ecf5f..d0c8e9c73 100644
--- a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss
+++ b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss
@@ -14,6 +14,7 @@
     .chart {
       flex: 5 0 500px;
       padding: 0rem 2rem 4rem 2rem;
+      min-height: 250px;
 
       &.first{
         border-right: solid 1px $color-grey-25;

From fb721468fd9747f8bae9afb13e76f2747f0a856a Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@francetravail.fr>
Date: Fri, 15 Nov 2024 16:20:23 +0100
Subject: [PATCH 7/8] fix:bug export

---
 backend/src/http/api/backoffice/gestion-organismes-routes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/http/api/backoffice/gestion-organismes-routes.js b/backend/src/http/api/backoffice/gestion-organismes-routes.js
index 34af9ad4a..3c4b7e1b7 100644
--- a/backend/src/http/api/backoffice/gestion-organismes-routes.js
+++ b/backend/src/http/api/backoffice/gestion-organismes-routes.js
@@ -98,7 +98,7 @@ module.exports = ({ db, configuration, emails, middlewares, logger }) => {
         }, { token: 0 }).stream();
 
         let isKairos = organisme => {
-            let kairos = organisme.sources.find(s => s === 'kairos');
+            let kairos = organisme.sources && organisme.sources.find(s => s === 'kairos');
             return kairos === 'kairos' ? 'oui' : 'non';
         };
         let isResponsable = organisme => organisme.nbAvisResponsablePasFormateurSiretExact > 0;

From a11e0f8c2bda4272f2ea96d0b3420f160e0c353b Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@francetravail.fr>
Date: Fri, 15 Nov 2024 16:25:54 +0100
Subject: [PATCH 8/8] fix:souci affichage chart dans stats organismes

---
 .../components/common/avis/charts/CommentairesPies.scss          | 1 -
 .../components/organisme/components/StagiairesStats.scss         | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss
index d0c8e9c73..19e5ecf5f 100644
--- a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss
+++ b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss
@@ -14,7 +14,6 @@
     .chart {
       flex: 5 0 500px;
       padding: 0rem 2rem 4rem 2rem;
-      min-height: 250px;
 
       &.first{
         border-right: solid 1px $color-grey-25;
diff --git a/ui/src/backoffice/components/organisme/components/StagiairesStats.scss b/ui/src/backoffice/components/organisme/components/StagiairesStats.scss
index 2f2704a3f..f35a558b9 100644
--- a/ui/src/backoffice/components/organisme/components/StagiairesStats.scss
+++ b/ui/src/backoffice/components/organisme/components/StagiairesStats.scss
@@ -44,6 +44,7 @@
     .chart {
       flex-grow: 1;
       min-width: 300px;
+      min-height: 250px;
 
       &.first, &.second {
         border-right: solid 1px $color-grey-25;