From 114bdb21db173ee16a69d6872f52eda4f710d723 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Wed, 3 Apr 2024 10:32:47 +0200
Subject: [PATCH 001/128] fix: export csv

---
 backend/src/core/utils/stream-utils.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/src/core/utils/stream-utils.js b/backend/src/core/utils/stream-utils.js
index 1f844b4a6..d08557955 100644
--- a/backend/src/core/utils/stream-utils.js
+++ b/backend/src/core/utils/stream-utils.js
@@ -143,17 +143,17 @@ module.exports = {
         });
     },
     parseCSV: parse,
-    transformObjectIntoCSV: columns => {
+    transformObjectIntoCSV: row => {
         let lines = 0;
         return new Transform({
             objectMode: true,
             transform: function(chunk, encoding, callback) {
                 try {
                     if (lines++ === 0) {
-                        this.push(`${Object.keys(columns).join(';')}\n`);
+                        this.push(`${Object.keys(row).join(';')}\n`);
                     }
 
-                    let line = Object.keys(columns).map(key => columns[key](chunk)).join(';');
+                    let line = Object.keys(row).map(key => row[key](chunk ? chunk.replaceAll(';', ',').replaceAll('"', '\'') : '')).join(';');
                     this.push(`${line}\n`);
                     callback();
                 } catch (e) {

From fddcbdff62b2357a7ffe9247f06eb91bc2dda7d8 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Wed, 3 Apr 2024 10:42:13 +0200
Subject: [PATCH 002/128] Revert "fix: export csv"

This reverts commit 114bdb21db173ee16a69d6872f52eda4f710d723.
---
 backend/src/core/utils/stream-utils.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/src/core/utils/stream-utils.js b/backend/src/core/utils/stream-utils.js
index d08557955..1f844b4a6 100644
--- a/backend/src/core/utils/stream-utils.js
+++ b/backend/src/core/utils/stream-utils.js
@@ -143,17 +143,17 @@ module.exports = {
         });
     },
     parseCSV: parse,
-    transformObjectIntoCSV: row => {
+    transformObjectIntoCSV: columns => {
         let lines = 0;
         return new Transform({
             objectMode: true,
             transform: function(chunk, encoding, callback) {
                 try {
                     if (lines++ === 0) {
-                        this.push(`${Object.keys(row).join(';')}\n`);
+                        this.push(`${Object.keys(columns).join(';')}\n`);
                     }
 
-                    let line = Object.keys(row).map(key => row[key](chunk ? chunk.replaceAll(';', ',').replaceAll('"', '\'') : '')).join(';');
+                    let line = Object.keys(columns).map(key => columns[key](chunk)).join(';');
                     this.push(`${line}\n`);
                     callback();
                 } catch (e) {

From 959fd4226b6141d84266d30cd24db93c307044a0 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Tue, 9 Apr 2024 15:32:41 +0200
Subject: [PATCH 003/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P01=201.1?=
 =?UTF-8?q?=20ajout=20alt=20image=20RF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/core/components/emails/common/header.mjml.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/core/components/emails/common/header.mjml.ejs b/backend/src/core/components/emails/common/header.mjml.ejs
index 7d3e977e3..48e9a49d4 100644
--- a/backend/src/core/components/emails/common/header.mjml.ejs
+++ b/backend/src/core/components/emails/common/header.mjml.ejs
@@ -2,7 +2,7 @@
 <mj-section padding-top="0" padding-left="0" padding-bottom="0" border-radius="5px" background-color="#fff">
     <mj-group>
         <mj-column vertical-align="middle" width="15%">
-            <mj-image align="left" padding-left="10px" width="70px" 
+            <mj-image align="left" padding-left="10px" width="70px" alt="République Française"
                       src="<%= utils.getPublicUrl('/static/images/Republique_Francaise_RVB.png') %>" />
         </mj-column>
         <mj-column vertical-align="middle" width="25%">

From 5863f3cb7e4c5a1a3dcc192937beeff94395143a Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 11 Apr 2024 16:42:34 +0200
Subject: [PATCH 004/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P01=201.3?=
 =?UTF-8?q?=20suppressions=20mots=20'logo'=20+=20remplacement=20de=20alt?=
 =?UTF-8?q?=20r=C3=A9gion=20par=20le=20nom=20de=20la=20r=C3=A9gion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/core/components/emails/common/header.mjml.ejs | 8 ++++----
 .../emails/stagiaires/avisStagiaireEmail.mjml.ejs         | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/backend/src/core/components/emails/common/header.mjml.ejs b/backend/src/core/components/emails/common/header.mjml.ejs
index 48e9a49d4..36777c848 100644
--- a/backend/src/core/components/emails/common/header.mjml.ejs
+++ b/backend/src/core/components/emails/common/header.mjml.ejs
@@ -6,7 +6,7 @@
                       src="<%= utils.getPublicUrl('/static/images/Republique_Francaise_RVB.png') %>" />
         </mj-column>
         <mj-column vertical-align="middle" width="25%">
-            <mj-image align="left" padding-left="10px" width="132px" alt="Logo Anotéa"
+            <mj-image align="left" padding-left="10px" width="132px" alt="Anotéa"
                       src="<%= utils.getPublicUrl('/static/images/logo_Anotea_Horizontal_baseline.png') %>" />
         </mj-column>
         <mj-column vertical-align="middle" width="20%">
@@ -16,16 +16,16 @@
         </mj-column>
         <% if (showConseilRegional) { %>
             <mj-column vertical-align="middle" width="20%" border-right="1px solid #F4F4F5">
-                <mj-image padding-right="5px" width="110px" alt="Logo France Travail"
+                <mj-image padding-right="5px" width="110px" alt="France Travail"
                           src="<%= utils.getPublicUrl('/static/images/logo-ft-horizontal.svg') %>" />
             </mj-column>
             <mj-column vertical-align="middle" width="20%">
-                <mj-image width="70px" alt="Logo Region"
+                <mj-image width="70px" alt="<%= `${region.nom}` %>"
                           src="<%= utils.getPublicUrl(`/static/images/regions/conseil-regional-${region.codeRegion}.png`) %>" />
             </mj-column>
         <% } else{ %>
             <mj-column vertical-align="middle" width="40%">
-                <mj-image width="110px" align="right" alt="Logo France Travail"
+                <mj-image width="110px" align="right" alt="France Travail"
                           src="<%= utils.getPublicUrl('/static/images/logo-ft-horizontal.svg') %>" />
             </mj-column>
         <% } %>
diff --git a/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs b/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
index f53a294dc..63e21f6da 100644
--- a/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
+++ b/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
@@ -63,13 +63,13 @@
 
             <mj-section padding-top="0" padding-left="70px" padding-right="70px" >
                 <mj-column vertical-align="middle">
-                    <mj-image align="center" width="200%" alt="Logo France Travail"
+                    <mj-image align="center" width="200%" alt="France Travail"
                               src="<%= utils.getPublicUrl('/static/images/Bloc_Marque_RF_France_Travail_RVB_Horizontal_Coul_Positif.png') %>" />
                 </mj-column>
 
                 <% if (showCarif) { %>
                     <mj-column vertical-align="middle">
-                        <mj-image align="center" width="100%" alt="Logo Carif"
+                        <mj-image align="center" width="100%" alt="Défi métiers"
                                   src="<%= utils.getPublicUrl(`/static/images/regions/carif-${region.codeRegion}.png`) %>" />
                     </mj-column>
                 <% } %>

From 7db0cf36ad87e54ab8c372b5a2b27f12479c4cfd Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 12 Apr 2024 11:45:08 +0200
Subject: [PATCH 005/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P01=201.3?=
 =?UTF-8?q?=20suppressions=20mots=20'logo'=20+=20remplacement=20de=20alt?=
 =?UTF-8?q?=20r=C3=A9gion=20par=20le=20nom=20de=20la=20r=C3=A9gion.=20Dans?=
 =?UTF-8?q?=20toutes=20les=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/http/site/pages/common/header.ejs            | 6 +++---
 backend/src/http/site/pages/errors/401.ejs               | 4 ++--
 backend/src/http/site/pages/errors/403.ejs               | 4 ++--
 backend/src/http/site/pages/errors/404.ejs               | 4 ++--
 backend/src/http/site/pages/errors/error.ejs             | 4 ++--
 backend/src/http/site/pages/errors/formationNotFound.ejs | 4 ++--
 backend/src/http/site/pages/faq_organismes.ejs           | 6 +++---
 backend/src/http/site/pages/widget.ejs                   | 2 +-
 ui/src/backoffice/components/common/pdf/PDF.jsx          | 2 +-
 ui/src/questionnaire/components/Footer.jsx               | 2 +-
 ui/src/questionnaire/components/Remerciements.jsx        | 2 +-
 11 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/backend/src/http/site/pages/common/header.ejs b/backend/src/http/site/pages/common/header.ejs
index 60b7e0d97..c6fdd01ce 100644
--- a/backend/src/http/site/pages/common/header.ejs
+++ b/backend/src/http/site/pages/common/header.ejs
@@ -1,11 +1,11 @@
 <link rel="stylesheet" type="text/css" href="/static/css/header.css" media="all">
 
 <div class="header">
-    <a href="/" title="Accueil" class="logo" alt="logo Anotéa" title="retour à l'accueil">
+    <a href="/" title="Accueil" class="logo" alt="Anotéa" title="retour à l'accueil">
         <img src="/static/images/Republique_Francaise_RVB.png" />
         <img src="/static/images/logo_Anotea_Horizontal_baseline.png" />
     </a>
-    <img src="/static/images/logo-ft-horizontal.svg" class="logo-pe-mobile" alt="logo France Travail" />
+    <img src="/static/images/logo-ft-horizontal.svg" class="logo-pe-mobile" alt="France Travail" />
     <div class="login">
         <div class="menu closed of" onMouseOver="javascript:$('.menu.of').not('.clicked').toggleClass('closed open')"
              onMouseOut="javascript:$('.menu.of').not('.clicked').toggleClass('closed open')"
@@ -52,7 +52,7 @@
                 </div>
             </div>
         </div>
-        <img src="/static/images/logo-ft-horizontal.svg" class="logo-pe" alt="logo France Travail" />
+        <img src="/static/images/logo-ft-horizontal.svg" class="logo-pe" alt="France Travail" />
         <a href="<%= utils.getBackofficeUrl() %>" class="admin">
             <img src="/static/images/moderateur.svg" title="Accès espace modérateur" />
         </a>
diff --git a/backend/src/http/site/pages/errors/401.ejs b/backend/src/http/site/pages/errors/401.ejs
index 4e03a5ac1..cae325538 100644
--- a/backend/src/http/site/pages/errors/401.ejs
+++ b/backend/src/http/site/pages/errors/401.ejs
@@ -13,11 +13,11 @@
     <body>
         <div>
             <header>
-                <a href="/" title="Accueil" class="logo" alt="logo Anotéa">
+                <a href="/" title="Accueil" class="logo" alt="Anotéa">
                     <img
                             src="/static/images/logo_Anotea_Horizontal_baseline.png"
                             style="width:20%;"
-                            alt="logo anotea"
+                            alt="Anotea"
                     />
                 </a>
             </header>
diff --git a/backend/src/http/site/pages/errors/403.ejs b/backend/src/http/site/pages/errors/403.ejs
index bdbaaf93b..df52b7bd5 100644
--- a/backend/src/http/site/pages/errors/403.ejs
+++ b/backend/src/http/site/pages/errors/403.ejs
@@ -13,11 +13,11 @@
     <body>
         <div>
             <header>
-                <a href="/" title="Accueil" class="logo" alt="logo Anotéa">
+                <a href="/" title="Accueil" class="logo" alt="Anotéa">
                     <img
                             src="/static/images/logo_Anotea_Horizontal_baseline.png"
                             style="width:20%;"
-                            alt="logo anotea"
+                            alt="Anotea"
                     />
                 </a>
             </header>
diff --git a/backend/src/http/site/pages/errors/404.ejs b/backend/src/http/site/pages/errors/404.ejs
index 663efc827..15758c47a 100644
--- a/backend/src/http/site/pages/errors/404.ejs
+++ b/backend/src/http/site/pages/errors/404.ejs
@@ -13,11 +13,11 @@
     <body>
         <div>
             <header>
-                <a href="/" title="Accueil" class="logo" alt="logo Anotéa">
+                <a href="/" title="Accueil" class="logo" alt="Anotéa">
                     <img
                             src="/static/images/logo_Anotea_Horizontal_baseline.png"
                             style="width:20%;"
-                            alt="logo anotea"
+                            alt="Anotéa"
                     />
                 </a>
             </header>
diff --git a/backend/src/http/site/pages/errors/error.ejs b/backend/src/http/site/pages/errors/error.ejs
index ab913b503..d3e3f84a3 100644
--- a/backend/src/http/site/pages/errors/error.ejs
+++ b/backend/src/http/site/pages/errors/error.ejs
@@ -13,11 +13,11 @@
     <body>
         <div>
             <header>
-                <a href="/" title="Accueil" class="logo" alt="logo Anotéa">
+                <a href="/" title="Accueil" class="logo" alt="Anotéa">
                     <img
                             src="/static/images/logo_Anotea_Horizontal_baseline.png"
                             style="width:20%;"
-                            alt="logo anotea" height="200px"
+                            alt="anotea" height="200px"
                     />
                 </a>
             </header>
diff --git a/backend/src/http/site/pages/errors/formationNotFound.ejs b/backend/src/http/site/pages/errors/formationNotFound.ejs
index 00cbaddd2..79f695ef5 100644
--- a/backend/src/http/site/pages/errors/formationNotFound.ejs
+++ b/backend/src/http/site/pages/errors/formationNotFound.ejs
@@ -13,11 +13,11 @@
     <body>
         <div>
             <header>
-                <a href="/" title="Accueil" class="logo" alt="logo Anotéa">
+                <a href="/" title="Accueil" class="logo" alt="Anotéa">
                     <img
                             src="/static/images/logo_Anotea_Horizontal_baseline.png"
                             style="width:20%;"
-                            alt="logo anotea"
+                            alt="Anotéa"
                     />
                 </a>
             </header>
diff --git a/backend/src/http/site/pages/faq_organismes.ejs b/backend/src/http/site/pages/faq_organismes.ejs
index 34ad2a6d4..c28ebe12e 100644
--- a/backend/src/http/site/pages/faq_organismes.ejs
+++ b/backend/src/http/site/pages/faq_organismes.ejs
@@ -285,7 +285,7 @@
                         ainsi valoriser vos formations et votre démarche qualité auprès des futurs stagiaires.</p>
                     <a class="button esd"
                         href="https://pole-emploi.io/data/api/widget-anotea"><img
-                            src="/static/images/FT-io.svg" class="logo-esd" alt="logo du site pole-emploi.io" /></a>
+                            src="/static/images/FT-io.svg" class="logo-esd" alt="site pole-emploi.io" /></a>
                 </div>
             </div>
         </div>
@@ -522,12 +522,12 @@
                                 <a
                                     href="https://francetravail.io/data/api/anotea"><img
                                         src="/static/images/FT-io.svg" class="logo-esd"
-                                        alt="logo du site pole-emploi.io" /></a>
+                                        alt="site pole-emploi.io" /></a>
                             </p>
 
                             <p>Le Widget est disponible sur
                                 <a href="https://github.com/StartupsPoleEmploi/anotea/blob/master/misc/doc/WIDGET.md"><img
-                                        class="logo-github" src="/static/images/logo_github.webp" alt="Logo GitHub"></a>
+                                        class="logo-github" src="/static/images/logo_github.webp" alt="GitHub"></a>
                             </p>
 
                         </div>
diff --git a/backend/src/http/site/pages/widget.ejs b/backend/src/http/site/pages/widget.ejs
index 50d0cdb44..323d989fb 100644
--- a/backend/src/http/site/pages/widget.ejs
+++ b/backend/src/http/site/pages/widget.ejs
@@ -76,7 +76,7 @@
     <body>
         <div class="header container-fluid">
             <header>
-                <img alt="logo" class="logo" src="/static/images/logo.svg" />
+                <img alt="Anotéa" class="logo" src="/static/images/logo.svg" />
                 <h1 class="text-center py-3">Exemples d'intégration du widget</h1>
             </header>
         </div>
diff --git a/ui/src/backoffice/components/common/pdf/PDF.jsx b/ui/src/backoffice/components/common/pdf/PDF.jsx
index 2c3bf32a0..61c48f02d 100644
--- a/ui/src/backoffice/components/common/pdf/PDF.jsx
+++ b/ui/src/backoffice/components/common/pdf/PDF.jsx
@@ -37,7 +37,7 @@ export default class PDF extends React.Component {
                     <div className="header">
                         <div className="row align-items-center">
                             <div className="col-sm-3 text-left">
-                                <img src={logo} className="logo" alt="logo" width={'50%'} />
+                                <img src={logo} className="logo" alt="Anotéa" width={'50%'} />
                             </div>
                             <div className="title col-sm-6 d-flex justify-content-center">
                                 {title}
diff --git a/ui/src/questionnaire/components/Footer.jsx b/ui/src/questionnaire/components/Footer.jsx
index afd95488d..12eacec02 100644
--- a/ui/src/questionnaire/components/Footer.jsx
+++ b/ui/src/questionnaire/components/Footer.jsx
@@ -23,7 +23,7 @@ class Footer extends Component {
                         <img
                             className="logo"
                             src={process.env.PUBLIC_URL + `/images/regions/conseil-regional-${stagiaire.codeRegion}.png`}
-                            alt="logo région" />
+                            alt="région" />
                         }
                     </div>
                 </div>
diff --git a/ui/src/questionnaire/components/Remerciements.jsx b/ui/src/questionnaire/components/Remerciements.jsx
index c401a0428..b80c8bb53 100644
--- a/ui/src/questionnaire/components/Remerciements.jsx
+++ b/ui/src/questionnaire/components/Remerciements.jsx
@@ -81,7 +81,7 @@ class Remerciements extends Component {
                                                 src={
                                                     process.env.PUBLIC_URL +
                                                     `/images/regions/carif-${stagiaire.codeRegion}.png`}
-                                                alt="logo carif" />
+                                                alt="défi métiers" />
                                         </a>
                                         }
                                         <div>

From 3ce15076f7b2b619245d8051f84daef6654899dd Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 12 Apr 2024 11:49:14 +0200
Subject: [PATCH 006/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P01=202.2?=
 =?UTF-8?q?=20Changement=20de=20titre=20de=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../moderateur/courriels/StagiairesEmailsPreviewPage.jsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx b/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx
index eadb41eb1..1506a835a 100644
--- a/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx
+++ b/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx
@@ -48,7 +48,7 @@ export default class StagiairesEmailsPreviewPage extends Component {
                             <div className="row  justify-content-md-center">
                                 <div className="col-md-6">
                                     <iframe
-                                        title="stagiaires-emails-preview-page"
+                                        title="Prévisualisation de l´email Avis stagiaires"
                                         src={getEmailPreviewUrl('stagiaires', query.templateName || 'avisStagiaireEmail')}>
                                     </iframe>
                                 </div>

From cf9be59ee772fbf9da812359eb99e38f792f701d Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 12 Apr 2024 15:39:16 +0200
Subject: [PATCH 007/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P01=208.3-?=
 =?UTF-8?q?8.5=20ajout=20d'un=20titre=20a=20la=20page=20de=20l'iframe=20+?=
 =?UTF-8?q?=20langue=20de=20l'iframe=20+=20changement=20de=20titre=20de=20?=
 =?UTF-8?q?page=20pour=20organisme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/core/components/emails/common/head.mjml.ejs       | 2 ++
 .../moderateur/courriels/OrganismesEmailsPreviewPage.jsx      | 3 ++-
 .../moderateur/courriels/StagiairesEmailsPreviewPage.jsx      | 4 +++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/backend/src/core/components/emails/common/head.mjml.ejs b/backend/src/core/components/emails/common/head.mjml.ejs
index 95c5a599d..9220a6f37 100644
--- a/backend/src/core/components/emails/common/head.mjml.ejs
+++ b/backend/src/core/components/emails/common/head.mjml.ejs
@@ -1,4 +1,5 @@
 <mj-head>
+    <mj-title>Donnez-nous votre avis en 1 minute</mj-title>
     <mj-font name="Lato" href="https://fonts.googleapis.com/css?family=Lato" />
     <mj-attributes>
         <mj-all align="center" />
@@ -6,6 +7,7 @@
         <mj-all font-family="Lato" />
         <mj-all color="#24303A" />
     </mj-attributes>
+    <mj-link rel="icon" type="image/png" href="../../../../http/site/static/images/favicon.ico" ></mj-link>
     <mj-style inline="inline">
         .wrapper {
         border-radius: 5px;
diff --git a/ui/src/backoffice/components/moderateur/courriels/OrganismesEmailsPreviewPage.jsx b/ui/src/backoffice/components/moderateur/courriels/OrganismesEmailsPreviewPage.jsx
index 28a3f63b7..40156ecd8 100644
--- a/ui/src/backoffice/components/moderateur/courriels/OrganismesEmailsPreviewPage.jsx
+++ b/ui/src/backoffice/components/moderateur/courriels/OrganismesEmailsPreviewPage.jsx
@@ -63,7 +63,8 @@ export default class OrganismesEmailsPreviewPage extends Component {
                             <div className="row  justify-content-md-center">
                                 <div className="col-md-6">
                                     <iframe
-                                        title="organismes-emails-preview-page"
+                                        title="Prévisualisation de l´email organismes"
+                                        lang='fr'
                                         src={getEmailPreviewUrl('organismes', query.templateName || 'activationCompteEmail')}>
                                     </iframe>
                                 </div>
diff --git a/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx b/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx
index 1506a835a..4404f0d41 100644
--- a/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx
+++ b/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx
@@ -47,8 +47,10 @@ export default class StagiairesEmailsPreviewPage extends Component {
                         results={
                             <div className="row  justify-content-md-center">
                                 <div className="col-md-6">
+
                                     <iframe
-                                        title="Prévisualisation de l´email Avis stagiaires"
+                                        title="Prévisualisation de l'email Avis stagiaires"
+                                        lang='fr'
                                         src={getEmailPreviewUrl('stagiaires', query.templateName || 'avisStagiaireEmail')}>
                                     </iframe>
                                 </div>

From 5e6594becfd7b47fb9d46958fdb5185cc2fb3a51 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 12 Apr 2024 15:54:47 +0200
Subject: [PATCH 008/128] =?UTF-8?q?=20feat:=20accessibilit=C3=A9=20P03=201?=
 =?UTF-8?q?0.6=20distinction=20de=20'contactez-nous'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx b/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
index 792c573a4..40947e0b4 100644
--- a/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
+++ b/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
@@ -76,6 +76,7 @@ export default class MotDePasseOubliePage extends React.Component {
                                             si vous ne la connaissez pas,
                                             <a
                                                 className="contactez-nous"
+                                                style="text-decoration-line: underline;"
                                                 href="mailto:anotea@pole-emploi.fr">
                                                 contactez-nous
                                             </a>.

From db2ba40f93ae1b6169aa923a0b2b721e49aeed0f Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 12 Apr 2024 16:37:57 +0200
Subject: [PATCH 009/128] feat P01 correction bug + ajout favicon dans l'onglet

---
 backend/src/core/components/emails/common/head.mjml.ejs         | 2 +-
 .../moderateur/courriels/OrganismesEmailsPreviewPage.jsx        | 2 +-
 .../moderateur/courriels/StagiairesEmailsPreviewPage.jsx        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/src/core/components/emails/common/head.mjml.ejs b/backend/src/core/components/emails/common/head.mjml.ejs
index 9220a6f37..5565e8e53 100644
--- a/backend/src/core/components/emails/common/head.mjml.ejs
+++ b/backend/src/core/components/emails/common/head.mjml.ejs
@@ -7,7 +7,7 @@
         <mj-all font-family="Lato" />
         <mj-all color="#24303A" />
     </mj-attributes>
-    <mj-link rel="icon" type="image/png" href="../../../../http/site/static/images/favicon.ico" ></mj-link>
+    <link rel="icon" type="image/png" href="/static/images/favicon.ico" />
     <mj-style inline="inline">
         .wrapper {
         border-radius: 5px;
diff --git a/ui/src/backoffice/components/moderateur/courriels/OrganismesEmailsPreviewPage.jsx b/ui/src/backoffice/components/moderateur/courriels/OrganismesEmailsPreviewPage.jsx
index 40156ecd8..a64723f92 100644
--- a/ui/src/backoffice/components/moderateur/courriels/OrganismesEmailsPreviewPage.jsx
+++ b/ui/src/backoffice/components/moderateur/courriels/OrganismesEmailsPreviewPage.jsx
@@ -64,7 +64,7 @@ export default class OrganismesEmailsPreviewPage extends Component {
                                 <div className="col-md-6">
                                     <iframe
                                         title="Prévisualisation de l´email organismes"
-                                        lang='fr'
+                                        lang="fr"
                                         src={getEmailPreviewUrl('organismes', query.templateName || 'activationCompteEmail')}>
                                     </iframe>
                                 </div>
diff --git a/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx b/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx
index 4404f0d41..cf69ae190 100644
--- a/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx
+++ b/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx
@@ -50,7 +50,7 @@ export default class StagiairesEmailsPreviewPage extends Component {
 
                                     <iframe
                                         title="Prévisualisation de l'email Avis stagiaires"
-                                        lang='fr'
+                                        lang="fr"
                                         src={getEmailPreviewUrl('stagiaires', query.templateName || 'avisStagiaireEmail')}>
                                     </iframe>
                                 </div>

From 5afeead3d03d3ec3453c013267aaa43b5dbe31b2 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Mon, 15 Apr 2024 10:56:44 +0200
Subject: [PATCH 010/128] feat: P01 1.3 correction carif

---
 .../components/emails/stagiaires/avisStagiaireEmail.mjml.ejs    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs b/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
index 63e21f6da..116258944 100644
--- a/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
+++ b/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
@@ -69,7 +69,7 @@
 
                 <% if (showCarif) { %>
                     <mj-column vertical-align="middle">
-                        <mj-image align="center" width="100%" alt="Défi métiers"
+                        <mj-image align="center" width="100%" alt=" <%= `${region.carif.nom}` %>"
                                   src="<%= utils.getPublicUrl(`/static/images/regions/carif-${region.codeRegion}.png`) %>" />
                     </mj-column>
                 <% } %>

From 0f8b3faf2feaa6dc7c6171f1a6c32090c10781ae Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Mon, 15 Apr 2024 17:52:24 +0200
Subject: [PATCH 011/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P05=2010.9?=
 =?UTF-8?q?=20Legende=20Stats=20+=20variable=20regions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/anonymous/StatsPage.jsx        |  2 +-
 .../anonymous/components/AvisStats.jsx        | 18 +++++++----
 .../anonymous/components/FormationStats.jsx   | 18 +++++++----
 .../anonymous/components/StagiairesStats.jsx  | 30 +++++++++++--------
 .../anonymous/components/StatsPanel.jsx       |  5 ++--
 5 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/StatsPage.jsx b/ui/src/backoffice/components/anonymous/StatsPage.jsx
index 2d45104d2..0437683c6 100644
--- a/ui/src/backoffice/components/anonymous/StatsPage.jsx
+++ b/ui/src/backoffice/components/anonymous/StatsPage.jsx
@@ -52,7 +52,7 @@ export default class StatsPage extends React.Component {
             <Page
                 className="StatsPage"
                 form={<StatsForm query={query} store={this.state.store} onSubmit={this.onSubmit} />}
-                panel={<StatsPanel query={query} />}
+                panel={<StatsPanel query={query} store={this.state.store} />}
             />
         );
     }
diff --git a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
index 837e13578..3279ecc66 100644
--- a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
@@ -41,11 +41,19 @@ export default class AvisStats extends React.Component {
                                 <span className="value highlighted">
                                     {percentage(latest(stats, type, 'avis.nbAvisAvecCommentaire'), latest(stats, type, 'avis.nbAvis'))}%
                                 </span>
-                                {type === 'regional' &&
-                                <span className="value compare">
-                                    {percentage(latest(stats, 'national', 'avis.nbAvisAvecCommentaire'), latest(stats, 'national', 'avis.nbAvis'))}%*
-                                </span>
-                                }
+                                {type !== 'regional' && (
+                                    <span className="sr-only">National</span>
+                                )}
+
+                                {type === 'regional' && (
+                                    <>
+                                        <span className="sr-only">Regional </span>
+                                        <span className="value compare">
+                                            {percentage(latest(stats, 'national', 'avis.nbAvisAvecCommentaire'), latest(stats, 'national', 'avis.nbAvis'))}%*
+                                        </span>
+                                        <span className="sr-only">National</span>
+                                    </>
+                                )}
                             </div>
 
                         </div>
diff --git a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
index 936ebf153..940856cd4 100644
--- a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
@@ -36,11 +36,19 @@ export default class FormationStats extends React.Component {
                                 <span className="value highlighted">
                                     {percentage(latest(stats, type, 'api.nbSessionsAvecAvis'), latest(stats, type, 'api.nbSessions'))}%
                                 </span>
-                                {type === 'regional' &&
-                                <span className="value compare">
-                                    {percentage(latest(stats, 'national', 'api.nbSessionsAvecAvis'), latest(stats, 'national', 'api.nbSessions'))}%*
-                                </span>
-                                }
+                                {type !== 'regional' && (
+                                    <span className="sr-only">National</span>
+                                )}
+
+                                {type === 'regional' && (
+                                    <>
+                                        <span className="sr-only">Regional </span>
+                                        <span className="value compare">
+                                            {percentage(latest(stats, 'national', 'api.nbSessionsAvecAvis'), latest(stats, 'national', 'api.nbSessions'))}%*
+                                        </span>
+                                        <span className="sr-only">National</span>
+                                    </>
+                                )}
                             </div>
                         </div>
                     </div>
diff --git a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
index 24b152455..69f7d3e16 100644
--- a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
@@ -9,11 +9,12 @@ export default class StagiairesStats extends React.Component {
 
     static propTypes = {
         query: PropTypes.object.isRequired,
+        store: PropTypes.object.isRequired,
         stats: PropTypes.array.isRequired,
     };
 
     render() {
-        let { query, stats } = this.props;
+        let { query, store, stats } = this.props;
         let type = query.codeRegion ? 'regional' : 'national';
         let groupBy = 'month';
         let lines = [
@@ -43,17 +44,22 @@ export default class StagiairesStats extends React.Component {
                                 </div>
                             </div>
                             <div className="stats">
-                                <div className="name">Taux répondants</div>
-                                <div>
-                                    <span className="value highlighted">
-                                        {percentage(diff(stats, type, 'avis.nbAvis'), diff(stats, type, 'avis.nbStagiairesContactes'))}%
-                                    </span>
-                                    {type === 'regional' &&
-                                    <span className="value compare">
-                                        {percentage(diff(stats, 'national', 'avis.nbAvis'), diff(stats, 'national', 'avis.nbStagiairesContactes'))}%*
-                                    </span>
-                                    }
-                                </div>
+                                <span className="value highlighted">
+                                    {percentage(diff(stats, type, 'avis.nbAvis'), diff(stats, type, 'avis.nbStagiairesContactes'))}%
+                                </span>
+                                {type !== 'regional' && (
+                                    <span className="sr-only">National</span>
+                                )}
+
+                                {type === 'regional' && (
+                                    <>
+                                        <span >Regional {store.regions.find((element) => element.codeRegion === query.codeRegion)?.nom}</span>
+                                        <span className="value compare">
+                                            {percentage(diff(stats, 'national', 'avis.nbAvis'), diff(stats, 'national', 'avis.nbStagiairesContactes'))}%*
+                                        </span>
+                                        <span className="sr-only">National</span>
+                                    </>
+                                )}
                             </div>
                         </div>
                     </div>
diff --git a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
index c832b63d9..58383d1e3 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
@@ -17,6 +17,7 @@ export default class StatsPanel extends React.Component {
 
     static propTypes = {
         query: PropTypes.object.isRequired,
+        store: PropTypes.object.isRequired,
     };
 
     constructor() {
@@ -50,7 +51,7 @@ export default class StatsPanel extends React.Component {
 
     render() {
 
-        let { query } = this.props;
+        let { query, store } = this.props;
         let { results } = this.state;
 
         if (_.isEmpty(results.stats)) {
@@ -65,7 +66,7 @@ export default class StatsPanel extends React.Component {
                         <div>
                             <div className="row mb-5">
                                 <div className="col-12">
-                                    <StagiairesStats query={query} stats={results.stats} />
+                                    <StagiairesStats query={query} stats={results.stats} store={store} />
                                 </div>
                             </div>
                             <div className="row mb-5">

From 121af080b84c71aa6cc8a114aed2f418166b5267 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Tue, 16 Apr 2024 10:40:17 +0200
Subject: [PATCH 012/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P05=2010.9?=
 =?UTF-8?q?=20correction=20variable=20r=C3=A9gions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../backoffice/components/anonymous/components/AvisStats.jsx | 5 +++--
 .../components/anonymous/components/FormationStats.jsx       | 5 +++--
 .../components/anonymous/components/StagiairesStats.jsx      | 3 ++-
 .../components/anonymous/components/StatsPanel.jsx           | 4 ++--
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
index 3279ecc66..7f01dedc9 100644
--- a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
@@ -8,11 +8,12 @@ export default class AvisStats extends React.Component {
 
     static propTypes = {
         query: PropTypes.object.isRequired,
+        store: PropTypes.object.isRequired,
         stats: PropTypes.array.isRequired,
     };
 
     render() {
-        let { query, stats } = this.props;
+        let { query, store, stats } = this.props;
         let type = query.codeRegion ? 'regional' : 'national';
 
         return (
@@ -47,7 +48,7 @@ export default class AvisStats extends React.Component {
 
                                 {type === 'regional' && (
                                     <>
-                                        <span className="sr-only">Regional </span>
+                                        <span className="sr-only">Region {store.regions.find((element) => element.codeRegion === query.codeRegion)?.nom}</span>
                                         <span className="value compare">
                                             {percentage(latest(stats, 'national', 'avis.nbAvisAvecCommentaire'), latest(stats, 'national', 'avis.nbAvis'))}%*
                                         </span>
diff --git a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
index 940856cd4..8697e1de7 100644
--- a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
@@ -8,11 +8,12 @@ export default class FormationStats extends React.Component {
 
     static propTypes = {
         query: PropTypes.object.isRequired,
+        store: PropTypes.object.isRequired,
         stats: PropTypes.array.isRequired,
     };
 
     render() {
-        let { query, stats } = this.props;
+        let { query, store, stats } = this.props;
         let type = query.codeRegion ? 'regional' : 'national';
 
         return (
@@ -42,7 +43,7 @@ export default class FormationStats extends React.Component {
 
                                 {type === 'regional' && (
                                     <>
-                                        <span className="sr-only">Regional </span>
+                                         <span className="sr-only">Region {store.regions.find((element) => element.codeRegion === query.codeRegion)?.nom}</span>
                                         <span className="value compare">
                                             {percentage(latest(stats, 'national', 'api.nbSessionsAvecAvis'), latest(stats, 'national', 'api.nbSessions'))}%*
                                         </span>
diff --git a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
index 69f7d3e16..27b2db1fe 100644
--- a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
@@ -44,6 +44,7 @@ export default class StagiairesStats extends React.Component {
                                 </div>
                             </div>
                             <div className="stats">
+                                <div className="name">Taux répondants</div>
                                 <span className="value highlighted">
                                     {percentage(diff(stats, type, 'avis.nbAvis'), diff(stats, type, 'avis.nbStagiairesContactes'))}%
                                 </span>
@@ -53,7 +54,7 @@ export default class StagiairesStats extends React.Component {
 
                                 {type === 'regional' && (
                                     <>
-                                        <span >Regional {store.regions.find((element) => element.codeRegion === query.codeRegion)?.nom}</span>
+                                        <span className="sr-only">Region {store.regions.find((element) => element.codeRegion === query.codeRegion)?.nom}</span>
                                         <span className="value compare">
                                             {percentage(diff(stats, 'national', 'avis.nbAvis'), diff(stats, 'national', 'avis.nbStagiairesContactes'))}%*
                                         </span>
diff --git a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
index 58383d1e3..5093d15b7 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
@@ -71,10 +71,10 @@ export default class StatsPanel extends React.Component {
                             </div>
                             <div className="row mb-5">
                                 <div className="col-sm-12 col-md-6">
-                                    <AvisStats query={query} stats={results.stats} />
+                                    <AvisStats query={query} stats={results.stats} store={store} />
                                 </div>
                                 <div className="col-sm-12 col-md-6">
-                                    <FormationStats query={query} stats={results.stats} />
+                                    <FormationStats query={query} stats={results.stats} store={store} />
                                 </div>
                             </div>
                             { this.mustShowAdminStats() &&

From 319960f824b0725a7cffb98cbd97bce32a9ac804 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Tue, 16 Apr 2024 16:20:04 +0200
Subject: [PATCH 013/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P07=2010.1?=
 =?UTF-8?q?0=20masquer=20titre=20+=20affiche=20=C3=A9tat=20du=20titre?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jobs/data/dataset/tasks/createStagiaires.js   |  2 +-
 .../backoffice/components/common/avis/Titre.jsx   | 15 +++++++++++----
 .../backoffice/components/common/avis/Titre.scss  |  9 +++++++++
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/backend/src/jobs/data/dataset/tasks/createStagiaires.js b/backend/src/jobs/data/dataset/tasks/createStagiaires.js
index b7d8cbbb3..e47ceba32 100644
--- a/backend/src/jobs/data/dataset/tasks/createStagiaires.js
+++ b/backend/src/jobs/data/dataset/tasks/createStagiaires.js
@@ -43,7 +43,7 @@ const createStagiaire = session => {
             },
         },
         unsubscribe: false,
-        mailSent: true,
+        mailSent: false,
         mailSentDate: getDateInThePast(),
         tracking: {
             firstRead: getDateInThePast(),
diff --git a/ui/src/backoffice/components/common/avis/Titre.jsx b/ui/src/backoffice/components/common/avis/Titre.jsx
index 50e3e122a..4a6a8ec9c 100644
--- a/ui/src/backoffice/components/common/avis/Titre.jsx
+++ b/ui/src/backoffice/components/common/avis/Titre.jsx
@@ -26,10 +26,17 @@ export default class Titre extends React.Component {
         }
         return (
             <div className="Titre">
-                <span className={`mr-1 title ${avis.commentaire.titleMasked ? 'masked' : ''}`}>{avis.commentaire.title}</span>
-                {showModerationButtons &&
-                <i className={`far ${avis.commentaire.titleMasked ? 'fa-eye' : 'fa-eye-slash'} toggable`} onClick={this.toggle} />
-                }
+                
+                {showModerationButtons && (
+                    <>
+                        <span className={`sr-only ${avis.commentaire.titleMasked ? '' : 'titre-masque'}`}>titre masqué</span>
+                        <span className={`mr-1 title ${avis.commentaire.titleMasked ? 'masked' : ''}`}>{avis.commentaire.title}</span>
+                        <button type="button" className="button-eye" onClick={this.toggle}>
+                            <span className="sr-only">{avis.commentaire.titleMasked ? "Afficher le titre" : "Masquer le titre"}</span>
+                            <i className={`far sr ${avis.commentaire.titleMasked ? 'fa-eye' : 'fa-eye-slash'} toggable`} />
+                        </button>
+                    </>
+                )}
             </div>
         );
     }
diff --git a/ui/src/backoffice/components/common/avis/Titre.scss b/ui/src/backoffice/components/common/avis/Titre.scss
index cf18adec8..495b981b4 100644
--- a/ui/src/backoffice/components/common/avis/Titre.scss
+++ b/ui/src/backoffice/components/common/avis/Titre.scss
@@ -24,5 +24,14 @@
       text-decoration: line-through;
     }
   }
+
+  .titre-masque{
+    display: none;
+  }
+
+  .button-eye{
+    border: none;
+    background-color: transparent;
+  }
 }
 

From dafce079c984cf0413e507a24069152e4d6799fc Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Wed, 17 Apr 2024 09:49:54 +0200
Subject: [PATCH 014/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P04=2011.5?=
 =?UTF-8?q?=20regrouper=20formulaire=20p=C3=A9riode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/page/form/Periode.jsx        |  1 +
 .../financeur/components/FinanceurForm.jsx         | 14 ++++++++------
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/ui/src/backoffice/components/common/page/form/Periode.jsx b/ui/src/backoffice/components/common/page/form/Periode.jsx
index 0f88b75d4..ee698d39b 100644
--- a/ui/src/backoffice/components/common/page/form/Periode.jsx
+++ b/ui/src/backoffice/components/common/page/form/Periode.jsx
@@ -34,6 +34,7 @@ export default class Periode extends React.Component {
         return (
             <div className="Periode d-flex justify-content-around align-items-center">
                 <i className="fas fa-map-marker-alt pl-1"></i>
+                <span className="sr-only">de</span>
                 <Date
                     value={periode.debut}
                     min={min}
diff --git a/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx b/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
index dc66da2d8..fb5b88972 100644
--- a/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
+++ b/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
@@ -93,12 +93,14 @@ export default class FinanceurForm extends React.Component {
         return <Form>
             <div className="form-row  FinanceurAvisChartsPanel">
                 <div className="form-group col-lg-6 col-xl-3">
-                    <label>Période</label>
-                    <Periode
-                        periode={{ debut: this.state.debut, fin: this.state.fin }}
-                        min={moment('2016-01-01T00:00:00Z').toDate()}
-                        onChange={({ debut, fin }) => this.setState({ debut, fin })}
-                    />
+                    <fieldset>
+                        <label>Période</label>
+                        <Periode
+                            periode={{ debut: this.state.debut, fin: this.state.fin }}
+                            min={moment('2016-01-01T00:00:00Z').toDate()}
+                            onChange={({ debut, fin }) => this.setState({ debut, fin })}
+                        />
+                    </fieldset>
                 </div>
                 <div className="form-group col-lg-6 col-xl-3">
                     {this.mustShowCodeRegionFilter() ?

From 29bfda9e53198ed5a2da75fa48b5a7cba2a4b4d7 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Wed, 17 Apr 2024 11:02:00 +0200
Subject: [PATCH 015/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P05=2013.9?=
 =?UTF-8?q?=20responsive=20graphique=20stats?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../anonymous/components/StagiairesStats.jsx  | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
index 27b2db1fe..949af4c61 100644
--- a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
@@ -63,24 +63,24 @@ export default class StagiairesStats extends React.Component {
                                 )}
                             </div>
                         </div>
-                    </div>
-                    <div className="flex-grow-1" style={{ height: '300px', minWidth: '250px' }}>
-                        <HistoryLines
-                            lines={lines}
-                            colors={type === 'regional' ? ['rgba(35, 47, 56, 0.4)', '#F28017'] : ['#F28017']}
-                            groupBy={groupBy}
-                            format={v => `${v}%`}
-                            formatTooltip={data => {
-                                return (
-                                    <div className="d-flex justify-content-between text-left">
-                                        <span
-                                            className="mr-2">{`Avis : ${formatNumber(data.bucket['avis.nbAvis'])}`}</span>
-                                        <span>{`Stagiaires contactés : ${formatNumber(data.bucket['avis.nbStagiairesContactes'])}`}</span>
-                                    </div>
-                                );
-                            }}
-                        />
-                    </div>
+                    </div>   
+                </div>
+                <div className="flex-grow-1" style={{ height: '300px', minWidth: '250px' }}>
+                    <HistoryLines
+                        lines={lines}
+                        colors={type === 'regional' ? ['rgba(35, 47, 56, 0.4)', '#F28017'] : ['#F28017']}
+                        groupBy={groupBy}
+                        format={v => `${v}%`}
+                        formatTooltip={data => {
+                            return (
+                                <div className="d-flex justify-content-between text-left">
+                                    <span
+                                        className="mr-2">{`Avis : ${formatNumber(data.bucket['avis.nbAvis'])}`}</span>
+                                    <span>{`Stagiaires contactés : ${formatNumber(data.bucket['avis.nbStagiairesContactes'])}`}</span>
+                                </div>
+                            );
+                        }}
+                    />
                 </div>
             </div>
         );

From 481016210f722e2bc7ccc21df78c8aaad41289de Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Wed, 17 Apr 2024 11:10:35 +0200
Subject: [PATCH 016/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20correction?=
 =?UTF-8?q?=20formulations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/http/site/pages/faq_organismes.ejs                  | 2 +-
 .../moderateur/courriels/OrganismesEmailsPreviewPage.jsx        | 2 +-
 .../moderateur/courriels/StagiairesEmailsPreviewPage.jsx        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/src/http/site/pages/faq_organismes.ejs b/backend/src/http/site/pages/faq_organismes.ejs
index c28ebe12e..e2c327303 100644
--- a/backend/src/http/site/pages/faq_organismes.ejs
+++ b/backend/src/http/site/pages/faq_organismes.ejs
@@ -285,7 +285,7 @@
                         ainsi valoriser vos formations et votre démarche qualité auprès des futurs stagiaires.</p>
                     <a class="button esd"
                         href="https://pole-emploi.io/data/api/widget-anotea"><img
-                            src="/static/images/FT-io.svg" class="logo-esd" alt="site pole-emploi.io" /></a>
+                            src="/static/images/FT-io.svg" class="logo-esd" alt="site francetravail.io" /></a>
                 </div>
             </div>
         </div>
diff --git a/ui/src/backoffice/components/moderateur/courriels/OrganismesEmailsPreviewPage.jsx b/ui/src/backoffice/components/moderateur/courriels/OrganismesEmailsPreviewPage.jsx
index a64723f92..da296fe7f 100644
--- a/ui/src/backoffice/components/moderateur/courriels/OrganismesEmailsPreviewPage.jsx
+++ b/ui/src/backoffice/components/moderateur/courriels/OrganismesEmailsPreviewPage.jsx
@@ -63,7 +63,7 @@ export default class OrganismesEmailsPreviewPage extends Component {
                             <div className="row  justify-content-md-center">
                                 <div className="col-md-6">
                                     <iframe
-                                        title="Prévisualisation de l´email organismes"
+                                        title="Prévisualisation du courriel organismes"
                                         lang="fr"
                                         src={getEmailPreviewUrl('organismes', query.templateName || 'activationCompteEmail')}>
                                     </iframe>
diff --git a/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx b/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx
index cf69ae190..8c1b935cf 100644
--- a/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx
+++ b/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx
@@ -49,7 +49,7 @@ export default class StagiairesEmailsPreviewPage extends Component {
                                 <div className="col-md-6">
 
                                     <iframe
-                                        title="Prévisualisation de l'email Avis stagiaires"
+                                        title="Prévisualisation du courriel avis stagiaires"
                                         lang="fr"
                                         src={getEmailPreviewUrl('stagiaires', query.templateName || 'avisStagiaireEmail')}>
                                     </iframe>

From ec9f7bee3603a4267a438199154c8aac5609f7b9 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Wed, 17 Apr 2024 15:00:05 +0200
Subject: [PATCH 017/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P01=208.5?=
 =?UTF-8?q?=20titre=20variable=20+=20correction=20nouveau=20liens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../emails/accounts/forgottenPasswordEmail.mjml.ejs           | 2 +-
 backend/src/core/components/emails/common/head.mjml.ejs       | 3 +--
 .../emails/organismes/activationCompteEmail.mjml.ejs          | 2 +-
 .../emails/organismes/avisNotificationEmail.mjml.ejs          | 2 +-
 .../emails/organismes/avisReportedCanceledEmail.mjml.ejs      | 2 +-
 .../emails/organismes/avisReportedConfirmedEmail.mjml.ejs     | 2 +-
 .../emails/organismes/questionnaireOrganismeEmail.mjml.ejs    | 2 +-
 .../emails/organismes/reponseRejectedEmail.mjml.ejs           | 2 +-
 .../emails/stagiaires/avisRejectedAlerteEmail.mjml.ejs        | 2 +-
 .../emails/stagiaires/avisRejectedInjureEmail.mjml.ejs        | 2 +-
 .../components/emails/stagiaires/avisStagiaireEmail.mjml.ejs  | 2 +-
 .../emails/stagiaires/questionnaire6MoisEmail.mjml.ejs        | 2 +-
 backend/src/http/site/pages/faq_organismes.ejs                | 4 ++--
 .../components/anonymous/components/StagiairesStats.jsx       | 2 +-
 14 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/backend/src/core/components/emails/accounts/forgottenPasswordEmail.mjml.ejs b/backend/src/core/components/emails/accounts/forgottenPasswordEmail.mjml.ejs
index b12f0f65c..64a51eaa4 100644
--- a/backend/src/core/components/emails/accounts/forgottenPasswordEmail.mjml.ejs
+++ b/backend/src/core/components/emails/accounts/forgottenPasswordEmail.mjml.ejs
@@ -1,5 +1,5 @@
 <mjml>
-    <%- include('../common/head.mjml.ejs'); %>
+    <%- include('../common/head.mjml.ejs', { titre: "Votre renouvellement de mot de passe" }); %>
 
     <mj-body background-color="#f0f0f0">
 
diff --git a/backend/src/core/components/emails/common/head.mjml.ejs b/backend/src/core/components/emails/common/head.mjml.ejs
index 5565e8e53..24995203c 100644
--- a/backend/src/core/components/emails/common/head.mjml.ejs
+++ b/backend/src/core/components/emails/common/head.mjml.ejs
@@ -1,5 +1,5 @@
 <mj-head>
-    <mj-title>Donnez-nous votre avis en 1 minute</mj-title>
+    <mj-title><%= titre %></mj-title>
     <mj-font name="Lato" href="https://fonts.googleapis.com/css?family=Lato" />
     <mj-attributes>
         <mj-all align="center" />
@@ -7,7 +7,6 @@
         <mj-all font-family="Lato" />
         <mj-all color="#24303A" />
     </mj-attributes>
-    <link rel="icon" type="image/png" href="/static/images/favicon.ico" />
     <mj-style inline="inline">
         .wrapper {
         border-radius: 5px;
diff --git a/backend/src/core/components/emails/organismes/activationCompteEmail.mjml.ejs b/backend/src/core/components/emails/organismes/activationCompteEmail.mjml.ejs
index 752a0c773..2d55435e3 100644
--- a/backend/src/core/components/emails/organismes/activationCompteEmail.mjml.ejs
+++ b/backend/src/core/components/emails/organismes/activationCompteEmail.mjml.ejs
@@ -1,5 +1,5 @@
 <mjml>
-    <%- include('../common/head.mjml.ejs'); %>
+    <%- include('../common/head.mjml.ejs', { titre: "83% des internautes tiennent compte des avis pour faire leur choix" }); %>
 
     <mj-body background-color="#f0f0f0">
 
diff --git a/backend/src/core/components/emails/organismes/avisNotificationEmail.mjml.ejs b/backend/src/core/components/emails/organismes/avisNotificationEmail.mjml.ejs
index 75467fdfb..1aa11fa53 100644
--- a/backend/src/core/components/emails/organismes/avisNotificationEmail.mjml.ejs
+++ b/backend/src/core/components/emails/organismes/avisNotificationEmail.mjml.ejs
@@ -1,5 +1,5 @@
 <mjml>
-    <%- include('../common/head.mjml.ejs'); %>
+    <%- include('../common/head.mjml.ejs', { titre: "Vos anciens stagiaires ont donné leur avis sur leur formation." }); %>
 
     <mj-body background-color="#f0f0f0">
 
diff --git a/backend/src/core/components/emails/organismes/avisReportedCanceledEmail.mjml.ejs b/backend/src/core/components/emails/organismes/avisReportedCanceledEmail.mjml.ejs
index a05fe3813..83b71bd11 100644
--- a/backend/src/core/components/emails/organismes/avisReportedCanceledEmail.mjml.ejs
+++ b/backend/src/core/components/emails/organismes/avisReportedCanceledEmail.mjml.ejs
@@ -1,5 +1,5 @@
 <mjml>
-    <%- include('../common/head.mjml.ejs'); %>
+    <%- include('../common/head.mjml.ejs', { titre: "Avis signalé dans votre Espace Anotéa" }); %>
 
     <mj-body background-color="#f0f0f0">
 
diff --git a/backend/src/core/components/emails/organismes/avisReportedConfirmedEmail.mjml.ejs b/backend/src/core/components/emails/organismes/avisReportedConfirmedEmail.mjml.ejs
index d99f2dd2d..1b7d45015 100644
--- a/backend/src/core/components/emails/organismes/avisReportedConfirmedEmail.mjml.ejs
+++ b/backend/src/core/components/emails/organismes/avisReportedConfirmedEmail.mjml.ejs
@@ -1,5 +1,5 @@
 <mjml>
-    <%- include('../common/head.mjml.ejs'); %>
+    <%- include('../common/head.mjml.ejs', { titre: "Avis signalé dans votre Espace Anotéa" }); %>
 
     <mj-body background-color="#f0f0f0">
 
diff --git a/backend/src/core/components/emails/organismes/questionnaireOrganismeEmail.mjml.ejs b/backend/src/core/components/emails/organismes/questionnaireOrganismeEmail.mjml.ejs
index 83cf2cffe..d16e595bc 100644
--- a/backend/src/core/components/emails/organismes/questionnaireOrganismeEmail.mjml.ejs
+++ b/backend/src/core/components/emails/organismes/questionnaireOrganismeEmail.mjml.ejs
@@ -1,5 +1,5 @@
 <mjml>
-    <%- include('../common/head.mjml.ejs'); %>
+    <%- include('../common/head.mjml.ejs', { titre: "Aidez-nous à améliorer Anotéa" }); %>
 
     <mj-body background-color="#f0f0f0">
 
diff --git a/backend/src/core/components/emails/organismes/reponseRejectedEmail.mjml.ejs b/backend/src/core/components/emails/organismes/reponseRejectedEmail.mjml.ejs
index 58e5964da..ee4ea03e1 100644
--- a/backend/src/core/components/emails/organismes/reponseRejectedEmail.mjml.ejs
+++ b/backend/src/core/components/emails/organismes/reponseRejectedEmail.mjml.ejs
@@ -1,5 +1,5 @@
 <mjml>
-    <%- include('../common/head.mjml.ejs'); %>
+    <%- include('../common/head.mjml.ejs', { titre: "Votre réponse n'a pas été prise en compte" }); %>
 
     <mj-body background-color="#f0f0f0">
 
diff --git a/backend/src/core/components/emails/stagiaires/avisRejectedAlerteEmail.mjml.ejs b/backend/src/core/components/emails/stagiaires/avisRejectedAlerteEmail.mjml.ejs
index 8a1cbcf8e..0ae43098d 100644
--- a/backend/src/core/components/emails/stagiaires/avisRejectedAlerteEmail.mjml.ejs
+++ b/backend/src/core/components/emails/stagiaires/avisRejectedAlerteEmail.mjml.ejs
@@ -1,5 +1,5 @@
 <mjml>
-    <%- include('../common/head.mjml.ejs'); %>
+    <%- include('../common/head.mjml.ejs', { titre: "Nous avons bien pris en compte votre commentaire" }); %>
 
     <mj-body background-color="#f0f0f0">
 
diff --git a/backend/src/core/components/emails/stagiaires/avisRejectedInjureEmail.mjml.ejs b/backend/src/core/components/emails/stagiaires/avisRejectedInjureEmail.mjml.ejs
index 2e68b32af..9dc052d20 100644
--- a/backend/src/core/components/emails/stagiaires/avisRejectedInjureEmail.mjml.ejs
+++ b/backend/src/core/components/emails/stagiaires/avisRejectedInjureEmail.mjml.ejs
@@ -1,5 +1,5 @@
 <mjml>
-    <%- include('../common/head.mjml.ejs'); %>
+    <%- include('../common/head.mjml.ejs',{ titre: "Votre commentaire a été rejeté" }); %>
 
     <mj-body background-color="#f0f0f0">
 
diff --git a/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs b/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
index 116258944..bd624e40d 100644
--- a/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
+++ b/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
@@ -1,6 +1,6 @@
 <% const showCarif = region.carif.active; %>
 <mjml>
-    <%- include('../common/head.mjml.ejs'); %>
+    <%- include('../common/head.mjml.ejs', { titre: "Donnez-nous votre avis en 1 minute" }); %>
 
     <mj-body background-color="#f0f0f0">
 
diff --git a/backend/src/core/components/emails/stagiaires/questionnaire6MoisEmail.mjml.ejs b/backend/src/core/components/emails/stagiaires/questionnaire6MoisEmail.mjml.ejs
index 72476bbc2..95cee1d18 100644
--- a/backend/src/core/components/emails/stagiaires/questionnaire6MoisEmail.mjml.ejs
+++ b/backend/src/core/components/emails/stagiaires/questionnaire6MoisEmail.mjml.ejs
@@ -1,5 +1,5 @@
 <mjml>
-    <%- include('../common/head.mjml.ejs'); %>
+    <%- include('../common/head.mjml.ejs', { titre: "6 mois après votre formation où en êtes vous ?" }); %>
 
     <mj-body background-color="#f0f0f0">
 
diff --git a/backend/src/http/site/pages/faq_organismes.ejs b/backend/src/http/site/pages/faq_organismes.ejs
index e2c327303..5c8ac48ca 100644
--- a/backend/src/http/site/pages/faq_organismes.ejs
+++ b/backend/src/http/site/pages/faq_organismes.ejs
@@ -284,7 +284,7 @@
                         organisme sur votre propre site sans nécessiter de développements informatiques. Vous pouvez
                         ainsi valoriser vos formations et votre démarche qualité auprès des futurs stagiaires.</p>
                     <a class="button esd"
-                        href="https://pole-emploi.io/data/api/widget-anotea"><img
+                        href="https://francetravail.io/data/api/widget-anotea"><img
                             src="/static/images/FT-io.svg" class="logo-esd" alt="site francetravail.io" /></a>
                 </div>
             </div>
@@ -522,7 +522,7 @@
                                 <a
                                     href="https://francetravail.io/data/api/anotea"><img
                                         src="/static/images/FT-io.svg" class="logo-esd"
-                                        alt="site pole-emploi.io" /></a>
+                                        alt="site francetravail.io" /></a>
                             </p>
 
                             <p>Le Widget est disponible sur
diff --git a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
index 949af4c61..1ca044af5 100644
--- a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
@@ -63,7 +63,7 @@ export default class StagiairesStats extends React.Component {
                                 )}
                             </div>
                         </div>
-                    </div>   
+                    </div>
                 </div>
                 <div className="flex-grow-1" style={{ height: '300px', minWidth: '250px' }}>
                     <HistoryLines

From 9e80f424bd2cdd00fb42a36235131b2c7ad4ed1e Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Wed, 17 Apr 2024 16:47:40 +0200
Subject: [PATCH 018/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P09=2010.4?=
 =?UTF-8?q?=20responsive=20tableau?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../gestion-organismes/GestionOrganismePage.jsx      |  2 +-
 .../gestion-organismes/GestionOrganismePage.scss     | 12 ++++++++++++
 .../gestion-organismes/components/Organisme.jsx      |  2 +-
 .../gestion-organismes/components/Organisme.scss     | 12 ++++++++++++
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
index 5fd71d6be..e567a7681 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
@@ -166,7 +166,7 @@ export default class GestionOrganismePage extends React.Component {
                                 <>
                                     {
                                         <div className="row">
-                                            <div className="col-sm-2 offset-md-1">
+                                            <div className="col-sm-2 offset-md-1 style-col-title">
                                                 <p className="column-title d-none d-sm-block">Nom et SIRET</p>
                                             </div>
 
diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.scss b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.scss
index fe94eb4a1..5b6f61ce5 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.scss
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.scss
@@ -11,4 +11,16 @@
     letter-spacing: 0.38px;
     text-transform: uppercase;
   }
+
+  .style-col-title{
+    max-width: 16.66667%;
+    flex: 0 0 16.66667%;
+  }
+
+  @media only screen and (max-width: 770px) {
+    .style-col-title{
+      max-width: 24.66667%;
+      flex: 3 0 18.66667%;
+    }
+  }
 }
diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.jsx b/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.jsx
index 0d1781bd6..70ff65423 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.jsx
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.jsx
@@ -39,7 +39,7 @@ export default class Organisme extends React.Component {
 
         return (
             <div className="Organisme row">
-                <div className="col-sm-2 offset-md-1">
+                <div className="col-sm-2 offset-md-1 style-col">
                     <p className="raison-sociale">{organisme.raison_sociale}</p>
                     <p className="siret">{organisme.siret}</p>
                 </div>
diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.scss b/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.scss
index db0c4af85..dcd3ac8ca 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.scss
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.scss
@@ -64,4 +64,16 @@
       margin-bottom: 0.7rem;
     }
   }
+
+  .style-col{
+    max-width: 16.66667%;
+    flex: 0 0 16.66667%;
+  }
+
+  @media only screen and (max-width: 770px) {
+    .style-col{
+      max-width: 24.66667%;
+      flex: 3 0 18.66667%;
+    }
+  }
 }

From 67e849fbf902d8b6d8be04059cacde5f4580f9e5 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 18 Apr 2024 15:11:01 +0200
Subject: [PATCH 019/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P01=201.3?=
 =?UTF-8?q?=20alt=20image?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/config/regions.json                   |  2 +-
 .../components/emails/common/header.mjml.ejs  |  4 +--
 .../stagiaires/avisStagiaireEmail.mjml.ejs    |  4 +--
 backend/src/http/site/pages/common/header.ejs | 36 +++++++++----------
 backend/src/http/site/static/css/header.css   | 36 ++++++++++++++-----
 .../components/Remerciements.jsx              |  2 +-
 6 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/backend/config/regions.json b/backend/config/regions.json
index 7de568c83..c556f03de 100644
--- a/backend/config/regions.json
+++ b/backend/config/regions.json
@@ -490,7 +490,7 @@
     },
     "carif": {
       "active": true,
-      "nom": "Défi Métiers",
+      "nom": "Défi Métiers - île-de-France",
       "url": "https://www.defi-metiers.fr/"
     }
   },
diff --git a/backend/src/core/components/emails/common/header.mjml.ejs b/backend/src/core/components/emails/common/header.mjml.ejs
index 36777c848..38f263ac1 100644
--- a/backend/src/core/components/emails/common/header.mjml.ejs
+++ b/backend/src/core/components/emails/common/header.mjml.ejs
@@ -2,11 +2,11 @@
 <mj-section padding-top="0" padding-left="0" padding-bottom="0" border-radius="5px" background-color="#fff">
     <mj-group>
         <mj-column vertical-align="middle" width="15%">
-            <mj-image align="left" padding-left="10px" width="70px" alt="République Française"
+            <mj-image align="left" padding-left="10px" width="70px" alt="République française - liberté égalité fraternité"
                       src="<%= utils.getPublicUrl('/static/images/Republique_Francaise_RVB.png') %>" />
         </mj-column>
         <mj-column vertical-align="middle" width="25%">
-            <mj-image align="left" padding-left="10px" width="132px" alt="Anotéa"
+            <mj-image align="left" padding-left="10px" width="132px" alt="Anotéa France Travail"
                       src="<%= utils.getPublicUrl('/static/images/logo_Anotea_Horizontal_baseline.png') %>" />
         </mj-column>
         <mj-column vertical-align="middle" width="20%">
diff --git a/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs b/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
index bd624e40d..9c457cb48 100644
--- a/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
+++ b/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
@@ -63,13 +63,13 @@
 
             <mj-section padding-top="0" padding-left="70px" padding-right="70px" >
                 <mj-column vertical-align="middle">
-                    <mj-image align="center" width="200%" alt="France Travail"
+                    <mj-image align="center" width="200%" alt="République française - liberté égalité fraternité France Travail"
                               src="<%= utils.getPublicUrl('/static/images/Bloc_Marque_RF_France_Travail_RVB_Horizontal_Coul_Positif.png') %>" />
                 </mj-column>
 
                 <% if (showCarif) { %>
                     <mj-column vertical-align="middle">
-                        <mj-image align="center" width="100%" alt=" <%= `${region.carif.nom}` %>"
+                        <mj-image align="center" width="100%" alt="<%= `${region.carif.nom}` %>"
                                   src="<%= utils.getPublicUrl(`/static/images/regions/carif-${region.codeRegion}.png`) %>" />
                     </mj-column>
                 <% } %>
diff --git a/backend/src/http/site/pages/common/header.ejs b/backend/src/http/site/pages/common/header.ejs
index c6fdd01ce..b9f02e3e9 100644
--- a/backend/src/http/site/pages/common/header.ejs
+++ b/backend/src/http/site/pages/common/header.ejs
@@ -1,9 +1,9 @@
 <link rel="stylesheet" type="text/css" href="/static/css/header.css" media="all">
 
 <div class="header">
-    <a href="/" title="Accueil" class="logo" alt="Anotéa" title="retour à l'accueil">
-        <img src="/static/images/Republique_Francaise_RVB.png" />
-        <img src="/static/images/logo_Anotea_Horizontal_baseline.png" />
+    <a href="/" title="Accueil" class="logo" title="retour à l'accueil">
+        <img src="/static/images/Republique_Francaise_RVB.png" alt="République française - liberté égalité fraternité"/>
+        <img src="/static/images/logo_Anotea_Horizontal_baseline.png" alt="Anotéa France Travail"/>
     </a>
     <img src="/static/images/logo-ft-horizontal.svg" class="logo-pe-mobile" alt="France Travail" />
     <div class="login">
@@ -11,41 +11,41 @@
              onMouseOut="javascript:$('.menu.of').not('.clicked').toggleClass('closed open')"
              onClick="javascript:$('.menu.of.closed').toggleClass('closed open clicked');$('.menu.of.open').toggleClass('clicked')"
         >
-            <a href="javascript:;" class="unroll" alt="menu Financeurs"><span>Nos services</span>
-                <img class="icon-open" src="/static/images/chevron-down.svg" />
-                <img class="icon-close" src="/static/images/chevron-up.svg" />
-                <img src="/static/images/burger.svg" class="burger" alt="Nos services" />
+            <a href="javascript:;" class="unroll"><span>Nos services</span>
+                <img class="icon-open" src="/static/images/chevron-down.svg" alt=""/>
+                <img class="icon-close" src="/static/images/chevron-up.svg" alt=""/>
+                <img src="/static/images/burger.svg" class="burger" alt=""/>
             </a>
             <div class="content">
                 <ul>
                     <li>
-                        <a href="/services/stagiaires" title="Demandeurd'emploi">Demandeurs d'emploi
-                            <img class="icon" src="/static/images/chevron-right.png" />
+                        <a href="/services/stagiaires">Demandeurs d'emploi
+                            <img class="icon" src="/static/images/chevron-right.png" alt=""/>
                         </a>
                         <div class="de bar"></div>
                     </li>
                     <li>
-                        <a href="/services/organismes" title="Organisme de formation">Organismes de formation
-                            <img class="icon" src="/static/images/chevron-right.png" />
+                        <a href="/services/organismes">Organismes de formation
+                            <img class="icon" src="/static/images/chevron-right.png" alt=""/>
                         </a>
                         <div class="of bar"></div>
                     </li>
                     <li>
-                        <a href="/services/financeurs" title="Financeur">Financeurs
-                            <img class="icon" src="/static/images/chevron-right.png" />
+                        <a href="/services/financeurs">Financeurs
+                            <img class="icon" src="/static/images/chevron-right.png" alt=""/>
                         </a>
                         <div class="financeur bar"></div>
                     </li>
                     <li>
-                        <a href="<%= utils.getBackofficeUrl() %>/stats" title="Statistiques">Statistiques
-                            <img class="icon" src="/static/images/chevron-right.png" />
+                        <a href="<%= utils.getBackofficeUrl() %>/stats">Statistiques
+                            <img class="icon" src="/static/images/chevron-right.png" alt=""/>
                         </a>
                         <div class="bar"></div>
                     </li>
                 </ul>
                 <div class="menu-mobile">
                     <a href="<%= utils.getBackofficeUrl() %>" class="admin">
-                        <img src="/static/images/moderateur.svg" title="Accès espace modérateur" />
+                        <img src="/static/images/moderateur.svg" alt=""/>
                         Espace modérateur
                     </a>
                     <a href="anotea@pole-emploi.fr" class="contact">Contactez-nous</a>
@@ -53,8 +53,8 @@
             </div>
         </div>
         <img src="/static/images/logo-ft-horizontal.svg" class="logo-pe" alt="France Travail" />
-        <a href="<%= utils.getBackofficeUrl() %>" class="admin">
-            <img src="/static/images/moderateur.svg" title="Accès espace modérateur" />
+        <a href="<%= utils.getBackofficeUrl() %>" class="admin" title="Accès espace modérateur">
+            <img src="/static/images/moderateur.svg" alt="Accès espace modérateur"/>
         </a>
     </div>
 </div>
\ No newline at end of file
diff --git a/backend/src/http/site/static/css/header.css b/backend/src/http/site/static/css/header.css
index 86f35e35b..33f10a229 100644
--- a/backend/src/http/site/static/css/header.css
+++ b/backend/src/http/site/static/css/header.css
@@ -17,16 +17,17 @@
     padding: 0;
 }
 
-.login > div {
+.login>div {
     float: left;
 }
 
-.login > * {
+.login>* {
     display: inline-block;
     height: 40px;
 }
 
-.logo, .admin {
+.logo,
+.admin {
     outline: none;
 }
 
@@ -44,7 +45,8 @@
     vertical-align: middle;
 }
 
-.header .logo-pe, .logo img {
+.header .logo-pe,
+.logo img {
     display: inline-block;
     height: 75px;
     vertical-align: middle;
@@ -84,7 +86,8 @@
     padding-bottom: 25px;
 }
 
-a.admin, a.contact {
+a.admin,
+a.contact {
     line-height: 107px;
 }
 
@@ -168,11 +171,13 @@ a.contact {
         display: none;
     }
 
-    .header .logo-pe-mobile, .header .logo img {
+    .header .logo-pe-mobile,
+    .header .logo img {
         display: inline-block;
     }
 
-    .header .logo-pe-mobile, .header .logo img {
+    .header .logo-pe-mobile,
+    .header .logo img {
         height: 36px;
         padding: 5px;
         display: inline-block;
@@ -194,10 +199,25 @@ a.contact {
         width: 24px;
     }
 
-    .header .admin, .header .menu span, .header .menu .icon-close, .header .menu .icon-open {
+    .header .admin,
+    .header .menu .icon-close,
+    .header .menu .icon-open {
         display: none;
     }
 
+    .header .menu span{
+        border: 0 !important;
+        clip: rect(1px, 1px, 1px, 1px) !important;
+        -webkit-clip-path: inset(50%) !important;
+        clip-path: inset(50%) !important;
+        height: 1px !important;
+        overflow: hidden !important;
+        padding: 0 !important;
+        position: absolute !important;
+        width: 1px !important;
+        white-space: nowrap !important;
+    }
+
     .header .menu .content {
         height: 100vh;
         position: fixed;
diff --git a/ui/src/questionnaire/components/Remerciements.jsx b/ui/src/questionnaire/components/Remerciements.jsx
index b80c8bb53..fda240a2c 100644
--- a/ui/src/questionnaire/components/Remerciements.jsx
+++ b/ui/src/questionnaire/components/Remerciements.jsx
@@ -91,7 +91,7 @@ class Remerciements extends Component {
                                             title="Visiter l'espace de recherche de formation de France Travail"
                                             target="_blank"
                                             rel="noopener noreferrer">
-                                            <img src={logo} height="86px" />
+                                            <img src={logo} height="86px" alt="République française - liberté égalité fraternité France travail"/>
                                         </a>
                                         </div></div>
                                     </div>

From 28e7e2ab7b673a415311c72f9165e7e0fd217350 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 18 Apr 2024 15:12:16 +0200
Subject: [PATCH 020/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P01=202.2?=
 =?UTF-8?q?=20titre?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/core/components/emails/common/head.mjml.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/core/components/emails/common/head.mjml.ejs b/backend/src/core/components/emails/common/head.mjml.ejs
index 24995203c..fa8b3ad1b 100644
--- a/backend/src/core/components/emails/common/head.mjml.ejs
+++ b/backend/src/core/components/emails/common/head.mjml.ejs
@@ -1,5 +1,5 @@
 <mj-head>
-    <mj-title><%= titre %></mj-title>
+    <mj-title><%= titre %> | Anotéa</mj-title>
     <mj-font name="Lato" href="https://fonts.googleapis.com/css?family=Lato" />
     <mj-attributes>
         <mj-all align="center" />

From 2c358368c2165ff93ddcfe674473c5fdff53388c Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 18 Apr 2024 15:31:33 +0200
Subject: [PATCH 021/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P01=203.1?=
 =?UTF-8?q?=20informations=20couleur=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/backoffice/components/common/header/Header.scss        | 3 +--
 .../components/common/page/panel/filters/Filter.scss          | 4 +---
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/ui/src/backoffice/components/common/header/Header.scss b/ui/src/backoffice/components/common/header/Header.scss
index 95f2035b9..b1c2f0bd9 100644
--- a/ui/src/backoffice/components/common/header/Header.scss
+++ b/ui/src/backoffice/components/common/header/Header.scss
@@ -62,14 +62,13 @@
     .nav-link {
       color: $color-white;
       display: inline-block;
-      opacity: 0.6;
       white-space: nowrap;
       padding: 0.5rem 1rem 0.5rem 1rem;
 
       &.active {
         color: $color-white;
         font-weight: $font-weight-bold;
-        opacity: 1;
+        text-decoration: underline;
       }
 
       &:hover,
diff --git a/ui/src/backoffice/components/common/page/panel/filters/Filter.scss b/ui/src/backoffice/components/common/page/panel/filters/Filter.scss
index e2fd2d3f6..a9486d357 100644
--- a/ui/src/backoffice/components/common/page/panel/filters/Filter.scss
+++ b/ui/src/backoffice/components/common/page/panel/filters/Filter.scss
@@ -4,11 +4,10 @@
 
   &.nav-item {
 
-    opacity: 0.6;
     position: relative;
 
     &.active {
-      opacity: 1;
+      text-decoration: underline;
 
       &:hover, &:focus {
         font-weight: $font-weight-normal;
@@ -18,7 +17,6 @@
     &:hover, &:focus {
       cursor: pointer;
       font-weight: $font-weight-bold;
-      opacity: 1;
     }
 
     .nav-link {

From df3f3905577f022fa7818594512a57cba9b075e2 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Thu, 18 Apr 2024 16:28:32 +0200
Subject: [PATCH 022/128] =?UTF-8?q?feat:accessibilite=20backoffice=209.2?=
 =?UTF-8?q?=2012.6=2012.7=20ajout=20liens=20d'=C3=A9vitement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../anonymous/MotDePasseOubliePage.jsx          |  2 +-
 .../components/common/header/Header.jsx         | 17 ++++++++++-------
 .../components/common/header/Header.scss        | 17 +++++++++++++++++
 .../backoffice/components/common/page/Page.jsx  |  4 ++--
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx b/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
index 40947e0b4..c5f7cbdb1 100644
--- a/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
+++ b/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
@@ -76,7 +76,7 @@ export default class MotDePasseOubliePage extends React.Component {
                                             si vous ne la connaissez pas,
                                             <a
                                                 className="contactez-nous"
-                                                style="text-decoration-line: underline;"
+                                                style={{"text-decoration-line": "underline;"}}
                                                 href="mailto:anotea@pole-emploi.fr">
                                                 contactez-nous
                                             </a>.
diff --git a/ui/src/backoffice/components/common/header/Header.jsx b/ui/src/backoffice/components/common/header/Header.jsx
index 8f32610de..cf4ddb60e 100644
--- a/ui/src/backoffice/components/common/header/Header.jsx
+++ b/ui/src/backoffice/components/common/header/Header.jsx
@@ -10,7 +10,10 @@ const Header = ({ items, defaultPath, onLogout }) => {
     let { account, theme } = useContext(BackofficeContext);
 
     return (
-        <div className={`Header ${theme.backgroundColor}`}>
+        <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>
             <div className="container">
                 <div className="row">
                     <div className="col-sm-12">
@@ -22,17 +25,17 @@ const Header = ({ items, defaultPath, onLogout }) => {
                             {items}
 
                             {account.profile !== 'anonymous' &&
-                            <button
-                                onClick={onLogout}
-                                className="logout btn btn-outline-light">
-                                <span>SE DECONNECTER</span>
-                            </button>
+                                <button
+                                    onClick={onLogout}
+                                    className="logout btn btn-outline-light">
+                                    <span>SE DECONNECTER</span>
+                                </button>
                             }
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </header>
     );
 };
 
diff --git a/ui/src/backoffice/components/common/header/Header.scss b/ui/src/backoffice/components/common/header/Header.scss
index 95f2035b9..713c4b41b 100644
--- a/ui/src/backoffice/components/common/header/Header.scss
+++ b/ui/src/backoffice/components/common/header/Header.scss
@@ -97,4 +97,21 @@
     font-weight: $font-weight-bold;
     letter-spacing: 1px;
   }
+
+  .skip-link-group {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+  
+  .skip-link:focus {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    padding: 0.375rem;
+    background: #414042;
+    color: #ffffff;
+  }
 }
diff --git a/ui/src/backoffice/components/common/page/Page.jsx b/ui/src/backoffice/components/common/page/Page.jsx
index 99c8a8afe..e3b008fa8 100644
--- a/ui/src/backoffice/components/common/page/Page.jsx
+++ b/ui/src/backoffice/components/common/page/Page.jsx
@@ -9,7 +9,7 @@ const Page = props => {
     let { theme } = useContext(BackofficeContext);
 
     return (
-        <div className={`Page mb-0 ${props.className || ''}`}>
+        <main id="contents" role="main" className={`Page mb-0 ${props.className || ''}`}>
 
             <div className={`search-holder ${theme.backgroundColor}`}>
 
@@ -45,7 +45,7 @@ const Page = props => {
             <div className="panel-holder">
                 {props.panel}
             </div>
-        </div>
+        </main>
     );
 };
 

From e840c9d2ca47973b089d81e1c3c857912ddd678f Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Thu, 18 Apr 2024 16:29:25 +0200
Subject: [PATCH 023/128] =?UTF-8?q?feat:accessibilite=20backend=209.2=2012?=
 =?UTF-8?q?.6=2012.7=20ajout=20liens=20d'=C3=A9vitement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/http/site/pages/cgu.ejs           |  4 +-
 backend/src/http/site/pages/common/footer.ejs |  4 +-
 backend/src/http/site/pages/common/header.ejs |  8 +++-
 .../src/http/site/pages/faq_financeurs.ejs    |  4 +-
 .../src/http/site/pages/faq_organismes.ejs    |  4 +-
 .../src/http/site/pages/faq_stagiaires.ejs    |  4 +-
 backend/src/http/site/pages/homepage.ejs      |  4 +-
 .../site/pages/politique-confidentialite.ejs  |  4 +-
 backend/src/http/site/static/css/header.css   | 39 ++++++++++++++++++-
 9 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/backend/src/http/site/pages/cgu.ejs b/backend/src/http/site/pages/cgu.ejs
index 4a41e2b3d..9ab09e539 100644
--- a/backend/src/http/site/pages/cgu.ejs
+++ b/backend/src/http/site/pages/cgu.ejs
@@ -17,7 +17,7 @@
 <body class="cgu">
     <%- include('./common/header.ejs'); %>
 
-    <div class="main cgu">
+    <main role="content" id="contents" class="main cgu">
         <div class="header-cgu">
             <h1 class="current">Conditions Générales d’Utilisation</h1>
             <h1><a href="/politique-confidentialite">Politique de confidentialité</a></h1>
@@ -229,7 +229,7 @@
             sur quelque support que ce soit, sans l'autorisation expresse et préalable de France Travail constitue un
             acte de
             contrefaçon, sanctionné au titre des articles L.716-1 du même code.</p>
-    </div>
+    </main>
     <%- include('./common/contact.ejs'); %>
     <%- include('./common/footer.ejs'); %>
 </body>
diff --git a/backend/src/http/site/pages/common/footer.ejs b/backend/src/http/site/pages/common/footer.ejs
index e34e68c8a..aa16eb7f9 100644
--- a/backend/src/http/site/pages/common/footer.ejs
+++ b/backend/src/http/site/pages/common/footer.ejs
@@ -1,5 +1,5 @@
 <link rel="stylesheet" type="text/css" href="/static/css/footer.css" media="all">
-<div class="footer">
+<footer class="footer" id="footer" role="contentinfo">
     <img class="logo" src="/static/images/Republique_Francaise_RVB.png" />
     <img class="logo" src="/static/images/logo_Anotea_Horizontal_baseline.png" />
     <img src="/static/images/logo-ft-horizontal.svg" class="logo-pe-mobile" />
@@ -14,4 +14,4 @@
     </div>
 
     <img src="/static/images/logo-ft-horizontal.svg" class="logo-pe" />
-</div>
\ No newline at end of file
+</footer>
\ No newline at end of file
diff --git a/backend/src/http/site/pages/common/header.ejs b/backend/src/http/site/pages/common/header.ejs
index b9f02e3e9..8c4e68e65 100644
--- a/backend/src/http/site/pages/common/header.ejs
+++ b/backend/src/http/site/pages/common/header.ejs
@@ -1,6 +1,10 @@
 <link rel="stylesheet" type="text/css" href="/static/css/header.css" media="all">
 
-<div class="header">
+<header role="banner" class="header">
+    <div class="skip-link-group">
+        <a href="#contents" class="skip-link sr-only sr-only-focusable">Accéder au contenu principal</a>
+        <a href="#footer" class="skip-link sr-only sr-only-focusable">Accéder au pied de page</a>
+    </div>
     <a href="/" title="Accueil" class="logo" title="retour à l'accueil">
         <img src="/static/images/Republique_Francaise_RVB.png" alt="République française - liberté égalité fraternité"/>
         <img src="/static/images/logo_Anotea_Horizontal_baseline.png" alt="Anotéa France Travail"/>
@@ -57,4 +61,4 @@
             <img src="/static/images/moderateur.svg" alt="Accès espace modérateur"/>
         </a>
     </div>
-</div>
\ No newline at end of file
+</header>
\ No newline at end of file
diff --git a/backend/src/http/site/pages/faq_financeurs.ejs b/backend/src/http/site/pages/faq_financeurs.ejs
index 7ce6d9064..0dc2b1889 100644
--- a/backend/src/http/site/pages/faq_financeurs.ejs
+++ b/backend/src/http/site/pages/faq_financeurs.ejs
@@ -17,7 +17,7 @@
 
 <body>
     <%- include('./common/header.ejs'); %>
-    <div class="main financeur">
+    <main role="content" id="contents" class="main financeur">
         <div class="intro">
             <div class="content">
                 <div class="text">
@@ -67,7 +67,7 @@
                 </div>
             </div>
         </div>
-    </div>
+    </main>
     <%- include('./common/contact.ejs'); %>
     <%- include('./common/footer.ejs'); %>
 </body>
diff --git a/backend/src/http/site/pages/faq_organismes.ejs b/backend/src/http/site/pages/faq_organismes.ejs
index 5c8ac48ca..dc2d535b7 100644
--- a/backend/src/http/site/pages/faq_organismes.ejs
+++ b/backend/src/http/site/pages/faq_organismes.ejs
@@ -36,7 +36,7 @@
 
 <body>
     <%- include('./common/header.ejs'); %>
-    <div class="main">
+    <main role="content" id="contents" class="main">
         <div class="intro">
             <div class="content">
                 <div class="text">
@@ -658,7 +658,7 @@
                 </div>
             </div>
         </div>
-    </div>
+    </main>
     <%- include('./common/contact.ejs'); %>
     <%- include('./common/footer.ejs'); %>
 </body>
diff --git a/backend/src/http/site/pages/faq_stagiaires.ejs b/backend/src/http/site/pages/faq_stagiaires.ejs
index a32434601..7740da5c8 100644
--- a/backend/src/http/site/pages/faq_stagiaires.ejs
+++ b/backend/src/http/site/pages/faq_stagiaires.ejs
@@ -18,7 +18,7 @@
 <body>
     <%- include('./common/header.ejs'); %>
 
-    <div class="main stagiaire">
+    <main role="content" id="contents" class="main stagiaire">
 
         <div class="intro">
             <div class="content">
@@ -197,7 +197,7 @@
                 </div>
             </div>
         </div>
-    </div>
+    </main>
     <%- include('./common/contact.ejs'); %>
     <%- include('./common/footer.ejs'); %>
 </body>
diff --git a/backend/src/http/site/pages/homepage.ejs b/backend/src/http/site/pages/homepage.ejs
index f9f299f52..7ea2caea2 100644
--- a/backend/src/http/site/pages/homepage.ejs
+++ b/backend/src/http/site/pages/homepage.ejs
@@ -17,7 +17,7 @@
 <body>
     <%- include('./common/header.ejs'); %>
 
-    <div class=" content-intro">
+    <main role="content" id="contents" class=" content-intro">
         <div class="stagiaire">
             <h2>Vous avez <strong>suivi une formation<br />professionnelle</strong> ?</h2>
             <p>
@@ -113,7 +113,7 @@
                 <a href="/services/stagiaires">En savoir plus<img src="/static/images/arrow-grey.svg" /></a>
             </li>
         </ul>
-    </div>
+    </main>
 
     <%- include('./common/contact.ejs'); %>
     <%- include('./common/footer.ejs'); %>
diff --git a/backend/src/http/site/pages/politique-confidentialite.ejs b/backend/src/http/site/pages/politique-confidentialite.ejs
index 7e409870a..9a3481fdf 100644
--- a/backend/src/http/site/pages/politique-confidentialite.ejs
+++ b/backend/src/http/site/pages/politique-confidentialite.ejs
@@ -17,7 +17,7 @@
 <body class="cgu">
     <%- include('./common/header.ejs'); %>
 
-    <div class="main cgu">
+    <main role="content" id="contents" class="main cgu">
         <div class="header-cgu">
             <h1><a href="/cgu">Conditions Générales d’Utilisation</a></h1>
             <h1 class="current">Politique de confidentialité</h1>
@@ -32,7 +32,7 @@
         <p>Vos données sont conservées pendant une durée maximale de 3 ans.</p>
         <p>Vous pouvez demander à accéder à vos données et les faire rectifier en vous adressant par courrier postal ou électronique auprès du délégué à la protection des données de France Travail, 1, avenue du Docteur Gley, 75987 Paris cedex 20, <a href="mailto:contact-dpd@pole-emploi.fr">contact-dpd@pole-emploi.fr</a></p>
 
-    </div>
+    </main>
     <%- include('./common/contact.ejs'); %>
     <%- include('./common/footer.ejs'); %>
 </body>
diff --git a/backend/src/http/site/static/css/header.css b/backend/src/http/site/static/css/header.css
index 33f10a229..4662fd3ae 100644
--- a/backend/src/http/site/static/css/header.css
+++ b/backend/src/http/site/static/css/header.css
@@ -9,6 +9,43 @@
     background: white;
 }
 
+.skip-link-group {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.skip-link:focus {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    padding: 0.375rem;
+    background: #414042;
+    color: #ffffff;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
+
+.sr-only-focusable:active, .sr-only-focusable:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+}
+
 .login {
     position: absolute;
     top: 0px;
@@ -205,7 +242,7 @@ a.contact {
         display: none;
     }
 
-    .header .menu span{
+    .header .menu span {
         border: 0 !important;
         clip: rect(1px, 1px, 1px, 1px) !important;
         -webkit-clip-path: inset(50%) !important;

From 946c90bedaffe7c8e341735870cca1e450fe2ebc Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 18 Apr 2024 16:35:33 +0200
Subject: [PATCH 024/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P01=203.1?=
 =?UTF-8?q?=20bulle=20rouge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/backoffice/components/common/Pastille.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/backoffice/components/common/Pastille.jsx b/ui/src/backoffice/components/common/Pastille.jsx
index 107946cba..cc8f20baf 100644
--- a/ui/src/backoffice/components/common/Pastille.jsx
+++ b/ui/src/backoffice/components/common/Pastille.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import './Pastille.scss';
 
 const Pastille = props => {
-    return <span className={`Pastille ${!props.value ? 'empty' : ''}`}>{props.value}</span>;
+    return <span className={`Pastille ${!props.value ? 'empty' : ''}`}>{props.value}<span className="sr-only">&nbsp;(à traiter)</span></span>;
 };
 
 Pastille.propTypes = {

From cbbfba4d2d3e0c537e4f34645cf2118ce651b303 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 18 Apr 2024 17:00:11 +0200
Subject: [PATCH 025/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P02-P03-P0?=
 =?UTF-8?q?6=2011.13=20auto=20complete=20formulaire?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/backoffice/components/anonymous/LoginPage.jsx          | 2 ++
 .../backoffice/components/anonymous/MotDePasseOubliePage.jsx  | 1 +
 .../components/anonymous/ReinitialisationMotDePassePage.jsx   | 2 ++
 ui/src/backoffice/components/common/MonComptePage.jsx         | 3 +++
 ui/src/backoffice/components/common/page/form/InputText.jsx   | 4 +++-
 5 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/ui/src/backoffice/components/anonymous/LoginPage.jsx b/ui/src/backoffice/components/anonymous/LoginPage.jsx
index 3e0b766a3..28c98473d 100644
--- a/ui/src/backoffice/components/anonymous/LoginPage.jsx
+++ b/ui/src/backoffice/components/anonymous/LoginPage.jsx
@@ -85,6 +85,7 @@ export default class LoginPage extends React.Component {
                                             placeholder="Entrez votre SIRET"
                                             onChange={event => this.setState({ identifiant: event.target.value })}
                                             error={this.state.error ? errorMessage : ''}
+                                            autoComplete="username"
                                         />
 
                                         <label className="mt-3">Mot de passe</label>
@@ -94,6 +95,7 @@ export default class LoginPage extends React.Component {
                                             placeholder="Entrez votre mot de passe "
                                             onChange={event => this.setState({ password: event.target.value })}
                                             error={this.state.error ? ' ' : ''}
+                                            autoComplete="current-password"
                                         />
                                     </>
                                 }
diff --git a/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx b/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
index c5f7cbdb1..e74227302 100644
--- a/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
+++ b/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
@@ -64,6 +64,7 @@ export default class MotDePasseOubliePage extends React.Component {
                                             placeholder="Identifiant"
                                             error={this.state.error}
                                             onChange={event => this.setState({ identifiant: event.target.value })}
+                                            autoComplete="username"
                                         />
                                         <p className="clarification mt-3">
                                             Si vous êtes un organisme, vous devez désormais renseigner votre numéro de
diff --git a/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx b/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
index 93cb68b1a..077ae3137 100644
--- a/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
+++ b/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
@@ -107,6 +107,7 @@ export default class ReinitialisationMotDePassePage extends React.Component {
                                             placeholder="Mot de passe"
                                             error={errors.passwordNotStrongEnough}
                                             onChange={event => this.setState({ password: event.target.value })}
+                                            autoComplete="new-password"
                                         />
 
                                         <label className="mt-3">Confirmer le nouveau mot de passe</label>
@@ -116,6 +117,7 @@ export default class ReinitialisationMotDePassePage extends React.Component {
                                             placeholder="Mot de passe"
                                             error={errors.isNotSamePassword}
                                             onChange={event => this.setState({ confirmation: event.target.value })}
+                                            autoComplete="new-password"
                                         />
                                     </>
                                 }
diff --git a/ui/src/backoffice/components/common/MonComptePage.jsx b/ui/src/backoffice/components/common/MonComptePage.jsx
index 3858f5cc5..11614560a 100644
--- a/ui/src/backoffice/components/common/MonComptePage.jsx
+++ b/ui/src/backoffice/components/common/MonComptePage.jsx
@@ -93,6 +93,7 @@ export default class MonComptePage extends React.Component {
                                         value={this.state.current}
                                         placeholder="Mot de passe"
                                         onChange={event => this.setState({ current: event.target.value })}
+                                        autoComplete="current-password"
                                     />
 
                                     <label className="mt-3">Nouveau mot de passe</label>
@@ -102,6 +103,7 @@ export default class MonComptePage extends React.Component {
                                         placeholder="Mot de passe"
                                         error={errors.passwordNotStrongEnough}
                                         onChange={event => this.setState({ password: event.target.value })}
+                                        autoComplete="new-password"
                                     />
 
                                     <label className="mt-3">Confirmer le nouveau mot de passe</label>
@@ -111,6 +113,7 @@ export default class MonComptePage extends React.Component {
                                         placeholder="Mot de passe"
                                         error={errors.isNotSamePassword}
                                         onChange={event => this.setState({ confirmation: event.target.value })}
+                                        autoComplete="new-password"
                                     />
                                 </>
                             }
diff --git a/ui/src/backoffice/components/common/page/form/InputText.jsx b/ui/src/backoffice/components/common/page/form/InputText.jsx
index 959830b36..8d541db54 100644
--- a/ui/src/backoffice/components/common/page/form/InputText.jsx
+++ b/ui/src/backoffice/components/common/page/form/InputText.jsx
@@ -10,6 +10,7 @@ export default class InputText extends React.Component {
         icon: PropTypes.node,
         reset: PropTypes.func,
         error: PropTypes.string,
+        autoComplete: PropTypes.string,
     };
 
     render() {
@@ -27,7 +28,8 @@ export default class InputText extends React.Component {
 
                     <input
                         type="text"
-                        className={`${icon ? 'with-icon' : ''} ${reset ? 'with-reset' : ''} ${error ? 'with-error' : ''}`}
+                        autocomplete={this.autoComplete?this.autoComplete:null}
+                        className={`${this.icon ? 'with-icon' : ''} ${this.reset ? 'with-reset' : ''} ${this.error ? 'with-error' : ''}`}
                         {..._.omit(this.props, ['icon', 'reset', 'error'])}
                     />
 

From 53c15a661833b00f6f6e83cfc3104ed7f4c669e5 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 19 Apr 2024 15:47:38 +0200
Subject: [PATCH 026/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P03=20focu?=
 =?UTF-8?q?s=20sur=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/anonymous/MotDePasseOubliePage.jsx    | 12 +++++++++++-
 .../components/common/page/form/InputText.jsx        |  9 ++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx b/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
index e74227302..58a4e5cf5 100644
--- a/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
+++ b/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
@@ -7,6 +7,8 @@ import Button from '../../../common/components/Button';
 import { CenteredForm } from '../common/page/form/CenteredForm';
 import { askNewPassword } from '../../services/passwordService';
 import BackofficeContext from '../../BackofficeContext';
+import './LoginPage.scss';
+
 
 export default class MotDePasseOubliePage extends React.Component {
 
@@ -18,6 +20,7 @@ export default class MotDePasseOubliePage extends React.Component {
 
     constructor(props) {
         super(props);
+        this.inputRef = React.createRef();
         this.state = {
             loading: false,
             identifiant: '',
@@ -41,7 +44,12 @@ export default class MotDePasseOubliePage extends React.Component {
             });
         })
         .catch(() => {
-            this.setState({ error: 'Une erreur est survenue', loading: false });
+            this.setState({ error: 'Une erreur est survenue', loading: false },()=>{
+                if (this.inputRef.current && this.inputRef.current.focus) {
+                    this.inputRef.current.focus();
+                }
+            }
+        );
         });
     };
 
@@ -49,6 +57,7 @@ export default class MotDePasseOubliePage extends React.Component {
 
         return (
             <Page
+                className="MotDePasseOubliePage"
                 title={'Votre espace Anotéa'}
                 panel={
                     <Panel
@@ -65,6 +74,7 @@ export default class MotDePasseOubliePage extends React.Component {
                                             error={this.state.error}
                                             onChange={event => this.setState({ identifiant: event.target.value })}
                                             autoComplete="username"
+                                            inputRef={this.inputRef}
                                         />
                                         <p className="clarification mt-3">
                                             Si vous êtes un organisme, vous devez désormais renseigner votre numéro de
diff --git a/ui/src/backoffice/components/common/page/form/InputText.jsx b/ui/src/backoffice/components/common/page/form/InputText.jsx
index 8d541db54..6b14603c2 100644
--- a/ui/src/backoffice/components/common/page/form/InputText.jsx
+++ b/ui/src/backoffice/components/common/page/form/InputText.jsx
@@ -11,10 +11,16 @@ export default class InputText extends React.Component {
         reset: PropTypes.func,
         error: PropTypes.string,
         autoComplete: PropTypes.string,
+        inputRef: PropTypes.object,
     };
 
+    constructor(props) {
+        super(props);
+        this.inputRef = React.createRef();
+    }
+
     render() {
-        let { icon, reset, error } = this.props;
+        let { icon, reset, error, inputRef } = this.props;
 
         return (
             <div className="InputText">
@@ -30,6 +36,7 @@ export default class InputText extends React.Component {
                         type="text"
                         autocomplete={this.autoComplete?this.autoComplete:null}
                         className={`${this.icon ? 'with-icon' : ''} ${this.reset ? 'with-reset' : ''} ${this.error ? 'with-error' : ''}`}
+                        ref={inputRef || this.inputRef}
                         {..._.omit(this.props, ['icon', 'reset', 'error'])}
                     />
 

From 32850c54b276e9c6a3a96ef71a72a9b732fa07a0 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 19 Apr 2024 15:49:25 +0200
Subject: [PATCH 027/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20coh=C3=A9r?=
 =?UTF-8?q?ence=20entre=20nom=20image=20et=20image?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/config/regions.json | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/backend/config/regions.json b/backend/config/regions.json
index c556f03de..93f1a0e24 100644
--- a/backend/config/regions.json
+++ b/backend/config/regions.json
@@ -75,7 +75,7 @@
     }
   },
   {
-    "nom": "Bourgogne-Franche-Comté",
+    "nom": "Région Bourgogne-Franche-Comté",
     "active": true,
     "since": "2017-09-01",
     "codeRegion": "27",
@@ -130,12 +130,12 @@
     },
     "carif": {
       "active": true,
-      "nom": "Emfor",
+      "nom": "Emfor Bourgogne-Franche-Comté",
       "url": "http://www.emfor-bfc.org/"
     }
   },
   {
-    "nom": "Bretagne",
+    "nom": "Région Bretagne",
     "active": true,
     "since": "2018-05-01",
     "codeRegion": "53",
@@ -389,7 +389,7 @@
     }
   },
   {
-    "nom": "Hauts-de-France",
+    "nom": "Région Hauts-de-France",
     "active": true,
     "since": "2018-05-27",
     "codeRegion": "32",
@@ -431,7 +431,7 @@
     },
     "carif": {
       "active": true,
-      "nom": "C2RP",
+      "nom": "C2RP Orientation Formation Emploi Carif-Oref Hauts-de-France",
       "url": "http://www.c2rp.fr/"
     }
   },
@@ -577,7 +577,8 @@
       "import": "all"
     },
     "carif": {
-      "active": false
+      "active": false,
+      "nom": "Collectivité Territoriale de Martinique"
     }
   },
   {
@@ -700,7 +701,7 @@
     }
   },
   {
-    "nom": "Occitanie",
+    "nom": "La region Occitanie Pyrénées - Méditerranée",
     "active": true,
     "since": "2018-06-01",
     "codeRegion": "76",
@@ -777,7 +778,7 @@
     }
   },
   {
-    "nom": "Pays de la Loire",
+    "nom": "Région Pays de la Loire",
     "active": true,
     "since": "2017-07-01",
     "codeRegion": "52",
@@ -819,7 +820,7 @@
     },
     "carif": {
       "active": true,
-      "nom": "Orientation Pays de la Loire",
+      "nom": "Choisir mon metier en Pays de la Loire",
       "url": "http://www.orientation-paysdelaloire.fr/"
     }
   },

From db5d17bda61caf764a3b9a422c033484667f183e Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 19 Apr 2024 15:51:17 +0200
Subject: [PATCH 028/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20voire=20Bu?=
 =?UTF-8?q?tton=20quand=20focus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/common/components/Button.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/ui/src/common/components/Button.scss b/ui/src/common/components/Button.scss
index cb174ebb2..c642d3156 100644
--- a/ui/src/common/components/Button.scss
+++ b/ui/src/common/components/Button.scss
@@ -20,6 +20,8 @@
 
     &:focus {
       outline: 0;
+      border: 2px solid black;
+      border-radius: 5px 5px 5px 5px;
     }
 
     &:hover, &.a-btn-hover {
@@ -45,6 +47,8 @@
 
     &:focus {
       outline: 0;
+      border: 2px solid black;
+      border-radius: 5px 5px 5px 5px;
     }
 
     &.a-btn-disabled {
@@ -72,6 +76,8 @@
 
     &:focus {
       outline: 0;
+      border: 2px solid black;
+      border-radius: 5px 5px 5px 5px;
     }
 
     &:hover, &.a-btn-hover {

From 858611f39d729be9ea83b712a16d708a54f88b9a Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 19 Apr 2024 15:54:14 +0200
Subject: [PATCH 029/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P02-04=20c?=
 =?UTF-8?q?ontraste=20placeholder?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/backoffice/components/anonymous/LoginPage.jsx   |  4 +++-
 ui/src/backoffice/components/anonymous/LoginPage.scss  | 10 ++++++++++
 .../components/common/page/form/CenteredForm.scss      |  1 -
 .../components/common/page/form/date/Date.scss         |  2 +-
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/LoginPage.jsx b/ui/src/backoffice/components/anonymous/LoginPage.jsx
index 28c98473d..5224de84b 100644
--- a/ui/src/backoffice/components/anonymous/LoginPage.jsx
+++ b/ui/src/backoffice/components/anonymous/LoginPage.jsx
@@ -86,6 +86,7 @@ export default class LoginPage extends React.Component {
                                             onChange={event => this.setState({ identifiant: event.target.value })}
                                             error={this.state.error ? errorMessage : ''}
                                             autoComplete="username"
+                                            className="placeholder-opaque"
                                         />
 
                                         <label className="mt-3">Mot de passe</label>
@@ -96,13 +97,14 @@ export default class LoginPage extends React.Component {
                                             onChange={event => this.setState({ password: event.target.value })}
                                             error={this.state.error ? ' ' : ''}
                                             autoComplete="current-password"
+                                            className="placeholder-opaque"
                                         />
                                     </>
                                 }
                                 buttons={
                                     <div className="d-flex flex-column">
                                         <div className="mot-de-passe-oublie">
-                                            <NavLink to="/backoffice/mot-de-passe-oublie">
+                                            <NavLink to="/backoffice/mot-de-passe-oublie" style={{ color: "#0175E4" }} >
                                                 Mot de passe oublié
                                             </NavLink>
                                         </div>
diff --git a/ui/src/backoffice/components/anonymous/LoginPage.scss b/ui/src/backoffice/components/anonymous/LoginPage.scss
index 07c8a9651..509bf8a36 100644
--- a/ui/src/backoffice/components/anonymous/LoginPage.scss
+++ b/ui/src/backoffice/components/anonymous/LoginPage.scss
@@ -8,5 +8,15 @@
     font-size: 0.875rem;
   }
 
+  .placeholder-opaque::placeholder {
+    opacity: 1;
+  }
+}
+
+.Backoffice .MotDePasseOubliePage {
+
+  .placeholder-opaque::placeholder {
+    opacity: 1;
+  }
 }
 
diff --git a/ui/src/backoffice/components/common/page/form/CenteredForm.scss b/ui/src/backoffice/components/common/page/form/CenteredForm.scss
index 3ed356a05..762651538 100644
--- a/ui/src/backoffice/components/common/page/form/CenteredForm.scss
+++ b/ui/src/backoffice/components/common/page/form/CenteredForm.scss
@@ -14,7 +14,6 @@
   }
 
   .clarification {
-    color: $color-black-60;
     font-size: 0.875rem;
 
     a {
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 81c9f8864..469d5d749 100644
--- a/ui/src/backoffice/components/common/page/form/date/Date.scss
+++ b/ui/src/backoffice/components/common/page/form/date/Date.scss
@@ -21,7 +21,7 @@
 
     &::placeholder {
       color: $color-black;
-      opacity: 0.6;
+      opacity: 1;
     }
   }
 }

From a66240a51c257a7242d376aa609755d76b0cc24c Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 19 Apr 2024 16:47:51 +0200
Subject: [PATCH 030/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P02-P06=20?=
 =?UTF-8?q?focus=20sur=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/backoffice/components/anonymous/LoginPage.jsx  | 10 +++++++++-
 ui/src/backoffice/components/common/MonComptePage.jsx |  7 ++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/LoginPage.jsx b/ui/src/backoffice/components/anonymous/LoginPage.jsx
index 5224de84b..49426558d 100644
--- a/ui/src/backoffice/components/anonymous/LoginPage.jsx
+++ b/ui/src/backoffice/components/anonymous/LoginPage.jsx
@@ -19,6 +19,7 @@ export default class LoginPage extends React.Component {
 
     constructor(props) {
         super(props);
+        this.inputRef = React.createRef();
         this.state = {
             loginWithAccessToken: false,
             loading: false,
@@ -42,7 +43,13 @@ export default class LoginPage extends React.Component {
 
         login(this.state.identifiant, this.state.password)
         .then(data => this.props.onLogin(data))
-        .catch(() => this.setState({ error: true, loading: false }));
+        .catch(() => {
+            this.setState({ error: true, loading: false }, ()=>{
+                if (this.inputRef.current && this.inputRef.current.focus) {
+                    this.inputRef.current.focus();
+                }
+            });
+        });
     };
 
     handleAccessToken = data => {
@@ -87,6 +94,7 @@ export default class LoginPage extends React.Component {
                                             error={this.state.error ? errorMessage : ''}
                                             autoComplete="username"
                                             className="placeholder-opaque"
+                                            inputRef={this.inputRef}
                                         />
 
                                         <label className="mt-3">Mot de passe</label>
diff --git a/ui/src/backoffice/components/common/MonComptePage.jsx b/ui/src/backoffice/components/common/MonComptePage.jsx
index 11614560a..4b4319f1e 100644
--- a/ui/src/backoffice/components/common/MonComptePage.jsx
+++ b/ui/src/backoffice/components/common/MonComptePage.jsx
@@ -15,6 +15,7 @@ export default class MonComptePage extends React.Component {
 
     constructor(props) {
         super(props);
+        this.inputRef = React.createRef();
         this.state = {
             loading: false,
             current: '',
@@ -41,6 +42,9 @@ export default class MonComptePage extends React.Component {
             }
         }, async () => {
             let isFormValid = _.every(Object.values(this.state.errors), v => !v);
+            if (this.inputRef.current && this.inputRef.current.focus) {
+                this.inputRef.current.focus();
+            }
             if (isFormValid) {
                 this.setState({ loading: true });
 
@@ -60,7 +64,7 @@ export default class MonComptePage extends React.Component {
                     });
                 })
                 .catch(async error => {
-                    let json = await error.json;
+                    let json = await error.json();
 
                     showMessage({
                         text: json.message,
@@ -104,6 +108,7 @@ export default class MonComptePage extends React.Component {
                                         error={errors.passwordNotStrongEnough}
                                         onChange={event => this.setState({ password: event.target.value })}
                                         autoComplete="new-password"
+                                        inputRef={this.inputRef}
                                     />
 
                                     <label className="mt-3">Confirmer le nouveau mot de passe</label>

From 53c39bbc585cede4fa065d9097be4e01096531a5 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 19 Apr 2024 17:09:44 +0200
Subject: [PATCH 031/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=203.2=20cont?=
 =?UTF-8?q?raste?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/core/components/emails/common/head.mjml.ejs | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/backend/src/core/components/emails/common/head.mjml.ejs b/backend/src/core/components/emails/common/head.mjml.ejs
index fa8b3ad1b..d219a69c3 100644
--- a/backend/src/core/components/emails/common/head.mjml.ejs
+++ b/backend/src/core/components/emails/common/head.mjml.ejs
@@ -21,8 +21,7 @@
 
         .text-secondary div {
         font-size: 14px !important;
-        line-height: 18px !important;
-        opacity: 0.6 !important;
+        line-height: 18px !important;        
         }
 
         .text-tertiary div {

From 5147cb8e54042f6c8a933af50be44dd0f524e8a7 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Mon, 22 Apr 2024 17:07:22 +0200
Subject: [PATCH 032/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P07=20opti?=
 =?UTF-8?q?on=20accessible=20depuis=20clavier?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../backoffice/components/common/Dropdown.jsx | 24 ++++++++++++++-----
 ui/src/common/components/Modal.scss           | 17 +++++++++++++
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/ui/src/backoffice/components/common/Dropdown.jsx b/ui/src/backoffice/components/common/Dropdown.jsx
index d43fd5963..e7f39b870 100644
--- a/ui/src/backoffice/components/common/Dropdown.jsx
+++ b/ui/src/backoffice/components/common/Dropdown.jsx
@@ -5,18 +5,30 @@ import './Dropdown.scss';
 
 export const DropdownDivider = () => (<div className="dropdown-divider" />);
 
-export const DropdownItem = props => {
+export const DropdownItem = ({ onClick, className, children, ...props }) => {
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onClick();
+        }
+    };
+
     return (
         <a
-            className={`dropdown-item ${props.className}`}
-            {..._.omit(props, ['className', 'children'])}
-        >
-            {props.children}
+            className={`dropdown-item ${className}`}
+            onClick={onClick}
+            onKeyDown={handleKeyDown}
+            tabIndex="0"
+            role="button"
+            {...props}
+            >
+            {children}
         </a>
     );
 };
-
+  
 DropdownItem.propTypes = {
+    onClick: PropTypes.func.isRequired,
     children: PropTypes.node.isRequired,
     className: PropTypes.string,
 };
diff --git a/ui/src/common/components/Modal.scss b/ui/src/common/components/Modal.scss
index e528d7549..ed4d9542f 100644
--- a/ui/src/common/components/Modal.scss
+++ b/ui/src/common/components/Modal.scss
@@ -28,6 +28,23 @@
             font-size: 1.1rem;
             font-weight: $font-weight-bold;
           }
+
+          .modal-cross {
+            font-weight: 600;
+            box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 2px 0px;
+            background-color: rgb(77, 144, 255);
+            color: rgb(247, 248, 250);
+            height: 35px;
+            width: 50px;
+            font-size: 14px;
+            border-radius: 3px;
+            border-width: 1px;
+            border-style: solid;
+            border-color: rgb(43, 123, 255);
+            cursor: pointer;
+          }
+          
+
         }
 
         .modal-footer {

From 8a3361acca20e5363e0631f7851cd3b811fa17e7 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Tue, 23 Apr 2024 11:57:38 +0200
Subject: [PATCH 033/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P07=207.1?=
 =?UTF-8?q?=20option=20accessible=20depuis=20clavier?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/common/components/Modal.jsx | 67 ++++++++++++++++++++++++++----
 1 file changed, 60 insertions(+), 7 deletions(-)

diff --git a/ui/src/common/components/Modal.jsx b/ui/src/common/components/Modal.jsx
index bd6161e4a..58eeb1294 100644
--- a/ui/src/common/components/Modal.jsx
+++ b/ui/src/common/components/Modal.jsx
@@ -15,6 +15,7 @@ export default class Modal extends React.Component {
 
     constructor(props) {
         super(props);
+        this.modalRef = React.createRef();
         this.state = {
             showTransition: false,
         };
@@ -26,14 +27,63 @@ export default class Modal extends React.Component {
         body.style.paddingRight = '15px';
 
         this.triggerTransition();
+        document.addEventListener("keydown", this.handleTabKey);
     }
 
     componentWillUnmount() {
-        let body = document.getElementsByTagName('body')[0];
-        body.classList.remove('modal-open');
-        body.style.paddingRight = null;
+        document.removeEventListener("keydown", this.handleTabKey);
     }
 
+    handleTabKey = e => {
+        const focusableModalElements = this.modalRef.current.querySelectorAll(
+            'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'
+        );
+        const firstElement = focusableModalElements[0];
+        const secondElement = focusableModalElements[1];
+        const lastElement = focusableModalElements[2];
+
+        
+        if (e.key === "Escape") {//escape -> ferme
+            this.props.onClose();
+            return;
+        }
+        if(e.key === "Enter" && document.activeElement === firstElement) {//Entrer sur Croix -> ferme
+            this.props.onClose();
+            return;
+        }
+        else if (e.shiftKey && e.key === "Tab" && document.activeElement === firstElement) {//Shift + Tabulation sur Croix -> Confirmer
+            lastElement.focus();
+            e.preventDefault();
+        }
+        else if (!e.shiftKey && e.key === "Tab" && document.activeElement === firstElement) {//Tabulation sur Croix -> Annuler
+            secondElement.focus();
+            e.preventDefault();
+        }
+        else if (e.key === "Enter" && document.activeElement === secondElement) {//Entrer sur Annuler -> ferme
+            this.props.onClose();
+            return;
+        }
+        else if (e.shiftKey && e.key === "Tab" && document.activeElement === secondElement) {//Shift + Tabulation sur Annuler -> Croix
+            firstElement.focus();
+            e.preventDefault();
+        }
+        else if (!e.shiftKey && e.key === "Tab" && document.activeElement === secondElement) {//Tabulation sur Annuler -> Confirmer
+            lastElement.focus();
+            e.preventDefault();
+        }
+        else if (e.key === "Enter" && document.activeElement === lastElement) {//Entrer sur Confirmer -> Confirme
+            this.props.onConfirmed();
+            e.preventDefault();
+        }else if (e.shiftKey && e.key === "Tab" && document.activeElement === lastElement) {//Shift + Tabulation sur Confirmer -> Annuler
+            secondElement.focus();
+            e.preventDefault();
+        }
+        else {//Tabulation sur confirmer -> Croix
+            firstElement.focus();
+            e.preventDefault();
+        }
+    };
+
     triggerTransition() {
         setTimeout(() => this.setState({ showTransition: true }), 5);
     }
@@ -43,15 +93,18 @@ export default class Modal extends React.Component {
         let transitionClass = this.state.showTransition ? 'show' : '';
 
         return (
-            <div className="Modal">
+            <div className="Modal" aria-modal="true" aria-labelledby="dialogTitle" aria-describedby="dialog1Desc">
                 <div className={`modal-backdrop fade ${transitionClass}`} />
-                <div className={`modal fade ${transitionClass}`} tabIndex="-1" role="dialog">
+                <div className={`modal fade ${transitionClass}`} tabIndex="-1" role="dialog" ref={this.modalRef}>
                     <div className="modal-dialog" role="document">
                         <div className="modal-content">
                             <div className="modal-header">
-                                <h5 className="modal-title">{title}</h5>
+                                <h5 id="dialogTitle" className="modal-title">{title}</h5>
+                                <button className="modal-cross" title="fermer la modal" onClick={onClose}>
+                                    ✕
+                                </button>
                             </div>
-                            <div className="modal-body">
+                            <div id="dialog1Desc" className="modal-body">
                                 <div>{body}</div>
                             </div>
                             <div className="modal-footer">

From 6e6f081028391aa121be554de7eba2dba0f11e8b Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Tue, 23 Apr 2024 16:13:09 +0200
Subject: [PATCH 034/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20P07-P08=20?=
 =?UTF-8?q?11.9=20libelle=20bouton=20action=20avec=20index?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/backoffice/components/common/avis/Avis.jsx   | 13 +++++++------
 ui/src/backoffice/components/common/avis/Notes.jsx  |  4 +++-
 .../components/common/avis/buttons/EditButton.jsx   |  8 +++++++-
 .../components/common/avis/buttons/RejectButton.jsx |  9 +++++++--
 .../common/avis/buttons/RejectReponseButton.jsx     |  8 +++++++-
 .../common/avis/buttons/ValidateButton.jsx          |  9 +++++++--
 .../common/avis/buttons/ValidateReponseButton.jsx   |  8 +++++++-
 .../common/page/panel/results/AvisResults.jsx       |  6 +++---
 .../moderation-avis/ModerationAvisPage.jsx          |  3 ++-
 .../moderation-avis/ModerationReponsesPage.jsx      |  3 ++-
 10 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/ui/src/backoffice/components/common/avis/Avis.jsx b/ui/src/backoffice/components/common/avis/Avis.jsx
index cee5acf15..c1f8c9a51 100644
--- a/ui/src/backoffice/components/common/avis/Avis.jsx
+++ b/ui/src/backoffice/components/common/avis/Avis.jsx
@@ -79,7 +79,7 @@ export default class Avis extends React.Component {
 
     render() {
         let {
-            avis, renderWorkflow, showReponse, showReponseButtons,
+            avis, index, renderWorkflow, showReponse, showReponseButtons,
             showModerationButtons, showModerationReponseButtons,
         } = this.props;
         let { message, showReponseEditor } = this.state;
@@ -129,7 +129,7 @@ export default class Avis extends React.Component {
                             }
 
                             <div className="mt-2 d-none d-lg-block">
-                                <Notes avis={avis} />
+                                <Notes avis={avis} index={index}/>
                             </div>
                         </div>
                     </div>
@@ -139,11 +139,12 @@ export default class Avis extends React.Component {
                             <div className="btn-group-vertical">
                                 <EditButton
                                     avis={avis}
+                                    index={index}
                                     onChange={this.handleChange}
                                     onEdit={this.toggleCommentairesEditor}
                                 />
-                                <ValidateButton avis={avis} onChange={this.handleChange} />
-                                <RejectButton avis={avis} onChange={this.handleChange} />
+                                <ValidateButton avis={avis} index={index} onChange={this.handleChange} />
+                                <RejectButton avis={avis} index={index} onChange={this.handleChange} />
                             </div>
                         </div>
                     }
@@ -183,8 +184,8 @@ export default class Avis extends React.Component {
                         {showModerationReponseButtons &&
                         <div className={`col-sm-2 col-md-1 ${disabledClass}`}>
                             <div className="btn-group-vertical">
-                                <ValidateReponseButton avis={avis} onChange={this.handleChange} />
-                                <RejectReponseButton avis={avis} onChange={this.handleChange} />
+                                <ValidateReponseButton avis={avis} index={index} onChange={this.handleChange} />
+                                <RejectReponseButton avis={avis} index={index} onChange={this.handleChange} />
                             </div>
                         </div>
                         }
diff --git a/ui/src/backoffice/components/common/avis/Notes.jsx b/ui/src/backoffice/components/common/avis/Notes.jsx
index 8628eb6da..a0816f61d 100644
--- a/ui/src/backoffice/components/common/avis/Notes.jsx
+++ b/ui/src/backoffice/components/common/avis/Notes.jsx
@@ -19,6 +19,7 @@ export default class Notes extends React.Component {
 
     static propTypes = {
         avis: PropTypes.object.isRequired,
+        index: PropTypes.object.isRequired,
     };
 
     constructor(props) {
@@ -47,7 +48,8 @@ export default class Notes extends React.Component {
         let { avis } = this.props;
         let buttonText = (
             <span className="text">
-                Détails des notes <i className={`fas fa-angle-${this.state.showDetails ? 'up' : 'down'}`} />
+                Détails des notes <span className="sr-only">du commentaire {this.props.index}</span>
+                <i className={`fas fa-angle-${this.state.showDetails ? 'up' : 'down'}`} />
             </span>
         );
 
diff --git a/ui/src/backoffice/components/common/avis/buttons/EditButton.jsx b/ui/src/backoffice/components/common/avis/buttons/EditButton.jsx
index d7e80d69f..c283c573a 100644
--- a/ui/src/backoffice/components/common/avis/buttons/EditButton.jsx
+++ b/ui/src/backoffice/components/common/avis/buttons/EditButton.jsx
@@ -9,6 +9,7 @@ export default class EditButton extends React.Component {
 
     static propTypes = {
         avis: PropTypes.object.isRequired,
+        index: PropTypes.object.isRequired,
         onChange: PropTypes.func.isRequired,
         onEdit: PropTypes.func.isRequired,
     };
@@ -72,6 +73,11 @@ export default class EditButton extends React.Component {
     };
 
     render() {
+        let buttonText = (
+            <span className="sr-only">
+                éditer le commentaire {this.props.index}
+            </span>
+        );
         return (
             <div className="EditButton">
                 {this.state.showModal === 'resend' && this.getResendModal()}
@@ -80,7 +86,7 @@ export default class EditButton extends React.Component {
                     header="Edition"
                     button={
                         <Button size="large" color="blue" toggable={true}>
-                            <i className="fa fa-pencil-alt" />
+                            {buttonText}<i className="fa fa-pencil-alt" />
                         </Button>
                     }
                     items={
diff --git a/ui/src/backoffice/components/common/avis/buttons/RejectButton.jsx b/ui/src/backoffice/components/common/avis/buttons/RejectButton.jsx
index d55768a27..4a73ed046 100644
--- a/ui/src/backoffice/components/common/avis/buttons/RejectButton.jsx
+++ b/ui/src/backoffice/components/common/avis/buttons/RejectButton.jsx
@@ -9,6 +9,7 @@ export default class RejectButton extends React.Component {
 
     static propTypes = {
         avis: PropTypes.object.isRequired,
+        index: PropTypes.object.isRequired,
         onChange: PropTypes.func.isRequired,
     };
 
@@ -55,7 +56,11 @@ export default class RejectButton extends React.Component {
 
     render() {
         let { avis } = this.props;
-
+        let buttonText = (
+            <span className="sr-only">
+                Rejeter le commentaire {this.props.index}
+            </span>
+        );
         return (
             <div className="RejectButton">
                 {this.state.showModal && this.getModal()}
@@ -63,7 +68,7 @@ export default class RejectButton extends React.Component {
                     header="Rejeter"
                     button={
                         <Button size="large" color="red" toggable={true}>
-                            <i className="far fa-times-circle" />
+                            {buttonText}<i className="far fa-times-circle" />
                         </Button>
                     }
                     items={
diff --git a/ui/src/backoffice/components/common/avis/buttons/RejectReponseButton.jsx b/ui/src/backoffice/components/common/avis/buttons/RejectReponseButton.jsx
index d35fc5812..ea71c39c7 100644
--- a/ui/src/backoffice/components/common/avis/buttons/RejectReponseButton.jsx
+++ b/ui/src/backoffice/components/common/avis/buttons/RejectReponseButton.jsx
@@ -7,6 +7,7 @@ export default class RejectReponseButton extends React.Component {
 
     static propTypes = {
         avis: PropTypes.object.isRequired,
+        index: PropTypes.object.isRequired,
         onChange: PropTypes.func.isRequired,
     };
 
@@ -25,12 +26,17 @@ export default class RejectReponseButton extends React.Component {
     };
 
     render() {
+        let buttonText = (
+            <span className="sr-only">
+                Rejetés le commentaire {this.props.index}
+            </span>
+        );
         return (
             <div className="RejectReponseButton">
                 <Button
                     size="large" color="red" onClick={this.onClick} className="RejectReponseButton"
                     disabled={this.props.avis.reponse.status === 'rejected'}>
-                    <i className="far fa-times-circle" />
+                    {buttonText}<i className="far fa-times-circle" />
                 </Button>
             </div>
         );
diff --git a/ui/src/backoffice/components/common/avis/buttons/ValidateButton.jsx b/ui/src/backoffice/components/common/avis/buttons/ValidateButton.jsx
index 3daf159d6..922623435 100644
--- a/ui/src/backoffice/components/common/avis/buttons/ValidateButton.jsx
+++ b/ui/src/backoffice/components/common/avis/buttons/ValidateButton.jsx
@@ -8,6 +8,7 @@ export default class ValidateButton extends React.Component {
 
     static propTypes = {
         avis: PropTypes.object.isRequired,
+        index: PropTypes.object.isRequired,
         onChange: PropTypes.func.isRequired,
     };
 
@@ -24,14 +25,18 @@ export default class ValidateButton extends React.Component {
     };
 
     render() {
-
+        let buttonText = (
+            <span className="sr-only">
+                Valider et tagguer le commentaire {this.props.index}
+            </span>
+        );
         return (
             <div className="PublishButton">
                 <Dropdown
                     header="Valider et tagguer comme"
                     button={
                         <Button size="large" color="green" toggable={true}>
-                            <i className="far fa-check-circle" />
+                            {buttonText}<i className="far fa-check-circle" />
                         </Button>
                     }
                     items={
diff --git a/ui/src/backoffice/components/common/avis/buttons/ValidateReponseButton.jsx b/ui/src/backoffice/components/common/avis/buttons/ValidateReponseButton.jsx
index e24aba0b3..75d2ddf93 100644
--- a/ui/src/backoffice/components/common/avis/buttons/ValidateReponseButton.jsx
+++ b/ui/src/backoffice/components/common/avis/buttons/ValidateReponseButton.jsx
@@ -7,6 +7,7 @@ export default class ValidateReponseButton extends React.Component {
 
     static propTypes = {
         avis: PropTypes.object.isRequired,
+        index: PropTypes.object.isRequired,
         onChange: PropTypes.func.isRequired,
     };
 
@@ -24,10 +25,15 @@ export default class ValidateReponseButton extends React.Component {
 
     render() {
         let isValidated = this.props.avis.reponse.status === 'validated';
+        let buttonText = (
+            <span className="sr-only">
+                Valider le commentaire {this.props.index}
+            </span>
+        );
         return (
             <div className="PublishReponseButton">
                 <Button size="large" color="green" disabled={isValidated} onClick={this.onClick}>
-                    <i className="far fa-check-circle a-icon" />
+                    {buttonText}<i className="far fa-check-circle a-icon" />
                 </Button>
             </div>
         );
diff --git a/ui/src/backoffice/components/common/page/panel/results/AvisResults.jsx b/ui/src/backoffice/components/common/page/panel/results/AvisResults.jsx
index 44925a6bd..0a213cfb9 100644
--- a/ui/src/backoffice/components/common/page/panel/results/AvisResults.jsx
+++ b/ui/src/backoffice/components/common/page/panel/results/AvisResults.jsx
@@ -10,11 +10,11 @@ const AvisResults = ({ results, renderAvis }) => {
             {
                 results.meta.pagination.totalItems === 0 ?
                     <EmptyResults /> :
-                    results.avis.map(avis => {
+                    results.avis.map((avis, index) => {
                         return (
-                            <div key={avis._id}>
+                            <div key={avis._id} index={index}>
                                 <WithAnalytics category="avis">
-                                    {renderAvis(avis)}
+                                    {renderAvis(avis, index)}
                                     <ResultDivider />
                                 </WithAnalytics>
                             </div>
diff --git a/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx b/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
index 85eed8222..1224a45c0 100644
--- a/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
+++ b/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
@@ -179,10 +179,11 @@ export default class ModerationAvisPage extends React.Component {
                         results={
                             <AvisResults
                                 results={results}
-                                renderAvis={avis => {
+                                renderAvis={(avis, index) => {
                                     return (
                                         <Avis
                                             avis={avis}
+                                            index={index}
                                             showModerationButtons={true}
                                             renderWorkflow={avis => {
                                                 return <Workflow avis={avis} showStatus={query.statuses !== 'none'} />;
diff --git a/ui/src/backoffice/components/moderateur/moderation-avis/ModerationReponsesPage.jsx b/ui/src/backoffice/components/moderateur/moderation-avis/ModerationReponsesPage.jsx
index a54081116..afa6d2931 100644
--- a/ui/src/backoffice/components/moderateur/moderation-avis/ModerationReponsesPage.jsx
+++ b/ui/src/backoffice/components/moderateur/moderation-avis/ModerationReponsesPage.jsx
@@ -141,10 +141,11 @@ export default class ModerationReponsesPage extends React.Component {
                         results={
                             <AvisResults
                                 results={results}
-                                renderAvis={avis => {
+                                renderAvis={(avis, index) => {
                                     return (
                                         <Avis
                                             avis={avis}
+                                            index={index}
                                             renderWorkflow={() => {
                                                 return <Workflow avis={avis} showStatus={query.statuses !== 'reported'} />;
                                             }}

From f7deff916ac463f859819b834f547b593791edf8 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Tue, 23 Apr 2024 17:06:26 +0200
Subject: [PATCH 035/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20correction?=
 =?UTF-8?q?=20bug=20scroll=20Modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/common/components/Modal.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/src/common/components/Modal.jsx b/ui/src/common/components/Modal.jsx
index 58eeb1294..e8b61fa8b 100644
--- a/ui/src/common/components/Modal.jsx
+++ b/ui/src/common/components/Modal.jsx
@@ -32,6 +32,8 @@ export default class Modal extends React.Component {
 
     componentWillUnmount() {
         document.removeEventListener("keydown", this.handleTabKey);
+        let body = document.getElementsByTagName('body')[0];
+        body.classList.remove('modal-open');
     }
 
     handleTabKey = e => {

From c2091023c829cb6be9c0fa8088a75db661d33165 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Wed, 24 Apr 2024 13:52:13 +0200
Subject: [PATCH 036/128] =?UTF-8?q?feat:=20accessibilit=C3=A9=20contraste?=
 =?UTF-8?q?=20notation=20stagiaire=20email?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/questionnaire/components/formulaire/notes/note.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/src/questionnaire/components/formulaire/notes/note.scss b/ui/src/questionnaire/components/formulaire/notes/note.scss
index 3e113ed8c..54af86ffc 100644
--- a/ui/src/questionnaire/components/formulaire/notes/note.scss
+++ b/ui/src/questionnaire/components/formulaire/notes/note.scss
@@ -60,12 +60,14 @@
       }
 
       .fas.fa-star.inactive {
-        color: $color-grey-50;
+        color: $color-dark;
+        font-size: 1.25rem;
       }
 
       .fas.fa-star {
         color: $color-orange;
         cursor: pointer;
+        font-size: 1.55rem;
       }
 
       .star-tooltip {

From b9964eacc0c3b1f7fc877f156edfc5899655e16c Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Wed, 24 Apr 2024 15:26:21 +0200
Subject: [PATCH 037/128] feat: accessibilite P09 11.9 libelle bouton action
 avec index + correction faute

---
 .../common/avis/buttons/RejectReponseButton.jsx           | 2 +-
 .../gestion-organismes/GestionOrganismePage.jsx           | 3 ++-
 .../gestion-organismes/components/Organisme.jsx           | 5 +++--
 .../gestion-organismes/components/buttons/EditButton.jsx  | 8 +++++++-
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/ui/src/backoffice/components/common/avis/buttons/RejectReponseButton.jsx b/ui/src/backoffice/components/common/avis/buttons/RejectReponseButton.jsx
index ea71c39c7..7df6df542 100644
--- a/ui/src/backoffice/components/common/avis/buttons/RejectReponseButton.jsx
+++ b/ui/src/backoffice/components/common/avis/buttons/RejectReponseButton.jsx
@@ -28,7 +28,7 @@ export default class RejectReponseButton extends React.Component {
     render() {
         let buttonText = (
             <span className="sr-only">
-                Rejetés le commentaire {this.props.index}
+                Rejeter le commentaire {this.props.index}
             </span>
         );
         return (
diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
index e567a7681..1b4925e0d 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
@@ -192,11 +192,12 @@ export default class GestionOrganismePage extends React.Component {
                                         </div>
                                     }
                                     {
-                                        results.organismes.map(organisme => {
+                                        results.organismes.map((organisme, index) => {
                                             return (
                                                 <div key={organisme._id}>
                                                     <Organisme
                                                         organisme={organisme}
+                                                        index={index}
                                                         onChange={(avis, options = {}) => {
                                                             let { message } = options;
                                                             if (message) {
diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.jsx b/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.jsx
index 70ff65423..92395c7b1 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.jsx
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.jsx
@@ -8,6 +8,7 @@ export default class Organisme extends React.Component {
 
     static propTypes = {
         organisme: PropTypes.object.isRequired,
+        index: PropTypes.object.isRequired,
         onChange: PropTypes.func.isRequired,
     };
 
@@ -25,7 +26,7 @@ export default class Organisme extends React.Component {
     };
 
     render() {
-        let { organisme, onChange } = this.props;
+        let { organisme, index, onChange } = this.props;
 
         let isInactive = organisme.status === 'inactive';
         /*
@@ -80,7 +81,7 @@ export default class Organisme extends React.Component {
                 {!this.state.showEdition &&
                 <div className="col-sm-2 col-md-1">
                     <div className="btn-group-vertical">
-                        <EditButton organisme={organisme} onChange={onChange} onEdit={this.toggleEdition} />
+                        <EditButton organisme={organisme} index={index} onChange={onChange} onEdit={this.toggleEdition} />
                     </div>
                 </div>
                 }
diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/components/buttons/EditButton.jsx b/ui/src/backoffice/components/moderateur/gestion-organismes/components/buttons/EditButton.jsx
index 4f8dcc81e..9ee0b8e6a 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/components/buttons/EditButton.jsx
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/components/buttons/EditButton.jsx
@@ -8,6 +8,7 @@ export default class EditButton extends React.Component {
 
     static propTypes = {
         organisme: PropTypes.object.isRequired,
+        index: PropTypes.object.isRequired,
         onChange: PropTypes.func.isRequired,
         onEdit: PropTypes.func.isRequired,
     };
@@ -22,13 +23,18 @@ export default class EditButton extends React.Component {
     };
 
     render() {
+        let buttonText = (
+            <span className="sr-only">
+                Modifier ou supprimer {this.props.index}
+            </span>
+        );
         return (
             <div className="EditButton">
                 <Dropdown
                     header="Modifier ou supprimer"
                     button={
                         <Button size="large" color="blue" toggable={true}>
-                            <i className="fa fa-pencil-alt" />
+                            {buttonText}<i className="fa fa-pencil-alt" />
                         </Button>
                     }
                     items={

From 52357a01b0237c1e4ea57c424e3a166b9df3dc5e Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Wed, 24 Apr 2024 16:49:41 +0200
Subject: [PATCH 038/128] =?UTF-8?q?feat:=20accessibilite=20r=C3=A9initiali?=
 =?UTF-8?q?ser=20mot=20de=20passe=20-=20focus=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/anonymous/ReinitialisationMotDePassePage.jsx  | 5 +++++
 ui/src/backoffice/components/common/MonComptePage.jsx        | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx b/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
index 077ae3137..ee4cd1a16 100644
--- a/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
+++ b/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
@@ -20,6 +20,7 @@ export default class ReinitialisationMotDePassePage extends React.Component {
 
     constructor(props) {
         super(props);
+        this.inputRef = React.createRef();
         this.state = {
             loading: false,
             password: '',
@@ -62,6 +63,9 @@ export default class ReinitialisationMotDePassePage extends React.Component {
             }
         }, async () => {
             let isFormValid = _.every(Object.values(this.state.errors), v => !v);
+            if (this.inputRef.current && this.inputRef.current.focus) {
+                this.inputRef.current.focus();
+            }
             if (isFormValid) {
                 let { forgottenPasswordToken } = this.props.router.getQuery();
 
@@ -108,6 +112,7 @@ export default class ReinitialisationMotDePassePage extends React.Component {
                                             error={errors.passwordNotStrongEnough}
                                             onChange={event => this.setState({ password: event.target.value })}
                                             autoComplete="new-password"
+                                            inputRef={this.inputRef}
                                         />
 
                                         <label className="mt-3">Confirmer le nouveau mot de passe</label>
diff --git a/ui/src/backoffice/components/common/MonComptePage.jsx b/ui/src/backoffice/components/common/MonComptePage.jsx
index 4b4319f1e..490c29184 100644
--- a/ui/src/backoffice/components/common/MonComptePage.jsx
+++ b/ui/src/backoffice/components/common/MonComptePage.jsx
@@ -98,6 +98,7 @@ export default class MonComptePage extends React.Component {
                                         placeholder="Mot de passe"
                                         onChange={event => this.setState({ current: event.target.value })}
                                         autoComplete="current-password"
+                                        inputRef={this.inputRef}
                                     />
 
                                     <label className="mt-3">Nouveau mot de passe</label>
@@ -108,7 +109,6 @@ export default class MonComptePage extends React.Component {
                                         error={errors.passwordNotStrongEnough}
                                         onChange={event => this.setState({ password: event.target.value })}
                                         autoComplete="new-password"
-                                        inputRef={this.inputRef}
                                     />
 
                                     <label className="mt-3">Confirmer le nouveau mot de passe</label>

From 8c1895a8c1df860623348784fcaa36bf13aefe69 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 25 Apr 2024 11:11:14 +0200
Subject: [PATCH 039/128] feat: accessibilite P02-P03-P06 11.1  associer label
 au input

---
 ui/src/backoffice/components/anonymous/LoginPage.jsx     | 6 ++++--
 .../components/anonymous/MotDePasseOubliePage.jsx        | 3 ++-
 ui/src/backoffice/components/common/MonComptePage.jsx    | 9 ++++++---
 .../backoffice/components/common/page/form/InputText.jsx | 4 +++-
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/LoginPage.jsx b/ui/src/backoffice/components/anonymous/LoginPage.jsx
index 49426558d..48188cc6e 100644
--- a/ui/src/backoffice/components/anonymous/LoginPage.jsx
+++ b/ui/src/backoffice/components/anonymous/LoginPage.jsx
@@ -86,8 +86,9 @@ export default class LoginPage extends React.Component {
                                 title="Connexion"
                                 elements={
                                     <>
-                                        <label>Identifiant</label>
+                                        <label for="identifiant">Identifiant</label>
                                         <InputText
+                                            id="identifiant"
                                             value={this.state.identifiant}
                                             placeholder="Entrez votre SIRET"
                                             onChange={event => this.setState({ identifiant: event.target.value })}
@@ -97,8 +98,9 @@ export default class LoginPage extends React.Component {
                                             inputRef={this.inputRef}
                                         />
 
-                                        <label className="mt-3">Mot de passe</label>
+                                        <label for="motDePasse" className="mt-3">Mot de passe</label>
                                         <InputText
+                                            id="motDePasse"
                                             type="password"
                                             value={this.state.password}
                                             placeholder="Entrez votre mot de passe "
diff --git a/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx b/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
index 58a4e5cf5..e53ec0ffa 100644
--- a/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
+++ b/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
@@ -67,8 +67,9 @@ export default class MotDePasseOubliePage extends React.Component {
                                 title="Mot de passe oublié"
                                 elements={
                                     <>
-                                        <label>Entrez votre identifiant</label>
+                                        <label for="identifiant">Entrez votre identifiant</label>
                                         <InputText
+                                            id="identifiant"
                                             value={this.state.identifiant}
                                             placeholder="Identifiant"
                                             error={this.state.error}
diff --git a/ui/src/backoffice/components/common/MonComptePage.jsx b/ui/src/backoffice/components/common/MonComptePage.jsx
index 490c29184..4f4930651 100644
--- a/ui/src/backoffice/components/common/MonComptePage.jsx
+++ b/ui/src/backoffice/components/common/MonComptePage.jsx
@@ -91,8 +91,9 @@ export default class MonComptePage extends React.Component {
                             title="Mise à jour du mot de passe"
                             elements={
                                 <>
-                                    <label>Mot de passe actuel</label>
+                                    <label for="motDePasseActu">Mot de passe actuel</label>
                                     <InputText
+                                        id="motDePasseActu"
                                         type="password"
                                         value={this.state.current}
                                         placeholder="Mot de passe"
@@ -101,8 +102,9 @@ export default class MonComptePage extends React.Component {
                                         inputRef={this.inputRef}
                                     />
 
-                                    <label className="mt-3">Nouveau mot de passe</label>
+                                    <label for="motDePasseNew" className="mt-3">Nouveau mot de passe</label>
                                     <InputText
+                                        id="motDePasseNew"
                                         type="password"
                                         value={this.state.password}
                                         placeholder="Mot de passe"
@@ -111,8 +113,9 @@ export default class MonComptePage extends React.Component {
                                         autoComplete="new-password"
                                     />
 
-                                    <label className="mt-3">Confirmer le nouveau mot de passe</label>
+                                    <label for="motDePasseConf" className="mt-3">Confirmer le nouveau mot de passe</label>
                                     <InputText
+                                        id="motDePasseConf"
                                         type="password"
                                         value={this.state.confirmation}
                                         placeholder="Mot de passe"
diff --git a/ui/src/backoffice/components/common/page/form/InputText.jsx b/ui/src/backoffice/components/common/page/form/InputText.jsx
index 6b14603c2..e01101858 100644
--- a/ui/src/backoffice/components/common/page/form/InputText.jsx
+++ b/ui/src/backoffice/components/common/page/form/InputText.jsx
@@ -7,6 +7,7 @@ import './InputText.scss';
 export default class InputText extends React.Component {
 
     static propTypes = {
+        id: PropTypes.node,
         icon: PropTypes.node,
         reset: PropTypes.func,
         error: PropTypes.string,
@@ -20,7 +21,7 @@ export default class InputText extends React.Component {
     }
 
     render() {
-        let { icon, reset, error, inputRef } = this.props;
+        let { id, icon, reset, error, inputRef } = this.props;
 
         return (
             <div className="InputText">
@@ -34,6 +35,7 @@ export default class InputText extends React.Component {
 
                     <input
                         type="text"
+                        id={id}
                         autocomplete={this.autoComplete?this.autoComplete:null}
                         className={`${this.icon ? 'with-icon' : ''} ${this.reset ? 'with-reset' : ''} ${this.error ? 'with-error' : ''}`}
                         ref={inputRef || this.inputRef}

From 2c6f9bb18abb7864f1699e01dec32f3ef00fc015 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 25 Apr 2024 11:28:49 +0200
Subject: [PATCH 040/128] feat: accessibilite P06 9.1 titre

---
 .../backoffice/components/common/page/form/CenteredForm.jsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/backoffice/components/common/page/form/CenteredForm.jsx b/ui/src/backoffice/components/common/page/form/CenteredForm.jsx
index e84448eab..55ad60907 100644
--- a/ui/src/backoffice/components/common/page/form/CenteredForm.jsx
+++ b/ui/src/backoffice/components/common/page/form/CenteredForm.jsx
@@ -9,9 +9,9 @@ export const CenteredForm = props => {
             <div className="offset-sm-2 col-sm-8 offset-lg-4 col-lg-4">
                 <Form>
                     <div className="d-flex flex-column">
-                        <div className="d-flex justify-content-center title mb-3">
+                        <h1 className="d-flex justify-content-center title mb-3">
                             {props.title}
-                        </div>
+                        </h1>
                         {props.elements}
                         <div className="d-flex justify-content-around mt-3">
                             {props.buttons}

From 258d7cb6b850951abaad8645668923a53c55ae1b Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Thu, 25 Apr 2024 12:02:40 +0200
Subject: [PATCH 041/128] fix: corrige affiche home

---
 backend/src/http/site/pages/homepage.ejs | 173 ++++++++++++-----------
 1 file changed, 87 insertions(+), 86 deletions(-)

diff --git a/backend/src/http/site/pages/homepage.ejs b/backend/src/http/site/pages/homepage.ejs
index 7ea2caea2..186190732 100644
--- a/backend/src/http/site/pages/homepage.ejs
+++ b/backend/src/http/site/pages/homepage.ejs
@@ -16,103 +16,104 @@
 
 <body>
     <%- include('./common/header.ejs'); %>
-
-    <main role="content" id="contents" class=" content-intro">
-        <div class="stagiaire">
-            <h2>Vous avez <strong>suivi une formation<br />professionnelle</strong> ?</h2>
-            <p>
-                En tant que Demandeur d'Emploi, vous avez la possibilité de donner votre avis anonymement afin
-                d'aider les futurs stagiaires à choisir leur formation.
-            </p>
-            <a class="button" href="/services/stagiaires">En savoir plus <img src="/static/images/arrow.svg" /></a>
-        </div>
-        <div class="organisme">
-            <h2>Vous êtes un <strong>professionnel<br />de la formation</strong> ?</h2>
-            <p>
-                <strong>Organisme de formation ou financeur</strong>, connectez-vous à votre Espace Anotéa pour
-                consulter les avis laissés par les stagiaires Demandeurs d'Emploi.
-            </p>
-            <a class="button" href="/services/organismes">En savoir plus <img src="/static/images/arrow.svg" /></a>
+    <main role="content" id="contents">
+        <div class=" content-intro">
+            <div class="stagiaire">
+                <h2>Vous avez <strong>suivi une formation<br />professionnelle</strong> ?</h2>
+                <p>
+                    En tant que Demandeur d'Emploi, vous avez la possibilité de donner votre avis anonymement afin
+                    d'aider les futurs stagiaires à choisir leur formation.
+                </p>
+                <a class="button" href="/services/stagiaires">En savoir plus <img src="/static/images/arrow.svg" /></a>
+            </div>
+            <div class="organisme">
+                <h2>Vous êtes un <strong>professionnel<br />de la formation</strong> ?</h2>
+                <p>
+                    <strong>Organisme de formation ou financeur</strong>, connectez-vous à votre Espace Anotéa pour
+                    consulter les avis laissés par les stagiaires Demandeurs d'Emploi.
+                </p>
+                <a class="button" href="/services/organismes">En savoir plus <img src="/static/images/arrow.svg" /></a>
+            </div>
+            <img class="illustration" src="/static/images/intro.svg" />
         </div>
-        <img class="illustration" src="/static/images/intro.svg" />
-    </div>
 
-    <div class="video-wrapper">
-        <div class="video" tag="1001">
-            <!-- <iframe src="https://www.youtube-nocookie.com/embed/PuRV3A50C9g" frameborder="0"
-                        align="center"
-                        allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
-                        allowfullscreen></iframe> -->
+        <div class="video-wrapper">
+            <div class="video" tag="1001">
+                <!-- <iframe src="https://www.youtube-nocookie.com/embed/PuRV3A50C9g" frameborder="0"
+                            align="center"
+                            allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
+                            allowfullscreen></iframe> -->
+            </div>
         </div>
-    </div>
 
-    <div class="stats">
-        <h2>Anotéa c'est déjà :</h2>
+        <div class="stats">
+            <h2>Anotéa c'est déjà :</h2>
 
-        <div class="avis">
-            <h3><%= avisCount %><img src="/static/images/Icone_Message.svg" /></h3>
-            <p>Avis recueillis</p>
-        </div>
+            <div class="avis">
+                <h3><%= avisCount %><img src="/static/images/Icone_Message.svg" /></h3>
+                <p>Avis recueillis</p>
+            </div>
 
-        <div class="organismes">
-            <h3><%= organismesCount %> <img src="/static/images/ic_formation.svg" /></h3>
-            <p>Organismes évalués par leurs stagiaires</p>
-        </div>
+            <div class="organismes">
+                <h3><%= organismesCount %> <img src="/static/images/ic_formation.svg" /></h3>
+                <p>Organismes évalués par leurs stagiaires</p>
+            </div>
 
-        <div class="stagiaires">
-            <h3><%= stagiairesCount %> <img src="/static/images/user.png" /></h3>
-            <p>Stagiaires interrogés</p>
+            <div class="stagiaires">
+                <h3><%= stagiairesCount %> <img src="/static/images/user.png" /></h3>
+                <p>Stagiaires interrogés</p>
+            </div>
         </div>
-    </div>
 
-    <div class="partenaires">
-        <h2>Des partenaires de confiance</h2>
-        <div>
-            <img src="/static/images/partenaires/logo-occitanie.png" />
-            <img src="/static/images/partenaires/logo-hauts-de-france.png" />
-            <img src="/static/images/partenaires/logo-bourgogne-franche-comte.png" />
-            <img src="/static/images/partenaires/logo-bretagne.png" /></a>
-            <a href="https://www.defi-metiers.fr"><img src="/static/images/partenaires/logo_defimetier.png" /></a>
-        </div>
-        <div>
-            <img src="/static/images/partenaires/Martinique_Collectivite_Territoriale_logo_2016.png" />
-            <a
-                href="https://www.francetravail.fr/candidat/application-mobile-pole-emploi-ma-formation--@/article.jspz?id=676671"><img
-                    src="/static/images/partenaires/FT-APP-MA-FORMATION-96px.svg" height="88px" /></a>
-            <a href="http://www.orientation-paysdelaloire.fr/"><img
-                    src="/static/images/partenaires/logo-pays-de-la-loire.png" /></a>
-            <img src="/static/images/partenaires/logo-ile-de-france.png" />
+        <div class="partenaires">
+            <h2>Des partenaires de confiance</h2>
+            <div>
+                <img src="/static/images/partenaires/logo-occitanie.png" />
+                <img src="/static/images/partenaires/logo-hauts-de-france.png" />
+                <img src="/static/images/partenaires/logo-bourgogne-franche-comte.png" />
+                <img src="/static/images/partenaires/logo-bretagne.png" /></a>
+                <a href="https://www.defi-metiers.fr"><img src="/static/images/partenaires/logo_defimetier.png" /></a>
+            </div>
+            <div>
+                <img src="/static/images/partenaires/Martinique_Collectivite_Territoriale_logo_2016.png" />
+                <a
+                    href="https://www.francetravail.fr/candidat/application-mobile-pole-emploi-ma-formation--@/article.jspz?id=676671"><img
+                        src="/static/images/partenaires/FT-APP-MA-FORMATION-96px.svg" height="88px" /></a>
+                <a href="http://www.orientation-paysdelaloire.fr/"><img
+                        src="/static/images/partenaires/logo-pays-de-la-loire.png" /></a>
+                <img src="/static/images/partenaires/logo-ile-de-france.png" />
+            </div>
         </div>
-    </div>
 
-    <div class="services">
-        <h1>Pour plus de transparence sur la formation</h1>
-        <ul>
-            <li class="organismes">
-                <div><img class="icon" src="/static/images/services/Illu_OF(1).svg" /></div>
-                <h2>Pour les organismes de formation</h2>
-                <p>Permettre aux Organismes de répondre
-                    aux commentaires des stagiaires
-                    et diffuser ces réponses en ligne</p>
-                <a href="/services/organismes">En savoir plus<img src="/static/images/arrow-grey.svg" /></a>
-            </li>
-            <li class="financeurs">
-                <div><img class="icon" src="/static/images/services/Picto_Financeur.svg" /></div>
-                <h2>Pour les financeurs</h2>
-                <p>Porter les notes et commentaires à la connaissance
-                    des financeurs publics de formation
-                </p>
-                <a href="/services/financeurs">En savoir plus<img src="/static/images/arrow-grey.svg" /></a>
-            </li>
-            <li class="stagiaires last">
-                <div><img class="icon" src="/static/images/services/Picto_Stagiaire.svg" /></div>
-                <h2>Pour les anciens et futurs stagiaires</h2>
-                <p>Guider les futurs stagiaires
-                    dans leur choix de formation
-                    grâce aux avis des anciens stagiaires.</p>
-                <a href="/services/stagiaires">En savoir plus<img src="/static/images/arrow-grey.svg" /></a>
-            </li>
-        </ul>
+        <div class="services">
+            <h1>Pour plus de transparence sur la formation</h1>
+            <ul>
+                <li class="organismes">
+                    <div><img class="icon" src="/static/images/services/Illu_OF(1).svg" /></div>
+                    <h2>Pour les organismes de formation</h2>
+                    <p>Permettre aux Organismes de répondre
+                        aux commentaires des stagiaires
+                        et diffuser ces réponses en ligne</p>
+                    <a href="/services/organismes">En savoir plus<img src="/static/images/arrow-grey.svg" /></a>
+                </li>
+                <li class="financeurs">
+                    <div><img class="icon" src="/static/images/services/Picto_Financeur.svg" /></div>
+                    <h2>Pour les financeurs</h2>
+                    <p>Porter les notes et commentaires à la connaissance
+                        des financeurs publics de formation
+                    </p>
+                    <a href="/services/financeurs">En savoir plus<img src="/static/images/arrow-grey.svg" /></a>
+                </li>
+                <li class="stagiaires last">
+                    <div><img class="icon" src="/static/images/services/Picto_Stagiaire.svg" /></div>
+                    <h2>Pour les anciens et futurs stagiaires</h2>
+                    <p>Guider les futurs stagiaires
+                        dans leur choix de formation
+                        grâce aux avis des anciens stagiaires.</p>
+                    <a href="/services/stagiaires">En savoir plus<img src="/static/images/arrow-grey.svg" /></a>
+                </li>
+            </ul>
+        </div>
     </main>
 
     <%- include('./common/contact.ejs'); %>

From 218aeb41917231927f9f4af92f33af647ea6a59a Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 25 Apr 2024 13:57:56 +0200
Subject: [PATCH 042/128] feat: accessibilite P01 9.1 titre

---
 .../emails/stagiaires/avisStagiaireEmail.mjml.ejs         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs b/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
index 9c457cb48..f4e7fa62d 100644
--- a/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
+++ b/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
@@ -10,7 +10,7 @@
             <mj-section padding-bottom="0">
                 <mj-column>
                     <mj-text css-class="text-primary">
-                        Donnez-nous votre avis en 1 minute.
+                       <h1 style="font-size: 24px;">Donnez-nous votre avis en 1 minute.</h1>
                     </mj-text>
                     <mj-text css-class="text-secondary">
                         Vous avez suivi la formation de <%= stagiaire.formation.intitule %>
@@ -35,14 +35,14 @@
             <mj-section padding-top="0" padding-bottom="0">
                 <mj-column>
                     <mj-text font-size="16px" font-weight="bold">
-                        100% anonyme
+                        <h2 style="font-size: 16px;margin: initial;">100% anonyme</h2>
                     </mj-text>
                     <mj-text css-class="text-secondary">
                         Cet avis est totalement anonyme.
                     </mj-text>
 
                     <mj-text font-size="16px" font-weight="bold">
-                        Participer à l'amélioration des formations
+                        <h2 style="font-size: 16px;margin: initial;">Participer à l'amélioration des formations</h2>
                     </mj-text>
                     <mj-text css-class="text-secondary">
                         Donnez des retours directs aux centres de formation ainsi qu'à France Travail.
@@ -53,7 +53,7 @@
             <mj-section padding-top="0">
                 <mj-column>
                     <mj-text font-size="16px" font-weight="bold">
-                        Aider les prochains à faire le bon choix
+                        <h2 style="font-size: 16px;margin: initial;">Aider les prochains à faire le bon choix</h2>
                     </mj-text>
                     <mj-text css-class="text-secondary">
                         Votre avis sera publié sur plusieurs plateformes.

From 7f3b3ed3af818549b0e05f8af7674c8ece109ade Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 25 Apr 2024 14:41:40 +0200
Subject: [PATCH 043/128] feat: accessibilite 8.6 titre onglet

---
 backend/src/http/site/pages/cgu.ejs                       | 2 +-
 backend/src/http/site/pages/errors/401.ejs                | 2 +-
 backend/src/http/site/pages/errors/403.ejs                | 2 +-
 backend/src/http/site/pages/errors/404.ejs                | 2 +-
 backend/src/http/site/pages/errors/error.ejs              | 2 +-
 backend/src/http/site/pages/errors/formationNotFound.ejs  | 2 +-
 backend/src/http/site/pages/faq_financeurs.ejs            | 2 +-
 backend/src/http/site/pages/faq_organismes.ejs            | 2 +-
 backend/src/http/site/pages/faq_stagiaires.ejs            | 2 +-
 backend/src/http/site/pages/homepage.ejs                  | 2 +-
 backend/src/http/site/pages/politique-confidentialite.ejs | 2 +-
 backend/src/http/site/pages/unsubscribe.ejs               | 2 +-
 backend/src/http/site/pages/widget.ejs                    | 2 +-
 ui/public/index.html                                      | 2 +-
 14 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/backend/src/http/site/pages/cgu.ejs b/backend/src/http/site/pages/cgu.ejs
index 9ab09e539..62609eabe 100644
--- a/backend/src/http/site/pages/cgu.ejs
+++ b/backend/src/http/site/pages/cgu.ejs
@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="google-site-verification" content="<%= utils.analytics.googleSiteVerification %>" />
-    <title>France Travail : Notez et commentez votre formation</title>
+    <title>Mentions légales | Anotéa</title>
     <link rel="icon" type="image/png" href="/static/images/favicon.ico" />
     <link rel="stylesheet" type="text/css" href="/static/css/cgu.css" media="all">
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
diff --git a/backend/src/http/site/pages/errors/401.ejs b/backend/src/http/site/pages/errors/401.ejs
index cae325538..4ed86b555 100644
--- a/backend/src/http/site/pages/errors/401.ejs
+++ b/backend/src/http/site/pages/errors/401.ejs
@@ -5,7 +5,7 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>France Travail : Notez et commentez votre formation</title>
+        <title>Accès interdit | Anotéa</title>
         <link rel="stylesheet" type="text/css" href="/static/css/errors.css" media="all">
         <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
     </head>
diff --git a/backend/src/http/site/pages/errors/403.ejs b/backend/src/http/site/pages/errors/403.ejs
index df52b7bd5..81cd3b1d2 100644
--- a/backend/src/http/site/pages/errors/403.ejs
+++ b/backend/src/http/site/pages/errors/403.ejs
@@ -5,7 +5,7 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>France Travail : Notez et commentez votre formation</title>
+        <title>Accès refusé | Anotéa</title>
         <link rel="stylesheet" type="text/css" href="/static/css/errors.css" media="all">
         <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
     </head>
diff --git a/backend/src/http/site/pages/errors/404.ejs b/backend/src/http/site/pages/errors/404.ejs
index 15758c47a..830726a2b 100644
--- a/backend/src/http/site/pages/errors/404.ejs
+++ b/backend/src/http/site/pages/errors/404.ejs
@@ -5,7 +5,7 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>France Travail : Notez et commentez votre formation</title>
+        <title>Page introuvable | Anotéa</title>
         <link rel="stylesheet" type="text/css" href="/static/css/errors.css" media="all">
         <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
     </head>
diff --git a/backend/src/http/site/pages/errors/error.ejs b/backend/src/http/site/pages/errors/error.ejs
index d3e3f84a3..c705cbed1 100644
--- a/backend/src/http/site/pages/errors/error.ejs
+++ b/backend/src/http/site/pages/errors/error.ejs
@@ -5,7 +5,7 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>France Travail : Notez et commentez votre formation</title>
+        <title>Erreur interne du serveur | Anotéa</title>
         <link rel="stylesheet" type="text/css" href="/static/css/errors.css" media="all">
         <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
     </head>
diff --git a/backend/src/http/site/pages/errors/formationNotFound.ejs b/backend/src/http/site/pages/errors/formationNotFound.ejs
index 79f695ef5..33e1e3339 100644
--- a/backend/src/http/site/pages/errors/formationNotFound.ejs
+++ b/backend/src/http/site/pages/errors/formationNotFound.ejs
@@ -5,7 +5,7 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>France Travail : Notez et commentez votre formation</title>
+        <title>Formation introuvable | Anotéa</title>
         <link rel="stylesheet" type="text/css" href="/static/css/errors.css" media="all">
         <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
     </head>
diff --git a/backend/src/http/site/pages/faq_financeurs.ejs b/backend/src/http/site/pages/faq_financeurs.ejs
index 0dc2b1889..f45ff9372 100644
--- a/backend/src/http/site/pages/faq_financeurs.ejs
+++ b/backend/src/http/site/pages/faq_financeurs.ejs
@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="google-site-verification" content="<%= utils.analytics.googleSiteVerification %>" />
-    <title>France Travail : Notez et commentez votre formation</title>
+    <title>Vous êtes financeur de formation ? | Anotéa</title>
     <link rel="icon" type="image/png" href="/static/images/favicon.ico" />
     <link rel="stylesheet" type="text/css" href="/static/css/faq.css" media="all">
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
diff --git a/backend/src/http/site/pages/faq_organismes.ejs b/backend/src/http/site/pages/faq_organismes.ejs
index dc2d535b7..ee55342bf 100644
--- a/backend/src/http/site/pages/faq_organismes.ejs
+++ b/backend/src/http/site/pages/faq_organismes.ejs
@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="google-site-verification" content="<%= utils.analytics.googleSiteVerification %>" />
-    <title>France Travail : Notez et commentez votre formation</title>
+    <title>Vous êtes un organisme de la formation ? | Anotéa</title>
     <link rel="icon" type="image/png" href="/static/images/favicon.ico" />
     <link rel="stylesheet" type="text/css" href="/static/css/faq.css" media="all">
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
diff --git a/backend/src/http/site/pages/faq_stagiaires.ejs b/backend/src/http/site/pages/faq_stagiaires.ejs
index 7740da5c8..d8384fc5e 100644
--- a/backend/src/http/site/pages/faq_stagiaires.ejs
+++ b/backend/src/http/site/pages/faq_stagiaires.ejs
@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="google-site-verification" content="<%= utils.analytics.googleSiteVerification %>" />
-    <title>France Travail : Notez et commentez votre formation</title>
+    <title>Vous souhaitez déposer votre avis ? | Anotéa</title>
     <link rel="icon" type="image/png" href="/static/images/favicon.ico" />
     <link rel="stylesheet" type="text/css" href="/static/css/faq.css" media="all">
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
diff --git a/backend/src/http/site/pages/homepage.ejs b/backend/src/http/site/pages/homepage.ejs
index 186190732..f995a1d57 100644
--- a/backend/src/http/site/pages/homepage.ejs
+++ b/backend/src/http/site/pages/homepage.ejs
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-    <title>France Travail : Notez et commentez votre formation</title>
+    <title>Vous avez suivi une formation professionnelle ? | Anotéa</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/backend/src/http/site/pages/politique-confidentialite.ejs b/backend/src/http/site/pages/politique-confidentialite.ejs
index 9a3481fdf..185fc56c8 100644
--- a/backend/src/http/site/pages/politique-confidentialite.ejs
+++ b/backend/src/http/site/pages/politique-confidentialite.ejs
@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="google-site-verification" content="<%= utils.analytics.googleSiteVerification %>" />
-    <title>France Travail : Notez et commentez votre formation</title>
+    <title>Charte de protection des données à caractère personnel | Anotéa</title>
     <link rel="icon" type="image/png" href="/static/images/favicon.ico" />
     <link rel="stylesheet" type="text/css" href="/static/css/cgu.css" media="all">
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
diff --git a/backend/src/http/site/pages/unsubscribe.ejs b/backend/src/http/site/pages/unsubscribe.ejs
index e88f04a96..e0ce4c18b 100644
--- a/backend/src/http/site/pages/unsubscribe.ejs
+++ b/backend/src/http/site/pages/unsubscribe.ejs
@@ -5,7 +5,7 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>France Travail : Notez et commentez votre formation</title>
+        <title>Vous avez été désinscrit avec succès | Anotéa</title>
         <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
     </head>
 
diff --git a/backend/src/http/site/pages/widget.ejs b/backend/src/http/site/pages/widget.ejs
index 323d989fb..7ce588659 100644
--- a/backend/src/http/site/pages/widget.ejs
+++ b/backend/src/http/site/pages/widget.ejs
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="fr">
     <head>
-        <title>Anotea - Documentation Widget</title>
+        <title>Documentation Widget | Anotéa</title>
 
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta name="description"
diff --git a/ui/public/index.html b/ui/public/index.html
index 17db26b69..eaee67a01 100644
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="fr">
     <head>
-        <title>Anotea</title>
+        <title>Anotéa</title>
 
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

From b117c5f9ebb09ffbf7c1c5f09c7929095cab1265 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 25 Apr 2024 14:42:27 +0200
Subject: [PATCH 044/128] feat: accessibilite P02-P03 11.11

---
 ui/src/backoffice/components/anonymous/LoginPage.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/src/backoffice/components/anonymous/LoginPage.jsx b/ui/src/backoffice/components/anonymous/LoginPage.jsx
index 48188cc6e..ee1bd3ee1 100644
--- a/ui/src/backoffice/components/anonymous/LoginPage.jsx
+++ b/ui/src/backoffice/components/anonymous/LoginPage.jsx
@@ -96,7 +96,9 @@ export default class LoginPage extends React.Component {
                                             autoComplete="username"
                                             className="placeholder-opaque"
                                             inputRef={this.inputRef}
+                                            aria-describedby="exemple-siret"
                                         />
+                                        <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>
                                         <InputText

From 1bbf82bb33e203b7156fa2cbe37764675ee21ad3 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 25 Apr 2024 15:12:10 +0200
Subject: [PATCH 045/128] feat: accessibilite P01 8.9 balise p

---
 .../components/emails/accounts/footer.mjml.ejs |  2 +-
 .../components/emails/common/contact.mjml.ejs  |  2 +-
 .../components/emails/common/head.mjml.ejs     |  8 ++++++++
 .../components/emails/common/header.mjml.ejs   |  6 +-----
 .../emails/common/signature.mjml.ejs           |  4 ++--
 .../emails/organismes/footer.mjml.ejs          |  6 +++---
 .../stagiaires/avisStagiaireEmail.mjml.ejs     | 18 ++++++++++--------
 .../emails/stagiaires/footer.mjml.ejs          |  6 +++---
 8 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/backend/src/core/components/emails/accounts/footer.mjml.ejs b/backend/src/core/components/emails/accounts/footer.mjml.ejs
index 2aba7b587..fe475eee7 100644
--- a/backend/src/core/components/emails/accounts/footer.mjml.ejs
+++ b/backend/src/core/components/emails/accounts/footer.mjml.ejs
@@ -2,7 +2,7 @@
     <mj-column>
         <mj-text>
             <div class="text-tertiary">
-                <h4>Protection des données à caractère personnel</h4>
+                <h2>Protection des données à caractère personnel</h2>
                 <p>France Travail, en tant que responsable du traitement, utilise vos données pour délivrer le service décrit à l’article 1 [des mentions légales] . Elles peuvent également être utilisées pour des finalités statistiques et d’amélioration du service. </p>
                 <p>La base juridique de ce traitement est la mission d’intérêt public que le service permet d’exécuter en application de l’article L. 5312-1 du code du travail.</p>
                 <p>Vos données sont destinées à être transmises aux administrateurs du site.</p>
diff --git a/backend/src/core/components/emails/common/contact.mjml.ejs b/backend/src/core/components/emails/common/contact.mjml.ejs
index 320156ff7..c704b1a56 100644
--- a/backend/src/core/components/emails/common/contact.mjml.ejs
+++ b/backend/src/core/components/emails/common/contact.mjml.ejs
@@ -1,7 +1,7 @@
 <mj-section padding-top="0">
     <mj-column>
         <mj-text css-class="text-secondary">
-            Si vous avez une question
+            <p>Si vous avez une question</p>
         </mj-text>
 
         <mj-button
diff --git a/backend/src/core/components/emails/common/head.mjml.ejs b/backend/src/core/components/emails/common/head.mjml.ejs
index d219a69c3..8747d261e 100644
--- a/backend/src/core/components/emails/common/head.mjml.ejs
+++ b/backend/src/core/components/emails/common/head.mjml.ejs
@@ -29,6 +29,14 @@
         line-height: 16px !important;
         }
 
+        .text-tertiary h2 {
+        font-size: 16px !important;
+        }
+
+        p{
+            margin:0;
+        }
+
         .text-highlighted div {
         color: #F28017 !important;
         font-weight: bold !important;
diff --git a/backend/src/core/components/emails/common/header.mjml.ejs b/backend/src/core/components/emails/common/header.mjml.ejs
index 38f263ac1..417d8381e 100644
--- a/backend/src/core/components/emails/common/header.mjml.ejs
+++ b/backend/src/core/components/emails/common/header.mjml.ejs
@@ -9,11 +9,7 @@
             <mj-image align="left" padding-left="10px" width="132px" alt="Anotéa France Travail"
                       src="<%= utils.getPublicUrl('/static/images/logo_Anotea_Horizontal_baseline.png') %>" />
         </mj-column>
-        <mj-column vertical-align="middle" width="20%">
-            <mj-text>
-                &nbsp;
-            </mj-text>
-        </mj-column>
+        <mj-column vertical-align="middle" width="20%"></mj-column>
         <% if (showConseilRegional) { %>
             <mj-column vertical-align="middle" width="20%" border-right="1px solid #F4F4F5">
                 <mj-image padding-right="5px" width="110px" alt="France Travail"
diff --git a/backend/src/core/components/emails/common/signature.mjml.ejs b/backend/src/core/components/emails/common/signature.mjml.ejs
index 1f8f181eb..80f2a1be4 100644
--- a/backend/src/core/components/emails/common/signature.mjml.ejs
+++ b/backend/src/core/components/emails/common/signature.mjml.ejs
@@ -1,7 +1,7 @@
 <mj-text css-class="text-secondary" padding-bottom="0">
-    Cordialement.
+    <p>Cordialement.</p>
 </mj-text>
 
 <mj-text css-class="text-secondary" padding-top="0">
-    L'équipe Anotéa.
+    <p>L'équipe Anotéa.</p>
 </mj-text>
diff --git a/backend/src/core/components/emails/organismes/footer.mjml.ejs b/backend/src/core/components/emails/organismes/footer.mjml.ejs
index b4cc93049..17e271505 100644
--- a/backend/src/core/components/emails/organismes/footer.mjml.ejs
+++ b/backend/src/core/components/emails/organismes/footer.mjml.ejs
@@ -2,7 +2,7 @@
     <mj-column>
         <mj-text>
             <div class="text-tertiary">
-                <h4>Protection des données à caractère personnel</h4>
+                <h2>Protection des données à caractère personnel</h2>
                 <p>France Travail, en tant que responsable du traitement, utilise vos données pour délivrer le service décrit à l’article 1 [des mentions légales] . Elles peuvent également être utilisées pour des finalités statistiques et d’amélioration du service. </p>
                 <p>La base juridique de ce traitement est la mission d’intérêt public que le service permet d’exécuter en application de l’article L. 5312-1 du code du travail.</p>
                 <p>Vos données sont destinées à être transmises aux administrateurs du site.</p>
@@ -12,12 +12,12 @@
         </mj-text>
         <mj-text>
             <div class="text-tertiary">
-                Si vous ne parvenez pas à lire ce mail,
+                <p>Si vous ne parvenez pas à lire ce mail,
                 <a href="<%= utils.getConsultationLink('organismes', templateName, organisme.token, locals.avis ? avis.token : null) %>"
                    target="_blank"
                    class="link">
                     cliquez-ici
-                </a>
+                </a></p>
             </div>
         </mj-text>
     </mj-column>
diff --git a/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs b/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
index f4e7fa62d..364f5f03a 100644
--- a/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
+++ b/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.mjml.ejs
@@ -13,10 +13,12 @@
                        <h1 style="font-size: 24px;">Donnez-nous votre avis en 1 minute.</h1>
                     </mj-text>
                     <mj-text css-class="text-secondary">
-                        Vous avez suivi la formation de <%= stagiaire.formation.intitule %>
-                        du <%= utils.moment(stagiaire.formation.action.session.periode.debut).format('DD/MM/YYYY') %>
-                        au <%= utils.moment(stagiaire.formation.action.session.periode.fin).format('DD/MM/YYYY') %>
-                        à <%= stagiaire.formation.action.organisme_formateur.raison_sociale %>.
+                        <p>
+                            Vous avez suivi la formation de <%= stagiaire.formation.intitule %>
+                            du <%= utils.moment(stagiaire.formation.action.session.periode.debut).format('DD/MM/YYYY') %>
+                            au <%= utils.moment(stagiaire.formation.action.session.periode.fin).format('DD/MM/YYYY') %>
+                            à <%= stagiaire.formation.action.organisme_formateur.raison_sociale %>.
+                        </p>
                     </mj-text>
 
                     <mj-button
@@ -28,7 +30,7 @@
                         Evaluer ma formation
                     </mj-button>
 
-                    <mj-divider border-width="2px" border-color="#F4F4F5" />
+                    <mj-divider border-width="2px" border-color="#F4F4F5" role="none" aria-hidden="true"/>
                 </mj-column>
             </mj-section>
 
@@ -38,14 +40,14 @@
                         <h2 style="font-size: 16px;margin: initial;">100% anonyme</h2>
                     </mj-text>
                     <mj-text css-class="text-secondary">
-                        Cet avis est totalement anonyme.
+                        <p>Cet avis est totalement anonyme.</p>
                     </mj-text>
 
                     <mj-text font-size="16px" font-weight="bold">
                         <h2 style="font-size: 16px;margin: initial;">Participer à l'amélioration des formations</h2>
                     </mj-text>
                     <mj-text css-class="text-secondary">
-                        Donnez des retours directs aux centres de formation ainsi qu'à France Travail.
+                        <p>Donnez des retours directs aux centres de formation ainsi qu'à France Travail.</p>
                     </mj-text>
                 </mj-column>
             </mj-section>
@@ -56,7 +58,7 @@
                         <h2 style="font-size: 16px;margin: initial;">Aider les prochains à faire le bon choix</h2>
                     </mj-text>
                     <mj-text css-class="text-secondary">
-                        Votre avis sera publié sur plusieurs plateformes.
+                        <p>Votre avis sera publié sur plusieurs plateformes.</p>
                     </mj-text>
                 </mj-column>
             </mj-section>
diff --git a/backend/src/core/components/emails/stagiaires/footer.mjml.ejs b/backend/src/core/components/emails/stagiaires/footer.mjml.ejs
index a21db89d8..ec9745e04 100644
--- a/backend/src/core/components/emails/stagiaires/footer.mjml.ejs
+++ b/backend/src/core/components/emails/stagiaires/footer.mjml.ejs
@@ -2,7 +2,7 @@
     <mj-column>
         <mj-text>
             <div class="text-tertiary">
-                <h4>Protection des données à caractère personnel</h4>
+                <h2>Protection des données à caractère personnel</h2>
                 <p>France Travail, en tant que responsable du traitement, utilise vos données pour délivrer le service décrit à l’article 1 [des mentions légales] . Elles peuvent également être utilisées pour des finalités statistiques et d’amélioration du service. </p>
                 <p>La base juridique de ce traitement est la mission d’intérêt public que le service permet d’exécuter en application de l’article L. 5312-1 du code du travail.</p>
                 <p>Vos données sont destinées à être transmises aux administrateurs du site.</p>
@@ -18,11 +18,11 @@
         </mj-text>
         <mj-text>
             <div class="text-tertiary">
-                Si vous ne parvenez pas à lire ce mail,
+                <p>Si vous ne parvenez pas à lire ce mail,
                 <a href="<%= utils.getConsultationLink('stagiaires', templateName, stagiaire.token) %>"
                    target="_blank" class="link">
                     cliquez-ici
-                </a>
+                </a></p>
             </div>
         </mj-text>
     </mj-column>

From 82bd66083584baf09787f1d6daa7bf6a6658c0b0 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 25 Apr 2024 15:38:46 +0200
Subject: [PATCH 046/128] feat: accessibilite 6.1 pagination

---
 ui/src/backoffice/Backoffice.jsx              |  2 +-
 .../page/panel/pagination/Pagination.jsx      | 22 +++++++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/ui/src/backoffice/Backoffice.jsx b/ui/src/backoffice/Backoffice.jsx
index 05bec28c3..5c474a626 100644
--- a/ui/src/backoffice/Backoffice.jsx
+++ b/ui/src/backoffice/Backoffice.jsx
@@ -153,7 +153,7 @@ class Backoffice extends Component {
                     <div className="Backoffice">
                         <Header
                             items={header}
-                            defaultPath={`/backoffice/${account.profile}`}
+                            defaultPath={``}
                             onLogout={this.onLogout}
                         />
                         {routes}
diff --git a/ui/src/backoffice/components/common/page/panel/pagination/Pagination.jsx b/ui/src/backoffice/components/common/page/panel/pagination/Pagination.jsx
index f59fb7696..2c44d7291 100644
--- a/ui/src/backoffice/components/common/page/panel/pagination/Pagination.jsx
+++ b/ui/src/backoffice/components/common/page/panel/pagination/Pagination.jsx
@@ -39,12 +39,12 @@ export default class Pagination extends React.Component {
                 <div className="offset-4 col-4 d-flex justify-content-center">
                     <ul className="pagination">
                         <li className={`page-item ${isFirstPage ? 'active' : ''}`}>
-                            <a href="/#" className="page-link" onClick={e => this.onClick(e, 1)}>1</a>
+                            <a href="/#" className="page-link" onClick={e => this.onClick(e, 1)} aria-label="page 1">1</a>
                         </li>
                         {
                             (totalPages > 5 && currentPage > 3) &&
-                            <li className="page-item disabled">
-                                <a href="/#" className="page-link">...</a>
+                            <li className="page-item disabled" aria-hidden="true">
+                                <p className="page-link">...</p>
                             </li>
                         }
                         {
@@ -53,7 +53,8 @@ export default class Pagination extends React.Component {
                                 <a
                                     href="/#"
                                     className="page-link"
-                                    onClick={e => this.onClick(e, previousPage)}>{previousPage}
+                                    onClick={e => this.onClick(e, previousPage)}
+                                    aria-label={`page ${previousPage}`}>{previousPage}
                                 </a>
                             </li>
                         }
@@ -63,24 +64,27 @@ export default class Pagination extends React.Component {
                                 <a
                                     href="/#"
                                     className="page-link"
-                                    onClick={e => this.onClick(e, currentPage)}>{currentPage}
+                                    onClick={e => this.onClick(e, currentPage)}
+                                    aria-label={`page ${currentPage}`}>{currentPage}
                                 </a>
                             </li>
                         }
                         {
                             (nextPage < lastPage) &&
                             <li className="page-item">
-                                <a href="/#" className="page-link" onClick={e => this.onClick(e, nextPage)}>{nextPage}</a>
+                                <a href="/#" className="page-link" onClick={e => this.onClick(e, nextPage)}
+                                aria-label={`page ${nextPage}`}>{nextPage}</a>
                             </li>
                         }
                         {
                             (currentPage < totalPages - 2) &&
-                            <li className="page-item disabled">
-                                <a href="/#" className="page-link">...</a>
+                            <li className="page-item disabled" aria-hidden="true">
+                                <p className="page-link">...</p>
                             </li>
                         }
                         <li className={`page-item ${isLastPage && 'active'}`}>
-                            <a href="/#" className="page-link" onClick={e => this.onClick(e, lastPage)}>{lastPage}</a>
+                            <a href="/#" className="page-link" onClick={e => this.onClick(e, lastPage)}
+                            aria-label={`page ${lastPage}`}>{lastPage}</a>
                         </li>
                     </ul>
                 </div>

From 323844402f0f143e6a3234fb637cbdc56b853239 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 25 Apr 2024 16:09:37 +0200
Subject: [PATCH 047/128] feat: accessibilite P07-P08 10.12 mode mobile

---
 ui/src/backoffice/components/common/avis/Formation.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/src/backoffice/components/common/avis/Formation.scss b/ui/src/backoffice/components/common/avis/Formation.scss
index 9fdf1436c..bbd408f22 100644
--- a/ui/src/backoffice/components/common/avis/Formation.scss
+++ b/ui/src/backoffice/components/common/avis/Formation.scss
@@ -13,6 +13,10 @@
     color: $color-black;
     text-decoration: underline;
     margin-bottom: 0.3rem;
+    
+    @media (max-width:768px) {
+      word-break: break-all;
+    }
   }
 }
 

From 9d710795884bec5e3f1c41ab98f055e0675908de Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 25 Apr 2024 16:11:02 +0200
Subject: [PATCH 048/128] feat: accessibilite 10.7 focus input

---
 .../backoffice/components/common/page/Page.scss   |  6 ++++++
 .../components/common/page/form/InputText.scss    |  3 ---
 .../components/common/page/form/Select.scss       |  2 +-
 .../components/common/page/form/date/Date.scss    |  4 ----
 ui/src/common/components/Button.scss              | 15 ---------------
 .../formulaire/commentaire/commentaire.scss       |  1 -
 .../components/formulaire/notes/note.scss         |  1 -
 7 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/ui/src/backoffice/components/common/page/Page.scss b/ui/src/backoffice/components/common/page/Page.scss
index 03d2acef4..0f5c97949 100644
--- a/ui/src/backoffice/components/common/page/Page.scss
+++ b/ui/src/backoffice/components/common/page/Page.scss
@@ -27,4 +27,10 @@
   .panel-holder {
     height: 100%;
   }
+
+  .form-control:focus{
+    outline:2px solid black;
+    box-shadow: none;
+    border-color: transparent;
+  }
 }
diff --git a/ui/src/backoffice/components/common/page/form/InputText.scss b/ui/src/backoffice/components/common/page/form/InputText.scss
index c8f77063e..8c44f3461 100644
--- a/ui/src/backoffice/components/common/page/form/InputText.scss
+++ b/ui/src/backoffice/components/common/page/form/InputText.scss
@@ -58,9 +58,6 @@
       }
     }
 
-    &:focus {
-      outline: none;
-    }
 
     &::placeholder {
       color: $color-black;
diff --git a/ui/src/backoffice/components/common/page/form/Select.scss b/ui/src/backoffice/components/common/page/form/Select.scss
index 8969e8769..6ce70a918 100644
--- a/ui/src/backoffice/components/common/page/form/Select.scss
+++ b/ui/src/backoffice/components/common/page/form/Select.scss
@@ -17,7 +17,7 @@
 
   .Select__control--is-focused {
     background-color: $color-grey-5;
-    box-shadow: 0 0 1px 3px #C3C9E5;
+    box-shadow: 0 0 0px 2px black;
   }
 
   .Select__clear-indicator {
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 469d5d749..ea4604239 100644
--- a/ui/src/backoffice/components/common/page/form/date/Date.scss
+++ b/ui/src/backoffice/components/common/page/form/date/Date.scss
@@ -15,10 +15,6 @@
     padding-right: 0.25rem;
 
 
-    &:focus {
-      outline: none;
-    }
-
     &::placeholder {
       color: $color-black;
       opacity: 1;
diff --git a/ui/src/common/components/Button.scss b/ui/src/common/components/Button.scss
index c642d3156..7893a6019 100644
--- a/ui/src/common/components/Button.scss
+++ b/ui/src/common/components/Button.scss
@@ -18,11 +18,6 @@
     padding: 0.25rem 0.5rem;
     text-transform: uppercase;
 
-    &:focus {
-      outline: 0;
-      border: 2px solid black;
-      border-radius: 5px 5px 5px 5px;
-    }
 
     &:hover, &.a-btn-hover {
       border-radius: 5px;
@@ -45,11 +40,6 @@
     padding: 0.375rem 0.5rem;
     text-transform: uppercase;
 
-    &:focus {
-      outline: 0;
-      border: 2px solid black;
-      border-radius: 5px 5px 5px 5px;
-    }
 
     &.a-btn-disabled {
       @include disable-button($color-white, $color-grey-25);
@@ -74,11 +64,6 @@
     padding: 0.75rem 0.5rem;
     text-transform: uppercase;
 
-    &:focus {
-      outline: 0;
-      border: 2px solid black;
-      border-radius: 5px 5px 5px 5px;
-    }
 
     &:hover, &.a-btn-hover {
       border: 1px solid $background-color-hover;
diff --git a/ui/src/questionnaire/components/formulaire/commentaire/commentaire.scss b/ui/src/questionnaire/components/formulaire/commentaire/commentaire.scss
index 26d20849f..af88203ab 100644
--- a/ui/src/questionnaire/components/formulaire/commentaire/commentaire.scss
+++ b/ui/src/questionnaire/components/formulaire/commentaire/commentaire.scss
@@ -35,7 +35,6 @@
     border-radius: 5px;
     border: none;
     resize: none;
-    outline: none;
     background-color: $color-grey-5;
     padding: 0.5rem;
     font-size: 0.9rem;
diff --git a/ui/src/questionnaire/components/formulaire/notes/note.scss b/ui/src/questionnaire/components/formulaire/notes/note.scss
index 54af86ffc..a3cbf6503 100644
--- a/ui/src/questionnaire/components/formulaire/notes/note.scss
+++ b/ui/src/questionnaire/components/formulaire/notes/note.scss
@@ -52,7 +52,6 @@
       .star {
         border: none;
         background: transparent;
-        outline: none;
         padding-left: 0;
         font-size: 1.25rem;
         margin: 0;

From 41a3b8099c6e4018a2c46a6b6765cf5247a16fb8 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 25 Apr 2024 16:29:14 +0200
Subject: [PATCH 049/128] feat: accessibilite P07-P09 11.1 association label -
 input

---
 .../moderateur/gestion-organismes/GestionOrganismePage.jsx    | 4 +++-
 .../moderateur/moderation-avis/ModerationAvisPage.jsx         | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
index 1b4925e0d..6d980aee3 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
@@ -98,9 +98,11 @@ export default class GestionOrganismePage extends React.Component {
                         <Form className="a-width-50">
                             <div className="d-flex justify-content-between">
                                 <div className="flex-grow-1 mr-2">
+                                <label className="sr-only" for="recherche-organisme">Rechercher un organisme</label>
                                     <InputText
                                         value={this.state.form.search}
-                                        placeholder="Recherche un organisme"
+                                        id="recherche-organisme"
+                                        placeholder="Rechercher un organisme"
                                         icon={<i className="fas fa-search" />}
                                         reset={() => this.setState({ form: { search: '' } })}
                                         onChange={event => this.setState({ form: { search: event.target.value } })}
diff --git a/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx b/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
index 1224a45c0..7db7ceb93 100644
--- a/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
+++ b/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
@@ -113,9 +113,11 @@ export default class ModerationAvisPage extends React.Component {
                         <Form className="a-width-50">
                             <div className="d-flex justify-content-between">
                                 <div className="flex-grow-1 mr-2">
+                                    <label className="sr-only" for="recherche-avis">Rechercher un avis</label>
                                     <InputText
+                                        id="recherche-avis"
                                         value={this.state.fulltext}
-                                        placeholder="Recherche un avis"
+                                        placeholder="Rechercher un avis"
                                         icon={<i className="fas fa-search" />}
                                         reset={() => this.setState({ fulltext: '' })}
                                         onChange={event => this.setState({ fulltext: event.target.value })}

From 2fe0c503f7275ae6b71e077e6e67ef35872a4eb1 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 25 Apr 2024 16:49:54 +0200
Subject: [PATCH 050/128] feat: accessibilite P01 11.10 formulaire login

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

diff --git a/ui/src/backoffice/components/anonymous/LoginPage.jsx b/ui/src/backoffice/components/anonymous/LoginPage.jsx
index ee1bd3ee1..4bc4d0a13 100644
--- a/ui/src/backoffice/components/anonymous/LoginPage.jsx
+++ b/ui/src/backoffice/components/anonymous/LoginPage.jsx
@@ -86,6 +86,7 @@ export default class LoginPage extends React.Component {
                                 title="Connexion"
                                 elements={
                                     <>
+                                        <p className="clarification mt-1">Tous les champs sont obligatoires.</p>
                                         <label for="identifiant">Identifiant</label>
                                         <InputText
                                             id="identifiant"
@@ -97,6 +98,7 @@ export default class LoginPage extends React.Component {
                                             className="placeholder-opaque"
                                             inputRef={this.inputRef}
                                             aria-describedby="exemple-siret"
+                                            required
                                         />
                                         <p id="exemple-siret" className="clarification mt-1">Le numero de SIRET se compose de 14 chiffres.<br/>Exemple&nbsp;:&nbsp;01234567890123</p>
 
@@ -110,6 +112,7 @@ export default class LoginPage extends React.Component {
                                             error={this.state.error ? ' ' : ''}
                                             autoComplete="current-password"
                                             className="placeholder-opaque"
+                                            required
                                         />
                                     </>
                                 }
diff --git a/ui/src/backoffice/components/common/page/form/FormError.jsx b/ui/src/backoffice/components/common/page/form/FormError.jsx
index 0e842df1d..cf1b1ddf0 100644
--- a/ui/src/backoffice/components/common/page/form/FormError.jsx
+++ b/ui/src/backoffice/components/common/page/form/FormError.jsx
@@ -12,9 +12,9 @@ export default class FormError extends React.Component {
         let { children } = this.props;
 
         return (
-            <div className="FormError">
+            <p className="FormError">
                 {children}
-            </div>
+            </p>
         );
     }
 }
diff --git a/ui/src/backoffice/components/common/page/form/InputText.jsx b/ui/src/backoffice/components/common/page/form/InputText.jsx
index e01101858..c56505bc9 100644
--- a/ui/src/backoffice/components/common/page/form/InputText.jsx
+++ b/ui/src/backoffice/components/common/page/form/InputText.jsx
@@ -39,6 +39,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}
                         {..._.omit(this.props, ['icon', 'reset', 'error'])}
                     />
 

From 35c641d7e2cea771ad711d68f1a1362f5a941ceb Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 25 Apr 2024 17:31:28 +0200
Subject: [PATCH 051/128] feat: accessibilite 9.3 liste notatation

---
 .../common/avis/charts/NoteRepartition.jsx    | 44 +++++++++----------
 .../common/avis/charts/NoteRepartition.scss   | 10 +++++
 2 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/ui/src/backoffice/components/common/avis/charts/NoteRepartition.jsx b/ui/src/backoffice/components/common/avis/charts/NoteRepartition.jsx
index 9a90c0100..10bd73103 100644
--- a/ui/src/backoffice/components/common/avis/charts/NoteRepartition.jsx
+++ b/ui/src/backoffice/components/common/avis/charts/NoteRepartition.jsx
@@ -8,15 +8,15 @@ const NoteGauges = props => {
     let percentage = value => `${Math.round((value / props.total) * 100)}%`;
 
     return (
-        <div className="NoteGauges">
+        <li className="NoteGauges">
             <div className="moyenne">
                 <div className="label">{props.label}</div>
                 <div className="note">
                     <span className="value">{props.note.moyenne}</span>/5<Star />
                 </div>
             </div>
-            <div className="d-flex flex-column">
-                <div className="repartition">
+            <ul className="d-flex flex-column no-space">
+                <li className="repartition">
                     <div className="definition">
                         5 <Star />
                     </div>
@@ -26,8 +26,8 @@ const NoteGauges = props => {
                     <div className="percentage">
                         {percentage(props.note['5'])}
                     </div>
-                </div>
-                <div className="repartition">
+                </li>
+                <li className="repartition">
                     <div className="definition">
                         4 <Star />
                     </div>
@@ -37,8 +37,8 @@ const NoteGauges = props => {
                     <div className="percentage">
                         {percentage(props.note['4'])}
                     </div>
-                </div>
-                <div className="repartition">
+                </li>
+                <li className="repartition">
                     <div className="definition">
                         3 <Star />
                     </div>
@@ -48,8 +48,8 @@ const NoteGauges = props => {
                     <div className="percentage">
                         {percentage(props.note['3'])}
                     </div>
-                </div>
-                <div className="repartition">
+                </li>
+                <li className="repartition">
                     <div className="definition">
                         2 <Star />
                     </div>
@@ -59,8 +59,8 @@ const NoteGauges = props => {
                     <div className="percentage">
                         {percentage(props.note['2'])}
                     </div>
-                </div>
-                <div className="repartition">
+                </li>
+                <li className="repartition">
                     <div className="definition">
                         1 <Star />
                     </div>
@@ -70,9 +70,9 @@ const NoteGauges = props => {
                     <div className="percentage">
                         {percentage(props.note['1'])}
                     </div>
-                </div>
-            </div>
-        </div>
+                </li>
+            </ul>
+        </li>
     );
 };
 
@@ -110,14 +110,14 @@ const NoteRepartition = ({ notes, total }) => {
     return (
         <div className="NoteRepartition">
             <div className="title">Les notes</div>
-            <div className="box d-flex flex-wrap justify-content-between">
-                <NoteGlobale note={notes.global} total={total} />
-                <NoteGauges label="Accueil" note={notes.accueil} total={total} />
-                <NoteGauges label="Contenu" note={notes.contenu_formation} total={total} />
-                <NoteGauges label="Formateurs" note={notes.equipe_formateurs} total={total} />
-                <NoteGauges label="Matériels" note={notes.moyen_materiel} total={total} />
-                <NoteGauges label="Accompagnement" note={notes.accompagnement} total={total} />
-            </div>
+            <ul className="box d-flex flex-wrap no-list justify-content-between">
+                    <NoteGlobale note={notes.global} total={total} />
+                    <NoteGauges label="Accueil" note={notes.accueil} total={total} />
+                    <NoteGauges label="Contenu" note={notes.contenu_formation} total={total} />
+                    <NoteGauges label="Formateurs" note={notes.equipe_formateurs} total={total} />
+                    <NoteGauges label="Matériels" note={notes.moyen_materiel} total={total} />
+                    <NoteGauges label="Accompagnement" note={notes.accompagnement} total={total} />
+            </ul>
         </div>
     );
 };
diff --git a/ui/src/backoffice/components/common/avis/charts/NoteRepartition.scss b/ui/src/backoffice/components/common/avis/charts/NoteRepartition.scss
index c599fc69d..441b6c0a7 100644
--- a/ui/src/backoffice/components/common/avis/charts/NoteRepartition.scss
+++ b/ui/src/backoffice/components/common/avis/charts/NoteRepartition.scss
@@ -104,5 +104,15 @@
       }
     }
   }
+
+  .no-list{
+    list-style: none;
+  }
+
+  .no-space{
+    list-style: none;
+    margin:0;
+    padding: 0;
+  }
 }
 

From 8adcd42978b67327177c2127a3cd7e8d495be42c Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 26 Apr 2024 10:16:48 +0200
Subject: [PATCH 052/128] feat: accessibilite P04 9.1 balisage titre

---
 .../components/common/avis/charts/CommentairesPies.jsx          | 2 +-
 .../components/common/avis/charts/CommentairesPies.scss         | 1 -
 .../components/common/avis/charts/NoteRepartition.jsx           | 2 +-
 .../components/common/avis/charts/NoteRepartition.scss          | 1 -
 .../components/financeur/components/FinanceurForm.jsx           | 1 +
 5 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx
index 6092014a1..2fb9a53fc 100644
--- a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx
+++ b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx
@@ -9,7 +9,7 @@ const CommentairesPies = ({ stats }) => {
 
     return (
         <div className="CommentairesPies">
-            <div className="title">Les commentaires</div>
+            <h2 className="title">Les commentaires</h2>
             <div className="box d-flex flex-wrap flex-row">
                 <div className="chart first">
                     <div className="title">Modération des commentaires</div>
diff --git a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss
index f437c29f2..62262184f 100644
--- a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss
+++ b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss
@@ -4,7 +4,6 @@
 
   .title {
     padding-top: 1rem;
-    padding-bottom: 1rem;
     font-size: 1.5rem;
     font-weight: $font-weight-boldest;
   }
diff --git a/ui/src/backoffice/components/common/avis/charts/NoteRepartition.jsx b/ui/src/backoffice/components/common/avis/charts/NoteRepartition.jsx
index 10bd73103..d42f46604 100644
--- a/ui/src/backoffice/components/common/avis/charts/NoteRepartition.jsx
+++ b/ui/src/backoffice/components/common/avis/charts/NoteRepartition.jsx
@@ -109,7 +109,7 @@ const NoteRepartition = ({ notes, total }) => {
 
     return (
         <div className="NoteRepartition">
-            <div className="title">Les notes</div>
+            <h2 className="title">Les notes</h2>
             <ul className="box d-flex flex-wrap no-list justify-content-between">
                     <NoteGlobale note={notes.global} total={total} />
                     <NoteGauges label="Accueil" note={notes.accueil} total={total} />
diff --git a/ui/src/backoffice/components/common/avis/charts/NoteRepartition.scss b/ui/src/backoffice/components/common/avis/charts/NoteRepartition.scss
index 441b6c0a7..0b8c7cce2 100644
--- a/ui/src/backoffice/components/common/avis/charts/NoteRepartition.scss
+++ b/ui/src/backoffice/components/common/avis/charts/NoteRepartition.scss
@@ -4,7 +4,6 @@
 
   .title {
     padding-top: 0.875rem;
-    padding-bottom: 0.875rem;
     font-size: 1.5rem;
     font-weight: $font-weight-boldest;
   }
diff --git a/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx b/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
index fb5b88972..b36f9b4de 100644
--- a/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
+++ b/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
@@ -91,6 +91,7 @@ export default class FinanceurForm extends React.Component {
         let { store, loadFormations } = this.props;
 
         return <Form>
+            <h1 className="sr-only">Avis Stagiaire</h1>
             <div className="form-row  FinanceurAvisChartsPanel">
                 <div className="form-group col-lg-6 col-xl-3">
                     <fieldset>

From 96e1d3bb559227b3d971454040e514c27ed3c875 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 26 Apr 2024 10:27:09 +0200
Subject: [PATCH 053/128] feat : accessibilite P02-P03 9.1 balisage titre

---
 ui/src/backoffice/components/common/page/Page.jsx             | 4 ++--
 .../backoffice/components/common/page/form/CenteredForm.jsx   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/src/backoffice/components/common/page/Page.jsx b/ui/src/backoffice/components/common/page/Page.jsx
index e3b008fa8..d43f26f0b 100644
--- a/ui/src/backoffice/components/common/page/Page.jsx
+++ b/ui/src/backoffice/components/common/page/Page.jsx
@@ -15,9 +15,9 @@ const Page = props => {
 
                 {props.title &&
                 <div className="title-holder">
-                    <div className="container">
+                    <h1 className="container">
                         {props.title}
-                    </div>
+                    </h1>
                 </div>
                 }
 
diff --git a/ui/src/backoffice/components/common/page/form/CenteredForm.jsx b/ui/src/backoffice/components/common/page/form/CenteredForm.jsx
index 55ad60907..c7519d054 100644
--- a/ui/src/backoffice/components/common/page/form/CenteredForm.jsx
+++ b/ui/src/backoffice/components/common/page/form/CenteredForm.jsx
@@ -9,9 +9,9 @@ export const CenteredForm = props => {
             <div className="offset-sm-2 col-sm-8 offset-lg-4 col-lg-4">
                 <Form>
                     <div className="d-flex flex-column">
-                        <h1 className="d-flex justify-content-center title mb-3">
+                        <h2 className="d-flex justify-content-center title mb-3">
                             {props.title}
-                        </h1>
+                        </h2>
                         {props.elements}
                         <div className="d-flex justify-content-around mt-3">
                             {props.buttons}

From fa5ce08bf82d597a08f2e612644d6f821d68a2d7 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 26 Apr 2024 11:09:03 +0200
Subject: [PATCH 054/128] feat: accessibilite P05 9.1 balisage titre

---
 ui/src/backoffice/components/anonymous/StatsPage.jsx   |  1 +
 .../components/anonymous/components/AvisStats.jsx      | 10 ++++------
 .../components/anonymous/components/FormationStats.jsx |  4 ++--
 .../anonymous/components/ModerationStats.jsx           | 10 ++++------
 .../components/anonymous/components/OrganismeStats.jsx | 10 ++++------
 .../anonymous/components/StagiairesStats.jsx           |  4 ++--
 .../components/anonymous/components/StatsForm.jsx      |  2 +-
 7 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/StatsPage.jsx b/ui/src/backoffice/components/anonymous/StatsPage.jsx
index 0437683c6..b4a3a0b74 100644
--- a/ui/src/backoffice/components/anonymous/StatsPage.jsx
+++ b/ui/src/backoffice/components/anonymous/StatsPage.jsx
@@ -51,6 +51,7 @@ export default class StatsPage extends React.Component {
         return (
             <Page
                 className="StatsPage"
+                title="Statistique nationale et régionale"
                 form={<StatsForm query={query} store={this.state.store} onSubmit={this.onSubmit} />}
                 panel={<StatsPanel query={query} store={this.state.store} />}
             />
diff --git a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
index 7f01dedc9..2b6ec55f5 100644
--- a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
@@ -19,12 +19,10 @@ export default class AvisStats extends React.Component {
         return (
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
-                    <div className="title">
-                        <div>
-                            <i className="far fa-comment-alt a-icon"></i>
-                            Avis
-                        </div>
-                    </div>
+                    <h2 className="title">
+                        <i className="far fa-comment-alt a-icon"></i>
+                        Avis
+                    </h2>
                     <div className="d-flex justify-content-between flex-wrap">
                         <div className="stats">
                             <div className="name">Total avis déposés</div>
diff --git a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
index 8697e1de7..dfe252e78 100644
--- a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
@@ -19,13 +19,13 @@ export default class FormationStats extends React.Component {
         return (
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
-                    <div className="title">
+                    <h2 className="title">
                         <div>
                             <i className="fas fa-graduation-cap a-icon"></i>
                             Formations
                         </div>
                         <div className="description">(source Intercarif)</div>
-                    </div>
+                    </h2>
                     <div className="d-flex justify-content-between flex-wrap">
                         <div className="stats">
                             <div className="name">Formations en ligne</div>
diff --git a/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx b/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
index 5117d6082..9bcab08ac 100644
--- a/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
@@ -18,12 +18,10 @@ export default class ModerationStats extends React.Component {
         return (
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
-                    <div className="title">
-                        <div>
-                            <i className="far fa-comment-alt a-icon"></i>
-                            Modération
-                        </div>
-                    </div>
+                    <h2 className="title">
+                        <i className="far fa-comment-alt a-icon"></i>
+                        Modération
+                    </h2>
                     <div className="d-flex justify-content-between flex-wrap">
                         <div className="stats">
                             <div className="name">Avis à modérer</div>
diff --git a/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx b/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
index ba137d11b..60f50797e 100644
--- a/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
@@ -18,12 +18,10 @@ export default class OrganismeStats extends React.Component {
         return (
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
-                    <div className="title">
-                        <div>
-                            <i className="far fa-comment-alt a-icon"></i>
-                            Organismes
-                        </div>
-                    </div>
+                    <h2 className="title">
+                        <i className="far fa-comment-alt a-icon"></i>
+                        Organismes
+                    </h2>
                     <div className="d-flex justify-content-between flex-wrap">
                         <div className="stats">
                             <div className="name">Organismes actifs</div>
diff --git a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
index 1ca044af5..67e9be7ac 100644
--- a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
@@ -28,10 +28,10 @@ export default class StagiairesStats extends React.Component {
             <div className="Stats">
                 <div className="main d-flex justify-content-center justify-content-lg-between">
                     <div className="d-flex flex-column">
-                        <div className="title">
+                        <h2 className="title">
                             <i className="far fa-user a-icon"></i>
                             Stagiaires
-                        </div>
+                        </h2>
                         <div className="d-flex justify-content-around flex-wrap">
                             <div className="stats">
                                 <div className="name">Nombre de stagiaires contactés</div>
diff --git a/ui/src/backoffice/components/anonymous/components/StatsForm.jsx b/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
index 715803aef..44295c698 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
@@ -56,7 +56,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>Regions</label>
+                            <h2 style={{fontSize: "1.125rem", fontWeight: 700}}>Filtrer par région</h2>
                             <Select
                                 placeholder={'Toutes les régions'}
                                 trackingId="Regions"

From 7ca319eb2b58415ea22229ecc4fde907c2279cc0 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 26 Apr 2024 11:28:42 +0200
Subject: [PATCH 055/128] feat: accessibilite P06 9.1 balisage titre

---
 .../components/anonymous/StatsPage.jsx        |   1 -
 .../anonymous/components/StatsForm.jsx        |   1 +
 .../components/common/MonComptePage.jsx       | 103 +++++++++---------
 3 files changed, 54 insertions(+), 51 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/StatsPage.jsx b/ui/src/backoffice/components/anonymous/StatsPage.jsx
index b4a3a0b74..0437683c6 100644
--- a/ui/src/backoffice/components/anonymous/StatsPage.jsx
+++ b/ui/src/backoffice/components/anonymous/StatsPage.jsx
@@ -51,7 +51,6 @@ export default class StatsPage extends React.Component {
         return (
             <Page
                 className="StatsPage"
-                title="Statistique nationale et régionale"
                 form={<StatsForm query={query} store={this.state.store} onSubmit={this.onSubmit} />}
                 panel={<StatsPanel query={query} store={this.state.store} />}
             />
diff --git a/ui/src/backoffice/components/anonymous/components/StatsForm.jsx b/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
index 44295c698..c2e675ac8 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
@@ -53,6 +53,7 @@ export default class StatsForm extends React.Component {
 
         return (
             <div className="d-flex justify-content-center">
+                <h1 className="sr-only">Statistique nationale et régionale</h1>
                 <Form className="a-width-50">
                     <div className="d-flex justify-content-between align-items-end">
                         <div className="flex-grow-1 mr-2">
diff --git a/ui/src/backoffice/components/common/MonComptePage.jsx b/ui/src/backoffice/components/common/MonComptePage.jsx
index 4f4930651..5a6481a41 100644
--- a/ui/src/backoffice/components/common/MonComptePage.jsx
+++ b/ui/src/backoffice/components/common/MonComptePage.jsx
@@ -87,58 +87,61 @@ export default class MonComptePage extends React.Component {
             panel={
                 <Panel
                     results={
-                        <CenteredForm
-                            title="Mise à jour du mot de passe"
-                            elements={
-                                <>
-                                    <label for="motDePasseActu">Mot de passe actuel</label>
-                                    <InputText
-                                        id="motDePasseActu"
-                                        type="password"
-                                        value={this.state.current}
-                                        placeholder="Mot de passe"
-                                        onChange={event => this.setState({ current: event.target.value })}
-                                        autoComplete="current-password"
-                                        inputRef={this.inputRef}
-                                    />
+                        <div>
+                            <h1 className="sr-only">Statistique nationale et régionale</h1>
+                            <CenteredForm
+                                title="Mise à jour du mot de passe"
+                                elements={
+                                    <>
+                                        <label for="motDePasseActu">Mot de passe actuel</label>
+                                        <InputText
+                                            id="motDePasseActu"
+                                            type="password"
+                                            value={this.state.current}
+                                            placeholder="Mot de passe"
+                                            onChange={event => this.setState({ current: event.target.value })}
+                                            autoComplete="current-password"
+                                            inputRef={this.inputRef}
+                                        />
 
-                                    <label for="motDePasseNew" className="mt-3">Nouveau mot de passe</label>
-                                    <InputText
-                                        id="motDePasseNew"
-                                        type="password"
-                                        value={this.state.password}
-                                        placeholder="Mot de passe"
-                                        error={errors.passwordNotStrongEnough}
-                                        onChange={event => this.setState({ password: event.target.value })}
-                                        autoComplete="new-password"
-                                    />
+                                        <label for="motDePasseNew" className="mt-3">Nouveau mot de passe</label>
+                                        <InputText
+                                            id="motDePasseNew"
+                                            type="password"
+                                            value={this.state.password}
+                                            placeholder="Mot de passe"
+                                            error={errors.passwordNotStrongEnough}
+                                            onChange={event => this.setState({ password: event.target.value })}
+                                            autoComplete="new-password"
+                                        />
 
-                                    <label for="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.isNotSamePassword}
-                                        onChange={event => this.setState({ confirmation: event.target.value })}
-                                        autoComplete="new-password"
-                                    />
-                                </>
-                            }
-                            buttons={
-                                <>
-                                    <Button
-                                        type="submit"
-                                        size="large"
-                                        color={theme.buttonColor}
-                                        disabled={this.state.loading}
-                                        onClick={() => this.onSubmit()}
-                                    >
-                                        Confirmer
-                                    </Button>
-                                </>
-                            }
-                        />
+                                        <label for="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.isNotSamePassword}
+                                            onChange={event => this.setState({ confirmation: event.target.value })}
+                                            autoComplete="new-password"
+                                        />
+                                    </>
+                                }
+                                buttons={
+                                    <>
+                                        <Button
+                                            type="submit"
+                                            size="large"
+                                            color={theme.buttonColor}
+                                            disabled={this.state.loading}
+                                            onClick={() => this.onSubmit()}
+                                        >
+                                            Confirmer
+                                        </Button>
+                                    </>
+                                }
+                            />
+                        </div>
                     }
                 />
             }

From 232586bd6e046d936b916bcecf65276f503fc774 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 26 Apr 2024 13:33:55 +0200
Subject: [PATCH 056/128] feat: accessibilite P07-P08 9.1 balisage titre

---
 ui/src/backoffice/components/common/avis/Avis.jsx     | 2 +-
 ui/src/backoffice/components/common/avis/Reponse.jsx  | 2 +-
 ui/src/backoffice/components/common/avis/Reponse.scss | 7 +++++++
 ui/src/backoffice/components/common/avis/Titre.jsx    | 2 +-
 ui/src/backoffice/components/common/avis/Titre.scss   | 7 +++++++
 5 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/ui/src/backoffice/components/common/avis/Avis.jsx b/ui/src/backoffice/components/common/avis/Avis.jsx
index c1f8c9a51..4b600c37b 100644
--- a/ui/src/backoffice/components/common/avis/Avis.jsx
+++ b/ui/src/backoffice/components/common/avis/Avis.jsx
@@ -87,7 +87,7 @@ export default class Avis extends React.Component {
 
         return (
             <div className="Avis">
-
+                <h2 className="sr-only">Commentaire {index}</h2>
                 {message &&
                 <LocalMessage message={message} onClose={async () => await this.state.propagateChanges()} />
                 }
diff --git a/ui/src/backoffice/components/common/avis/Reponse.jsx b/ui/src/backoffice/components/common/avis/Reponse.jsx
index d93231ec9..2ce00edca 100644
--- a/ui/src/backoffice/components/common/avis/Reponse.jsx
+++ b/ui/src/backoffice/components/common/avis/Reponse.jsx
@@ -44,7 +44,7 @@ export default class Reponse extends React.Component {
             <div className="Reponse">
                 <div className="d-flex justify-content-between align-items-baseline">
                     <div>
-                        <span className="title">Réponse de l&apos;organisme </span>
+                        <h3 className="title span-title">Réponse de l&apos;organisme</h3>
                         <Status avis={avis} />
                     </div>
                     {avis.reponse.date &&
diff --git a/ui/src/backoffice/components/common/avis/Reponse.scss b/ui/src/backoffice/components/common/avis/Reponse.scss
index 01ddfeab6..369edbf78 100644
--- a/ui/src/backoffice/components/common/avis/Reponse.scss
+++ b/ui/src/backoffice/components/common/avis/Reponse.scss
@@ -33,5 +33,12 @@
       color: $color-blue;
     }
   }
+
+  .span-title{
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    display: contents;
+  }
 }
 
diff --git a/ui/src/backoffice/components/common/avis/Titre.jsx b/ui/src/backoffice/components/common/avis/Titre.jsx
index 4a6a8ec9c..d87c793da 100644
--- a/ui/src/backoffice/components/common/avis/Titre.jsx
+++ b/ui/src/backoffice/components/common/avis/Titre.jsx
@@ -30,7 +30,7 @@ export default class Titre extends React.Component {
                 {showModerationButtons && (
                     <>
                         <span className={`sr-only ${avis.commentaire.titleMasked ? '' : 'titre-masque'}`}>titre masqué</span>
-                        <span className={`mr-1 title ${avis.commentaire.titleMasked ? 'masked' : ''}`}>{avis.commentaire.title}</span>
+                        <h3 className={`mr-1 title span-title ${avis.commentaire.titleMasked ? 'masked' : ''}`}>{avis.commentaire.title}</h3>
                         <button type="button" className="button-eye" onClick={this.toggle}>
                             <span className="sr-only">{avis.commentaire.titleMasked ? "Afficher le titre" : "Masquer le titre"}</span>
                             <i className={`far sr ${avis.commentaire.titleMasked ? 'fa-eye' : 'fa-eye-slash'} toggable`} />
diff --git a/ui/src/backoffice/components/common/avis/Titre.scss b/ui/src/backoffice/components/common/avis/Titre.scss
index 495b981b4..9e779229d 100644
--- a/ui/src/backoffice/components/common/avis/Titre.scss
+++ b/ui/src/backoffice/components/common/avis/Titre.scss
@@ -29,6 +29,13 @@
     display: none;
   }
 
+  .span-title{
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    display: contents;
+  }
+
   .button-eye{
     border: none;
     background-color: transparent;

From a5906bf1578a6fd1ddd6b0ba12bc9e53c1f1b576 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 26 Apr 2024 13:40:03 +0200
Subject: [PATCH 057/128] feat: accessibilite P09 9.1 balisage title

---
 .../moderateur/gestion-organismes/components/Organisme.jsx       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.jsx b/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.jsx
index 92395c7b1..4c453b546 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.jsx
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.jsx
@@ -40,6 +40,7 @@ export default class Organisme extends React.Component {
 
         return (
             <div className="Organisme row">
+                <h2 className="sr-only">Organisme {index}</h2>
                 <div className="col-sm-2 offset-md-1 style-col">
                     <p className="raison-sociale">{organisme.raison_sociale}</p>
                     <p className="siret">{organisme.siret}</p>

From 0c04c8f0e859ec335f015f0ebde3e16625197b55 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 26 Apr 2024 14:57:37 +0200
Subject: [PATCH 058/128] =?UTF-8?q?feat:=20accessibilite=20-=20widjet=20no?=
 =?UTF-8?q?te=20-=20verifi=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/http/site/static/css/contact.css | 1 -
 backend/src/http/site/static/css/faq.css     | 2 --
 backend/src/http/site/static/css/header.css  | 6 +-----
 ui/src/widget/ListeWidget.scss               | 7 -------
 ui/src/widget/Widget.scss                    | 5 -----
 5 files changed, 1 insertion(+), 20 deletions(-)

diff --git a/backend/src/http/site/static/css/contact.css b/backend/src/http/site/static/css/contact.css
index 75f8e3e1a..adf57f677 100644
--- a/backend/src/http/site/static/css/contact.css
+++ b/backend/src/http/site/static/css/contact.css
@@ -4,7 +4,6 @@
     background-color: #373B46;
     text-align: center;
     padding-bottom: 40px;
-    outline: none;
 }
 
 .contact h1 {
diff --git a/backend/src/http/site/static/css/faq.css b/backend/src/http/site/static/css/faq.css
index c72d238ac..1ad700699 100644
--- a/backend/src/http/site/static/css/faq.css
+++ b/backend/src/http/site/static/css/faq.css
@@ -279,7 +279,6 @@ a {
 }
 
 .question {
-    outline: none;
     margin-bottom: 15px;
 }
 
@@ -327,7 +326,6 @@ a.more:hover {
     border-radius: 5px;
     line-height: 22px;
     padding: 5px 15px;
-    outline: none;
     padding: 20px;
     font-size: 18px;
 }
diff --git a/backend/src/http/site/static/css/header.css b/backend/src/http/site/static/css/header.css
index 4662fd3ae..b9175e8b0 100644
--- a/backend/src/http/site/static/css/header.css
+++ b/backend/src/http/site/static/css/header.css
@@ -63,10 +63,7 @@
     height: 40px;
 }
 
-.logo,
-.admin {
-    outline: none;
-}
+
 
 .header .logo img {
     padding: 15px;
@@ -116,7 +113,6 @@
 }
 
 .menu a.unroll {
-    outline: none;
     font-weight: bold;
     display: inline-block;
     margin-top: 30px;
diff --git a/ui/src/widget/ListeWidget.scss b/ui/src/widget/ListeWidget.scss
index 06b001314..317267eff 100644
--- a/ui/src/widget/ListeWidget.scss
+++ b/ui/src/widget/ListeWidget.scss
@@ -26,9 +26,6 @@
         background-color: $color-white;
         border: 1px solid $color-black-80;
 
-        &:focus {
-          outline: 0;
-        }
       }
 
       button {
@@ -36,10 +33,6 @@
         border: none;
         color: $color-black-60;
 
-        &:focus {
-          outline: 0;
-        }
-
         &.active {
           color: $color-black;
         }
diff --git a/ui/src/widget/Widget.scss b/ui/src/widget/Widget.scss
index b9829dd45..297a5b7ff 100644
--- a/ui/src/widget/Widget.scss
+++ b/ui/src/widget/Widget.scss
@@ -23,9 +23,4 @@
     border: 0;
   }
 
-  .btn:focus {
-    outline: thin dotted;
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
-  }
 }

From be83385dca5169f2a326c6c61c3271d3a6462635 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 26 Apr 2024 15:44:24 +0200
Subject: [PATCH 059/128] =?UTF-8?q?feat:=20accessibilite=20P0=C3=A8-P08=20?=
 =?UTF-8?q?9.3=20list=20avis?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/page/panel/results/AvisResults.jsx | 9 +++++----
 .../common/page/panel/results/AvisResults.scss           | 6 ++++++
 2 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 ui/src/backoffice/components/common/page/panel/results/AvisResults.scss

diff --git a/ui/src/backoffice/components/common/page/panel/results/AvisResults.jsx b/ui/src/backoffice/components/common/page/panel/results/AvisResults.jsx
index 0a213cfb9..cb109f91d 100644
--- a/ui/src/backoffice/components/common/page/panel/results/AvisResults.jsx
+++ b/ui/src/backoffice/components/common/page/panel/results/AvisResults.jsx
@@ -3,25 +3,26 @@ import PropTypes from 'prop-types';
 import EmptyResults from './EmptyResults';
 import ResultDivider from './ResultDivider';
 import WithAnalytics from '../../../../../../common/components/analytics/WithAnalytics';
+import './AvisResults.scss';
 
 const AvisResults = ({ results, renderAvis }) => {
     return (
-        <div>
+        <ul>
             {
                 results.meta.pagination.totalItems === 0 ?
                     <EmptyResults /> :
                     results.avis.map((avis, index) => {
                         return (
-                            <div key={avis._id} index={index}>
+                            <li className="no-list" key={avis._id} index={index}>
                                 <WithAnalytics category="avis">
                                     {renderAvis(avis, index)}
                                     <ResultDivider />
                                 </WithAnalytics>
-                            </div>
+                            </li>
                         );
                     })
             }
-        </div>
+        </ul>
     );
 };
 
diff --git a/ui/src/backoffice/components/common/page/panel/results/AvisResults.scss b/ui/src/backoffice/components/common/page/panel/results/AvisResults.scss
new file mode 100644
index 000000000..e590bd192
--- /dev/null
+++ b/ui/src/backoffice/components/common/page/panel/results/AvisResults.scss
@@ -0,0 +1,6 @@
+@import 'src/common/styles/variables';
+
+.no-list{
+    list-style: none;   
+}
+

From d2ddaf570ca9e5d6402af76eaa6144c9e9627505 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 26 Apr 2024 16:43:19 +0200
Subject: [PATCH 060/128] feat: accessibilite P07 10.11 responsive

---
 .../moderateur/moderation-avis/ModerationAvisPage.jsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx b/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
index 7db7ceb93..60ce274ca 100644
--- a/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
+++ b/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
@@ -111,7 +111,7 @@ export default class ModerationAvisPage extends React.Component {
                 form={
                     <div className="d-flex justify-content-center">
                         <Form className="a-width-50">
-                            <div className="d-flex justify-content-between">
+                            <div className="d-flex justify-content-between" style={{ flexWrap: "wrap" }}>
                                 <div className="flex-grow-1 mr-2">
                                     <label className="sr-only" for="recherche-avis">Rechercher un avis</label>
                                     <InputText

From 41b2ddd7408bd055e6df18a18d35e804ee8ec089 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Mon, 29 Apr 2024 10:30:29 +0200
Subject: [PATCH 061/128] feat: accessibilite Modal correction bug

---
 ui/src/common/components/Modal.jsx | 47 +++++++++++++-----------------
 1 file changed, 20 insertions(+), 27 deletions(-)

diff --git a/ui/src/common/components/Modal.jsx b/ui/src/common/components/Modal.jsx
index e8b61fa8b..9db81b0a4 100644
--- a/ui/src/common/components/Modal.jsx
+++ b/ui/src/common/components/Modal.jsx
@@ -40,12 +40,11 @@ export default class Modal extends React.Component {
         const focusableModalElements = this.modalRef.current.querySelectorAll(
             'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'
         );
+        const activeIndex = Array.from(focusableModalElements).indexOf(document.activeElement);    
         const firstElement = focusableModalElements[0];
-        const secondElement = focusableModalElements[1];
-        const lastElement = focusableModalElements[2];
+        const lastElement = focusableModalElements[focusableModalElements.length - 1];
 
-        
-        if (e.key === "Escape") {//escape -> ferme
+        if (e.key === "Escape") { //escape -> ferme
             this.props.onClose();
             return;
         }
@@ -53,36 +52,30 @@ export default class Modal extends React.Component {
             this.props.onClose();
             return;
         }
-        else if (e.shiftKey && e.key === "Tab" && document.activeElement === firstElement) {//Shift + Tabulation sur Croix -> Confirmer
+
+        if (e.shiftKey && e.key === "Tab" && document.activeElement === firstElement) {
+            // Shift + Tabulation sur le premier élément -> dernier élément
             lastElement.focus();
             e.preventDefault();
-        }
-        else if (!e.shiftKey && e.key === "Tab" && document.activeElement === firstElement) {//Tabulation sur Croix -> Annuler
-            secondElement.focus();
-            e.preventDefault();
-        }
-        else if (e.key === "Enter" && document.activeElement === secondElement) {//Entrer sur Annuler -> ferme
-            this.props.onClose();
             return;
         }
-        else if (e.shiftKey && e.key === "Tab" && document.activeElement === secondElement) {//Shift + Tabulation sur Annuler -> Croix
+
+        if (!e.shiftKey && e.key === "Tab" && document.activeElement === lastElement) {
+            // Tabulation sur le dernier élément -> premier élément
             firstElement.focus();
             e.preventDefault();
+            return;
         }
-        else if (!e.shiftKey && e.key === "Tab" && document.activeElement === secondElement) {//Tabulation sur Annuler -> Confirmer
-            lastElement.focus();
-            e.preventDefault();
-        }
-        else if (e.key === "Enter" && document.activeElement === lastElement) {//Entrer sur Confirmer -> Confirme
-            this.props.onConfirmed();
-            e.preventDefault();
-        }else if (e.shiftKey && e.key === "Tab" && document.activeElement === lastElement) {//Shift + Tabulation sur Confirmer -> Annuler
-            secondElement.focus();
-            e.preventDefault();
-        }
-        else {//Tabulation sur confirmer -> Croix
-            firstElement.focus();
-            e.preventDefault();
+    
+        // Gestion de la navigation pour les éléments au milieu
+        if (e.key === "Tab") {
+            const nextIndex = e.shiftKey ? (activeIndex - 1) : (activeIndex + 1);
+            const nextElement = focusableModalElements[nextIndex];
+            
+            if (nextElement) {
+                nextElement.focus();
+                e.preventDefault();
+            }
         }
     };
 

From 3e8494e8e29d9a87cfe0f898e90d304d5a0990d4 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Mon, 29 Apr 2024 10:32:53 +0200
Subject: [PATCH 062/128] feat: accessibilite Modal correction bug

---
 ui/src/common/components/Modal.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/common/components/Modal.jsx b/ui/src/common/components/Modal.jsx
index 9db81b0a4..5f74e32d6 100644
--- a/ui/src/common/components/Modal.jsx
+++ b/ui/src/common/components/Modal.jsx
@@ -40,7 +40,7 @@ export default class Modal extends React.Component {
         const focusableModalElements = this.modalRef.current.querySelectorAll(
             'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'
         );
-        const activeIndex = Array.from(focusableModalElements).indexOf(document.activeElement);    
+        const activeIndex = Array.from(focusableModalElements).indexOf(document.activeElement);
         const firstElement = focusableModalElements[0];
         const lastElement = focusableModalElements[focusableModalElements.length - 1];
 

From 5866cca4fc45e3b47e3250cffc26cd596a934e6f Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Mon, 29 Apr 2024 14:16:05 +0200
Subject: [PATCH 063/128] =?UTF-8?q?feat:=20accessibilite=20P07=20correctio?=
 =?UTF-8?q?n=20bug=20titre=20masqu=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/backoffice/components/common/avis/Titre.jsx  | 2 +-
 ui/src/backoffice/components/common/avis/Titre.scss | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/src/backoffice/components/common/avis/Titre.jsx b/ui/src/backoffice/components/common/avis/Titre.jsx
index d87c793da..ee3c940bb 100644
--- a/ui/src/backoffice/components/common/avis/Titre.jsx
+++ b/ui/src/backoffice/components/common/avis/Titre.jsx
@@ -25,7 +25,7 @@ export default class Titre extends React.Component {
             return <div className="Titre empty">Aucun titre</div>;
         }
         return (
-            <div className="Titre">
+            <div className={`Titre ${avis.commentaire.titleMasked ? 'masked' : ''}`}>
                 
                 {showModerationButtons && (
                     <>
diff --git a/ui/src/backoffice/components/common/avis/Titre.scss b/ui/src/backoffice/components/common/avis/Titre.scss
index 9e779229d..b40d5bb1e 100644
--- a/ui/src/backoffice/components/common/avis/Titre.scss
+++ b/ui/src/backoffice/components/common/avis/Titre.scss
@@ -25,6 +25,10 @@
     }
   }
 
+  &.masked {
+    text-decoration: line-through;
+  }
+  
   .titre-masque{
     display: none;
   }

From f4c2c74a024102c5e7f0c585cbd5dfd110fea556 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Mon, 29 Apr 2024 14:58:55 +0200
Subject: [PATCH 064/128] =?UTF-8?q?feat:=20accessibilite=20P07=209.3=20bal?=
 =?UTF-8?q?isage=20bouton=20=C5=93il?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/backoffice/components/common/avis/Titre.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/backoffice/components/common/avis/Titre.jsx b/ui/src/backoffice/components/common/avis/Titre.jsx
index ee3c940bb..dbeaed541 100644
--- a/ui/src/backoffice/components/common/avis/Titre.jsx
+++ b/ui/src/backoffice/components/common/avis/Titre.jsx
@@ -31,8 +31,8 @@ export default class Titre extends React.Component {
                     <>
                         <span className={`sr-only ${avis.commentaire.titleMasked ? '' : 'titre-masque'}`}>titre masqué</span>
                         <h3 className={`mr-1 title span-title ${avis.commentaire.titleMasked ? 'masked' : ''}`}>{avis.commentaire.title}</h3>
-                        <button type="button" className="button-eye" onClick={this.toggle}>
-                            <span className="sr-only">{avis.commentaire.titleMasked ? "Afficher le titre" : "Masquer le titre"}</span>
+                        <button type="button" className="button-eye" onClick={this.toggle} aria-pressed={!avis.commentaire.titleMasked}>
+                            <span className="sr-only">Afficher le titre</span>
                             <i className={`far sr ${avis.commentaire.titleMasked ? 'fa-eye' : 'fa-eye-slash'} toggable`} />
                         </button>
                     </>

From 915da3f189aa28849b8b94d178ab738c16b9ef11 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Mon, 29 Apr 2024 15:22:22 +0200
Subject: [PATCH 065/128] feat: accessibilite P05 9.3

---
 .../anonymous/components/StatsPanel.jsx       | 56 +++++++++++--------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
index 5093d15b7..0e7a18607 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
@@ -50,47 +50,57 @@ export default class StatsPanel extends React.Component {
     };
 
     render() {
-
         let { query, store } = this.props;
         let { results } = this.state;
-
+    
         if (_.isEmpty(results.stats)) {
             return <EmptyResults />;
         }
-
+    
         return (
             <>
                 <Panel
                     className="StatsPanel"
                     results={
                         <div>
-                            <div className="row mb-5">
-                                <div className="col-12">
+                            {/* Section des statistiques sur les stagiaires */}
+                            <dl className="row mb-5">
+                                <dt className="col-12">Statistiques sur les stagiaires :</dt>
+                                <dd className="col-12">
                                     <StagiairesStats query={query} stats={results.stats} store={store} />
-                                </div>
-                            </div>
-                            <div className="row mb-5">
-                                <div className="col-sm-12 col-md-6">
+                                </dd>
+                            </dl>
+    
+                            <dl className="row mb-5">
+                                <dt className="col-sm-12 col-md-3">Statistiques sur les avis :</dt>
+                                <dd className="col-sm-12 col-md-9">
                                     <AvisStats query={query} stats={results.stats} store={store} />
-                                </div>
-                                <div className="col-sm-12 col-md-6">
+                                </dd>
+                            </dl>
+    
+                            <dl className="row mb-5">
+                                <dt className="col-sm-12 col-md-3">Statistiques sur les formations :</dt>
+                                <dd className="col-sm-12 col-md-9">
                                     <FormationStats query={query} stats={results.stats} store={store} />
-                                </div>
-                            </div>
-                            { this.mustShowAdminStats() &&
-                            <div className="row mb-5">
-                                <div className="col-sm-12 col-md-6">
-                                    <ModerationStats query={query} stats={results.stats} />
-                                </div>
-                                <div className="col-sm-12 col-md-6">
-                                    <OrganismeStats query={query} stats={results.stats} />
-                                </div>
-                            </div>
-                            }
+                                </dd>
+                            </dl>
+    
+                            {this.mustShowAdminStats() && (
+                                <dl className="row mb-5">
+                                    <dt className="col-sm-12 col-md-3">Statistiques d'administration :</dt>
+                                    <dd className="col-sm-12 col-md-3">
+                                        <ModerationStats query={query} stats={results.stats} />
+                                    </dd>
+                                    <dd className="col-sm-12 col-md-6">
+                                        <OrganismeStats query={query} stats={results.stats} />
+                                    </dd>
+                                </dl>
+                            )}
                         </div>
                     }
                 />
             </>
         );
     }
+    
 }

From bf326852866618b825d795512cfd8df464f458d7 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Mon, 29 Apr 2024 16:55:19 +0200
Subject: [PATCH 066/128] feat: accessibilite All page - 8.6 titre onglet

---
 ui/public/index.html                                           | 1 -
 ui/src/backoffice/components/anonymous/LoginPage.jsx           | 3 +++
 .../backoffice/components/anonymous/MotDePasseOubliePage.jsx   | 3 +++
 .../components/anonymous/ReinitialisationMotDePassePage.jsx    | 3 +++
 ui/src/backoffice/components/anonymous/StatsPage.jsx           | 1 +
 ui/src/backoffice/components/common/MonComptePage.jsx          | 1 +
 ui/src/backoffice/components/common/page/Page.jsx              | 3 +++
 ui/src/backoffice/components/financeur/FinanceurPage.jsx       | 1 +
 .../moderateur/courriels/OrganismesEmailsPreviewPage.jsx       | 1 +
 .../moderateur/courriels/StagiairesEmailsPreviewPage.jsx       | 1 +
 10 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/ui/public/index.html b/ui/public/index.html
index eaee67a01..83d663780 100644
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -1,7 +1,6 @@
 <!doctype html>
 <html lang="fr">
     <head>
-        <title>Anotéa</title>
 
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
diff --git a/ui/src/backoffice/components/anonymous/LoginPage.jsx b/ui/src/backoffice/components/anonymous/LoginPage.jsx
index 4bc4d0a13..f6b19a1f8 100644
--- a/ui/src/backoffice/components/anonymous/LoginPage.jsx
+++ b/ui/src/backoffice/components/anonymous/LoginPage.jsx
@@ -75,6 +75,8 @@ export default class LoginPage extends React.Component {
             'Si vous êtes un organisme, vous devez désormais vous identifier avec votre numéro de SIRET';
 
         return (
+            <>
+            <title>Connexion | Anotéa</title>
             <Page
                 className="LoginPage"
                 title={'Votre espace Anotéa'}
@@ -139,6 +141,7 @@ export default class LoginPage extends React.Component {
                     />
                 }
             />
+            </>
         );
     }
 }
diff --git a/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx b/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
index e53ec0ffa..698a7cad1 100644
--- a/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
+++ b/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
@@ -56,6 +56,8 @@ export default class MotDePasseOubliePage extends React.Component {
     render() {
 
         return (
+            <>
+            <title>Mot de passe oublié | Anotéa</title>
             <Page
                 className="MotDePasseOubliePage"
                 title={'Votre espace Anotéa'}
@@ -120,6 +122,7 @@ export default class MotDePasseOubliePage extends React.Component {
                     />
                 }
             />
+            </>
         );
     }
 }
diff --git a/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx b/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
index ee4cd1a16..3ff39bd90 100644
--- a/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
+++ b/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
@@ -94,6 +94,8 @@ export default class ReinitialisationMotDePassePage extends React.Component {
         let { errors } = this.state;
 
         return (
+            <>
+            <title>Réinitialiser le mot de passe | Anotéa</title>
             <Page
                 backgroundColor="grey"
                 title={'Votre espace Anotéa'}
@@ -144,6 +146,7 @@ export default class ReinitialisationMotDePassePage extends React.Component {
                     />
                 }
             />
+            </>
         );
     }
 }
diff --git a/ui/src/backoffice/components/anonymous/StatsPage.jsx b/ui/src/backoffice/components/anonymous/StatsPage.jsx
index 0437683c6..e64073445 100644
--- a/ui/src/backoffice/components/anonymous/StatsPage.jsx
+++ b/ui/src/backoffice/components/anonymous/StatsPage.jsx
@@ -50,6 +50,7 @@ export default class StatsPage extends React.Component {
 
         return (
             <Page
+                title="Statistique Anotéa"
                 className="StatsPage"
                 form={<StatsForm query={query} store={this.state.store} onSubmit={this.onSubmit} />}
                 panel={<StatsPanel query={query} store={this.state.store} />}
diff --git a/ui/src/backoffice/components/common/MonComptePage.jsx b/ui/src/backoffice/components/common/MonComptePage.jsx
index 5a6481a41..a3eb3f36b 100644
--- a/ui/src/backoffice/components/common/MonComptePage.jsx
+++ b/ui/src/backoffice/components/common/MonComptePage.jsx
@@ -84,6 +84,7 @@ export default class MonComptePage extends React.Component {
         let { theme } = this.context;
 
         return <Page
+            title="Mise à jour du mot de passe"
             panel={
                 <Panel
                     results={
diff --git a/ui/src/backoffice/components/common/page/Page.jsx b/ui/src/backoffice/components/common/page/Page.jsx
index d43f26f0b..accef81a6 100644
--- a/ui/src/backoffice/components/common/page/Page.jsx
+++ b/ui/src/backoffice/components/common/page/Page.jsx
@@ -9,6 +9,8 @@ const Page = props => {
     let { theme } = useContext(BackofficeContext);
 
     return (
+        <>
+        <title>{props.title} | Anotéa</title>
         <main id="contents" role="main" className={`Page mb-0 ${props.className || ''}`}>
 
             <div className={`search-holder ${theme.backgroundColor}`}>
@@ -46,6 +48,7 @@ const Page = props => {
                 {props.panel}
             </div>
         </main>
+        </>
     );
 };
 
diff --git a/ui/src/backoffice/components/financeur/FinanceurPage.jsx b/ui/src/backoffice/components/financeur/FinanceurPage.jsx
index 346beb5c4..7beda10bd 100644
--- a/ui/src/backoffice/components/financeur/FinanceurPage.jsx
+++ b/ui/src/backoffice/components/financeur/FinanceurPage.jsx
@@ -98,6 +98,7 @@ export default class FinanceurPage extends React.Component {
 
         return (
             <Page
+                title="Avis stagiaires"
                 form={
                     <FinanceurForm
                         query={query}
diff --git a/ui/src/backoffice/components/moderateur/courriels/OrganismesEmailsPreviewPage.jsx b/ui/src/backoffice/components/moderateur/courriels/OrganismesEmailsPreviewPage.jsx
index da296fe7f..29db96e69 100644
--- a/ui/src/backoffice/components/moderateur/courriels/OrganismesEmailsPreviewPage.jsx
+++ b/ui/src/backoffice/components/moderateur/courriels/OrganismesEmailsPreviewPage.jsx
@@ -22,6 +22,7 @@ export default class OrganismesEmailsPreviewPage extends Component {
 
         return (
             <Page
+                title="Courriels organismes"
                 className="EmailsPreviewPage"
                 panel={
                     <Panel
diff --git a/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx b/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx
index 8c1b935cf..554437a42 100644
--- a/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx
+++ b/ui/src/backoffice/components/moderateur/courriels/StagiairesEmailsPreviewPage.jsx
@@ -22,6 +22,7 @@ export default class StagiairesEmailsPreviewPage extends Component {
 
         return (
             <Page
+                title="Courriels stagiaires"
                 className="EmailsPreviewPage"
                 panel={
                     <Panel

From c341a28ce87198d20a9319032bd92400e5776745 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 2 May 2024 09:38:50 +0200
Subject: [PATCH 067/128] feat: accessibilite P04 3.2 contraste placeholder

---
 ui/src/backoffice/components/common/page/form/InputText.scss | 1 -
 ui/src/backoffice/components/common/page/form/Select.scss    | 4 ++++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/src/backoffice/components/common/page/form/InputText.scss b/ui/src/backoffice/components/common/page/form/InputText.scss
index 8c44f3461..239f3a86c 100644
--- a/ui/src/backoffice/components/common/page/form/InputText.scss
+++ b/ui/src/backoffice/components/common/page/form/InputText.scss
@@ -61,7 +61,6 @@
 
     &::placeholder {
       color: $color-black;
-      opacity: 0.6;
     }
   }
 }
diff --git a/ui/src/backoffice/components/common/page/form/Select.scss b/ui/src/backoffice/components/common/page/form/Select.scss
index 6ce70a918..71a9a6a6f 100644
--- a/ui/src/backoffice/components/common/page/form/Select.scss
+++ b/ui/src/backoffice/components/common/page/form/Select.scss
@@ -8,6 +8,10 @@
     border: 1px solid $color-grey-5;
     border-radius: 6px;
     padding: 0.30rem;
+
+    .css-1wa3eu0-placeholder {
+      color: black;
+    }
   }
 
   .Select__single-value {

From 5a782bea85563e5b31570c94e66b8dcc8be44c48 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 2 May 2024 14:13:33 +0200
Subject: [PATCH 068/128] feat: accessibilite P04 3.2 contraste

---
 .../backoffice/components/common/avis/Formation.scss |  2 +-
 ui/src/backoffice/components/common/avis/Titre.scss  |  2 --
 .../common/avis/charts/CommentairesPies.scss         |  1 -
 .../components/common/page/form/date/datepicker.scss |  4 ++++
 .../common/page/panel/pagination/Pagination.scss     |  3 ++-
 .../page/panel/pagination/PaginationSummary.scss     |  1 -
 .../organisme/components/StagiairesStats.scss        |  1 -
 ui/src/common/styles/variables.scss                  | 12 ++++++------
 8 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/ui/src/backoffice/components/common/avis/Formation.scss b/ui/src/backoffice/components/common/avis/Formation.scss
index bbd408f22..2d2ec92ce 100644
--- a/ui/src/backoffice/components/common/avis/Formation.scss
+++ b/ui/src/backoffice/components/common/avis/Formation.scss
@@ -5,7 +5,7 @@
   font-size: 1rem;
   line-height: 1.4rem;
   font-weight: $font-weight-normal;
-  color: $color-grey-50;
+  color: $color-grey-75;
 
   .name {
     font-size: 1rem;
diff --git a/ui/src/backoffice/components/common/avis/Titre.scss b/ui/src/backoffice/components/common/avis/Titre.scss
index b40d5bb1e..035274919 100644
--- a/ui/src/backoffice/components/common/avis/Titre.scss
+++ b/ui/src/backoffice/components/common/avis/Titre.scss
@@ -6,7 +6,6 @@
   font-weight: $font-weight-bold;
 
   &.empty {
-    opacity: 0.5;
     color: $color-grey-50;
     font-style: italic;
   }
@@ -18,7 +17,6 @@
 
   .masked {
     color: $color-grey-50;
-    opacity: 0.5;
 
     &.title {
       text-decoration: line-through;
diff --git a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss
index 62262184f..4862683d1 100644
--- a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss
+++ b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss
@@ -31,7 +31,6 @@
       .description {
         font-size: 0.875rem;
         padding-bottom: 1rem;
-        opacity: 0.6;
       }
     }
   }
diff --git a/ui/src/backoffice/components/common/page/form/date/datepicker.scss b/ui/src/backoffice/components/common/page/form/date/datepicker.scss
index a136852e0..0d4694912 100644
--- a/ui/src/backoffice/components/common/page/form/date/datepicker.scss
+++ b/ui/src/backoffice/components/common/page/form/date/datepicker.scss
@@ -5,6 +5,10 @@
   table {
     tr, td {
       padding: 0.5rem;
+      span.old,
+      &.old{
+        color: black !important; 
+      }
     }
   }
 
diff --git a/ui/src/backoffice/components/common/page/panel/pagination/Pagination.scss b/ui/src/backoffice/components/common/page/panel/pagination/Pagination.scss
index 8738279c5..9c785365a 100644
--- a/ui/src/backoffice/components/common/page/panel/pagination/Pagination.scss
+++ b/ui/src/backoffice/components/common/page/panel/pagination/Pagination.scss
@@ -16,14 +16,15 @@
     .page-link {
       color: $color-grey-50;
       font-size: 1rem;
+      font-weight: $font-weight-bold;
 
       &:hover, &:focus {
         cursor: pointer;
         color: $color-black;
         background: $color-grey-5;
         border: 1px solid $color-grey-50;
-        font-weight: $font-weight-bold;
         transition: background 0.20s linear;
+        outline-color: rgb(16, 16, 16);
       }
     }
   }
diff --git a/ui/src/backoffice/components/common/page/panel/pagination/PaginationSummary.scss b/ui/src/backoffice/components/common/page/panel/pagination/PaginationSummary.scss
index f5dcebf53..110702119 100644
--- a/ui/src/backoffice/components/common/page/panel/pagination/PaginationSummary.scss
+++ b/ui/src/backoffice/components/common/page/panel/pagination/PaginationSummary.scss
@@ -11,7 +11,6 @@
   }
 
   .pages {
-    color: $color-grey-50;
     font-weight: $font-weight-normal;
     font-size: 0.875rem;
     opacity: 0.75;
diff --git a/ui/src/backoffice/components/organisme/components/StagiairesStats.scss b/ui/src/backoffice/components/organisme/components/StagiairesStats.scss
index 5ee2949e2..2f2704a3f 100644
--- a/ui/src/backoffice/components/organisme/components/StagiairesStats.scss
+++ b/ui/src/backoffice/components/organisme/components/StagiairesStats.scss
@@ -61,7 +61,6 @@
       .description {
         font-size: 0.875rem;
         padding-bottom: 1rem;
-        opacity: 0.6;
       }
     }
   }
diff --git a/ui/src/common/styles/variables.scss b/ui/src/common/styles/variables.scss
index caec9b6c3..1eeee67b8 100644
--- a/ui/src/common/styles/variables.scss
+++ b/ui/src/common/styles/variables.scss
@@ -6,10 +6,11 @@ $color-white: #FFFFFF;
 
 $color-black: #24303A;
 $color-dark: #11181E;
-$color-black-80: rgba(35, 47, 56, 0.8);
-$color-black-60: rgba(35, 47, 56, 0.6);
+$color-black-80: rgb(35, 47, 56);
+$color-black-60: rgb(35, 47, 56);
 
-$color-grey-50: #91979C;
+$color-grey-75: #64727D;
+$color-grey-50: #64727D;
 $color-grey-25: #C8CBCE;
 $color-grey-5: #F4F4F5;
 
@@ -26,7 +27,7 @@ $color-red-30: #F4C2C1;
 $color-red-10: #FBEAEA;
 
 $color-green-dark: #00432B;
-$color-green: #007E54;
+$color-green: #017D52;
 $color-green-60: #66B298;
 $color-green-30: #B2D8CB;
 $color-green-10: #E5F2ED;
@@ -65,5 +66,4 @@ $shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
   font-size: 1rem;
   border-radius: 8px;
   box-shadow: $shadow;
-}
-
+}
\ No newline at end of file

From fbf1911740b44075987ac29d5fb886c8d9c87816 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 2 May 2024 15:15:40 +0200
Subject: [PATCH 069/128] feat: accessibilite P05-P06 contraste

---
 .../anonymous/components/StatsPanel.jsx       | 24 +++++++++----------
 .../components/common/avis/Formation.scss     |  2 +-
 .../page/panel/pagination/Pagination.scss     |  1 -
 ui/src/common/styles/variables.scss           |  3 +--
 4 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
index 0e7a18607..85fe4d279 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
@@ -12,7 +12,7 @@ import OrganismeStats from './OrganismeStats';
 import ModerationStats from './ModerationStats';
 
 export default class StatsPanel extends React.Component {
-    
+
     static contextType = BackofficeContext;
 
     static propTypes = {
@@ -41,7 +41,7 @@ export default class StatsPanel extends React.Component {
         let { account } = this.context;
         return account.profile === 'admin';
     }
-    
+
     fetchStats = () => {
         return new Promise(async resolve => {
             let results = await getPublicStats(this.props.query);
@@ -52,11 +52,11 @@ export default class StatsPanel extends React.Component {
     render() {
         let { query, store } = this.props;
         let { results } = this.state;
-    
+
         if (_.isEmpty(results.stats)) {
             return <EmptyResults />;
         }
-    
+
         return (
             <>
                 <Panel
@@ -65,29 +65,29 @@ export default class StatsPanel extends React.Component {
                         <div>
                             {/* Section des statistiques sur les stagiaires */}
                             <dl className="row mb-5">
-                                <dt className="col-12">Statistiques sur les stagiaires :</dt>
+                                <dt className="col-12">Statistiques sur les stagiaires&nbsp;:</dt>
                                 <dd className="col-12">
                                     <StagiairesStats query={query} stats={results.stats} store={store} />
                                 </dd>
                             </dl>
-    
+
                             <dl className="row mb-5">
-                                <dt className="col-sm-12 col-md-3">Statistiques sur les avis :</dt>
+                                <dt className="col-sm-12 col-md-3">Statistiques sur les avis&nbsp;:</dt>
                                 <dd className="col-sm-12 col-md-9">
                                     <AvisStats query={query} stats={results.stats} store={store} />
                                 </dd>
                             </dl>
-    
+
                             <dl className="row mb-5">
-                                <dt className="col-sm-12 col-md-3">Statistiques sur les formations :</dt>
+                                <dt className="col-sm-12 col-md-3">Statistiques sur les formations&nbsp;:</dt>
                                 <dd className="col-sm-12 col-md-9">
                                     <FormationStats query={query} stats={results.stats} store={store} />
                                 </dd>
                             </dl>
-    
+
                             {this.mustShowAdminStats() && (
                                 <dl className="row mb-5">
-                                    <dt className="col-sm-12 col-md-3">Statistiques d'administration :</dt>
+                                    <dt className="col-sm-12 col-md-3">Statistiques d'administration&nbsp;:</dt>
                                     <dd className="col-sm-12 col-md-3">
                                         <ModerationStats query={query} stats={results.stats} />
                                     </dd>
@@ -102,5 +102,5 @@ export default class StatsPanel extends React.Component {
             </>
         );
     }
-    
+
 }
diff --git a/ui/src/backoffice/components/common/avis/Formation.scss b/ui/src/backoffice/components/common/avis/Formation.scss
index 2d2ec92ce..bbd408f22 100644
--- a/ui/src/backoffice/components/common/avis/Formation.scss
+++ b/ui/src/backoffice/components/common/avis/Formation.scss
@@ -5,7 +5,7 @@
   font-size: 1rem;
   line-height: 1.4rem;
   font-weight: $font-weight-normal;
-  color: $color-grey-75;
+  color: $color-grey-50;
 
   .name {
     font-size: 1rem;
diff --git a/ui/src/backoffice/components/common/page/panel/pagination/Pagination.scss b/ui/src/backoffice/components/common/page/panel/pagination/Pagination.scss
index 9c785365a..1d3702275 100644
--- a/ui/src/backoffice/components/common/page/panel/pagination/Pagination.scss
+++ b/ui/src/backoffice/components/common/page/panel/pagination/Pagination.scss
@@ -24,7 +24,6 @@
         background: $color-grey-5;
         border: 1px solid $color-grey-50;
         transition: background 0.20s linear;
-        outline-color: rgb(16, 16, 16);
       }
     }
   }
diff --git a/ui/src/common/styles/variables.scss b/ui/src/common/styles/variables.scss
index 1eeee67b8..c9f974224 100644
--- a/ui/src/common/styles/variables.scss
+++ b/ui/src/common/styles/variables.scss
@@ -9,7 +9,6 @@ $color-dark: #11181E;
 $color-black-80: rgb(35, 47, 56);
 $color-black-60: rgb(35, 47, 56);
 
-$color-grey-75: #64727D;
 $color-grey-50: #64727D;
 $color-grey-25: #C8CBCE;
 $color-grey-5: #F4F4F5;
@@ -33,7 +32,7 @@ $color-green-30: #B2D8CB;
 $color-green-10: #E5F2ED;
 
 $color-orange-dark: #751314;
-$color-orange: #F28017;
+$color-orange: #EF7016;
 $color-orange-60: #F7A583;
 $color-orange-30: #FBD2C0;
 $color-orange-10: #FDF0EA;

From 611513591025fe67b49cf1b843fb61ca596d7ad9 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 2 May 2024 15:47:37 +0200
Subject: [PATCH 070/128] feat: accessibilite correction double titre aria

---
 .../components/anonymous/components/StatsForm.jsx  |  1 -
 .../backoffice/components/common/MonComptePage.jsx |  3 +--
 .../financeur/components/FinanceurForm.jsx         |  1 -
 .../components/organisme/OrganismePage.jsx         |  1 +
 .../organisme/components/OrganismeForm.jsx         | 14 ++++++++------
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/components/StatsForm.jsx b/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
index c2e675ac8..44295c698 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
@@ -53,7 +53,6 @@ export default class StatsForm extends React.Component {
 
         return (
             <div className="d-flex justify-content-center">
-                <h1 className="sr-only">Statistique nationale et régionale</h1>
                 <Form className="a-width-50">
                     <div className="d-flex justify-content-between align-items-end">
                         <div className="flex-grow-1 mr-2">
diff --git a/ui/src/backoffice/components/common/MonComptePage.jsx b/ui/src/backoffice/components/common/MonComptePage.jsx
index a3eb3f36b..d75be487c 100644
--- a/ui/src/backoffice/components/common/MonComptePage.jsx
+++ b/ui/src/backoffice/components/common/MonComptePage.jsx
@@ -84,12 +84,11 @@ export default class MonComptePage extends React.Component {
         let { theme } = this.context;
 
         return <Page
-            title="Mise à jour du mot de passe"
+            title="Mon compte"
             panel={
                 <Panel
                     results={
                         <div>
-                            <h1 className="sr-only">Statistique nationale et régionale</h1>
                             <CenteredForm
                                 title="Mise à jour du mot de passe"
                                 elements={
diff --git a/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx b/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
index b36f9b4de..fb5b88972 100644
--- a/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
+++ b/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
@@ -91,7 +91,6 @@ export default class FinanceurForm extends React.Component {
         let { store, loadFormations } = this.props;
 
         return <Form>
-            <h1 className="sr-only">Avis Stagiaire</h1>
             <div className="form-row  FinanceurAvisChartsPanel">
                 <div className="form-group col-lg-6 col-xl-3">
                     <fieldset>
diff --git a/ui/src/backoffice/components/organisme/OrganismePage.jsx b/ui/src/backoffice/components/organisme/OrganismePage.jsx
index 2576f8229..00d88eef4 100644
--- a/ui/src/backoffice/components/organisme/OrganismePage.jsx
+++ b/ui/src/backoffice/components/organisme/OrganismePage.jsx
@@ -113,6 +113,7 @@ export default class OrganismePage extends React.Component {
 
         return (
             <Page
+                title="Avis stagiaires"
                 loading={this.state.loading}
                 form={
                     <OrganismeForm
diff --git a/ui/src/backoffice/components/organisme/components/OrganismeForm.jsx b/ui/src/backoffice/components/organisme/components/OrganismeForm.jsx
index c3f5b2bc7..ed1455849 100644
--- a/ui/src/backoffice/components/organisme/components/OrganismeForm.jsx
+++ b/ui/src/backoffice/components/organisme/components/OrganismeForm.jsx
@@ -75,12 +75,14 @@ export default class OrganismeForm extends React.Component {
             <Form>
                 <div className="form-row">
                     <div className="form-group col-lg-6 col-xl-3">
-                        <label>Période</label>
-                        <Periode
-                            periode={{ debut: this.state.debut, fin: this.state.fin }}
-                            min={moment('2016-01-01T00:00:00Z').toDate()}
-                            onChange={({ debut, fin }) => this.setState({ debut, fin })}
-                        />
+                        <fieldset>
+                            <label>Période</label>
+                            <Periode
+                                periode={{ debut: this.state.debut, fin: this.state.fin }}
+                                min={moment('2016-01-01T00:00:00Z').toDate()}
+                                onChange={({ debut, fin }) => this.setState({ debut, fin })}
+                            />
+                        </fieldset>
                     </div>
                     <div className="form-group col-lg-6 col-xl-3">
                         <label>Départements</label>

From 4ff00fc9d41920bbdd5e901fe8a75b5aa58e238b Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 3 May 2024 10:24:38 +0200
Subject: [PATCH 071/128] feat: accessibilite P07-P01 contraste

---
 ui/src/backoffice/components/common/avis/Notes.scss        | 7 ++-----
 ui/src/backoffice/components/common/avis/Stars.scss        | 4 ++--
 .../common/page/panel/pagination/PaginationSummary.scss    | 1 -
 ui/src/questionnaire/components/formulaire/notes/note.scss | 2 +-
 4 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/ui/src/backoffice/components/common/avis/Notes.scss b/ui/src/backoffice/components/common/avis/Notes.scss
index 1f894be80..757294dce 100644
--- a/ui/src/backoffice/components/common/avis/Notes.scss
+++ b/ui/src/backoffice/components/common/avis/Notes.scss
@@ -10,9 +10,6 @@
 
   .details {
 
-    border: 1px solid $color-grey-5;
-    border-radius: 5px;
-
     &:first-child {
       padding-left: 0;
     }
@@ -35,7 +32,7 @@
       }
 
       .fa-star {
-        color: $color-yellow;
+        color: $color-orange;
       }
 
       .title {
@@ -48,7 +45,7 @@
       }
 
       .fa-star {
-        color: $color-yellow;
+        color: $color-orange;
         font-size: 0.75rem;
       }
     }
diff --git a/ui/src/backoffice/components/common/avis/Stars.scss b/ui/src/backoffice/components/common/avis/Stars.scss
index ecb4d8a04..25f855e51 100644
--- a/ui/src/backoffice/components/common/avis/Stars.scss
+++ b/ui/src/backoffice/components/common/avis/Stars.scss
@@ -3,10 +3,10 @@
 .Backoffice .Avis .Stars {
   font-size: 0.875rem;
   letter-spacing: 5px;
-  color: $color-yellow;
+  color: $color-orange;
 
   &.empty {
-    color: $color-grey-25;
+    color: $color-grey-50;
   }
 }
 
diff --git a/ui/src/backoffice/components/common/page/panel/pagination/PaginationSummary.scss b/ui/src/backoffice/components/common/page/panel/pagination/PaginationSummary.scss
index 110702119..b89142033 100644
--- a/ui/src/backoffice/components/common/page/panel/pagination/PaginationSummary.scss
+++ b/ui/src/backoffice/components/common/page/panel/pagination/PaginationSummary.scss
@@ -13,6 +13,5 @@
   .pages {
     font-weight: $font-weight-normal;
     font-size: 0.875rem;
-    opacity: 0.75;
   }
 }
diff --git a/ui/src/questionnaire/components/formulaire/notes/note.scss b/ui/src/questionnaire/components/formulaire/notes/note.scss
index a3cbf6503..3f28aa3d4 100644
--- a/ui/src/questionnaire/components/formulaire/notes/note.scss
+++ b/ui/src/questionnaire/components/formulaire/notes/note.scss
@@ -59,7 +59,7 @@
       }
 
       .fas.fa-star.inactive {
-        color: $color-dark;
+        color: $color-grey-50;
         font-size: 1.25rem;
       }
 

From e5ef7cedb43deb44e2c9dd3c975996c7dce7e2c7 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 3 May 2024 11:12:50 +0200
Subject: [PATCH 072/128] feat: accessibilite P01 double image + aria label
 etoile

---
 ui/src/questionnaire/Questionnaire.jsx                    | 2 +-
 ui/src/questionnaire/components/Remerciements.jsx         | 2 +-
 ui/src/questionnaire/components/formulaire/notes/Note.jsx | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/ui/src/questionnaire/Questionnaire.jsx b/ui/src/questionnaire/Questionnaire.jsx
index 65625649b..b5369714a 100755
--- a/ui/src/questionnaire/Questionnaire.jsx
+++ b/ui/src/questionnaire/Questionnaire.jsx
@@ -58,7 +58,7 @@ class Questionnaire extends Component {
                             onSubmit={() => this.setState({ showRemerciements: true })}
                         />
                     }
-                    <Footer stagiaire={stagiaire} infosRegion={infosRegion} />
+                    
                 </div>
             </WithAnalytics>
         );
diff --git a/ui/src/questionnaire/components/Remerciements.jsx b/ui/src/questionnaire/components/Remerciements.jsx
index fda240a2c..1d0da6c9f 100644
--- a/ui/src/questionnaire/components/Remerciements.jsx
+++ b/ui/src/questionnaire/components/Remerciements.jsx
@@ -25,7 +25,7 @@ class Remerciements extends Component {
                             <div className="panel-remerciements">
                                 {infosRegion.showLinks &&
                                 <div className="links-block">
-                                    <h1>Et après la formation...</h1>
+                                    <h2>Et après la formation...</h2>
                                     <p>
                                         Vous avez <strong>mis votre CV à jour</strong> ?
                                         Nous pouvons vous aider à <strong>trouver un emploi</strong> !
diff --git a/ui/src/questionnaire/components/formulaire/notes/Note.jsx b/ui/src/questionnaire/components/formulaire/notes/Note.jsx
index 10a0b9054..f26c4288c 100644
--- a/ui/src/questionnaire/components/formulaire/notes/Note.jsx
+++ b/ui/src/questionnaire/components/formulaire/notes/Note.jsx
@@ -106,7 +106,9 @@ class Note extends Component {
                                             onMouseOver={this.onMouseOverStar.bind(this, index)}
                                             onMouseOut={this.onMouseOutStar.bind(this)}
                                             onClick={this.select.bind(this, index)}
-                                        />
+                                        >
+                                            <span className="sr-only">{tooltipLabels[index]}</span>
+                                        </button>
                                     )
                                 }
                             </div>

From 69cb2f3db926e3835d0e8bc5c516e0cd3742aa89 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 3 May 2024 11:37:19 +0200
Subject: [PATCH 073/128] feat: accessibilite P08-P09 3.2 contraste

---
 ui/src/backoffice/components/common/avis/Avis.scss          | 1 -
 .../moderateur/gestion-organismes/GestionOrganismePage.scss | 1 -
 .../moderateur/gestion-organismes/components/Organisme.scss | 6 ------
 3 files changed, 8 deletions(-)

diff --git a/ui/src/backoffice/components/common/avis/Avis.scss b/ui/src/backoffice/components/common/avis/Avis.scss
index fa7e55575..d35460eb3 100644
--- a/ui/src/backoffice/components/common/avis/Avis.scss
+++ b/ui/src/backoffice/components/common/avis/Avis.scss
@@ -13,7 +13,6 @@
   }
 
   .with-opacity {
-    opacity: 0.6;
     border: 1px solid $color-grey-5;
     background-color: $color-grey-5;
     padding: 0.875rem;
diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.scss b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.scss
index 5b6f61ce5..7eeacde8a 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.scss
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.scss
@@ -3,7 +3,6 @@
 .Backoffice .GestionOrganismePage {
 
   .column-title {
-    opacity: 0.87;
     color: $color-grey-50;
     font-size: 0.75rem;
     font-weight: $font-weight-bold;
diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.scss b/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.scss
index dcd3ac8ca..ef3d3f9f3 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.scss
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.scss
@@ -5,7 +5,6 @@
   padding-top: 1rem;
 
   .raison-sociale {
-    opacity: 0.87;
     color: $color-black;
     font-size: 1rem;
     font-weight: $font-weight-bold;
@@ -13,7 +12,6 @@
   }
 
   .siret {
-    opacity: 0.87;
     color: $color-grey-50;
     font-size: 0.875rem;
     line-height: 1.25rem;
@@ -21,7 +19,6 @@
 
   .type {
     padding-top: 1rem;
-    opacity: 0.87;
     color: $color-grey-50;
     font-size: 0.875rem;
     line-height: 1.25rem;
@@ -29,7 +26,6 @@
 
   .score {
     padding-top: 1rem;
-    opacity: 0.87;
     color: $color-grey-50;
     font-size: 0.875rem;
     line-height: 1.25rem;
@@ -37,7 +33,6 @@
 
   .status {
     padding-top: 1rem;
-    opacity: 0.87;
     color: $color-green;
     font-size: 0.875rem;
     line-height: 1.25rem;
@@ -49,7 +44,6 @@
 
   .email {
     padding-top: 1rem;
-    opacity: 0.87;
     color: $color-black;
     font-size: 0.875rem;
     line-height: 1.25rem;

From fa45204d04b548450fadf691f17b98b987de9e03 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 3 May 2024 13:33:12 +0200
Subject: [PATCH 074/128] feat: accessibilite P05 10.11 responsive

---
 .../backoffice/components/anonymous/components/AvisStats.jsx   | 2 +-
 ui/src/backoffice/components/anonymous/components/Stats.scss   | 3 +--
 .../backoffice/components/anonymous/components/StatsPanel.jsx  | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
index 2b6ec55f5..756b597a1 100644
--- a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
@@ -58,7 +58,7 @@ export default class AvisStats extends React.Component {
                         </div>
                     </div>
                 </div>
-                <div className="details">
+                <div className="d-flex justify-content-between flex-wrap details" style={{ padding:'16px' }}>
                     <div className="stats">
                         <div className="name">Positifs ou neutres</div>
                         <span className="value">
diff --git a/ui/src/backoffice/components/anonymous/components/Stats.scss b/ui/src/backoffice/components/anonymous/components/Stats.scss
index 1b51f4fe3..dd453681f 100644
--- a/ui/src/backoffice/components/anonymous/components/Stats.scss
+++ b/ui/src/backoffice/components/anonymous/components/Stats.scss
@@ -79,9 +79,8 @@
     justify-content: space-between;
 
     .stats {
-      background-color: $color-grey-5;
+      background-color: $color-grey-25;
       padding: 1rem;
-      border-right: 1px solid $color-white;
       box-shadow: 0 4px 5px -5px rgba(0, 0, 0, 0.15);
       flex-grow: 1;
 
diff --git a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
index 85fe4d279..1ac6349e5 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
@@ -65,7 +65,7 @@ export default class StatsPanel extends React.Component {
                         <div>
                             {/* Section des statistiques sur les stagiaires */}
                             <dl className="row mb-5">
-                                <dt className="col-12">Statistiques sur les stagiaires&nbsp;:</dt>
+                                <dt className="col-13">Statistiques sur les stagiaires&nbsp;:</dt>
                                 <dd className="col-12">
                                     <StagiairesStats query={query} stats={results.stats} store={store} />
                                 </dd>

From 42a4d19d761b7f320af4731976cd6affd8ee37b0 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 3 May 2024 14:10:54 +0200
Subject: [PATCH 075/128] feat: accessibilite P07-P09 10.11 responsive

---
 ui/src/backoffice/Backoffice.scss                           | 6 ++++++
 .../moderateur/gestion-organismes/GestionOrganismePage.jsx  | 4 ++--
 .../moderateur/moderation-avis/ModerationAvisPage.jsx       | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui/src/backoffice/Backoffice.scss b/ui/src/backoffice/Backoffice.scss
index 78874249f..4c22b26a6 100644
--- a/ui/src/backoffice/Backoffice.scss
+++ b/ui/src/backoffice/Backoffice.scss
@@ -25,6 +25,12 @@
     width: 50%;
   }
 
+  @media screen and (max-width: 984px) {
+    .a-width-50 {
+      width: 80%;
+    }
+  }
+
   .a-green {
     color: $color-green;
   }
diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
index 6d980aee3..a76590939 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
@@ -96,9 +96,9 @@ export default class GestionOrganismePage extends React.Component {
                 form={
                     <div className="d-flex justify-content-center">
                         <Form className="a-width-50">
-                            <div className="d-flex justify-content-between">
+                            <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" for="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 60ce274ca..96eaa2273 100644
--- a/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
+++ b/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
@@ -111,7 +111,7 @@ export default class ModerationAvisPage extends React.Component {
                 form={
                     <div className="d-flex justify-content-center">
                         <Form className="a-width-50">
-                            <div className="d-flex justify-content-between" style={{ flexWrap: "wrap" }}>
+                            <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>
                                     <InputText

From 5b3889be850acd86f1f3e59f241a7239e8e87549 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 3 May 2024 15:41:11 +0200
Subject: [PATCH 076/128] feat: accessibilite formulaire - erreur commentaire
 vide

---
 .../components/formulaire/commentaire/Commentaire.jsx         | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/src/questionnaire/components/formulaire/commentaire/Commentaire.jsx b/ui/src/questionnaire/components/formulaire/commentaire/Commentaire.jsx
index 67d2cfd86..0fc570c5d 100644
--- a/ui/src/questionnaire/components/formulaire/commentaire/Commentaire.jsx
+++ b/ui/src/questionnaire/components/formulaire/commentaire/Commentaire.jsx
@@ -21,6 +21,10 @@ class Commentaire extends Component {
         super(props);
         let createBadwordsDebouncer = name => {
             return _.debounce(value => {
+                if (value === '') {
+                    this.props.onChange(name, value, true);
+                    return;
+                }
                 checkBadwords(value)
                 .then(() => this.props.onChange(name, value, true))
                 .catch(() => this.props.onChange(name, value, false));

From 6face2acaf5ec9cb68668ea9a0eaa6a990e1e41a Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 3 May 2024 17:06:18 +0200
Subject: [PATCH 077/128] feat: accessibilite P02-P03-P06 3.3 contraste

---
 .../backoffice/components/common/page/form/InputText.scss   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/backoffice/components/common/page/form/InputText.scss b/ui/src/backoffice/components/common/page/form/InputText.scss
index 239f3a86c..7665b058b 100644
--- a/ui/src/backoffice/components/common/page/form/InputText.scss
+++ b/ui/src/backoffice/components/common/page/form/InputText.scss
@@ -6,7 +6,7 @@
 
   .icon {
     flex: 0 0 auto;
-    background-color: $color-grey-5;
+    background-color: $color-grey-25;
     color: $color-black-80;
     font-size: 1.125rem;
     padding: 0.5rem;
@@ -16,7 +16,7 @@
 
   .reset {
     flex: 0 0 auto;
-    background-color: $color-grey-5;
+    background-color: $color-grey-25;
     color: $color-black-80;
     font-size: 1.125rem;
     padding: 0.5rem;
@@ -26,7 +26,7 @@
 
   input {
     flex: 1 1 auto;
-    background-color: $color-grey-5;
+    background-color: $color-grey-25;
     border: none;
     border-radius: 0.25rem;
     box-shadow: none;

From 76e3cad88a370aaeb0da1a71eea04cadffae5f03 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Mon, 6 May 2024 10:03:17 +0200
Subject: [PATCH 078/128] =?UTF-8?q?feat:=20accessibilite=20P07-P08-P09=201?=
 =?UTF-8?q?0.2=20notation=20=C3=A9toile=20aria?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/backoffice/components/common/avis/Avis.jsx  | 1 +
 ui/src/backoffice/components/common/avis/Notes.jsx | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/src/backoffice/components/common/avis/Avis.jsx b/ui/src/backoffice/components/common/avis/Avis.jsx
index 4b600c37b..913cee5a2 100644
--- a/ui/src/backoffice/components/common/avis/Avis.jsx
+++ b/ui/src/backoffice/components/common/avis/Avis.jsx
@@ -101,6 +101,7 @@ export default class Avis extends React.Component {
                         <div className={`${showModerationReponseButtons || showReponseEditor ? 'with-opacity' : ''}`}>
                             <div className="mb-3">
                                 <Stars note={avis.notes.global} />
+                                <span className="sr-only">Moyenne: {avis.notes.global} sur 5</span>
                                 {renderWorkflow(avis)}
                             </div>
 
diff --git a/ui/src/backoffice/components/common/avis/Notes.jsx b/ui/src/backoffice/components/common/avis/Notes.jsx
index a0816f61d..d943c8748 100644
--- a/ui/src/backoffice/components/common/avis/Notes.jsx
+++ b/ui/src/backoffice/components/common/avis/Notes.jsx
@@ -33,9 +33,10 @@ export default class Notes extends React.Component {
         return (
             <div className="note">
                 <div className="title">{label}</div>
-                <div className="text">
+                <div aria-hidden="true" className="text">
                     {note}/5 <Star />
                 </div>
+                <p class="sr-only">{note} sur 5</p>
             </div>
         );
     };

From 5d3e7a88ee365e2cb99878913ed8faa5656074d4 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Mon, 6 May 2024 11:21:06 +0200
Subject: [PATCH 079/128] feat: accessibilite P02 11.10 erreur champs vide

---
 .../components/anonymous/LoginPage.jsx        | 62 ++++++++++++++-----
 1 file changed, 46 insertions(+), 16 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/LoginPage.jsx b/ui/src/backoffice/components/anonymous/LoginPage.jsx
index f6b19a1f8..b7af667ff 100644
--- a/ui/src/backoffice/components/anonymous/LoginPage.jsx
+++ b/ui/src/backoffice/components/anonymous/LoginPage.jsx
@@ -20,12 +20,15 @@ export default class LoginPage extends React.Component {
     constructor(props) {
         super(props);
         this.inputRef = React.createRef();
+        this.passwordInputRef = React.createRef();
         this.state = {
             loginWithAccessToken: false,
             loading: false,
             errors: false,
+            errorMessage: '',
             identifiant: '',
             password: '',
+            emptyField: '',
         };
     }
 
@@ -40,17 +43,36 @@ export default class LoginPage extends React.Component {
 
     onSubmit = () => {
         this.setState({ loading: true });
-
-        login(this.state.identifiant, this.state.password)
-        .then(data => this.props.onLogin(data))
-        .catch(() => {
-            this.setState({ error: true, loading: false }, ()=>{
-                if (this.inputRef.current && this.inputRef.current.focus) {
-                    this.inputRef.current.focus();
-                }
-            });
-        });
+    
+        if (this.state.password === '' && this.state.identifiant === '') {
+            this.setState({ errorMessage: "Les champs de l'identifiant et du mot de passe sont vides", emptyField: 'both', loading: false });
+            if (this.inputRef.current && this.inputRef.current.focus) {
+                this.inputRef.current.focus();
+            }
+        } else if (this.state.password === '') {
+            this.setState({ errorMessage: "Le champ du mot de passe est vide", emptyField: 'password', loading: false });
+            if (this.passwordInputRef.current && this.passwordInputRef.current.focus) {
+                this.passwordInputRef.current.focus();
+            }
+        } else if (this.state.identifiant === '') {
+            this.setState({ errorMessage: "Le champ de l'identifiant est vide", emptyField: 'identifiant', loading: false });
+            if (this.inputRef.current && this.inputRef.current.focus) {
+                this.inputRef.current.focus();
+            }
+        } else {
+            login(this.state.identifiant, this.state.password)
+                .then(data => this.props.onLogin(data))
+                .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 });
+                    if (this.inputRef.current && this.inputRef.current.focus) {
+                        this.inputRef.current.focus();
+                    }
+                });
+        }
     };
+    
 
     handleAccessToken = data => {
         loginWithAccessToken(data.access_token, data.origin)
@@ -71,8 +93,7 @@ export default class LoginPage extends React.Component {
             />;
         }
 
-        let 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';
+        
 
         return (
             <>
@@ -95,12 +116,16 @@ export default class LoginPage extends React.Component {
                                             value={this.state.identifiant}
                                             placeholder="Entrez votre SIRET"
                                             onChange={event => this.setState({ identifiant: event.target.value })}
-                                            error={this.state.error ? errorMessage : ''}
+                                            error={
+                                                (this.state.emptyField === 'identifiant' || this.state.emptyField === 'both' || this.state.emptyField === 'incorrect') ?
+                                                this.state.errorMessage : ''
+                                            }
                                             autoComplete="username"
                                             className="placeholder-opaque"
                                             inputRef={this.inputRef}
                                             aria-describedby="exemple-siret"
-                                            required
+                                            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>
 
@@ -111,10 +136,15 @@ export default class LoginPage extends React.Component {
                                             value={this.state.password}
                                             placeholder="Entrez votre mot de passe "
                                             onChange={event => this.setState({ password: event.target.value })}
-                                            error={this.state.error ? ' ' : ''}
+                                            error={
+                                                (this.state.emptyField === 'password') ?
+                                                this.state.errorMessage : ''
+                                            }
                                             autoComplete="current-password"
                                             className="placeholder-opaque"
-                                            required
+                                            aria-invalid="true"
+                                            inputRef={this.passwordInputRef}
+                                            aria-required="true"
                                         />
                                     </>
                                 }

From 43107c3b16e7229418005b5d78d9fb3b48c7ff48 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Mon, 6 May 2024 12:02:52 +0200
Subject: [PATCH 080/128] feat: accessibilite P04-P05 contraste filtre Select

---
 ui/src/backoffice/components/common/page/form/Periode.scss   | 2 +-
 ui/src/backoffice/components/common/page/form/Select.scss    | 2 +-
 ui/src/backoffice/components/common/page/form/date/Date.scss | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/backoffice/components/common/page/form/Periode.scss b/ui/src/backoffice/components/common/page/form/Periode.scss
index 5302b5606..9a102808f 100644
--- a/ui/src/backoffice/components/common/page/form/Periode.scss
+++ b/ui/src/backoffice/components/common/page/form/Periode.scss
@@ -2,7 +2,7 @@
 
 .Backoffice .Periode {
   padding: 0.50rem 0.30rem;
-  background-color: $color-grey-5;
+  background-color: $color-grey-25;
   border: 1px solid $color-grey-5;
   border-radius: 6px;
 
diff --git a/ui/src/backoffice/components/common/page/form/Select.scss b/ui/src/backoffice/components/common/page/form/Select.scss
index 71a9a6a6f..ae64f3336 100644
--- a/ui/src/backoffice/components/common/page/form/Select.scss
+++ b/ui/src/backoffice/components/common/page/form/Select.scss
@@ -3,7 +3,7 @@
 .Backoffice .Select {
 
   .Select__control {
-    background-color: $color-grey-5;
+    background-color: $color-grey-25;
     box-shadow: unset;
     border: 1px solid $color-grey-5;
     border-radius: 6px;
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 ea4604239..dab0753ba 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,7 @@
 .Backoffice .Date {
 
   input {
-    background-color: $color-grey-5;
+    background-color: $color-grey-25;
     border: none;
     box-shadow: none;
     text-shadow: 0 0 0 gray;

From 2a6973c6d2531d8671cd9f758e3ba6b3b7c5a54d Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Mon, 6 May 2024 14:26:01 +0200
Subject: [PATCH 081/128] feat: accessibilite P04-P06 11.10 erreur champs vide
 + ReinitialisationMotDePasse

---
 .../components/anonymous/LoginPage.jsx           |  6 +++---
 .../anonymous/MotDePasseOubliePage.jsx           |  2 +-
 .../anonymous/ReinitialisationMotDePassePage.jsx | 16 ++++++++++++----
 .../components/common/MonComptePage.jsx          |  7 +++++--
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/LoginPage.jsx b/ui/src/backoffice/components/anonymous/LoginPage.jsx
index b7af667ff..3292e5441 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: "Les champs de l'identifiant et du mot de passe sont vides", emptyField: 'both', loading: false });
+            this.setState({ errorMessage: "Veuillez remplir tous les champs.", emptyField: 'both', loading: false });
             if (this.inputRef.current && this.inputRef.current.focus) {
                 this.inputRef.current.focus();
             }
         } else if (this.state.password === '') {
-            this.setState({ errorMessage: "Le champ du mot de passe est vide", emptyField: 'password', loading: false });
+            this.setState({ errorMessage: "Veuillez remplir votre mot de passe.", emptyField: 'password', loading: false });
             if (this.passwordInputRef.current && this.passwordInputRef.current.focus) {
                 this.passwordInputRef.current.focus();
             }
         } else if (this.state.identifiant === '') {
-            this.setState({ errorMessage: "Le champ de l'identifiant est vide", emptyField: 'identifiant', loading: false });
+            this.setState({ errorMessage: "Veuillez remplir votre identifiant.", emptyField: 'identifiant', loading: false });
             if (this.inputRef.current && this.inputRef.current.focus) {
                 this.inputRef.current.focus();
             }
diff --git a/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx b/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
index 698a7cad1..bbaeb1c39 100644
--- a/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
+++ b/ui/src/backoffice/components/anonymous/MotDePasseOubliePage.jsx
@@ -44,7 +44,7 @@ export default class MotDePasseOubliePage extends React.Component {
             });
         })
         .catch(() => {
-            this.setState({ error: 'Une erreur est survenue', loading: false },()=>{
+            this.setState({ error: "Veuillez remplir votre identifiant.", loading: false },()=>{
                 if (this.inputRef.current && this.inputRef.current.focus) {
                     this.inputRef.current.focus();
                 }
diff --git a/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx b/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
index 3ff39bd90..05752ae15 100644
--- a/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
+++ b/ui/src/backoffice/components/anonymous/ReinitialisationMotDePassePage.jsx
@@ -28,6 +28,7 @@ export default class ReinitialisationMotDePassePage extends React.Component {
             errors: {
                 passwordNotStrongEnough: null,
                 isNotSamePassword: null,
+                emptyField: null, // Ajout du champ pour gérer les champs vides
             },
         };
     }
@@ -60,6 +61,7 @@ export default class ReinitialisationMotDePassePage 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: (password === '' || confirmation === '') ? 'Veuillez remplir tous les champs.' : null,
             }
         }, async () => {
             let isFormValid = _.every(Object.values(this.state.errors), v => !v);
@@ -106,25 +108,31 @@ export default class ReinitialisationMotDePassePage extends React.Component {
                                 title="Créer un nouveau mot de passe"
                                 elements={
                                     <>
-                                        <label>Nouveau mot de passe</label>
+                                        <label for="newMotDePasse" className="mt-3">Nouveau mot de passe</label>
                                         <InputText
+                                            id="newMotDePasse"
                                             type="password"
                                             value={this.state.password}
                                             placeholder="Mot de passe"
-                                            error={errors.passwordNotStrongEnough}
+                                            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"
                                         />
 
-                                        <label className="mt-3">Confirmer le nouveau mot de passe</label>
+                                        <label for="confMotDePasse" className="mt-3">Confirmer le nouveau mot de passe</label>
                                         <InputText
+                                            id="confMotDePasse"
                                             type="password"
                                             value={this.state.confirmation}
                                             placeholder="Mot de passe"
-                                            error={errors.isNotSamePassword}
+                                            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/MonComptePage.jsx b/ui/src/backoffice/components/common/MonComptePage.jsx
index d75be487c..a8aeaa96e 100644
--- a/ui/src/backoffice/components/common/MonComptePage.jsx
+++ b/ui/src/backoffice/components/common/MonComptePage.jsx
@@ -24,6 +24,7 @@ export default class MonComptePage extends React.Component {
             errors: {
                 passwordNotStrongEnough: null,
                 isNotSamePassword: null,
+                emptyField: null,
             },
         };
     }
@@ -39,6 +40,7 @@ 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,
             }
         }, async () => {
             let isFormValid = _.every(Object.values(this.state.errors), v => !v);
@@ -101,6 +103,7 @@ 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}
                                             inputRef={this.inputRef}
                                         />
 
@@ -110,7 +113,7 @@ export default class MonComptePage extends React.Component {
                                             type="password"
                                             value={this.state.password}
                                             placeholder="Mot de passe"
-                                            error={errors.passwordNotStrongEnough}
+                                            error={errors.emptyField || errors.passwordNotStrongEnough}
                                             onChange={event => this.setState({ password: event.target.value })}
                                             autoComplete="new-password"
                                         />
@@ -121,7 +124,7 @@ export default class MonComptePage extends React.Component {
                                             type="password"
                                             value={this.state.confirmation}
                                             placeholder="Mot de passe"
-                                            error={errors.isNotSamePassword}
+                                            error={errors.emptyField || errors.isNotSamePassword}
                                             onChange={event => this.setState({ confirmation: event.target.value })}
                                             autoComplete="new-password"
                                         />

From 8a792c0c7e796f540c459712364bccbe9a2abdee Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Mon, 6 May 2024 15:25:20 +0200
Subject: [PATCH 082/128] =?UTF-8?q?feat:=20accessibilite=20P04=2010.2=20no?=
 =?UTF-8?q?tation=20=C3=A9toile=20aria?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/avis/charts/NoteExplications.jsx   |   8 +-
 .../common/avis/charts/NoteRepartition.jsx    |  16 +-
 .../financeur/components/FinanceurForm.jsx    | 158 ++++++++++--------
 3 files changed, 98 insertions(+), 84 deletions(-)

diff --git a/ui/src/backoffice/components/common/avis/charts/NoteExplications.jsx b/ui/src/backoffice/components/common/avis/charts/NoteExplications.jsx
index 0c2c571e6..733ebea5f 100644
--- a/ui/src/backoffice/components/common/avis/charts/NoteExplications.jsx
+++ b/ui/src/backoffice/components/common/avis/charts/NoteExplications.jsx
@@ -8,10 +8,11 @@ const NoteCriteria = props => {
         <div className="NoteCriteria">
             <div className="moyenne">
                 <div className="label">{props.label}</div>
-                <div className="note d-flex justify-content-center align-items-center">
+                <div aria-hidden="true" className="note d-flex justify-content-center align-items-center">
                     <span className="value">{props.note.moyenne}</span>/5
                     <Star svg={false} />
                 </div>
+                <p class="sr-only">{props.note.moyenne} sur 5</p>
             </div>
             <div className="d-flex flex-column">
                 <div className="explication">
@@ -40,10 +41,11 @@ const NoteGlobale = props => {
         <div className="NoteGlobale d-flex justify-content-start align-items-center">
             <div className="label pr-3">Moyenne globale</div>
             <div className="note d-flex justify-content-between align-items-baseline px-3">
-                <div className="d-flex align-items-center pr-3">
+                <div aria-hidden="true" className="d-flex align-items-center pr-3">
                     <span className="value">{props.note.moyenne}</span>/5
-                    <Star svg={false} />
+                    <Star svg={false}/>
                 </div>
+                <p class="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 d42f46604..849ff1380 100644
--- a/ui/src/backoffice/components/common/avis/charts/NoteRepartition.jsx
+++ b/ui/src/backoffice/components/common/avis/charts/NoteRepartition.jsx
@@ -11,14 +11,15 @@ const NoteGauges = props => {
         <li className="NoteGauges">
             <div className="moyenne">
                 <div className="label">{props.label}</div>
-                <div className="note">
+                <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>
             </div>
             <ul className="d-flex flex-column no-space">
                 <li className="repartition">
                     <div className="definition">
-                        5 <Star />
+                        5 <Star /><span className="sr-only">étoiles</span>
                     </div>
                     <div className="gauge">
                         <div className="filler" style={{ width: percentage(props.note['5']) }}></div>
@@ -29,7 +30,7 @@ const NoteGauges = props => {
                 </li>
                 <li className="repartition">
                     <div className="definition">
-                        4 <Star />
+                        4 <Star /><span className="sr-only">étoiles</span>
                     </div>
                     <div className="gauge">
                         <div className="filler" style={{ width: percentage(props.note['4']) }}></div>
@@ -40,7 +41,7 @@ const NoteGauges = props => {
                 </li>
                 <li className="repartition">
                     <div className="definition">
-                        3 <Star />
+                        3 <Star /><span className="sr-only">étoiles</span>
                     </div>
                     <div className="gauge">
                         <div className="filler" style={{ width: percentage(props.note['3']) }}></div>
@@ -51,7 +52,7 @@ const NoteGauges = props => {
                 </li>
                 <li className="repartition">
                     <div className="definition">
-                        2 <Star />
+                        2 <Star /><span className="sr-only">étoiles</span>
                     </div>
                     <div className="gauge">
                         <div className="filler" style={{ width: percentage(props.note['2']) }}></div>
@@ -62,7 +63,7 @@ const NoteGauges = props => {
                 </li>
                 <li className="repartition">
                     <div className="definition">
-                        1 <Star />
+                        1 <Star /><span className="sr-only">étoile</span>
                     </div>
                     <div className="gauge">
                         <div className="filler" style={{ width: percentage(props.note['1']) }}></div>
@@ -87,9 +88,10 @@ const NoteGlobale = props => {
         <div className="NoteGlobale align-self-center">
             <span className="label">Moyenne globale</span>
             <div className="moyenne">
-                <div className="note">
+                <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>
             </div>
             <div className="total">
                 {props.total} notes
diff --git a/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx b/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
index fb5b88972..6688b6bfc 100644
--- a/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
+++ b/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
@@ -104,7 +104,7 @@ export default class FinanceurForm extends React.Component {
                 </div>
                 <div className="form-group col-lg-6 col-xl-3">
                     {this.mustShowCodeRegionFilter() ?
-                        <>
+                        <fieldset>
                             <label>Regions</label>
                             <Select
                                 placeholder={'Toutes les régions'}
@@ -116,8 +116,8 @@ export default class FinanceurForm extends React.Component {
                                 optionLabel="nom"
                                 onChange={(option = {}) => this.setState({ codeRegion: option.codeRegion })}
                             />
-                        </> :
-                        <>
+                        </fieldset> :
+                        <fieldset>
                             <label>Départements</label>
                             <Select
                                 placeholder={'Tous les départements'}
@@ -129,96 +129,106 @@ export default class FinanceurForm extends React.Component {
                                 optionLabel="label"
                                 onChange={(option = {}) => this.setState({ departement: option.code })}
                             />
-                        </>
+                        </fieldset>
                     }
                 </div>
             </div>
 
             <div className="form-row">
                 <div className="form-group col-lg-4">
-                    <label>SIRET de l&apos;organisme de formation</label>
-                    <InputText
-                        type="number"
-                        value={this.state.siret}
-                        placeholder="000000000000000"
-                        icon={<i className="fas fa-search" />}
-                        reset={() => this.setState({ siret: '', siren: null, numeroFormation: null })}
-                        onChange={
-                            (event = {}) => {
-                                const nouveauSIRET = event.target.value;
-                                const nouveauSIREN = store.sirens.find(s => s.siren === nouveauSIRET.substring(0, 9));
-                                this.setState({
-                                    siret: nouveauSIRET,
-                                    siren: nouveauSIREN?.siren,
-                                    numeroFormation: null
-                                }, () => {
-                                    if (nouveauSIREN) {
-                                        loadFormations(nouveauSIREN.siren);
-                                    }
-                                });
+                    <fieldset>
+                        <label>SIRET de l&apos;organisme de formation</label>
+                        <InputText
+                            type="number"
+                            value={this.state.siret}
+                            placeholder="000000000000000"
+                            icon={<i className="fas fa-search" />}
+                            reset={() => this.setState({ siret: '', siren: null, numeroFormation: null })}
+                            onChange={
+                                (event = {}) => {
+                                    const nouveauSIRET = event.target.value;
+                                    const nouveauSIREN = store.sirens.find(s => s.siren === nouveauSIRET.substring(0, 9));
+                                    this.setState({
+                                        siret: nouveauSIRET,
+                                        siren: nouveauSIREN?.siren,
+                                        numeroFormation: null
+                                    }, () => {
+                                        if (nouveauSIREN) {
+                                            loadFormations(nouveauSIREN.siren);
+                                        }
+                                    });
+                                }
                             }
-                        }
-                    />
+                        />
+                    </fieldset>
                 </div>
                 <div className="form-group col-lg-4">
-                    <label>Nom de l&apos;organisme de formation</label>
-                    <Select
-                        placeholder={'Tous les organismes'}
-                        trackingId="Nom de l'organisme de formation"
-                        loading={store.loading}
-                        value={this.state.siren}
-                        options={store.sirens}
-                        optionKey="siren"
-                        optionLabel="name"
-                        onChange={(option = {}) => {
-                            this.setState({ siren: option.siren, numeroFormation: null, siret: '' }, () => {
-                                loadFormations(option.siren);
-                            });
-                        }}
-                    />
+                    <fieldset>
+                        <label>Nom de l&apos;organisme de formation</label>
+                        <Select
+                            placeholder={'Tous les organismes'}
+                            trackingId="Nom de l'organisme de formation"
+                            loading={store.loading}
+                            value={this.state.siren}
+                            options={store.sirens}
+                            optionKey="siren"
+                            optionLabel="name"
+                            onChange={(option = {}) => {
+                                this.setState({ siren: option.siren, numeroFormation: null, siret: '' }, () => {
+                                    loadFormations(option.siren);
+                                });
+                            }}
+                        />
+                    </fieldset>
                 </div>
                 {this.state.siren &&
                 <div className={`form-group col-lg-4`}>
-                    <label>Formation</label>
-                    <Select
-                        placeholder={'Toutes les formations'}
-                        trackingId="Formation"
-                        loading={store.loading}
-                        value={this.state.numeroFormation}
-                        options={store.formations}
-                        optionKey="numeroFormation"
-                        optionLabel="title"
-                        onChange={(option = {}) => this.setState({ numeroFormation: option.numeroFormation })}
-                    />
+                    <fieldset>
+                        <label>Formation</label>
+                        <Select
+                            placeholder={'Toutes les formations'}
+                            trackingId="Formation"
+                            loading={store.loading}
+                            value={this.state.numeroFormation}
+                            options={store.formations}
+                            optionKey="numeroFormation"
+                            optionLabel="title"
+                            onChange={(option = {}) => this.setState({ numeroFormation: option.numeroFormation })}
+                        />
+                    </fieldset>
                 </div>
                 }
                 {this.mustShowFinanceurFilter() &&
                 <>
                     <div className="form-group col-lg-5 col-xl-5">
-                        <label>Financeur</label>
-                        <Select
-                            placeholder={'Tous les financeurs'}
-                            trackingId="Financeur"
-                            loading={store.loading}
-                            value={this.state.codeFinanceur}
-                            options={store.financeurs}
-                            optionKey="code"
-                            optionLabel="label"
-                            onChange={(option = {}) => this.setState({ codeFinanceur: option.code })}
-                        />
+                        <fieldset>
+                            <label>Financeur</label>
+                            <Select
+                                placeholder={'Tous les financeurs'}
+                                trackingId="Financeur"
+                                loading={store.loading}
+                                value={this.state.codeFinanceur}
+                                options={store.financeurs}
+                                optionKey="code"
+                                optionLabel="label"
+                                onChange={(option = {}) => this.setState({ codeFinanceur: option.code })}
+                            />
+                        </fieldset>
                     </div>
                     <div className="form-group col-lg-5 col-xl-5">
-                        <label>Dispositif de financement</label>
-                        <Select
-                            placeholder={'Tous les dispositifs'}
-                            trackingId="Dispositif"
-                            loading={store.loading}
-                            value={this.state.dispositifFinancement}
-                            options={store.dispositifs}
-                            optionKey="code"
-                            optionLabel="code"
-                            onChange={(option = {}) => this.setState({ dispositifFinancement: option.code })}
-                        />
+                        <fieldset>
+                            <label>Dispositif de financement</label>
+                            <Select
+                                placeholder={'Tous les dispositifs'}
+                                trackingId="Dispositif"
+                                loading={store.loading}
+                                value={this.state.dispositifFinancement}
+                                options={store.dispositifs}
+                                optionKey="code"
+                                optionLabel="code"
+                                onChange={(option = {}) => this.setState({ dispositifFinancement: option.code })}
+                            />
+                        </fieldset>
                     </div>
                 </>
                 }

From c4c2e501dd521397cdc597a64eccd6425e51249b Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Mon, 6 May 2024 16:45:29 +0200
Subject: [PATCH 083/128] feat: accessibilite P04 7.1 lien par defaut

---
 ui/src/backoffice/components/financeur/FinanceurPage.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/backoffice/components/financeur/FinanceurPage.jsx b/ui/src/backoffice/components/financeur/FinanceurPage.jsx
index 7beda10bd..8a50b361c 100644
--- a/ui/src/backoffice/components/financeur/FinanceurPage.jsx
+++ b/ui/src/backoffice/components/financeur/FinanceurPage.jsx
@@ -95,6 +95,7 @@ export default class FinanceurPage extends React.Component {
         let { router } = this.props;
         let { store } = this.state;
         let query = router.getQuery();
+        let isNoTabActive = !router.isActive('/backoffice/financeur/avis/charts') && !router.isActive('/backoffice/financeur/avis/liste');
 
         return (
             <Page
@@ -111,7 +112,7 @@ export default class FinanceurPage extends React.Component {
                     <Tabs>
                         <Tab
                             label="Vue graphique"
-                            isActive={() => router.isActive('/backoffice/financeur/avis/charts')}
+                            isActive={() => isNoTabActive || router.isActive('/backoffice/financeur/avis/charts')}
                             onClick={() => this.onTabClicked('/backoffice/financeur/avis/charts')}
                         />
                         <Tab

From 0dba70b9b71b7d89c918b1271bdb7ab42f14a467 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Tue, 7 May 2024 14:49:57 +0200
Subject: [PATCH 084/128] feat: accessibilite P04 12.11 graphique hover + aria
 + clavier

---
 .../common/avis/charts/CommentairesPies.jsx   | 77 +++++++------------
 .../common/avis/charts/NoteRepartition.jsx    |  4 +-
 .../common/page/panel/results/stats/Pie.jsx   |  2 +-
 3 files changed, 31 insertions(+), 52 deletions(-)

diff --git a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx
index 2fb9a53fc..d65b25017 100644
--- a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx
+++ b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx
@@ -3,75 +3,54 @@ import PropTypes from 'prop-types';
 import './CommentairesPies.scss';
 import Pie from '../../../common/page/panel/results/stats/Pie';
 
+let round = value => Number(Math.round(value + 'e1') + 'e-1');
+
 const CommentairesPies = ({ stats }) => {
 
     let colors = ['#007E54', '#E5F2ED', '#66B298'];
+    let totalComMod = stats.nbCommentairesValidated+stats.nbCommentairesRejected+stats.nbCommentairesReported+stats.nbCommentairesArchived;
+    let totalComVal = stats.nbCommentairesPositifs + stats.nbCommentairesNegatifs;
+    let totalComRej = stats.nbCommentairesNonConcernes + stats.nbCommentaires + stats.nbCommentairesInjures;
 
     return (
         <div className="CommentairesPies">
             <h2 className="title">Les commentaires</h2>
             <div className="box d-flex flex-wrap flex-row">
-                <div className="chart first">
+                <div className="chart first" tabIndex="0">
                     <div className="title">Modération des commentaires</div>
                     <div className="description">{stats.nbCommentaires} commentaires au total</div>
                     <Pie colors={colors} data={[
-                        {
-                            id: 'Validés',
-                            value: stats.nbCommentairesValidated,
-                            label: 'commentaires',
-                        },
-                        {
-                            id: 'Rejetés',
-                            value: stats.nbCommentairesRejected,
-                            label: 'commentaires',
-                        },
-                        {
-                            id: 'Signalés',
-                            value: stats.nbCommentairesReported,
-                            label: 'commentaires',
-                        },
-                        {
-                            id: 'Archivés',
-                            value: stats.nbCommentairesArchived,
-                            label: 'commentaires',
-                        },
-                    ]} />
+                        ...(stats.nbCommentairesValidated !== 0 ?
+                            [{ id:`Validés (${round((stats.nbCommentairesValidated / totalComMod) * 100)}%)`,value: stats.nbCommentairesValidated,label: 'commentaires'}] : []),
+                        ...(stats.nbCommentairesRejected !== 0 ?
+                            [{ id: `Rejetés (${round((stats.nbCommentairesRejected / totalComMod) * 100)}%)`, value: stats.nbCommentairesRejected, label: 'commentaires' }] : []),
+                        ...(stats.nbCommentairesReported !== 0 ?
+                            [{ id: `Signalés (${round((stats.nbCommentairesReported / totalComMod) * 100)}%)`, value: stats.nbCommentairesReported, label: 'commentaires' }] : []),
+                        ...(stats.nbCommentairesArchived !== 0 ?
+                            [{ id: `Archivés (${round((stats.nbCommentairesArchived / totalComMod) * 100)}%)`, value: stats.nbCommentairesArchived, label: 'commentaires' }] : []),
+                    ]}>
+                    </Pie>
                 </div>
-                <div className="chart second">
+                <div className="chart second" tabIndex="0">
                     <div className="title">Commentaires validés</div>
                     <div className="description">{stats.nbCommentairesValidated} commentaires au total</div>
                     <Pie colors={colors} data={[
-                        {
-                            id: 'Positifs',
-                            value: stats.nbCommentairesPositifs,
-                            label: 'commentaires',
-                        },
-                        {
-                            id: 'Négatifs',
-                            value: stats.nbCommentairesNegatifs,
-                            label: 'commentaires',
-                        },
+                        ...(stats.nbCommentairesPositifs !== 0 ?
+                            [{ id: `Positifs (${round((stats.nbCommentairesPositifs / totalComVal) * 100)}%)`, value: stats.nbCommentairesPositifs, label: 'commentaires' }] : []),
+                        ...(stats.nbCommentairesNegatifs !== 0 ?
+                            [{ id: `Négatifs (${round((stats.nbCommentairesNegatifs / totalComVal) * 100)}%)`, value: stats.nbCommentairesNegatifs, label: 'commentaires' }] : []),
                     ]} />
                 </div>
-                <div className="chart last">
+                <div className="chart last" tabIndex="0">
                     <div className="title">Commentaires rejetés</div>
                     <div className="description">{stats.nbCommentairesRejected} commentaires au total</div>
                     <Pie colors={colors} data={[
-                        {
-                            id: 'Non concernés',
-                            value: stats.nbCommentairesNonConcernes,
-                            label: 'commentaires',
-                        },
-                        {
-                            id: 'Alertes',
-                            value: stats.nbCommentairesAlertes,
-                            label: 'commentaires',
-                        },
-                        {
-                            id: 'Injures',
-                            value: stats.nbCommentairesInjures,
-                            label: 'commentaires',
-                        },
+                        ...(stats.nbCommentairesNonConcernes !== 0 ?
+                            [{ id: `Non concernés (${round((stats.nbCommentairesNonConcernes / totalComRej) * 100)}%)`, value: stats.nbCommentairesNonConcernes, label: 'commentaires' }] : []),
+                        ...(stats.nbCommentairesAlertes !== 0 ?
+                            [{ id: `Alertes (${round((stats.nbCommentairesAlertes / totalComRej) * 100)}%)`, value: stats.nbCommentairesAlertes, label: 'commentaires' }] : []),
+                        ...(stats.nbCommentairesInjures !== 0 ?
+                            [{ id: `Injures (${round((stats.nbCommentairesInjures / totalComRej) * 100)}%)`, value: stats.nbCommentairesInjures, label: 'commentaires' }] : []),
                     ]} />
                 </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 849ff1380..bc6ee5808 100644
--- a/ui/src/backoffice/components/common/avis/charts/NoteRepartition.jsx
+++ b/ui/src/backoffice/components/common/avis/charts/NoteRepartition.jsx
@@ -8,7 +8,7 @@ const NoteGauges = props => {
     let percentage = value => `${Math.round((value / props.total) * 100)}%`;
 
     return (
-        <li className="NoteGauges">
+        <li className="NoteGauges" tabIndex="0">
             <div className="moyenne">
                 <div className="label">{props.label}</div>
                 <div aria-hidden="true" className="note">
@@ -85,7 +85,7 @@ NoteGauges.propTypes = {
 
 const NoteGlobale = props => {
     return (
-        <div className="NoteGlobale align-self-center">
+        <div className="NoteGlobale align-self-center" tabIndex="0">
             <span className="label">Moyenne globale</span>
             <div className="moyenne">
                 <div aria-hidden="true" className="note">
diff --git a/ui/src/backoffice/components/common/page/panel/results/stats/Pie.jsx b/ui/src/backoffice/components/common/page/panel/results/stats/Pie.jsx
index f9443ddfb..295469077 100644
--- a/ui/src/backoffice/components/common/page/panel/results/stats/Pie.jsx
+++ b/ui/src/backoffice/components/common/page/panel/results/stats/Pie.jsx
@@ -10,7 +10,7 @@ let round = value => Number(Math.round(value + 'e1') + 'e-1');
 const Pie = ({ data, colors }) => {
 
     let total = _.sumBy(data, d => d.value);
-    let prettyLabel = element => `${element.id} (${round((element.value / total) * 100)}%)`;
+    let prettyLabel = element => `(${round((element.datum.value / total) * 100)}%)`;
 
     return (
         <div className="Pie">

From 670d3ddca3380dec6b8a4ed9c1d73263ec1f035d Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Tue, 7 May 2024 15:32:42 +0200
Subject: [PATCH 085/128] feat: accessibilite P04-P05 8.9 balisage icon

---
 .../anonymous/components/AvisStats.jsx        |  2 +-
 .../anonymous/components/FormationStats.jsx   |  2 +-
 .../anonymous/components/ModerationStats.jsx  |  2 +-
 .../anonymous/components/OrganismeStats.jsx   |  2 +-
 .../anonymous/components/StagiairesStats.jsx  |  2 +-
 .../anonymous/components/StatsForm.jsx        | 24 ++++++++++---------
 .../common/avis/charts/NoteRepartition.scss   |  4 ++--
 .../common/page/panel/results/stats/Star.jsx  |  2 +-
 .../common/page/panel/results/stats/Star.scss |  2 +-
 9 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
index 756b597a1..ff4633884 100644
--- a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
@@ -20,7 +20,7 @@ export default class AvisStats extends React.Component {
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
                     <h2 className="title">
-                        <i className="far fa-comment-alt a-icon"></i>
+                        <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Avis
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
diff --git a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
index dfe252e78..d963c19e6 100644
--- a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
@@ -21,7 +21,7 @@ export default class FormationStats extends React.Component {
                 <div className="main with-details d-flex flex-column">
                     <h2 className="title">
                         <div>
-                            <i className="fas fa-graduation-cap a-icon"></i>
+                            <span aria-hidden="true" className="fas fa-graduation-cap a-icon"></span>
                             Formations
                         </div>
                         <div className="description">(source Intercarif)</div>
diff --git a/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx b/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
index 9bcab08ac..d6df28843 100644
--- a/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
@@ -19,7 +19,7 @@ export default class ModerationStats extends React.Component {
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
                     <h2 className="title">
-                        <i className="far fa-comment-alt a-icon"></i>
+                        <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Modération
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
diff --git a/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx b/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
index 60f50797e..e89870dae 100644
--- a/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
@@ -19,7 +19,7 @@ export default class OrganismeStats extends React.Component {
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
                     <h2 className="title">
-                        <i className="far fa-comment-alt a-icon"></i>
+                        <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Organismes
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
diff --git a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
index 67e9be7ac..a8add0305 100644
--- a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
@@ -29,7 +29,7 @@ export default class StagiairesStats extends React.Component {
                 <div className="main d-flex justify-content-center justify-content-lg-between">
                     <div className="d-flex flex-column">
                         <h2 className="title">
-                            <i className="far fa-user a-icon"></i>
+                            <span aria-hidden="true" className="far fa-user a-icon"></span>
                             Stagiaires
                         </h2>
                         <div className="d-flex justify-content-around flex-wrap">
diff --git a/ui/src/backoffice/components/anonymous/components/StatsForm.jsx b/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
index 44295c698..4aaa6bba6 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
@@ -56,17 +56,19 @@ 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">
-                            <h2 style={{fontSize: "1.125rem", fontWeight: 700}}>Filtrer par région</h2>
-                            <Select
-                                placeholder={'Toutes les régions'}
-                                trackingId="Regions"
-                                loading={store.loading}
-                                value={codeRegion}
-                                options={store.regions}
-                                optionKey="codeRegion"
-                                optionLabel="nom"
-                                onChange={(option = {}) => this.setState({ codeRegion: option.codeRegion })}
-                            />
+                            <fieldset>
+                                <label style={{fontSize: "1.125rem", fontWeight: 700}}>Filtrer par région</label>
+                                <Select
+                                    placeholder={'Toutes les régions'}
+                                    trackingId="Regions"
+                                    loading={store.loading}
+                                    value={codeRegion}
+                                    options={store.regions}
+                                    optionKey="codeRegion"
+                                    optionLabel="nom"
+                                    onChange={(option = {}) => this.setState({ codeRegion: option.codeRegion })}
+                                />
+                            </fieldset>
                         </div>
                         <Button
                             size="large"
diff --git a/ui/src/backoffice/components/common/avis/charts/NoteRepartition.scss b/ui/src/backoffice/components/common/avis/charts/NoteRepartition.scss
index 0b8c7cce2..3ecb4546f 100644
--- a/ui/src/backoffice/components/common/avis/charts/NoteRepartition.scss
+++ b/ui/src/backoffice/components/common/avis/charts/NoteRepartition.scss
@@ -92,12 +92,12 @@
         .gauge {
           width: 70%;
           float: right;
-          background-color: $color-grey-25;
+          background-color: $color-grey-50;
           margin-right: 0.35rem;
 
           .filler {
             height: 0.25rem;
-            background-color: $color-yellow;
+            background-color: $color-orange
           }
         }
       }
diff --git a/ui/src/backoffice/components/common/page/panel/results/stats/Star.jsx b/ui/src/backoffice/components/common/page/panel/results/stats/Star.jsx
index 332c0f74a..fad82ede6 100644
--- a/ui/src/backoffice/components/common/page/panel/results/stats/Star.jsx
+++ b/ui/src/backoffice/components/common/page/panel/results/stats/Star.jsx
@@ -8,7 +8,7 @@ const Star = props => {
     if (!props.svg) {
         return (<img src={star} className={className} alt="star" />);
     }
-    return (<i className={`${className} fas fa-star`}></i>);
+    return (<span aria-hidden="true" className={`${className} fas fa-star`}></span>);
 };
 
 Star.propTypes = {
diff --git a/ui/src/backoffice/components/common/page/panel/results/stats/Star.scss b/ui/src/backoffice/components/common/page/panel/results/stats/Star.scss
index bb1c1b31d..8669c9258 100644
--- a/ui/src/backoffice/components/common/page/panel/results/stats/Star.scss
+++ b/ui/src/backoffice/components/common/page/panel/results/stats/Star.scss
@@ -1,6 +1,6 @@
 @import 'src/common/styles/variables';
 
 .Backoffice .Star {
-  color: $color-yellow;
+  color: $color-orange;
 }
 

From d1c46429d59ab01c331879bc6a440a6c5998e121 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 10 May 2024 10:08:15 +0200
Subject: [PATCH 086/128] feat: accessibilite P07-P08-09 8.9

---
 .../components/common/avis/Avis.jsx           |  2 +-
 .../components/common/avis/CommentReport.jsx  |  2 +-
 .../common/avis/CommentaireEditor.jsx         |  4 +-
 .../components/common/avis/Reponse.jsx        |  2 +-
 .../components/common/avis/Titre.jsx          |  2 +-
 .../components/common/avis/Workflow.jsx       | 12 +--
 .../common/avis/buttons/EditButton.jsx        |  8 +-
 .../common/avis/buttons/EditReponseButton.jsx |  6 +-
 .../common/avis/buttons/MarkAsReadButton.jsx  |  2 +-
 .../common/avis/buttons/RejectButton.jsx      |  2 +-
 .../avis/buttons/RejectReponseButton.jsx      |  2 +-
 .../common/avis/buttons/ReportButton.jsx      |  2 +-
 .../common/avis/buttons/ValidateButton.jsx    |  6 +-
 .../avis/buttons/ValidateReponseButton.jsx    |  2 +-
 .../GestionOrganismePage.jsx                  | 94 ++++++++++---------
 .../components/Organisme.jsx                  | 32 +++----
 .../components/buttons/EditButton.jsx         |  6 +-
 .../moderation-avis/ModerationAvisPage.jsx    |  2 +-
 18 files changed, 95 insertions(+), 93 deletions(-)

diff --git a/ui/src/backoffice/components/common/avis/Avis.jsx b/ui/src/backoffice/components/common/avis/Avis.jsx
index 913cee5a2..027098114 100644
--- a/ui/src/backoffice/components/common/avis/Avis.jsx
+++ b/ui/src/backoffice/components/common/avis/Avis.jsx
@@ -102,7 +102,7 @@ export default class Avis extends React.Component {
                             <div className="mb-3">
                                 <Stars note={avis.notes.global} />
                                 <span className="sr-only">Moyenne: {avis.notes.global} sur 5</span>
-                                {renderWorkflow(avis)}
+                                <p>{renderWorkflow(avis)}</p>
                             </div>
 
                             <div className="mb-1">
diff --git a/ui/src/backoffice/components/common/avis/CommentReport.jsx b/ui/src/backoffice/components/common/avis/CommentReport.jsx
index 19df451bc..faed2c25b 100644
--- a/ui/src/backoffice/components/common/avis/CommentReport.jsx
+++ b/ui/src/backoffice/components/common/avis/CommentReport.jsx
@@ -19,7 +19,7 @@ export default class CommentReport extends React.Component {
                 <div className="Titre">
                     <span className={`mr-1 title`}>Commentaire du signalement OF</span>
                 </div>
-                <span className="Commentaire">{avis.commentReport}</span>
+                <p className="Commentaire">{avis.commentReport}</p>
             </div>
         );
     }
diff --git a/ui/src/backoffice/components/common/avis/CommentaireEditor.jsx b/ui/src/backoffice/components/common/avis/CommentaireEditor.jsx
index 742a166e0..3f2e7a9aa 100644
--- a/ui/src/backoffice/components/common/avis/CommentaireEditor.jsx
+++ b/ui/src/backoffice/components/common/avis/CommentaireEditor.jsx
@@ -62,11 +62,11 @@ export default class CommentaireEditor extends React.Component {
                         items={
                             <div>
                                 <DropdownItem onClick={() => this.validate('négatif')}>
-                                    <i className="far fa-thumbs-down icon" /> Négatif
+                                    <span aria-hidden="true" className="far fa-thumbs-down icon" /> Négatif
                                 </DropdownItem>
                                 <DropdownDivider />
                                 <DropdownItem onClick={() => this.validate('positif')}>
-                                    <i className="far fa-thumbs-up icon" /> Positif ou neutre
+                                    <span aria-hidden="true" className="far fa-thumbs-up icon" /> Positif ou neutre
                                 </DropdownItem>
                             </div>
                         }
diff --git a/ui/src/backoffice/components/common/avis/Reponse.jsx b/ui/src/backoffice/components/common/avis/Reponse.jsx
index 2ce00edca..18fdbfcf0 100644
--- a/ui/src/backoffice/components/common/avis/Reponse.jsx
+++ b/ui/src/backoffice/components/common/avis/Reponse.jsx
@@ -48,7 +48,7 @@ export default class Reponse extends React.Component {
                         <Status avis={avis} />
                     </div>
                     {avis.reponse.date &&
-                    <span className="date">le <PrettyDate date={new Date(avis.reponse.date)} /></span>
+                    <p className="date">le <PrettyDate date={new Date(avis.reponse.date)} /></p>
                     }
                 </div>
                 <p>{avis.reponse.text}</p>
diff --git a/ui/src/backoffice/components/common/avis/Titre.jsx b/ui/src/backoffice/components/common/avis/Titre.jsx
index dbeaed541..c2255ed55 100644
--- a/ui/src/backoffice/components/common/avis/Titre.jsx
+++ b/ui/src/backoffice/components/common/avis/Titre.jsx
@@ -33,7 +33,7 @@ export default class Titre extends React.Component {
                         <h3 className={`mr-1 title span-title ${avis.commentaire.titleMasked ? 'masked' : ''}`}>{avis.commentaire.title}</h3>
                         <button type="button" className="button-eye" onClick={this.toggle} aria-pressed={!avis.commentaire.titleMasked}>
                             <span className="sr-only">Afficher le titre</span>
-                            <i className={`far sr ${avis.commentaire.titleMasked ? 'fa-eye' : 'fa-eye-slash'} toggable`} />
+                            <span aria-hidden="true" className={`far sr ${avis.commentaire.titleMasked ? 'fa-eye' : 'fa-eye-slash'} toggable`} />
                         </button>
                     </>
                 )}
diff --git a/ui/src/backoffice/components/common/avis/Workflow.jsx b/ui/src/backoffice/components/common/avis/Workflow.jsx
index e8e175f3e..091828072 100644
--- a/ui/src/backoffice/components/common/avis/Workflow.jsx
+++ b/ui/src/backoffice/components/common/avis/Workflow.jsx
@@ -43,9 +43,9 @@ export const Workflow = ({ avis, showStatus }) => {
 
     return (
         <div className="Status">
-            <div className="date">
+            <p className="date">
                 le <PrettyDate date={new Date(avis.date)} /> &nbsp;
-            </div>
+            </p>
             {showStatus &&
             getStatus(avis)
             }
@@ -68,9 +68,9 @@ export const ReconciliationWorkflow = ({ avis }) => {
 
         if (isOnline) {
             return (
-                <div className="reconciliated">
+                <p className="reconciliated">
                     (En ligne)
-                </div>
+                </p>
             );
         } else {
             return <div />;
@@ -80,9 +80,9 @@ export const ReconciliationWorkflow = ({ avis }) => {
 
     return (
         <div className="Status">
-            <div className="date">
+            <p className="date">
                 le <PrettyDate date={new Date(avis.date)} /> &nbsp;
-            </div>
+            </p>
             {getStatus(avis)}
         </div>
     );
diff --git a/ui/src/backoffice/components/common/avis/buttons/EditButton.jsx b/ui/src/backoffice/components/common/avis/buttons/EditButton.jsx
index c283c573a..f2c81402e 100644
--- a/ui/src/backoffice/components/common/avis/buttons/EditButton.jsx
+++ b/ui/src/backoffice/components/common/avis/buttons/EditButton.jsx
@@ -86,21 +86,21 @@ export default class EditButton extends React.Component {
                     header="Edition"
                     button={
                         <Button size="large" color="blue" toggable={true}>
-                            {buttonText}<i className="fa fa-pencil-alt" />
+                            {buttonText}<span aria-hidden="true" className="fa fa-pencil-alt" />
                         </Button>
                     }
                     items={
                         <div>
                             <DropdownItem onClick={this.props.onEdit}>
-                                <i className="far fa-edit a-icon" /> Modifier le contenu
+                                <span aria-hidden="true" className="far fa-edit a-icon" /> Modifier le contenu
                             </DropdownItem>
                             <DropdownDivider />
                             <DropdownItem onClick={() => this.showModal('resend')}>
-                                <i className="far fa-envelope a-icon" /> Renvoyer le questionnaire
+                                <span aria-hidden="true" className="far fa-envelope a-icon" /> Renvoyer le questionnaire
                             </DropdownItem>
                             <DropdownDivider />
                             <DropdownItem onClick={() => this.showModal('delete')} className="a-text-important">
-                                <i className="far fa-trash-alt a-icon" /> Supprimer définitivement
+                                <span aria-hidden="true" className="far fa-trash-alt a-icon" /> Supprimer définitivement
                             </DropdownItem>
                         </div>
                     }
diff --git a/ui/src/backoffice/components/common/avis/buttons/EditReponseButton.jsx b/ui/src/backoffice/components/common/avis/buttons/EditReponseButton.jsx
index bcb9799aa..da0c97caa 100644
--- a/ui/src/backoffice/components/common/avis/buttons/EditReponseButton.jsx
+++ b/ui/src/backoffice/components/common/avis/buttons/EditReponseButton.jsx
@@ -61,19 +61,19 @@ export default class EditReponseButton extends React.Component {
                     header="Edition"
                     button={
                         <Button size="large" color="blue" toggable={true}>
-                            <i className="fa fa-pencil-alt" />
+                            <span aria-hidden="true" className="fa fa-pencil-alt" />
                         </Button>
                     }
                     items={
                         <div>
                             <DropdownItem onClick={onEdit}>
-                                <i className="far fa-edit a-icon" /> {hasReponse ? 'Modifier la réponse' : 'Répondre'}
+                                <span aria-hidden="true" className="far fa-edit a-icon" /> {hasReponse ? 'Modifier la réponse' : 'Répondre'}
                             </DropdownItem>
                             {hasReponse &&
                             <>
                                 <DropdownDivider />
                                 <DropdownItem onClick={() => this.showModal('delete')} className="a-text-important">
-                                    <i className="far fa-trash-alt a-icon" /> Supprimer
+                                    <span aria-hidden="true" className="far fa-trash-alt a-icon" /> Supprimer
                                 </DropdownItem>
                             </>
                             }
diff --git a/ui/src/backoffice/components/common/avis/buttons/MarkAsReadButton.jsx b/ui/src/backoffice/components/common/avis/buttons/MarkAsReadButton.jsx
index e24430f82..cec2e5465 100644
--- a/ui/src/backoffice/components/common/avis/buttons/MarkAsReadButton.jsx
+++ b/ui/src/backoffice/components/common/avis/buttons/MarkAsReadButton.jsx
@@ -28,7 +28,7 @@ export default class MarkAsReadButton extends React.Component {
         return (
             <div className="MarkAsReadButton">
                 <Button size="large" color="green" onClick={this.onClick} tooltip={`Marquer comme ${avis.read ? 'non lu' : 'lu'}`}>
-                    <i className={`far ${avis.read ? 'fa-eye-slash' : 'fa-eye'} a-icon`} />
+                    <span aria-hidden="true" className={`far ${avis.read ? 'fa-eye-slash' : 'fa-eye'} a-icon`} />
                 </Button>
             </div>
         );
diff --git a/ui/src/backoffice/components/common/avis/buttons/RejectButton.jsx b/ui/src/backoffice/components/common/avis/buttons/RejectButton.jsx
index 4a73ed046..2d60033a9 100644
--- a/ui/src/backoffice/components/common/avis/buttons/RejectButton.jsx
+++ b/ui/src/backoffice/components/common/avis/buttons/RejectButton.jsx
@@ -68,7 +68,7 @@ export default class RejectButton extends React.Component {
                     header="Rejeter"
                     button={
                         <Button size="large" color="red" toggable={true}>
-                            {buttonText}<i className="far fa-times-circle" />
+                            {buttonText}<span aria-hidden="true" className="far fa-times-circle" />
                         </Button>
                     }
                     items={
diff --git a/ui/src/backoffice/components/common/avis/buttons/RejectReponseButton.jsx b/ui/src/backoffice/components/common/avis/buttons/RejectReponseButton.jsx
index 7df6df542..34565f0ac 100644
--- a/ui/src/backoffice/components/common/avis/buttons/RejectReponseButton.jsx
+++ b/ui/src/backoffice/components/common/avis/buttons/RejectReponseButton.jsx
@@ -36,7 +36,7 @@ export default class RejectReponseButton extends React.Component {
                 <Button
                     size="large" color="red" onClick={this.onClick} className="RejectReponseButton"
                     disabled={this.props.avis.reponse.status === 'rejected'}>
-                    {buttonText}<i className="far fa-times-circle" />
+                    {buttonText}<span aria-hidden="true" className="far fa-times-circle" />
                 </Button>
             </div>
         );
diff --git a/ui/src/backoffice/components/common/avis/buttons/ReportButton.jsx b/ui/src/backoffice/components/common/avis/buttons/ReportButton.jsx
index eff30195b..362723e47 100644
--- a/ui/src/backoffice/components/common/avis/buttons/ReportButton.jsx
+++ b/ui/src/backoffice/components/common/avis/buttons/ReportButton.jsx
@@ -85,7 +85,7 @@ export default class ReportButton extends React.Component {
                     }
                     return this.setState({ showModal: true });
                 }}>
-                    <i className={`far ${avis.status === 'reported' ? 'fa-bell-slash' : 'fa-bell'} a-icon`} />
+                    <span aria-hidden="true" className={`far ${avis.status === 'reported' ? 'fa-bell-slash' : 'fa-bell'} a-icon`} />
                 </Button>
             </div>
         );
diff --git a/ui/src/backoffice/components/common/avis/buttons/ValidateButton.jsx b/ui/src/backoffice/components/common/avis/buttons/ValidateButton.jsx
index 922623435..e7fa5c3b6 100644
--- a/ui/src/backoffice/components/common/avis/buttons/ValidateButton.jsx
+++ b/ui/src/backoffice/components/common/avis/buttons/ValidateButton.jsx
@@ -36,17 +36,17 @@ export default class ValidateButton extends React.Component {
                     header="Valider et tagguer comme"
                     button={
                         <Button size="large" color="green" toggable={true}>
-                            {buttonText}<i className="far fa-check-circle" />
+                            {buttonText}<span aria-hidden="true" className="far fa-check-circle" />
                         </Button>
                     }
                     items={
                         <div>
                             <DropdownItem onClick={() => this.validate('négatif')}>
-                                <i className="far fa-thumbs-down a-icon" /> Négatif
+                                <span aria-hidden="true" className="far fa-thumbs-down a-icon" /> Négatif
                             </DropdownItem>
                             <DropdownDivider />
                             <DropdownItem onClick={() => this.validate('positif')}>
-                                <i className="far fa-thumbs-up a-icon" /> Positif ou neutre
+                                <span aria-hidden="true" className="far fa-thumbs-up a-icon" /> Positif ou neutre
                             </DropdownItem>
                         </div>
                     }
diff --git a/ui/src/backoffice/components/common/avis/buttons/ValidateReponseButton.jsx b/ui/src/backoffice/components/common/avis/buttons/ValidateReponseButton.jsx
index 75d2ddf93..58628b5ec 100644
--- a/ui/src/backoffice/components/common/avis/buttons/ValidateReponseButton.jsx
+++ b/ui/src/backoffice/components/common/avis/buttons/ValidateReponseButton.jsx
@@ -33,7 +33,7 @@ export default class ValidateReponseButton extends React.Component {
         return (
             <div className="PublishReponseButton">
                 <Button size="large" color="green" disabled={isValidated} onClick={this.onClick}>
-                    {buttonText}<i className="far fa-check-circle a-icon" />
+                    {buttonText}<span aria-hidden="true" className="far fa-check-circle a-icon" />
                 </Button>
             </div>
         );
diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
index a76590939..c8deb8684 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
@@ -103,7 +103,7 @@ export default class GestionOrganismePage extends React.Component {
                                         value={this.state.form.search}
                                         id="recherche-organisme"
                                         placeholder="Rechercher un organisme"
-                                        icon={<i className="fas fa-search" />}
+                                        icon={<span aria-hidden="true" className="fas fa-search" />}
                                         reset={() => this.setState({ form: { search: '' } })}
                                         onChange={event => this.setState({ form: { search: event.target.value } })}
                                     />
@@ -157,7 +157,7 @@ export default class GestionOrganismePage extends React.Component {
                                     <Button
                                         size="medium"
                                         onClick={() => window.open(getExportAvisUrl(_.omit(query, ['page'])))}>
-                                        <i className="fas fa-download pr-2"></i>Exporter
+                                        <span aria-hidden="true" className="fas fa-download pr-2"></span>Exporter
                                     </Button>
                                 }
                             />
@@ -167,51 +167,53 @@ export default class GestionOrganismePage extends React.Component {
                                 <EmptyResults /> :
                                 <>
                                     {
-                                        <div className="row">
-                                            <div className="col-sm-2 offset-md-1 style-col-title">
-                                                <p className="column-title d-none d-sm-block">Nom et SIRET</p>
-                                            </div>
-
-                                            <div className="col-2">
-                                                <p className="column-title d-none d-sm-block">Type</p>
-                                            </div>
-
-                                            <div className="col-2">
-                                                <p className="column-title d-none d-sm-block">Statut</p>
-                                            </div>
-
-                                            <div className="col-1">
-                                                <p className="column-title d-none d-sm-block">Avis</p>
-                                            </div>
-
-                                            <div className="col-xs-8 col-sm-4 col-md-3">
-                                                <p className="column-title d-none d-sm-block">Contact</p>
-                                            </div>
-
-                                            <div className="col-sm-2 col-md-1">
-                                                <p className="column-title d-none d-sm-block">&nbsp;</p>
-                                            </div>
-                                        </div>
-                                    }
-                                    {
-                                        results.organismes.map((organisme, index) => {
-                                            return (
-                                                <div key={organisme._id}>
-                                                    <Organisme
-                                                        organisme={organisme}
-                                                        index={index}
-                                                        onChange={(avis, options = {}) => {
-                                                            let { message } = options;
-                                                            if (message) {
-                                                                showMessage(message);
-                                                            }
-                                                            return this.search({ silent: true });
-                                                        }} />
-                                                    <ResultDivider />
-                                                </div>
-                                            );
-                                        })
+                                        <thead className="row">
+                                            <tr className="col-sm-2 offset-md-1 style-col-title">
+                                                <th scope="col" className="column-title d-none d-sm-block">Nom et SIRET</th>
+                                            </tr>
+
+                                            <tr className="col-2">
+                                                <th scope="col" className="column-title d-none d-sm-block">Type</th>
+                                            </tr>
+
+                                            <tr className="col-2">
+                                                <th scope="col" className="column-title d-none d-sm-block">Statut</th>
+                                            </tr>
+
+                                            <tr className="col-1">
+                                                <th scope="col" className="column-title d-none d-sm-block">Avis</th>
+                                            </tr>
+
+                                            <tr className="col-xs-8 col-sm-4 col-md-3">
+                                                <th scope="col" className="column-title d-none d-sm-block">Contact</th>
+                                            </tr>
+
+                                            <tr className="col-sm-2 col-md-1">
+                                                <th scope="col" className="column-title d-none d-sm-block">&nbsp;</th>
+                                            </tr>
+                                        </thead>
                                     }
+                                    <tbody style={{display: "grid"}}>
+                                        {
+                                            results.organismes.map((organisme, index) => {
+                                                return (
+                                                    <div key={organisme._id}>
+                                                        <Organisme
+                                                            organisme={organisme}
+                                                            index={index}
+                                                            onChange={(avis, options = {}) => {
+                                                                let { message } = options;
+                                                                if (message) {
+                                                                    showMessage(message);
+                                                                }
+                                                                return this.search({ silent: true });
+                                                            }} />
+                                                        <ResultDivider />
+                                                    </div>
+                                                );
+                                            })
+                                        }
+                                    </tbody>
                                 </>
                         }
                         pagination={
diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.jsx b/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.jsx
index 4c453b546..29d70285b 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.jsx
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/components/Organisme.jsx
@@ -39,54 +39,54 @@ export default class Organisme extends React.Component {
         let isFormateur = organisme.score?.nb_avis > 0;
 
         return (
-            <div className="Organisme row">
+            <tr className="Organisme row">
                 <h2 className="sr-only">Organisme {index}</h2>
-                <div className="col-sm-2 offset-md-1 style-col">
+                <td className="col-sm-2 offset-md-1 style-col">
                     <p className="raison-sociale">{organisme.raison_sociale}</p>
                     <p className="siret">{organisme.siret}</p>
-                </div>
+                </td>
 
-                <div className="col-2">
+                <td className="col-2">
                     <p className="type">
                         {(isResponsable && isFormateur) ? 'Dispensateur et responsable' : ''}
                         {(!isResponsable && isFormateur) ? 'Dispensateur' : ''}
                         {(isResponsable && !isFormateur) ? 'Responsable' : ''}
                         {(!isResponsable && !isFormateur) ? `Pas encore d'avis` : ''}
                     </p>
-                </div>
+                </td>
 
-                <div className="col-2">
+                <td className="col-2">
                     <p className={`status ${isInactive ? 'inactive' : ''}`}>
                         {isInactive ? 'Inactif' : 'Compte activé'}
                     </p>
-                </div>
+                </td>
 
-                <div className="col-1">
+                <td className="col-1">
                     <p className="score">{(organisme.score?.nb_avis ? organisme.score.nb_avis : 0) + (organisme.nbAvisResponsablePasFormateurSiretExact ? organisme.nbAvisResponsablePasFormateurSiretExact : 0)}</p>
-                </div>
+                </td>
 
                 {this.state.showEdition &&
-                <div className="col-4">
+                <td className="col-4">
                     <Edition organisme={organisme} onChange={onChange} onClose={this.toggleEdition} />
-                </div>
+                </td>
                 }
 
                 {!this.state.showEdition &&
-                <div className="col-xs-8 col-sm-4 col-md-3">
+                <td className="col-xs-8 col-sm-4 col-md-3">
                     <p className="email">
                         {organisme.courriel}
                     </p>
-                </div>
+                </td>
                 }
 
                 {!this.state.showEdition &&
-                <div className="col-sm-2 col-md-1">
+                <td className="col-sm-2 col-md-1">
                     <div className="btn-group-vertical">
                         <EditButton organisme={organisme} index={index} onChange={onChange} onEdit={this.toggleEdition} />
                     </div>
-                </div>
+                </td>
                 }
-            </div>
+            </tr>
         );
     }
 }
diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/components/buttons/EditButton.jsx b/ui/src/backoffice/components/moderateur/gestion-organismes/components/buttons/EditButton.jsx
index 9ee0b8e6a..ba5fabd13 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/components/buttons/EditButton.jsx
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/components/buttons/EditButton.jsx
@@ -34,18 +34,18 @@ export default class EditButton extends React.Component {
                     header="Modifier ou supprimer"
                     button={
                         <Button size="large" color="blue" toggable={true}>
-                            {buttonText}<i className="fa fa-pencil-alt" />
+                            {buttonText}<span aria-hidden="true" className="fa fa-pencil-alt" />
                         </Button>
                     }
                     items={
                         <div>
                             <DropdownItem onClick={this.props.onEdit}>
-                                <i className="far fa-edit a-icon" /> Modifier l&apos;adresse
+                                <span aria-hidden="true" className="far fa-edit a-icon" /> Modifier l&apos;adresse
                             </DropdownItem>
                             <DropdownDivider />
                             {this.props.organisme.courriel &&
                             <DropdownItem onClick={this.resend}>
-                                <i className="far fa-envelope a-icon" /> Renvoyer le lien
+                                <span aria-hidden="true" className="far fa-envelope a-icon" /> Renvoyer le lien
                             </DropdownItem>
                             }
                         </div>
diff --git a/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx b/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
index 96eaa2273..649066f92 100644
--- a/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
+++ b/ui/src/backoffice/components/moderateur/moderation-avis/ModerationAvisPage.jsx
@@ -118,7 +118,7 @@ export default class ModerationAvisPage extends React.Component {
                                         id="recherche-avis"
                                         value={this.state.fulltext}
                                         placeholder="Rechercher un avis"
-                                        icon={<i className="fas fa-search" />}
+                                        icon={<span aria-hidden="true" className="fas fa-search" />}
                                         reset={() => this.setState({ fulltext: '' })}
                                         onChange={event => this.setState({ fulltext: event.target.value })}
                                     />

From a5591134365481d3e98fe94602ddac53bdba31a9 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 10 May 2024 10:46:42 +0200
Subject: [PATCH 087/128] feat: accessibilite P09 12.11 clavier button edit

---
 ui/src/backoffice/components/common/Dropdown.jsx             | 5 +++--
 .../moderateur/gestion-organismes/GestionOrganismePage.jsx   | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/src/backoffice/components/common/Dropdown.jsx b/ui/src/backoffice/components/common/Dropdown.jsx
index e7f39b870..3a91e8d63 100644
--- a/ui/src/backoffice/components/common/Dropdown.jsx
+++ b/ui/src/backoffice/components/common/Dropdown.jsx
@@ -14,8 +14,9 @@ export const DropdownItem = ({ onClick, className, children, ...props }) => {
     };
 
     return (
-        <a
+        <button
             className={`dropdown-item ${className}`}
+            style={{margin:0}}
             onClick={onClick}
             onKeyDown={handleKeyDown}
             tabIndex="0"
@@ -23,7 +24,7 @@ export const DropdownItem = ({ onClick, className, children, ...props }) => {
             {...props}
             >
             {children}
-        </a>
+        </button>
     );
 };
   
diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
index c8deb8684..db12bafb5 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/GestionOrganismePage.jsx
@@ -189,7 +189,7 @@ export default class GestionOrganismePage extends React.Component {
                                             </tr>
 
                                             <tr className="col-sm-2 col-md-1">
-                                                <th scope="col" className="column-title d-none d-sm-block">&nbsp;</th>
+                                                <th scope="col" className="column-title d-none d-sm-block sr-only">Gestion</th>
                                             </tr>
                                         </thead>
                                     }

From d8334b72f795fa990ab458d90ff9a55afd775622 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 10 May 2024 13:34:39 +0200
Subject: [PATCH 088/128] feat: accessibilite P05 12.11 accessible clavier

---
 .../anonymous/components/AvisStats.jsx           | 16 ++++++++--------
 .../anonymous/components/FormationStats.jsx      |  8 ++++----
 .../anonymous/components/HistoryLines.jsx        | 12 ++++++++++++
 .../anonymous/components/ModerationStats.jsx     |  4 ++--
 .../anonymous/components/OrganismeStats.jsx      |  6 +++---
 .../anonymous/components/StagiairesStats.jsx     | 12 ++++++------
 .../anonymous/components/StatsPanel.jsx          |  1 -
 7 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
index ff4633884..ad9059c75 100644
--- a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
@@ -19,22 +19,22 @@ export default class AvisStats extends React.Component {
         return (
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
-                    <h2 className="title">
+                    <h2 className="title" tabIndex="0">
                         <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Avis
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
-                        <div className="stats">
+                        <div className="stats" tabIndex="0">
                             <div className="name">Total avis déposés</div>
                             <div className="value">{formatNumber(latest(stats, type, 'avis.nbAvis'))}</div>
                         </div>
-                        <div className="stats">
+                        <div className="stats" tabIndex="0">
                             <div className="name">Commentaires</div>
                             <div className="value">
                                 {formatNumber(latest(stats, type, 'avis.nbAvisAvecCommentaire'))}
                             </div>
                         </div>
-                        <div className="stats">
+                        <div className="stats" tabIndex="0">
                             <div className="name">Taux</div>
                             <div>
                                 <span className="value highlighted">
@@ -58,8 +58,8 @@ export default class AvisStats extends React.Component {
                         </div>
                     </div>
                 </div>
-                <div className="d-flex justify-content-between flex-wrap details" style={{ padding:'16px' }}>
-                    <div className="stats">
+                <div className="d-flex justify-content-between flex-wrap details" >
+                    <div className="stats" tabIndex="0">
                         <div className="name">Positifs ou neutres</div>
                         <span className="value">
                             {percentage(latest(stats, type, 'avis.nbCommentairesPositifs'), latest(stats, type, 'avis.nbAvisAvecCommentaire'))}%
@@ -70,7 +70,7 @@ export default class AvisStats extends React.Component {
                         </span>
                         }
                     </div>
-                    <div className="stats">
+                    <div className="stats" tabIndex="0">
                         <div className="name">Négatifs</div>
                         <span className="value">
                             {percentage(latest(stats, type, 'avis.nbCommentairesNegatifs'), latest(stats, type, 'avis.nbAvisAvecCommentaire'))}%
@@ -81,7 +81,7 @@ export default class AvisStats extends React.Component {
                         </span>
                         }
                     </div>
-                    <div className="stats">
+                    <div className="stats" tabIndex="0">
                         <div className="name">Rejetés</div>
                         <span className="value">
                             {percentage(latest(stats, type, 'avis.nbCommentairesRejetes'), latest(stats, type, 'avis.nbAvisAvecCommentaire'))}%
diff --git a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
index d963c19e6..7529d00ea 100644
--- a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
@@ -19,7 +19,7 @@ export default class FormationStats extends React.Component {
         return (
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
-                    <h2 className="title">
+                    <h2 className="title" tabIndex="0">
                         <div>
                             <span aria-hidden="true" className="fas fa-graduation-cap a-icon"></span>
                             Formations
@@ -27,11 +27,11 @@ export default class FormationStats extends React.Component {
                         <div className="description">(source Intercarif)</div>
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
-                        <div className="stats">
+                        <div className="stats" tabIndex="0">
                             <div className="name">Formations en ligne</div>
                             <div className="value">{formatNumber(latest(stats, type, 'api.nbSessions'))}</div>
                         </div>
-                        <div className="stats">
+                        <div className="stats" tabIndex="0">
                             <div className="name">Formations avec un avis</div>
                             <div>
                                 <span className="value highlighted">
@@ -55,7 +55,7 @@ export default class FormationStats extends React.Component {
                     </div>
                 </div>
                 <div className="details">
-                    <div className="stats">
+                    <div className="stats" tabIndex="0">
                         <div className="name">Nombre d&apos;avis moyen par session</div>
                         <div className="value">{latest(stats, type, 'api.nbAvisParSession')}</div>
                     </div>
diff --git a/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx b/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx
index 7f2452c13..d6671091a 100644
--- a/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx
+++ b/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx
@@ -74,6 +74,17 @@ export default class HistoryLines extends React.Component {
     render() {
 
         let { lines, groupBy, format, formatTooltip, colors } = this.props;
+
+        const customTheme = {
+            axis: {
+                ticks: {
+                    text: {
+                        fill: "rgb(0, 0, 0)",
+                    },
+                },
+            },
+        };
+
         const isJanvierOuJuillet = (value) => moment(value).month() % 6 === 0;
         return (
             <ResponsiveLine
@@ -143,6 +154,7 @@ export default class HistoryLines extends React.Component {
 
                     }
                 ]}
+                theme={customTheme}
             />
         );
     }
diff --git a/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx b/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
index d6df28843..e17791184 100644
--- a/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
@@ -18,12 +18,12 @@ export default class ModerationStats extends React.Component {
         return (
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
-                    <h2 className="title">
+                    <h2 className="title" tabIndex="0">
                         <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Modération
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
-                        <div className="stats">
+                        <div className="stats" tabIndex="0">
                             <div className="name">Avis à modérer</div>
                             <div className="value">{formatNumber(latest(stats, type, 'avis.nbCommentairesAModerer'))}</div>
                         </div>
diff --git a/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx b/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
index e89870dae..5a74ee2c7 100644
--- a/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
@@ -18,16 +18,16 @@ export default class OrganismeStats extends React.Component {
         return (
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
-                    <h2 className="title">
+                    <h2 className="title" tabIndex="0">
                         <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Organismes
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
-                        <div className="stats">
+                        <div className="stats" tabIndex="0">
                             <div className="name">Organismes actifs</div>
                             <div className="value">{formatNumber(latest(stats, type, 'organismes.nbOrganismesActifs'))}</div>
                         </div>
-                        <div className="stats">
+                        <div className="stats" tabIndex="0">
                             <div className="name">Taux de commentaires avec réponse</div>
                             <div>
                                 <span className="value highlighted">
diff --git a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
index a8add0305..f9a879a6a 100644
--- a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
@@ -28,12 +28,12 @@ export default class StagiairesStats extends React.Component {
             <div className="Stats">
                 <div className="main d-flex justify-content-center justify-content-lg-between">
                     <div className="d-flex flex-column">
-                        <h2 className="title">
+                        <h2 className="title" tabIndex="0">
                             <span aria-hidden="true" className="far fa-user a-icon"></span>
                             Stagiaires
                         </h2>
                         <div className="d-flex justify-content-around flex-wrap">
-                            <div className="stats">
+                            <div className="stats" tabIndex="0">
                                 <div className="name">Nombre de stagiaires contactés</div>
                                 <div>
                                     <span className="value">
@@ -43,7 +43,7 @@ export default class StagiairesStats extends React.Component {
                                     </span>
                                 </div>
                             </div>
-                            <div className="stats">
+                            <div className="stats" tabIndex="0">
                                 <div className="name">Taux répondants</div>
                                 <span className="value highlighted">
                                     {percentage(diff(stats, type, 'avis.nbAvis'), diff(stats, type, 'avis.nbStagiairesContactes'))}%
@@ -65,15 +65,15 @@ export default class StagiairesStats extends React.Component {
                         </div>
                     </div>
                 </div>
-                <div className="flex-grow-1" style={{ height: '300px', minWidth: '250px' }}>
+                <div className="flex-grow-1" style={{ height: '300px', minWidth: '250px' }} tabIndex="0">
                     <HistoryLines
                         lines={lines}
-                        colors={type === 'regional' ? ['rgba(35, 47, 56, 0.4)', '#F28017'] : ['#F28017']}
+                        colors={type === 'regional' ? ['rgb(35, 47, 56)', '#EF7016'] : ['#EF7016']}
                         groupBy={groupBy}
                         format={v => `${v}%`}
                         formatTooltip={data => {
                             return (
-                                <div className="d-flex justify-content-between text-left">
+                                <div className="d-flex justify-content-between text-left" >
                                     <span
                                         className="mr-2">{`Avis : ${formatNumber(data.bucket['avis.nbAvis'])}`}</span>
                                     <span>{`Stagiaires contactés : ${formatNumber(data.bucket['avis.nbStagiairesContactes'])}`}</span>
diff --git a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
index 1ac6349e5..28c2742d5 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
@@ -63,7 +63,6 @@ export default class StatsPanel extends React.Component {
                     className="StatsPanel"
                     results={
                         <div>
-                            {/* Section des statistiques sur les stagiaires */}
                             <dl className="row mb-5">
                                 <dt className="col-13">Statistiques sur les stagiaires&nbsp;:</dt>
                                 <dd className="col-12">

From b299c4cbcec1bea7ec78128b442e5e585bacf5ab Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 10 May 2024 14:18:59 +0200
Subject: [PATCH 089/128] feat: accessibilite P09 7.3 accessible clavier
 supprimer filtre

---
 .../backoffice/components/common/page/form/InputText.jsx | 2 +-
 .../components/common/page/form/InputText.scss           | 9 +++++++++
 .../components/financeur/components/FinanceurForm.scss   | 4 ++--
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/ui/src/backoffice/components/common/page/form/InputText.jsx b/ui/src/backoffice/components/common/page/form/InputText.jsx
index c56505bc9..7eb9e8266 100644
--- a/ui/src/backoffice/components/common/page/form/InputText.jsx
+++ b/ui/src/backoffice/components/common/page/form/InputText.jsx
@@ -45,7 +45,7 @@ export default class InputText extends React.Component {
 
                     {reset &&
                     <div className="reset d-flex align-items-center">
-                        <span onClick={reset}><i className="fas fa-times" /></span>
+                        <button onClick={reset} className="button-reset"><i className="fas fa-times" /><span className="sr-only">supprimer le filtre</span></button>
                     </div>
                     }
                 </div>
diff --git a/ui/src/backoffice/components/common/page/form/InputText.scss b/ui/src/backoffice/components/common/page/form/InputText.scss
index 7665b058b..aa73c55ba 100644
--- a/ui/src/backoffice/components/common/page/form/InputText.scss
+++ b/ui/src/backoffice/components/common/page/form/InputText.scss
@@ -63,4 +63,13 @@
       color: $color-black;
     }
   }
+
+  .button-reset {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    cursor: pointer;
+  }
 }
diff --git a/ui/src/backoffice/components/financeur/components/FinanceurForm.scss b/ui/src/backoffice/components/financeur/components/FinanceurForm.scss
index 4870a6e37..d02d7e17c 100644
--- a/ui/src/backoffice/components/financeur/components/FinanceurForm.scss
+++ b/ui/src/backoffice/components/financeur/components/FinanceurForm.scss
@@ -1,9 +1,9 @@
 @import 'src/common/styles/variables';
 
 .champ-texte {
-  background-color: #F4F4F5;
+  background-color: $color-grey-25;
   box-shadow: unset;
-  border: 1px solid #F4F4F5;
+  border: 1px solid $color-grey-25;
   border-radius: 6px;
   padding: 0.1rem;
 

From 739594d9a916b0b615f22d26015e0cbae88821c2 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Tue, 14 May 2024 09:17:00 +0200
Subject: [PATCH 090/128] feat: accessibilite P05 3.3 customisation graphique
 ligne

---
 .../components/anonymous/components/HistoryLines.jsx        | 6 +++++-
 .../financeur/components/FinanceurAvisChartsPanel.jsx       | 1 -
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx b/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx
index d6671091a..66290e404 100644
--- a/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx
+++ b/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx
@@ -76,6 +76,11 @@ export default class HistoryLines extends React.Component {
         let { lines, groupBy, format, formatTooltip, colors } = this.props;
 
         const customTheme = {
+            grid: {
+                line: {
+                    stroke: "rgb(0,0,0)",
+                }
+            },
             axis: {
                 ticks: {
                     text: {
@@ -138,7 +143,6 @@ export default class HistoryLines extends React.Component {
                         itemDirection: 'left-to-right',
                         itemWidth: 70,
                         itemHeight: 20,
-                        itemOpacity: 0.75,
                         symbolSize: 12,
                         symbolShape: 'circle',
                         symbolBorderColor: 'rgba(0, 0, 0, .5)',
diff --git a/ui/src/backoffice/components/financeur/components/FinanceurAvisChartsPanel.jsx b/ui/src/backoffice/components/financeur/components/FinanceurAvisChartsPanel.jsx
index b0dabea0f..5539670e0 100644
--- a/ui/src/backoffice/components/financeur/components/FinanceurAvisChartsPanel.jsx
+++ b/ui/src/backoffice/components/financeur/components/FinanceurAvisChartsPanel.jsx
@@ -116,7 +116,6 @@ export default class FinanceurAvisChartsPanel extends React.Component {
                         <div className="row">
                             <div className="col-sm-12 text-right">
                                 <Button
-                                    style={{ opacity: '0.75' }}
                                     size="medium"
                                     disabled={this.state.showPDFDocument}
                                     onClick={() => this.generatePDF()}>

From 3357f5cbd377521da9bcfd4e8a61722d8213a718 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Tue, 14 May 2024 13:59:17 +0200
Subject: [PATCH 091/128] feat: accessibilite P05 3.1

---
 ui/src/backoffice/components/anonymous/components/StatsPanel.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
index 28c2742d5..5b56360ed 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
@@ -63,6 +63,7 @@ export default class StatsPanel extends React.Component {
                     className="StatsPanel"
                     results={
                         <div>
+                            <span>* National</span>
                             <dl className="row mb-5">
                                 <dt className="col-13">Statistiques sur les stagiaires&nbsp;:</dt>
                                 <dd className="col-12">

From dd90ceff8b3fe8453f916712704bf121981800ef Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Tue, 14 May 2024 15:39:58 +0200
Subject: [PATCH 092/128] feat: accessibilite P03-P07-P08 7.5

---
 .../anonymous/components/HistoryLines.jsx     | 193 ++++++++++++------
 .../components/common/message/Alert.jsx       |   2 +-
 .../common/message/GlobalMessage.jsx          |   2 +-
 .../common/message/LocalMessage.jsx           |   2 +-
 4 files changed, 130 insertions(+), 69 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx b/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx
index 66290e404..ab3e5442e 100644
--- a/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx
+++ b/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx
@@ -5,6 +5,31 @@ import PropTypes from 'prop-types';
 import { ResponsiveLine } from '@nivo/line';
 import { divide } from '../../../utils/number-utils';
 
+const style = `
+.collapsible {
+  background-color: #777;
+  color: white;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+}
+
+.active, .collapsible:hover {
+  background-color: #555;
+}
+
+.content {
+  padding: 0 18px;
+  display: none;
+  overflow: hidden;
+  background-color: #f1f1f1;
+}
+`;
+
 export const convertToRatioLine = (stats, type, path1, path2, options = {}) => {
 
     let values = _.cloneDeep(stats);
@@ -71,6 +96,23 @@ export default class HistoryLines extends React.Component {
         formatTooltip: b => `${b}`,
     };
 
+    componentDidMount() {
+        let coll = document.getElementsByClassName("collapsible");
+        let i;
+
+        for (i = 0; i < coll.length; i++) {
+            coll[i].addEventListener("click", function() {
+                this.classList.toggle("active");
+                let content = this.nextElementSibling;
+                if (content.style.display === "block") {
+                    content.style.display = "none";
+                } else {
+                    content.style.display = "block";
+                }
+            });
+        }
+    }
+
     render() {
 
         let { lines, groupBy, format, formatTooltip, colors } = this.props;
@@ -92,74 +134,93 @@ export default class HistoryLines extends React.Component {
 
         const isJanvierOuJuillet = (value) => moment(value).month() % 6 === 0;
         return (
-            <ResponsiveLine
-                data={lines}
-                margin={{ top: 10, right: 40, bottom: 80, left: 40 }}
-                xScale={{
-                    type: 'time',
-                    format: '%Y-%m-%dT%H:%M:%S.%L', //parsed by d3-time-format lib
-                    //precision: 'day',
-                }}
-                axisBottom={{
-                    format: v => groupBy === 'month' ? (isJanvierOuJuillet(v) ? moment(v).format('MM/YY') : "") : moment(v).format('YYYY-MM-DD'),
-                    tickValues: `every 1 ${groupBy || 'week'}s`
-                }}
-                axisLeft={{
-                    format: format,
-                    tickValues: 5
-                }}
-                curve="monotoneX"
-                enableSlices={'x'}
-                sliceTooltip={({ slice }) => {
-                    return (
-                        <div
-                            style={{
-                                background: 'white',
-                                padding: '9px 12px',
-                                border: '1px solid #ccc',
-                            }}
-                        >
-                            {slice.points.map(point => {
-                                let data = point.data;
-                                return (
-                                    <div key={point.id} style={{ color: point.serieColor, padding: '3px 0' }}>
-                                        <span>{formatTooltip(data)}</span>
-                                    </div>
-                                );
-                            })}
-                        </div>
-                    );
-                }}
-                colors={colors || { scheme: 'nivo' }}
-                enableGridX={false}
-                pointSize={5}
-                legends={[
-                    {
-                        anchor: 'bottom-left',
-                        direction: 'row',
-                        justify: false,
-                        translateY: 70,
-                        itemsSpacing: 10,
-                        itemDirection: 'left-to-right',
-                        itemWidth: 70,
-                        itemHeight: 20,
-                        symbolSize: 12,
-                        symbolShape: 'circle',
-                        symbolBorderColor: 'rgba(0, 0, 0, .5)',
-                        effects: [
-                            {
-                                on: 'hover',
-                                style: {
-                                    itemBackground: 'rgba(0, 0, 0, .03)',
-                                    itemOpacity: 1
+            <>
+                <style>{style}</style>
+                <ResponsiveLine
+                    data={lines}
+                    margin={{ top: 10, right: 40, bottom: 80, left: 40 }}
+                    xScale={{
+                        type: 'time',
+                        format: '%Y-%m-%dT%H:%M:%S.%L', //parsed by d3-time-format lib
+                        //precision: 'day',
+                    }}
+                    axisBottom={{
+                        format: v => groupBy === 'month' ? (isJanvierOuJuillet(v) ? moment(v).format('MM/YY') : "") : moment(v).format('YYYY-MM-DD'),
+                        tickValues: `every 1 ${groupBy || 'week'}s`
+                    }}
+                    axisLeft={{
+                        format: format,
+                        tickValues: 5
+                    }}
+                    curve="monotoneX"
+                    enableSlices={'x'}
+                    sliceTooltip={({ slice }) => {
+                        return (
+                            <div
+                                style={{
+                                    background: 'white',
+                                    padding: '9px 12px',
+                                    border: '1px solid #ccc',
+                                }}
+                            >
+                                {slice.points.map(point => {
+                                    let data = point.data;
+                                    return (
+                                        <div key={point.id} style={{ color: point.serieColor, padding: '3px 0' }}>
+                                            <span>{formatTooltip(data)}</span>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        );
+                    }}
+                    colors={colors || { scheme: 'nivo' }}
+                    enableGridX={false}
+                    pointSize={5}
+                    legends={[
+                        {
+                            anchor: 'bottom-left',
+                            direction: 'row',
+                            justify: false,
+                            translateY: 70,
+                            itemsSpacing: 10,
+                            itemDirection: 'left-to-right',
+                            itemWidth: 70,
+                            itemHeight: 20,
+                            symbolSize: 12,
+                            symbolShape: 'circle',
+                            symbolBorderColor: 'rgba(0, 0, 0, .5)',
+                            effects: [
+                                {
+                                    on: 'hover',
+                                    style: {
+                                        itemBackground: 'rgba(0, 0, 0, .03)',
+                                        itemOpacity: 1
+                                    }
                                 }
-                            }
-                        ]
+                            ]
 
-                    }
-                ]}
-                theme={customTheme}
-            />
+                        }
+                    ]}
+                    theme={customTheme}
+                />
+                <p>Collapsible Set:</p>
+                <button type="button" class="collapsible">Open Section 1</button>
+                <div class="content">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                </div>
+                <button type="button" class="collapsible">Open Section 2</button>
+                <div class="content">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                </div>
+                <button type="button" class="collapsible">Open Section 3</button>
+                <div class="content">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                </div>
+                {console.log(lines[0].data[0].bucket.date.split("-")[1])}
+                {console.log(lines[0].data[0].bucket['avis.nbAvis'])}
+                
+            </>
         );
     }
 }
diff --git a/ui/src/backoffice/components/common/message/Alert.jsx b/ui/src/backoffice/components/common/message/Alert.jsx
index 42c0767f3..c7e154d7b 100644
--- a/ui/src/backoffice/components/common/message/Alert.jsx
+++ b/ui/src/backoffice/components/common/message/Alert.jsx
@@ -25,7 +25,7 @@ export class Alert extends React.Component {
                     type="button"
                     className="close"
                     data-dismiss="alert"
-                    aria-label="Close"
+                    aria-label="Fermer l'alerte"
                     onClick={onClose}>
                     <span aria-hidden="true">&times;</span>
                 </button>
diff --git a/ui/src/backoffice/components/common/message/GlobalMessage.jsx b/ui/src/backoffice/components/common/message/GlobalMessage.jsx
index 75818ff7e..13327713b 100644
--- a/ui/src/backoffice/components/common/message/GlobalMessage.jsx
+++ b/ui/src/backoffice/components/common/message/GlobalMessage.jsx
@@ -20,7 +20,7 @@ export default class GlobalMessage extends React.Component {
 
     componentDidMount() {
         this.triggerTransition();
-        setTimeout(() => this.props.onClose(), this.props.message.timeout || 2500);
+        setTimeout(() => this.props.onClose(), 5000);
     }
 
     triggerTransition() {
diff --git a/ui/src/backoffice/components/common/message/LocalMessage.jsx b/ui/src/backoffice/components/common/message/LocalMessage.jsx
index 7780c62db..ea32ae124 100644
--- a/ui/src/backoffice/components/common/message/LocalMessage.jsx
+++ b/ui/src/backoffice/components/common/message/LocalMessage.jsx
@@ -19,7 +19,7 @@ export default class LocalMessage extends React.Component {
 
     componentDidMount() {
         this.triggerTransition();
-        setTimeout(() => this.props.onClose(), this.props.message.timeout || 500);
+        setTimeout(() => this.props.onClose(), 5000);
     }
 
     triggerTransition() {

From 347261fe3ee4b18e2108682e9d014bc19b4cd4d7 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Wed, 15 May 2024 10:02:22 +0200
Subject: [PATCH 093/128] feat: accessibilite P04 11.9 faute orthographe

---
 ui/src/backoffice/components/common/header/Header.jsx  | 2 +-
 ui/src/backoffice/components/common/header/Header.scss | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/backoffice/components/common/header/Header.jsx b/ui/src/backoffice/components/common/header/Header.jsx
index cf4ddb60e..6d3196cae 100644
--- a/ui/src/backoffice/components/common/header/Header.jsx
+++ b/ui/src/backoffice/components/common/header/Header.jsx
@@ -28,7 +28,7 @@ const Header = ({ items, defaultPath, onLogout }) => {
                                 <button
                                     onClick={onLogout}
                                     className="logout btn btn-outline-light">
-                                    <span>SE DECONNECTER</span>
+                                    <span>Se déconnecter</span>
                                 </button>
                             }
                         </div>
diff --git a/ui/src/backoffice/components/common/header/Header.scss b/ui/src/backoffice/components/common/header/Header.scss
index 26672a3ce..e8bee5384 100644
--- a/ui/src/backoffice/components/common/header/Header.scss
+++ b/ui/src/backoffice/components/common/header/Header.scss
@@ -95,6 +95,7 @@
     font-size: 0.825rem;
     font-weight: $font-weight-bold;
     letter-spacing: 1px;
+    text-transform: uppercase;
   }
 
   .skip-link-group {

From 4de5a942fdb93e6cc24c9029c04ffd23cbd757f9 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Wed, 15 May 2024 10:16:39 +0200
Subject: [PATCH 094/128] =?UTF-8?q?feat:=20accessibilite=20P01=20lien=20ob?=
 =?UTF-8?q?sol=C3=A8te?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/http/utils/externalLinks.js           | 2 +-
 ui/src/questionnaire/components/Remerciements.jsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/src/http/utils/externalLinks.js b/backend/src/http/utils/externalLinks.js
index 4f4406adb..ca95059ec 100644
--- a/backend/src/http/utils/externalLinks.js
+++ b/backend/src/http/utils/externalLinks.js
@@ -1,6 +1,6 @@
 module.exports = (db, communes) => {
 
-    const staticLinks = [{ goto: 'clara', url: 'https://clara.francetravail.fr' }];
+    const staticLinks = [{ goto: 'mesdroitssociaux', url: 'https://www.mesdroitssociaux.gouv.fr/' }];
 
     const getLink = async (stagiaire, goto) => {
 
diff --git a/ui/src/questionnaire/components/Remerciements.jsx b/ui/src/questionnaire/components/Remerciements.jsx
index 1d0da6c9f..3a142ae69 100644
--- a/ui/src/questionnaire/components/Remerciements.jsx
+++ b/ui/src/questionnaire/components/Remerciements.jsx
@@ -52,10 +52,10 @@ class Remerciements extends Component {
                                         <div className="link">
                                             <a
                                                 className="btn"
-                                                href={`/link/${stagiaire.token}?goto=clara`}
+                                                href={`/link/${stagiaire.token}?goto=mesdroitssociaux`}
                                                 target="_blank"
                                                 rel="noopener noreferrer">
-                                                <strong>Les aides au retour à l’emploi</strong> avec l’outil Clara
+                                                <strong>Les aides au retour à l’emploi</strong> avec l’outil mes droits sociaux
                                             </a>
                                         </div>
                                     </div>

From 21454ea88e4eb4f56dd11b6ffbe6aaefe4c61edb Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Wed, 15 May 2024 11:59:39 +0200
Subject: [PATCH 095/128] =?UTF-8?q?feat:=20accessibilite=20P05=2012.11=20a?=
 =?UTF-8?q?ria=20graphique=20stats=20+=20enl=C3=A8ve=20focus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../anonymous/components/AvisStats.jsx        |  14 +-
 .../anonymous/components/FormationStats.jsx   |   8 +-
 .../anonymous/components/HistoryLines.jsx     | 252 ++++++++++--------
 .../anonymous/components/ModerationStats.jsx  |   4 +-
 .../anonymous/components/OrganismeStats.jsx   |   6 +-
 .../anonymous/components/StagiairesStats.jsx  |   8 +-
 .../common/avis/charts/CommentairesPies.jsx   |   6 +-
 .../common/page/panel/results/stats/Pie.jsx   |   2 +-
 8 files changed, 167 insertions(+), 133 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
index ad9059c75..c30a79f85 100644
--- a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
@@ -19,22 +19,22 @@ export default class AvisStats extends React.Component {
         return (
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
-                    <h2 className="title" tabIndex="0">
+                    <h2 className="title" >
                         <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Avis
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
-                        <div className="stats" tabIndex="0">
+                        <div className="stats" >
                             <div className="name">Total avis déposés</div>
                             <div className="value">{formatNumber(latest(stats, type, 'avis.nbAvis'))}</div>
                         </div>
-                        <div className="stats" tabIndex="0">
+                        <div className="stats" >
                             <div className="name">Commentaires</div>
                             <div className="value">
                                 {formatNumber(latest(stats, type, 'avis.nbAvisAvecCommentaire'))}
                             </div>
                         </div>
-                        <div className="stats" tabIndex="0">
+                        <div className="stats" >
                             <div className="name">Taux</div>
                             <div>
                                 <span className="value highlighted">
@@ -59,7 +59,7 @@ export default class AvisStats extends React.Component {
                     </div>
                 </div>
                 <div className="d-flex justify-content-between flex-wrap details" >
-                    <div className="stats" tabIndex="0">
+                    <div className="stats" >
                         <div className="name">Positifs ou neutres</div>
                         <span className="value">
                             {percentage(latest(stats, type, 'avis.nbCommentairesPositifs'), latest(stats, type, 'avis.nbAvisAvecCommentaire'))}%
@@ -70,7 +70,7 @@ export default class AvisStats extends React.Component {
                         </span>
                         }
                     </div>
-                    <div className="stats" tabIndex="0">
+                    <div className="stats" >
                         <div className="name">Négatifs</div>
                         <span className="value">
                             {percentage(latest(stats, type, 'avis.nbCommentairesNegatifs'), latest(stats, type, 'avis.nbAvisAvecCommentaire'))}%
@@ -81,7 +81,7 @@ export default class AvisStats extends React.Component {
                         </span>
                         }
                     </div>
-                    <div className="stats" tabIndex="0">
+                    <div className="stats" >
                         <div className="name">Rejetés</div>
                         <span className="value">
                             {percentage(latest(stats, type, 'avis.nbCommentairesRejetes'), latest(stats, type, 'avis.nbAvisAvecCommentaire'))}%
diff --git a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
index 7529d00ea..61d139145 100644
--- a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
@@ -19,7 +19,7 @@ export default class FormationStats extends React.Component {
         return (
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
-                    <h2 className="title" tabIndex="0">
+                    <h2 className="title" >
                         <div>
                             <span aria-hidden="true" className="fas fa-graduation-cap a-icon"></span>
                             Formations
@@ -27,11 +27,11 @@ export default class FormationStats extends React.Component {
                         <div className="description">(source Intercarif)</div>
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
-                        <div className="stats" tabIndex="0">
+                        <div className="stats" >
                             <div className="name">Formations en ligne</div>
                             <div className="value">{formatNumber(latest(stats, type, 'api.nbSessions'))}</div>
                         </div>
-                        <div className="stats" tabIndex="0">
+                        <div className="stats" >
                             <div className="name">Formations avec un avis</div>
                             <div>
                                 <span className="value highlighted">
@@ -55,7 +55,7 @@ export default class FormationStats extends React.Component {
                     </div>
                 </div>
                 <div className="details">
-                    <div className="stats" tabIndex="0">
+                    <div className="stats" >
                         <div className="name">Nombre d&apos;avis moyen par session</div>
                         <div className="value">{latest(stats, type, 'api.nbAvisParSession')}</div>
                     </div>
diff --git a/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx b/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx
index ab3e5442e..dc890acf9 100644
--- a/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx
+++ b/ui/src/backoffice/components/anonymous/components/HistoryLines.jsx
@@ -5,31 +5,6 @@ import PropTypes from 'prop-types';
 import { ResponsiveLine } from '@nivo/line';
 import { divide } from '../../../utils/number-utils';
 
-const style = `
-.collapsible {
-  background-color: #777;
-  color: white;
-  cursor: pointer;
-  padding: 18px;
-  width: 100%;
-  border: none;
-  text-align: left;
-  outline: none;
-  font-size: 15px;
-}
-
-.active, .collapsible:hover {
-  background-color: #555;
-}
-
-.content {
-  padding: 0 18px;
-  display: none;
-  overflow: hidden;
-  background-color: #f1f1f1;
-}
-`;
-
 export const convertToRatioLine = (stats, type, path1, path2, options = {}) => {
 
     let values = _.cloneDeep(stats);
@@ -113,6 +88,78 @@ export default class HistoryLines extends React.Component {
         }
     }
 
+    renderYearContent(lines) {
+        const mois = {
+            "01": "janvier",
+            "02": "février",
+            "03": "mars",
+            "04": "avril",
+            "05": "mai",
+            "06": "juin",
+            "07": "juillet",
+            "08": "août",
+            "09": "septembre",
+            "10": "octobre",
+            "11": "novembre",
+            "12": "décembre"
+        };
+        const years = {};
+        lines[0].data.forEach(item => {
+            const year = item.bucket.date.split("-")[0];
+            if (!years[year]) {
+                years[year] = {
+                    national: [],
+                    regional: []
+                };
+            }
+            years[year].national.push(item);
+        });
+    
+        if (lines.length > 1) {
+            lines[1].data.forEach(item => {
+                const year = item.bucket.date.split("-")[0];
+                if (!years[year]) {
+                    years[year] = {
+                        national: [],
+                        regional: []
+                    };
+                }
+                years[year].regional.push(item);
+            });
+        }
+    
+        return Object.keys(years).map(year => (
+            <div key={year} className="sr-only">
+                <button type="button" className="collapsible">Ouvrir les données nationales de {year}</button>
+                <div style={{ display: "none"}}>
+                    {years[year].national.map((item, index) => (
+                        <div key={index}>
+                            <p>Date: {mois[item.bucket.date.split("-")[1]]}</p>
+                            <p>Nombre d'avis: {item.bucket['avis.nbAvis']}</p>
+                            <p>Nombre de stagiaire contactés: {item.bucket['avis.nbStagiairesContactes']}</p>
+                            <p>Pourcentage: {((item.bucket['avis.nbAvis']/item.bucket['avis.nbStagiairesContactes'])*100).toFixed(2)}%</p>
+                        </div>
+                    ))}
+                </div>
+                {lines.length > 1 && (
+                    <>
+                    <button type="button" className="collapsible">Ouvrir les données régionales de {year}</button>
+                    <div style={{ display: "none"}}>
+                        {years[year].regional.map((item, index) => (
+                            <div key={index}>
+                                <p>Date: {mois[item.bucket.date.split("-")[1]]}</p>
+                                <p>Nombre d'avis: {item.bucket['avis.nbAvis']}</p>
+                                <p>Nombre de stagiaire contactés: {item.bucket['avis.nbStagiairesContactes']}</p>
+                                <p>Pourcentage: {((item.bucket['avis.nbAvis']/item.bucket['avis.nbStagiairesContactes'])*100).toFixed(2)}%</p>
+                            </div>
+                        ))}
+                    </div>
+                    </>
+                )}
+            </div>
+        ));
+    }
+
     render() {
 
         let { lines, groupBy, format, formatTooltip, colors } = this.props;
@@ -135,91 +182,78 @@ export default class HistoryLines extends React.Component {
         const isJanvierOuJuillet = (value) => moment(value).month() % 6 === 0;
         return (
             <>
-                <style>{style}</style>
-                <ResponsiveLine
-                    data={lines}
-                    margin={{ top: 10, right: 40, bottom: 80, left: 40 }}
-                    xScale={{
-                        type: 'time',
-                        format: '%Y-%m-%dT%H:%M:%S.%L', //parsed by d3-time-format lib
-                        //precision: 'day',
-                    }}
-                    axisBottom={{
-                        format: v => groupBy === 'month' ? (isJanvierOuJuillet(v) ? moment(v).format('MM/YY') : "") : moment(v).format('YYYY-MM-DD'),
-                        tickValues: `every 1 ${groupBy || 'week'}s`
-                    }}
-                    axisLeft={{
-                        format: format,
-                        tickValues: 5
-                    }}
-                    curve="monotoneX"
-                    enableSlices={'x'}
-                    sliceTooltip={({ slice }) => {
-                        return (
-                            <div
-                                style={{
-                                    background: 'white',
-                                    padding: '9px 12px',
-                                    border: '1px solid #ccc',
-                                }}
-                            >
-                                {slice.points.map(point => {
-                                    let data = point.data;
-                                    return (
-                                        <div key={point.id} style={{ color: point.serieColor, padding: '3px 0' }}>
-                                            <span>{formatTooltip(data)}</span>
-                                        </div>
-                                    );
-                                })}
-                            </div>
-                        );
-                    }}
-                    colors={colors || { scheme: 'nivo' }}
-                    enableGridX={false}
-                    pointSize={5}
-                    legends={[
-                        {
-                            anchor: 'bottom-left',
-                            direction: 'row',
-                            justify: false,
-                            translateY: 70,
-                            itemsSpacing: 10,
-                            itemDirection: 'left-to-right',
-                            itemWidth: 70,
-                            itemHeight: 20,
-                            symbolSize: 12,
-                            symbolShape: 'circle',
-                            symbolBorderColor: 'rgba(0, 0, 0, .5)',
-                            effects: [
-                                {
-                                    on: 'hover',
-                                    style: {
-                                        itemBackground: 'rgba(0, 0, 0, .03)',
-                                        itemOpacity: 1
+                <>
+                    <ResponsiveLine
+                        aria-hidden="true"
+                        data={lines}
+                        margin={{ top: 10, right: 40, bottom: 80, left: 40 }}
+                        xScale={{
+                            type: 'time',
+                            format: '%Y-%m-%dT%H:%M:%S.%L', //parsed by d3-time-format lib
+                            //precision: 'day',
+                        }}
+                        axisBottom={{
+                            format: v => groupBy === 'month' ? (isJanvierOuJuillet(v) ? moment(v).format('MM/YY') : "") : moment(v).format('YYYY-MM-DD'),
+                            tickValues: `every 1 ${groupBy || 'week'}s`
+                        }}
+                        axisLeft={{
+                            format: format,
+                            tickValues: 5
+                        }}
+                        curve="monotoneX"
+                        enableSlices={'x'}
+                        sliceTooltip={({ slice }) => {
+                            return (
+                                <div
+                                    style={{
+                                        background: 'white',
+                                        padding: '9px 12px',
+                                        border: '1px solid #ccc',
+                                    }}
+                                >
+                                    {slice.points.map(point => {
+                                        let data = point.data;
+                                        return (
+                                            <div key={point.id} style={{ color: point.serieColor, padding: '3px 0' }}>
+                                                <span>{formatTooltip(data)}</span>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            );
+                        }}
+                        colors={colors || { scheme: 'nivo' }}
+                        enableGridX={false}
+                        pointSize={5}
+                        legends={[
+                            {
+                                anchor: 'bottom-left',
+                                direction: 'row',
+                                justify: false,
+                                translateY: 70,
+                                itemsSpacing: 10,
+                                itemDirection: 'left-to-right',
+                                itemWidth: 70,
+                                itemHeight: 20,
+                                symbolSize: 12,
+                                symbolShape: 'circle',
+                                symbolBorderColor: 'rgba(0, 0, 0, .5)',
+                                effects: [
+                                    {
+                                        on: 'hover',
+                                        style: {
+                                            itemBackground: 'rgba(0, 0, 0, .03)',
+                                            itemOpacity: 1
+                                        }
                                     }
-                                }
-                            ]
-
-                        }
-                    ]}
-                    theme={customTheme}
-                />
-                <p>Collapsible Set:</p>
-                <button type="button" class="collapsible">Open Section 1</button>
-                <div class="content">
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-                </div>
-                <button type="button" class="collapsible">Open Section 2</button>
-                <div class="content">
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-                </div>
-                <button type="button" class="collapsible">Open Section 3</button>
-                <div class="content">
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-                </div>
-                {console.log(lines[0].data[0].bucket.date.split("-")[1])}
-                {console.log(lines[0].data[0].bucket['avis.nbAvis'])}
-                
+                                ]
+
+                            }
+                        ]}
+                        theme={customTheme}
+                    />
+                </>
+                {this.renderYearContent(lines)}
             </>
         );
     }
diff --git a/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx b/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
index e17791184..09f3fed90 100644
--- a/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
@@ -18,12 +18,12 @@ export default class ModerationStats extends React.Component {
         return (
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
-                    <h2 className="title" tabIndex="0">
+                    <h2 className="title" >
                         <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Modération
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
-                        <div className="stats" tabIndex="0">
+                        <div className="stats" >
                             <div className="name">Avis à modérer</div>
                             <div className="value">{formatNumber(latest(stats, type, 'avis.nbCommentairesAModerer'))}</div>
                         </div>
diff --git a/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx b/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
index 5a74ee2c7..cfcc0320c 100644
--- a/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
@@ -18,16 +18,16 @@ export default class OrganismeStats extends React.Component {
         return (
             <div className="Stats">
                 <div className="main with-details d-flex flex-column">
-                    <h2 className="title" tabIndex="0">
+                    <h2 className="title" >
                         <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Organismes
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
-                        <div className="stats" tabIndex="0">
+                        <div className="stats" >
                             <div className="name">Organismes actifs</div>
                             <div className="value">{formatNumber(latest(stats, type, 'organismes.nbOrganismesActifs'))}</div>
                         </div>
-                        <div className="stats" tabIndex="0">
+                        <div className="stats" >
                             <div className="name">Taux de commentaires avec réponse</div>
                             <div>
                                 <span className="value highlighted">
diff --git a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
index f9a879a6a..150a30b6b 100644
--- a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
@@ -28,12 +28,12 @@ export default class StagiairesStats extends React.Component {
             <div className="Stats">
                 <div className="main d-flex justify-content-center justify-content-lg-between">
                     <div className="d-flex flex-column">
-                        <h2 className="title" tabIndex="0">
+                        <h2 className="title" >
                             <span aria-hidden="true" className="far fa-user a-icon"></span>
                             Stagiaires
                         </h2>
                         <div className="d-flex justify-content-around flex-wrap">
-                            <div className="stats" tabIndex="0">
+                            <div className="stats" >
                                 <div className="name">Nombre de stagiaires contactés</div>
                                 <div>
                                     <span className="value">
@@ -43,7 +43,7 @@ export default class StagiairesStats extends React.Component {
                                     </span>
                                 </div>
                             </div>
-                            <div className="stats" tabIndex="0">
+                            <div className="stats" >
                                 <div className="name">Taux répondants</div>
                                 <span className="value highlighted">
                                     {percentage(diff(stats, type, 'avis.nbAvis'), diff(stats, type, 'avis.nbStagiairesContactes'))}%
@@ -65,7 +65,7 @@ export default class StagiairesStats extends React.Component {
                         </div>
                     </div>
                 </div>
-                <div className="flex-grow-1" style={{ height: '300px', minWidth: '250px' }} tabIndex="0">
+                <div className="flex-grow-1" style={{ height: '300px', minWidth: '250px' }} >
                     <HistoryLines
                         lines={lines}
                         colors={type === 'regional' ? ['rgb(35, 47, 56)', '#EF7016'] : ['#EF7016']}
diff --git a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx
index d65b25017..f9d8db4ce 100644
--- a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx
+++ b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx
@@ -16,7 +16,7 @@ const CommentairesPies = ({ stats }) => {
         <div className="CommentairesPies">
             <h2 className="title">Les commentaires</h2>
             <div className="box d-flex flex-wrap flex-row">
-                <div className="chart first" tabIndex="0">
+                <div className="chart first" >
                     <div className="title">Modération des commentaires</div>
                     <div className="description">{stats.nbCommentaires} commentaires au total</div>
                     <Pie colors={colors} data={[
@@ -31,7 +31,7 @@ const CommentairesPies = ({ stats }) => {
                     ]}>
                     </Pie>
                 </div>
-                <div className="chart second" tabIndex="0">
+                <div className="chart second" >
                     <div className="title">Commentaires validés</div>
                     <div className="description">{stats.nbCommentairesValidated} commentaires au total</div>
                     <Pie colors={colors} data={[
@@ -41,7 +41,7 @@ const CommentairesPies = ({ stats }) => {
                             [{ id: `Négatifs (${round((stats.nbCommentairesNegatifs / totalComVal) * 100)}%)`, value: stats.nbCommentairesNegatifs, label: 'commentaires' }] : []),
                     ]} />
                 </div>
-                <div className="chart last" tabIndex="0">
+                <div className="chart last" >
                     <div className="title">Commentaires rejetés</div>
                     <div className="description">{stats.nbCommentairesRejected} commentaires au total</div>
                     <Pie colors={colors} data={[
diff --git a/ui/src/backoffice/components/common/page/panel/results/stats/Pie.jsx b/ui/src/backoffice/components/common/page/panel/results/stats/Pie.jsx
index 295469077..4855d6978 100644
--- a/ui/src/backoffice/components/common/page/panel/results/stats/Pie.jsx
+++ b/ui/src/backoffice/components/common/page/panel/results/stats/Pie.jsx
@@ -29,7 +29,7 @@ const Pie = ({ data, colors }) => {
                                     bottom: 20,
                                     left: 20,
                                 }}
-                                isInteractive={true}
+                                isInteractive={false}
                                 enableSlicesLabels={false}
                                 theme={{ fontSize: 12, fontFamily: 'Lato', textColor: '#24303A' }}
                                 colors={colors || { scheme: 'nivo' }}

From 7a045a3157becf01649ed333a106d48e65f46492 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 16 May 2024 10:32:14 +0200
Subject: [PATCH 096/128] feat: accessibilite P04 responsive - contraste
 graphique

---
 .../anonymous/components/StagiairesStats.jsx  |  2 +-
 .../anonymous/components/StatsPanel.jsx       | 16 +++++-----
 .../common/avis/charts/CommentairesPies.jsx   |  4 +--
 .../common/avis/charts/CommentairesPies.scss  | 30 ++++++++++++++++---
 .../common/page/panel/results/stats/Pie.jsx   |  9 ++++--
 .../common/page/panel/results/stats/Pie.scss  | 11 +++++++
 6 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
index 150a30b6b..927922666 100644
--- a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
@@ -65,7 +65,7 @@ export default class StagiairesStats extends React.Component {
                         </div>
                     </div>
                 </div>
-                <div className="flex-grow-1" style={{ height: '300px', minWidth: '250px' }} >
+                <div className="flex-grow-1" style={{ height: '300px', minWidth: '250px', marginTop: '21px'}}>
                     <HistoryLines
                         lines={lines}
                         colors={type === 'regional' ? ['rgb(35, 47, 56)', '#EF7016'] : ['#EF7016']}
diff --git a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
index 5b56360ed..be338b09a 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
@@ -65,33 +65,33 @@ export default class StatsPanel extends React.Component {
                         <div>
                             <span>* National</span>
                             <dl className="row mb-5">
-                                <dt className="col-13">Statistiques sur les stagiaires&nbsp;:</dt>
+                                <h2 className="col-13">Statistiques sur les stagiaires&nbsp;:</h2>
                                 <dd className="col-12">
                                     <StagiairesStats query={query} stats={results.stats} store={store} />
                                 </dd>
                             </dl>
 
                             <dl className="row mb-5">
-                                <dt className="col-sm-12 col-md-3">Statistiques sur les avis&nbsp;:</dt>
-                                <dd className="col-sm-12 col-md-9">
+                                <h2 className="col-sm-12 col-md-12">Statistiques sur les avis&nbsp;:</h2>
+                                <dd className="col-sm-12 col-md-12">
                                     <AvisStats query={query} stats={results.stats} store={store} />
                                 </dd>
                             </dl>
 
                             <dl className="row mb-5">
-                                <dt className="col-sm-12 col-md-3">Statistiques sur les formations&nbsp;:</dt>
-                                <dd className="col-sm-12 col-md-9">
+                                <h2 className="col-sm-12 col-md-12">Statistiques sur les formations&nbsp;:</h2>
+                                <dd className="col-sm-12 col-md-12">
                                     <FormationStats query={query} stats={results.stats} store={store} />
                                 </dd>
                             </dl>
 
                             {this.mustShowAdminStats() && (
                                 <dl className="row mb-5">
-                                    <dt className="col-sm-12 col-md-3">Statistiques d'administration&nbsp;:</dt>
-                                    <dd className="col-sm-12 col-md-3">
+                                    <h2 className="col-sm-12 col-md-12">Statistiques d'administration&nbsp;:</h2>
+                                    <dd className="col-sm-12 col-md-5">
                                         <ModerationStats query={query} stats={results.stats} />
                                     </dd>
-                                    <dd className="col-sm-12 col-md-6">
+                                    <dd className="col-sm-12 col-md-7">
                                         <OrganismeStats query={query} stats={results.stats} />
                                     </dd>
                                 </dl>
diff --git a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx
index f9d8db4ce..8775cc0be 100644
--- a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx
+++ b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx
@@ -7,7 +7,7 @@ let round = value => Number(Math.round(value + 'e1') + 'e-1');
 
 const CommentairesPies = ({ stats }) => {
 
-    let colors = ['#007E54', '#E5F2ED', '#66B298'];
+    let colors = ['#007bff ', '#FF6200 ', '#28a745 '];
     let totalComMod = stats.nbCommentairesValidated+stats.nbCommentairesRejected+stats.nbCommentairesReported+stats.nbCommentairesArchived;
     let totalComVal = stats.nbCommentairesPositifs + stats.nbCommentairesNegatifs;
     let totalComRej = stats.nbCommentairesNonConcernes + stats.nbCommentaires + stats.nbCommentairesInjures;
@@ -15,7 +15,7 @@ const CommentairesPies = ({ stats }) => {
     return (
         <div className="CommentairesPies">
             <h2 className="title">Les commentaires</h2>
-            <div className="box d-flex flex-wrap flex-row">
+            <div className="box d-flex flex-wrap flex-row" style={{justifyContent: "center"}}>
                 <div className="chart first" >
                     <div className="title">Modération des commentaires</div>
                     <div className="description">{stats.nbCommentaires} commentaires au total</div>
diff --git a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss
index 4862683d1..19e5ecf5f 100644
--- a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss
+++ b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.scss
@@ -12,14 +12,14 @@
     @include box();
 
     .chart {
-      flex: 1 0 300px;
-      padding: 0 2rem;
+      flex: 5 0 500px;
+      padding: 0rem 2rem 4rem 2rem;
 
-      &.first, &.second {
+      &.first{
         border-right: solid 1px $color-grey-25;
       }
 
-      &.last {
+      &.last, &.second  {
         border-right: unset;
       }
 
@@ -32,6 +32,28 @@
         font-size: 0.875rem;
         padding-bottom: 1rem;
       }
+
+      @media screen and (max-width: 425px) {
+        &.first{
+          border-right: none;
+        }
+      }
+    }
+
+    @media screen and (max-width: 425px) {
+      .chart{
+        padding-left: 0;
+        padding-right: 0;
+        max-width: 323px;
+      }
+    }
+
+    @media screen and (max-width: 375px) {
+      .chart{
+        padding-left: 0;
+        padding-right: 0;
+        max-width: 217px;
+      }
     }
   }
 
diff --git a/ui/src/backoffice/components/common/page/panel/results/stats/Pie.jsx b/ui/src/backoffice/components/common/page/panel/results/stats/Pie.jsx
index 4855d6978..1b09f98a2 100644
--- a/ui/src/backoffice/components/common/page/panel/results/stats/Pie.jsx
+++ b/ui/src/backoffice/components/common/page/panel/results/stats/Pie.jsx
@@ -21,8 +21,8 @@ const Pie = ({ data, colors }) => {
                         return (
                             <NoResponsivePie
                                 data={data}
-                                height={height}
-                                width={width}
+                                height={height+50}
+                                width={width+50}
                                 margin={{
                                     top: 20,
                                     right: 20,
@@ -31,7 +31,7 @@ const Pie = ({ data, colors }) => {
                                 }}
                                 isInteractive={false}
                                 enableSlicesLabels={false}
-                                theme={{ fontSize: 12, fontFamily: 'Lato', textColor: '#24303A' }}
+                                theme={{ fontSize: 12, fontFamily: 'Lato', textColor:'black' }}
                                 colors={colors || { scheme: 'nivo' }}
                                 radialLabelsTextXOffset={5}
                                 radialLabelsLinkDiagonalLength={10}
@@ -45,6 +45,9 @@ const Pie = ({ data, colors }) => {
                                         </div>
                                     );
                                 }}
+                                innerRadius={0.25}
+                                outerRadius={100}
+                                padAngle={10}
                             />);
                     }}
                 </AutoSizer>
diff --git a/ui/src/backoffice/components/common/page/panel/results/stats/Pie.scss b/ui/src/backoffice/components/common/page/panel/results/stats/Pie.scss
index e43b26d4d..42d7f2d59 100644
--- a/ui/src/backoffice/components/common/page/panel/results/stats/Pie.scss
+++ b/ui/src/backoffice/components/common/page/panel/results/stats/Pie.scss
@@ -14,4 +14,15 @@
     font-size: 10px;
   }
 }
+@media screen and (max-width: 425px) {
+  .Backoffice .Pie {
+    height: 60px;
+  }
+}
 
+@media screen and (max-width: 375px) {
+  .Backoffice .Pie {
+    height: 32px;
+    margin-left: -56px;
+  }
+}

From f4ea4eceb75e32f93a9ca1750c5c1331beb76dc0 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 16 May 2024 10:52:32 +0200
Subject: [PATCH 097/128] feat: accessibilite P01 correction lien - alt image
 carif

---
 ui/src/questionnaire/components/Remerciements.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/src/questionnaire/components/Remerciements.jsx b/ui/src/questionnaire/components/Remerciements.jsx
index 3a142ae69..7fff3eb8a 100644
--- a/ui/src/questionnaire/components/Remerciements.jsx
+++ b/ui/src/questionnaire/components/Remerciements.jsx
@@ -80,10 +80,11 @@ class Remerciements extends Component {
                                             <img
                                                 src={
                                                     process.env.PUBLIC_URL +
-                                                    `/images/regions/carif-${stagiaire.codeRegion}.png`}
-                                                alt="défi métiers" />
+                                                    `/images/regions/carif-${infosRegion.region.codeRegion}.png`}
+                                                alt={infosRegion.region.carif.nom} />
                                         </a>
                                         }
+                                        {console.log(infosRegion)}
                                         <div>
                                         <a
                                             className="textimage"

From 714fb7e849ee081ac9f9847ed0d489b8ddd01432 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 30 May 2024 09:26:23 +0200
Subject: [PATCH 098/128] feat: accessibilite contraste 4.5 couleur

---
 .../components/anonymous/components/StagiairesStats.jsx  | 2 +-
 ui/src/backoffice/components/common/page/tabs/Tab.jsx    | 2 +-
 ui/src/backoffice/components/common/page/tabs/Tab.scss   | 5 +++++
 ui/src/backoffice/components/common/page/tabs/Tabs.scss  | 9 +++++----
 ui/src/common/styles/variables.scss                      | 2 +-
 5 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
index 927922666..7c3f110d2 100644
--- a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
@@ -68,7 +68,7 @@ export default class StagiairesStats extends React.Component {
                 <div className="flex-grow-1" style={{ height: '300px', minWidth: '250px', marginTop: '21px'}}>
                     <HistoryLines
                         lines={lines}
-                        colors={type === 'regional' ? ['rgb(35, 47, 56)', '#EF7016'] : ['#EF7016']}
+                        colors={type === 'regional' ? ['rgb(35, 47, 56)', '#D14905'] : ['#D14905']}
                         groupBy={groupBy}
                         format={v => `${v}%`}
                         formatTooltip={data => {
diff --git a/ui/src/backoffice/components/common/page/tabs/Tab.jsx b/ui/src/backoffice/components/common/page/tabs/Tab.jsx
index fb3f97fbd..2e2df2e0f 100644
--- a/ui/src/backoffice/components/common/page/tabs/Tab.jsx
+++ b/ui/src/backoffice/components/common/page/tabs/Tab.jsx
@@ -9,7 +9,7 @@ const Tab = ({ label, isActive, onClick, isDisabled = () => false }) => {
 
     return (
         <li className={`Tab nav-item ${isActive() ? 'active' : ''} ${isDisabled() ? 'disabled' : ''}`}>
-            <a href="/#" className={`nav-link`} onClick={e => {
+            <a href="/#" className={`nav-link ${isActive() ? 'active' : ''}`} onClick={e => {
                 e.preventDefault();
                 trackClick(label);
                 onClick(e);
diff --git a/ui/src/backoffice/components/common/page/tabs/Tab.scss b/ui/src/backoffice/components/common/page/tabs/Tab.scss
index bd8497314..c9422938e 100644
--- a/ui/src/backoffice/components/common/page/tabs/Tab.scss
+++ b/ui/src/backoffice/components/common/page/tabs/Tab.scss
@@ -3,5 +3,10 @@
 .Backoffice .Tab {
   .nav-link {
     color: $color-white;
+
+    &.active {
+      opacity: 1;
+    }
   }
+  
 }
diff --git a/ui/src/backoffice/components/common/page/tabs/Tabs.scss b/ui/src/backoffice/components/common/page/tabs/Tabs.scss
index 5f68b573e..fcf41b1b7 100644
--- a/ui/src/backoffice/components/common/page/tabs/Tabs.scss
+++ b/ui/src/backoffice/components/common/page/tabs/Tabs.scss
@@ -4,24 +4,25 @@
   .nav {
     text-align: center;
     font-size: 1.5rem;
-    font-weight: $font-weight-boldest;
     color: $color-white;
+    font-weight: $font-weight-normal;
 
     .nav-item {
 
-      opacity: 0.6;
 
       &.active {
         opacity: 1;
+        color: $color-white;
+        font-weight: $font-weight-boldest;
 
         &:hover, &:focus {
-          font-weight: $font-weight-normal;
+          text-decoration: underline;
         }
       }
 
       &:hover, &:focus {
         cursor: pointer;
-        font-weight: $font-weight-bold;
+        text-decoration: underline;
       }
     }
   }
diff --git a/ui/src/common/styles/variables.scss b/ui/src/common/styles/variables.scss
index c9f974224..9d2224e1b 100644
--- a/ui/src/common/styles/variables.scss
+++ b/ui/src/common/styles/variables.scss
@@ -32,7 +32,7 @@ $color-green-30: #B2D8CB;
 $color-green-10: #E5F2ED;
 
 $color-orange-dark: #751314;
-$color-orange: #EF7016;
+$color-orange: #D14905;
 $color-orange-60: #F7A583;
 $color-orange-30: #FBD2C0;
 $color-orange-10: #FDF0EA;

From f3f5f3486765c5ba220ff10a60c8bb290dd8a35e Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Thu, 30 May 2024 14:04:28 +0200
Subject: [PATCH 099/128] feat: accessibilite P04 couleur graphique

---
 .../components/common/avis/charts/CommentairesPies.jsx        | 2 +-
 .../components/common/page/panel/results/stats/Pie.jsx        | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx
index 8775cc0be..3101c3a19 100644
--- a/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx
+++ b/ui/src/backoffice/components/common/avis/charts/CommentairesPies.jsx
@@ -7,7 +7,7 @@ let round = value => Number(Math.round(value + 'e1') + 'e-1');
 
 const CommentairesPies = ({ stats }) => {
 
-    let colors = ['#007bff ', '#FF6200 ', '#28a745 '];
+    let colors = ['#6cc3d5 ', '#ffa78e ', '#78c2ad '];
     let totalComMod = stats.nbCommentairesValidated+stats.nbCommentairesRejected+stats.nbCommentairesReported+stats.nbCommentairesArchived;
     let totalComVal = stats.nbCommentairesPositifs + stats.nbCommentairesNegatifs;
     let totalComRej = stats.nbCommentairesNonConcernes + stats.nbCommentaires + stats.nbCommentairesInjures;
diff --git a/ui/src/backoffice/components/common/page/panel/results/stats/Pie.jsx b/ui/src/backoffice/components/common/page/panel/results/stats/Pie.jsx
index 1b09f98a2..1f1ff7d23 100644
--- a/ui/src/backoffice/components/common/page/panel/results/stats/Pie.jsx
+++ b/ui/src/backoffice/components/common/page/panel/results/stats/Pie.jsx
@@ -31,7 +31,7 @@ const Pie = ({ data, colors }) => {
                                 }}
                                 isInteractive={false}
                                 enableSlicesLabels={false}
-                                theme={{ fontSize: 12, fontFamily: 'Lato', textColor:'black' }}
+                                theme={{ fontSize: 12, fontFamily: 'Lato', textColor:'#11181E' }}
                                 colors={colors || { scheme: 'nivo' }}
                                 radialLabelsTextXOffset={5}
                                 radialLabelsLinkDiagonalLength={10}
@@ -48,6 +48,8 @@ const Pie = ({ data, colors }) => {
                                 innerRadius={0.25}
                                 outerRadius={100}
                                 padAngle={10}
+                                borderWidth={"2px"}
+                                borderColor={"#7C7C7C"}
                             />);
                     }}
                 </AutoSizer>

From f6dfc6f12aae27f0b810e16cd873d6b4eb95b979 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 31 May 2024 10:10:19 +0200
Subject: [PATCH 100/128] feat: accessibilite P04-P05 ajout filtre date +
 change placeholder date

---
 .../src/http/api/backoffice/stats-routes.js   |  6 +-
 .../components/anonymous/StatsPage.jsx        |  2 +-
 .../anonymous/components/StagiairesStats.jsx  | 19 +++---
 .../anonymous/components/Stats.scss           |  1 -
 .../anonymous/components/StatsForm.jsx        | 62 +++++++++++++++----
 .../anonymous/components/StatsPanel.jsx       |  5 +-
 .../components/common/page/form/Periode.jsx   |  3 +-
 .../components/common/page/form/date/Date.jsx |  2 +-
 8 files changed, 73 insertions(+), 27 deletions(-)

diff --git a/backend/src/http/api/backoffice/stats-routes.js b/backend/src/http/api/backoffice/stats-routes.js
index 7a0c09a67..89b63c9e9 100644
--- a/backend/src/http/api/backoffice/stats-routes.js
+++ b/backend/src/http/api/backoffice/stats-routes.js
@@ -6,11 +6,13 @@ module.exports = ({ db }) => {
     let router = express.Router(); // eslint-disable-line new-cap
     router.get('/api/backoffice/stats', tryAndCatch(async (req, res) => {
         let firstStatsDate = moment('2019-08-01').valueOf();
+        let debutParam = moment('2024-01-30').valueOf();
+        let finParam = moment('2029-06-13').valueOf();
         let now = moment().valueOf();
         let { codeRegion, debut, fin } = await Joi.validate(req.query, {
             codeRegion: Joi.string(),
-            debut: Joi.number().min(firstStatsDate).max(now).default(firstStatsDate),
-            fin: Joi.number().min(firstStatsDate).default(now),
+            debut: Joi.number().min(debutParam).max(now).default(firstStatsDate),
+            fin: Joi.number().min(finParam).default(now),
         }, { abortEarly: false });
 
         let stream = await db.collection('statistics')
diff --git a/ui/src/backoffice/components/anonymous/StatsPage.jsx b/ui/src/backoffice/components/anonymous/StatsPage.jsx
index e64073445..e4dad4e68 100644
--- a/ui/src/backoffice/components/anonymous/StatsPage.jsx
+++ b/ui/src/backoffice/components/anonymous/StatsPage.jsx
@@ -53,7 +53,7 @@ export default class StatsPage extends React.Component {
                 title="Statistique Anotéa"
                 className="StatsPage"
                 form={<StatsForm query={query} store={this.state.store} onSubmit={this.onSubmit} />}
-                panel={<StatsPanel query={query} store={this.state.store} />}
+                panel={<StatsPanel query={query} store={this.state.store} form={this.state.form}/>}
             />
         );
     }
diff --git a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
index 7c3f110d2..626d7da39 100644
--- a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
@@ -11,10 +11,12 @@ export default class StagiairesStats extends React.Component {
         query: PropTypes.object.isRequired,
         store: PropTypes.object.isRequired,
         stats: PropTypes.array.isRequired,
+        form: PropTypes.object.isRequired,
     };
 
     render() {
-        let { query, store, stats } = this.props;
+        let { form, query, store, stats } = this.props;
+        const { codeRegion, debut, fin } = form;
         let type = query.codeRegion ? 'regional' : 'national';
         let groupBy = 'month';
         let lines = [
@@ -35,13 +37,14 @@ export default class StagiairesStats extends React.Component {
                         <div className="d-flex justify-content-around flex-wrap">
                             <div className="stats" >
                                 <div className="name">Nombre de stagiaires contactés</div>
-                                <div>
-                                    <span className="value">
-                                        {formatNumber(latest(stats, type, 'avis.nbStagiairesContactes'))}
-                                    </span>
-                                    <span className="asterisque">depuis 2018
-                                    </span>
-                                </div>
+                                <span className="value">
+                                    {formatNumber(latest(stats, type, 'avis.nbStagiairesContactes'))}
+                                </span><br/>
+                                <span className="asterisque">
+                                    {debut ? "DEPUIS LE: "+new Date(debut).toLocaleDateString() : 'DEPUIS LE: 01/01/2018'/*getFullYear*/}
+                                    <br/>
+                                    {fin ? "JUSQU'AU: "+new Date(fin).toLocaleDateString() : "JUSQU'A: Aujourd'hui"}
+                                </span>
                             </div>
                             <div className="stats" >
                                 <div className="name">Taux répondants</div>
diff --git a/ui/src/backoffice/components/anonymous/components/Stats.scss b/ui/src/backoffice/components/anonymous/components/Stats.scss
index dd453681f..fdd03b0ec 100644
--- a/ui/src/backoffice/components/anonymous/components/Stats.scss
+++ b/ui/src/backoffice/components/anonymous/components/Stats.scss
@@ -25,7 +25,6 @@
 
   .asterisque {
     font-size: 0.75rem;
-    padding-left: 0.25rem;
     color: $color-black-60;
   }
 
diff --git a/ui/src/backoffice/components/anonymous/components/StatsForm.jsx b/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
index 4aaa6bba6..477e41fb5 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '../../../../common/components/Button';
 import _ from 'lodash';
-import { Form, Select } from '../../common/page/form/Form';
+import moment from 'moment';
+import { Form, Periode, Select } from '../../common/page/form/Form';
 import BackofficeContext from '../../../BackofficeContext';
 
 export default class StatsForm extends React.Component {
@@ -22,6 +23,14 @@ export default class StatsForm extends React.Component {
         };
     }
 
+    initState = () => {
+        return {
+            debut: null,
+            fin: null,
+            codeRegion: null,
+        };
+    };
+
     componentDidUpdate(previous) {
         if (!_.isEqual(previous.store, this.props.store) && !this.formAlreadyPopulatedFromQuery) {
             let { query, store } = this.props;
@@ -38,9 +47,17 @@ export default class StatsForm extends React.Component {
         return store.loading || _.isEqual(_.pickBy(this.state), query);
     };
 
+    resetForm = () => {
+        this.setState(this.initState());
+    };
+
     onSubmit = () => {
+        let { debut, fin } = this.state;
+
         return this.props.onSubmit({
             ..._.omitBy(this.state, _.isNil),
+            ...(debut ? { debut: moment(debut).valueOf() } : {}),
+            ...(fin ? { fin: moment(fin).valueOf() } : {}),
         });
     };
 
@@ -69,18 +86,41 @@ export default class StatsForm extends React.Component {
                                     onChange={(option = {}) => this.setState({ codeRegion: option.codeRegion })}
                                 />
                             </fieldset>
+                            <fieldset>
+                                <label>Période</label>
+                                <Periode
+                                    periode={{ debut: this.state.debut, fin: this.state.fin }}
+                                    min={moment('2019-08-01').toDate()}
+                                    max={moment().toDate()}
+                                    onChange={({ debut, fin }) => this.setState({ debut, fin })}
+                                />
+                            </fieldset>
                         </div>
-                        <Button
-                            size="large"
-                            color={theme.buttonColor}
-                            disabled={store.loading}
-                            onClick={() => this.onSubmit()}
-                            style={formSynchronizedWithQuery ? {} : { border: '2px solid' }}
-                        >
-                            {!formSynchronizedWithQuery && <i className="fas fa-sync a-icon"></i>}
-                            Rechercher
-                        </Button>
                     </div>
+
+                    <div className="form-row justify-content-center" style={{marginTop: "20px"}}>
+                            <div className="form-group buttons">
+                                <Button
+                                    size="small"
+                                    className="mr-3"
+                                    disabled={store.loading}
+                                    onClick={this.resetForm}
+                                >
+                                    <i className="fas fa-times mr-2"></i>
+                                    Réinitialiser les filtres
+                                </Button>
+                                <Button
+                                    size="large"
+                                    color={theme.buttonColor}
+                                    disabled={store.loading}
+                                    onClick={() => this.onSubmit()}
+                                    style={formSynchronizedWithQuery ? {} : { border: '2px solid' }}
+                                >
+                                    {!formSynchronizedWithQuery && <i className="fas fa-sync a-icon"></i>}
+                                    Rechercher
+                                </Button>
+                            </div>
+                        </div>
                 </Form>
             </div>
         );
diff --git a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
index be338b09a..a6a7d4cbf 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
@@ -18,6 +18,7 @@ export default class StatsPanel extends React.Component {
     static propTypes = {
         query: PropTypes.object.isRequired,
         store: PropTypes.object.isRequired,
+        form: PropTypes.object.isRequired,
     };
 
     constructor() {
@@ -50,7 +51,7 @@ export default class StatsPanel extends React.Component {
     };
 
     render() {
-        let { query, store } = this.props;
+        let { query, store, form } = this.props;
         let { results } = this.state;
 
         if (_.isEmpty(results.stats)) {
@@ -67,7 +68,7 @@ export default class StatsPanel extends React.Component {
                             <dl className="row mb-5">
                                 <h2 className="col-13">Statistiques sur les stagiaires&nbsp;:</h2>
                                 <dd className="col-12">
-                                    <StagiairesStats query={query} stats={results.stats} store={store} />
+                                    <StagiairesStats query={query} form={form} stats={results.stats} store={store} />
                                 </dd>
                             </dl>
 
diff --git a/ui/src/backoffice/components/common/page/form/Periode.jsx b/ui/src/backoffice/components/common/page/form/Periode.jsx
index ee698d39b..2c43a8d59 100644
--- a/ui/src/backoffice/components/common/page/form/Periode.jsx
+++ b/ui/src/backoffice/components/common/page/form/Periode.jsx
@@ -45,7 +45,8 @@ export default class Periode extends React.Component {
                 <span className="au">à</span>
                 <Date
                     value={periode.fin}
-                    min={periode.debut || min}
+                    min={min}
+                    max={max}
                     depth={depth || 'days'}
                     onChange={date => this.onDateChange('fin', date)}
                 />
diff --git a/ui/src/backoffice/components/common/page/form/date/Date.jsx b/ui/src/backoffice/components/common/page/form/date/Date.jsx
index 4f3d88019..44b7cc996 100644
--- a/ui/src/backoffice/components/common/page/form/date/Date.jsx
+++ b/ui/src/backoffice/components/common/page/form/date/Date.jsx
@@ -74,7 +74,7 @@ export default class Date extends React.Component {
 
         return (
             <div className={'Date'}>
-                <input ref={this.reference} placeholder={pattern.toLowerCase()} />
+                <input ref={this.reference} placeholder={"jj/mm/aaaa"} />
             </div>
         );
     }

From 370a8d7d14d2d0d7050d754c82d23a3f013147c5 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 31 May 2024 10:23:43 +0200
Subject: [PATCH 101/128] feat: accessibilite correction date

---
 backend/src/http/api/backoffice/stats-routes.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/backend/src/http/api/backoffice/stats-routes.js b/backend/src/http/api/backoffice/stats-routes.js
index 89b63c9e9..7a0c09a67 100644
--- a/backend/src/http/api/backoffice/stats-routes.js
+++ b/backend/src/http/api/backoffice/stats-routes.js
@@ -6,13 +6,11 @@ module.exports = ({ db }) => {
     let router = express.Router(); // eslint-disable-line new-cap
     router.get('/api/backoffice/stats', tryAndCatch(async (req, res) => {
         let firstStatsDate = moment('2019-08-01').valueOf();
-        let debutParam = moment('2024-01-30').valueOf();
-        let finParam = moment('2029-06-13').valueOf();
         let now = moment().valueOf();
         let { codeRegion, debut, fin } = await Joi.validate(req.query, {
             codeRegion: Joi.string(),
-            debut: Joi.number().min(debutParam).max(now).default(firstStatsDate),
-            fin: Joi.number().min(finParam).default(now),
+            debut: Joi.number().min(firstStatsDate).max(now).default(firstStatsDate),
+            fin: Joi.number().min(firstStatsDate).default(now),
         }, { abortEarly: false });
 
         let stream = await db.collection('statistics')

From d05871958d5240306ccdfaeffc855cfce0fbcd95 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 31 May 2024 14:52:49 +0200
Subject: [PATCH 102/128] =?UTF-8?q?feat:=20accessibilite=20P05=20coherence?=
 =?UTF-8?q?=20donn=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../anonymous/components/AvisStats.jsx        | 22 +++++++++----------
 .../anonymous/components/FormationStats.jsx   | 11 ++++++----
 .../anonymous/components/ModerationStats.jsx  |  4 ++--
 .../anonymous/components/OrganismeStats.jsx   |  8 +++----
 .../anonymous/components/StagiairesStats.jsx  |  5 ++++-
 5 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
index c30a79f85..bb881a664 100644
--- a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Stats.scss';
-import { latest } from '../../../services/statsService';
+import { diff } from '../../../services/statsService';
 import { formatNumber, percentage } from '../../../utils/number-utils';
 
 export default class AvisStats extends React.Component {
@@ -26,19 +26,19 @@ export default class AvisStats extends React.Component {
                     <div className="d-flex justify-content-between flex-wrap">
                         <div className="stats" >
                             <div className="name">Total avis déposés</div>
-                            <div className="value">{formatNumber(latest(stats, type, 'avis.nbAvis'))}</div>
+                            <div className="value">{formatNumber(diff(stats, type, 'avis.nbAvis'))}</div>
                         </div>
                         <div className="stats" >
                             <div className="name">Commentaires</div>
                             <div className="value">
-                                {formatNumber(latest(stats, type, 'avis.nbAvisAvecCommentaire'))}
+                                {formatNumber(diff(stats, type, 'avis.nbAvisAvecCommentaire'))}
                             </div>
                         </div>
                         <div className="stats" >
                             <div className="name">Taux</div>
                             <div>
                                 <span className="value highlighted">
-                                    {percentage(latest(stats, type, 'avis.nbAvisAvecCommentaire'), latest(stats, type, 'avis.nbAvis'))}%
+                                    {percentage(diff(stats, type, 'avis.nbAvisAvecCommentaire'), diff(stats, type, 'avis.nbAvis'))}%
                                 </span>
                                 {type !== 'regional' && (
                                     <span className="sr-only">National</span>
@@ -48,7 +48,7 @@ export default class AvisStats extends React.Component {
                                     <>
                                         <span className="sr-only">Region {store.regions.find((element) => element.codeRegion === query.codeRegion)?.nom}</span>
                                         <span className="value compare">
-                                            {percentage(latest(stats, 'national', 'avis.nbAvisAvecCommentaire'), latest(stats, 'national', 'avis.nbAvis'))}%*
+                                            {percentage(diff(stats, 'national', 'avis.nbAvisAvecCommentaire'), diff(stats, 'national', 'avis.nbAvis'))}%*
                                         </span>
                                         <span className="sr-only">National</span>
                                     </>
@@ -62,33 +62,33 @@ export default class AvisStats extends React.Component {
                     <div className="stats" >
                         <div className="name">Positifs ou neutres</div>
                         <span className="value">
-                            {percentage(latest(stats, type, 'avis.nbCommentairesPositifs'), latest(stats, type, 'avis.nbAvisAvecCommentaire'))}%
+                            {percentage(diff(stats, type, 'avis.nbCommentairesPositifs'), diff(stats, type, 'avis.nbAvisAvecCommentaire'))}%
                         </span>
                         {type === 'regional' &&
                         <span className="value compare">
-                            {percentage(latest(stats, 'national', 'avis.nbCommentairesPositifs'), latest(stats, 'national', 'avis.nbAvisAvecCommentaire'))}%*
+                            {percentage(diff(stats, 'national', 'avis.nbCommentairesPositifs'), diff(stats, 'national', 'avis.nbAvisAvecCommentaire'))}%*
                         </span>
                         }
                     </div>
                     <div className="stats" >
                         <div className="name">Négatifs</div>
                         <span className="value">
-                            {percentage(latest(stats, type, 'avis.nbCommentairesNegatifs'), latest(stats, type, 'avis.nbAvisAvecCommentaire'))}%
+                            {percentage(diff(stats, type, 'avis.nbCommentairesNegatifs'), diff(stats, type, 'avis.nbAvisAvecCommentaire'))}%
                         </span>
                         {type === 'regional' &&
                         <span className="value compare">
-                            {percentage(latest(stats, 'national', 'avis.nbCommentairesNegatifs'), latest(stats, 'national', 'avis.nbAvisAvecCommentaire'))}%*
+                            {percentage(diff(stats, 'national', 'avis.nbCommentairesNegatifs'), diff(stats, 'national', 'avis.nbAvisAvecCommentaire'))}%*
                         </span>
                         }
                     </div>
                     <div className="stats" >
                         <div className="name">Rejetés</div>
                         <span className="value">
-                            {percentage(latest(stats, type, 'avis.nbCommentairesRejetes'), latest(stats, type, 'avis.nbAvisAvecCommentaire'))}%
+                            {percentage(diff(stats, type, 'avis.nbCommentairesRejetes'), diff(stats, type, 'avis.nbAvisAvecCommentaire'))}%
                         </span>
                         {type === 'regional' &&
                         <span className="value compare">
-                            {percentage(latest(stats, 'national', 'avis.nbCommentairesRejetes'), latest(stats, 'national', 'avis.nbAvisAvecCommentaire'))}%*
+                            {percentage(diff(stats, 'national', 'avis.nbCommentairesRejetes'), diff(stats, 'national', 'avis.nbAvisAvecCommentaire'))}%*
                         </span>
                         }
                     </div>
diff --git a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
index 61d139145..1ee3b8478 100644
--- a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Stats.scss';
-import { latest } from '../../../services/statsService';
+import { diff, latest } from '../../../services/statsService';
 import { formatNumber, percentage } from '../../../utils/number-utils';
 
 export default class FormationStats extends React.Component {
@@ -29,13 +29,16 @@ export default class FormationStats extends React.Component {
                     <div className="d-flex justify-content-between flex-wrap">
                         <div className="stats" >
                             <div className="name">Formations en ligne</div>
-                            <div className="value">{formatNumber(latest(stats, type, 'api.nbSessions'))}</div>
+                            <div className="value">{formatNumber(diff(stats, type, 'api.nbSessions'))}</div>
+                            {console.log(formatNumber(latest(stats, type, 'api.nbSessions')))}
+                                    {console.log(stats[0])}
+                                    {console.log(type)}
                         </div>
                         <div className="stats" >
                             <div className="name">Formations avec un avis</div>
                             <div>
                                 <span className="value highlighted">
-                                    {percentage(latest(stats, type, 'api.nbSessionsAvecAvis'), latest(stats, type, 'api.nbSessions'))}%
+                                    {percentage(diff(stats, type, 'api.nbSessionsAvecAvis'), diff(stats, type, 'api.nbSessions'))}%
                                 </span>
                                 {type !== 'regional' && (
                                     <span className="sr-only">National</span>
@@ -45,7 +48,7 @@ export default class FormationStats extends React.Component {
                                     <>
                                          <span className="sr-only">Region {store.regions.find((element) => element.codeRegion === query.codeRegion)?.nom}</span>
                                         <span className="value compare">
-                                            {percentage(latest(stats, 'national', 'api.nbSessionsAvecAvis'), latest(stats, 'national', 'api.nbSessions'))}%*
+                                            {percentage(latest(stats, 'national', 'api.nbSessionsAvecAvis'), latest(stats, 'national', 'api.nbSessions')).toFixed(2)}%*
                                         </span>
                                         <span className="sr-only">National</span>
                                     </>
diff --git a/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx b/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
index 09f3fed90..9192ca3ee 100644
--- a/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Stats.scss';
-import { latest } from '../../../services/statsService';
+import { diff } from '../../../services/statsService';
 import { formatNumber } from '../../../utils/number-utils';
 
 export default class ModerationStats extends React.Component {
@@ -25,7 +25,7 @@ export default class ModerationStats extends React.Component {
                     <div className="d-flex justify-content-between flex-wrap">
                         <div className="stats" >
                             <div className="name">Avis à modérer</div>
-                            <div className="value">{formatNumber(latest(stats, type, 'avis.nbCommentairesAModerer'))}</div>
+                            <div className="value">{formatNumber(diff(stats, type, 'avis.nbCommentairesAModerer'))}</div>
                         </div>
                     </div>
                 </div>
diff --git a/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx b/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
index cfcc0320c..3e81296b7 100644
--- a/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Stats.scss';
-import { latest } from '../../../services/statsService';
+import { diff } from '../../../services/statsService';
 import { formatNumber, percentage } from '../../../utils/number-utils';
 
 export default class OrganismeStats extends React.Component {
@@ -25,17 +25,17 @@ export default class OrganismeStats extends React.Component {
                     <div className="d-flex justify-content-between flex-wrap">
                         <div className="stats" >
                             <div className="name">Organismes actifs</div>
-                            <div className="value">{formatNumber(latest(stats, type, 'organismes.nbOrganismesActifs'))}</div>
+                            <div className="value">{formatNumber(diff(stats, type, 'organismes.nbOrganismesActifs'))}</div>
                         </div>
                         <div className="stats" >
                             <div className="name">Taux de commentaires avec réponse</div>
                             <div>
                                 <span className="value highlighted">
-                                    {percentage(latest(stats, type, 'avis.nbReponses'), latest(stats, type, 'avis.nbAvisAvecCommentaire'))}%
+                                    {percentage(diff(stats, type, 'avis.nbReponses'), diff(stats, type, 'avis.nbAvisAvecCommentaire'))}%
                                 </span>
                                 {type === 'regional' &&
                                 <span className="value compare">
-                                    {percentage(latest(stats, 'national', 'avis.nbReponses'), latest(stats, 'national', 'avis.nbAvisAvecCommentaire'))}%*
+                                    {percentage(diff(stats, 'national', 'avis.nbReponses'), diff(stats, 'national', 'avis.nbAvisAvecCommentaire'))}%*
                                 </span>
                                 }
                             </div>
diff --git a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
index 626d7da39..44b0d211b 100644
--- a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
@@ -38,7 +38,10 @@ export default class StagiairesStats extends React.Component {
                             <div className="stats" >
                                 <div className="name">Nombre de stagiaires contactés</div>
                                 <span className="value">
-                                    {formatNumber(latest(stats, type, 'avis.nbStagiairesContactes'))}
+                                    {formatNumber(diff(stats, type, 'avis.nbStagiairesContactes'))}
+                                    {console.log(stats)}
+                                    {console.log(stats[0])}
+                                    {console.log(type)}
                                 </span><br/>
                                 <span className="asterisque">
                                     {debut ? "DEPUIS LE: "+new Date(debut).toLocaleDateString() : 'DEPUIS LE: 01/01/2018'/*getFullYear*/}

From 2988980f52c6b5b0fce24d377e00a436fbac05f1 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Fri, 31 May 2024 15:57:36 +0200
Subject: [PATCH 103/128] feat: accessibilite 7.4 1er element focus

---
 .../components/common/header/Header.jsx           | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui/src/backoffice/components/common/header/Header.jsx b/ui/src/backoffice/components/common/header/Header.jsx
index 6d3196cae..585fd2166 100644
--- a/ui/src/backoffice/components/common/header/Header.jsx
+++ b/ui/src/backoffice/components/common/header/Header.jsx
@@ -1,13 +1,20 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import BackofficeContext from '../../../BackofficeContext';
 import logo from './logo.svg';
 import './Header.scss';
 
 const Header = ({ items, defaultPath, onLogout }) => {
+    const { account, theme } = useContext(BackofficeContext);
+    const logoRef = useRef(null);
+    const location = useLocation();
 
-    let { account, theme } = useContext(BackofficeContext);
+    useEffect(() => {
+        if (logoRef.current) {
+            logoRef.current.focus();
+        }
+    }, [location.pathname]);
 
     return (
         <header role="banner" className={`Header ${theme.backgroundColor}`}>
@@ -19,7 +26,7 @@ const Header = ({ items, defaultPath, onLogout }) => {
                     <div className="col-sm-12">
                         <div className="d-flex flex-column flex-md-row justify-content-between align-items-center">
                             <NavLink to={defaultPath}>
-                                <img src={logo} className="logo" alt="Anotéa" />
+                                <img src={logo} ref={logoRef} className="logo" alt="Anotéa" tabIndex="-1" />
                             </NavLink>
 
                             {items}

From bb6baaa0c989eb122163f335e67688552210c68a Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Tue, 4 Jun 2024 14:11:45 +0200
Subject: [PATCH 104/128] =?UTF-8?q?feat:=20accessibilite=20P05=20correctio?=
 =?UTF-8?q?n=20coh=C3=A9rence=20statistique?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../anonymous/components/AvisStats.jsx           | 10 ++++++++--
 .../anonymous/components/FormationStats.jsx      | 15 +++++++++------
 .../anonymous/components/ModerationStats.jsx     | 12 +++++++++---
 .../anonymous/components/OrganismeStats.jsx      | 16 +++++++++++-----
 .../anonymous/components/StagiairesStats.jsx     | 12 ++++--------
 .../anonymous/components/StatsPanel.jsx          | 10 +++++-----
 6 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
index bb881a664..927ba395d 100644
--- a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Stats.scss';
-import { diff } from '../../../services/statsService';
+import { diff, latest } from '../../../services/statsService';
 import { formatNumber, percentage } from '../../../utils/number-utils';
 
 export default class AvisStats extends React.Component {
@@ -10,10 +10,12 @@ export default class AvisStats extends React.Component {
         query: PropTypes.object.isRequired,
         store: PropTypes.object.isRequired,
         stats: PropTypes.array.isRequired,
+        form: PropTypes.object.isRequired,
     };
 
     render() {
-        let { query, store, stats } = this.props;
+        let { query, store, stats, form } = this.props;
+        const { debut, fin } = form;
         let type = query.codeRegion ? 'regional' : 'national';
 
         return (
@@ -22,6 +24,10 @@ export default class AvisStats extends React.Component {
                     <h2 className="title" >
                         <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Avis
+                        <span className="asterisque" style={{"marginLeft":"10px"}}>
+                            {debut ? " (DEPUIS LE: "+new Date(debut).toLocaleDateString() : '(DEPUIS LE: 01/01/2018 -' /*getFullYear*/}
+                            {fin ? " JUSQU'AU: "+new Date(fin).toLocaleDateString()+")" : "JUSQU'A: Aujourd'hui)"}
+                        </span>
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
                         <div className="stats" >
diff --git a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
index 1ee3b8478..38301f9a2 100644
--- a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
@@ -10,10 +10,12 @@ export default class FormationStats extends React.Component {
         query: PropTypes.object.isRequired,
         store: PropTypes.object.isRequired,
         stats: PropTypes.array.isRequired,
+        form: PropTypes.object.isRequired,
     };
 
     render() {
-        let { query, store, stats } = this.props;
+        let { query, store, stats, form } = this.props;
+        const { fin } = form;
         let type = query.codeRegion ? 'regional' : 'national';
 
         return (
@@ -23,22 +25,23 @@ export default class FormationStats extends React.Component {
                         <div>
                             <span aria-hidden="true" className="fas fa-graduation-cap a-icon"></span>
                             Formations
+                            <span className="asterisque" style={{"marginLeft":"10px"}}>
+                                {'(DEPUIS LE: 01/01/2018 -'}
+                                {fin ? " JUSQU'AU: "+new Date(fin).toLocaleDateString()+")" : "JUSQU'A: Aujourd'hui)"}
+                            </span>
                         </div>
                         <div className="description">(source Intercarif)</div>
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
                         <div className="stats" >
                             <div className="name">Formations en ligne</div>
-                            <div className="value">{formatNumber(diff(stats, type, 'api.nbSessions'))}</div>
-                            {console.log(formatNumber(latest(stats, type, 'api.nbSessions')))}
-                                    {console.log(stats[0])}
-                                    {console.log(type)}
+                            <div className="value">{formatNumber(latest(stats, type, 'api.nbSessions'))}</div>
                         </div>
                         <div className="stats" >
                             <div className="name">Formations avec un avis</div>
                             <div>
                                 <span className="value highlighted">
-                                    {percentage(diff(stats, type, 'api.nbSessionsAvecAvis'), diff(stats, type, 'api.nbSessions'))}%
+                                    {percentage(latest(stats, type, 'api.nbSessionsAvecAvis'), latest(stats, type, 'api.nbSessions'))}%
                                 </span>
                                 {type !== 'regional' && (
                                     <span className="sr-only">National</span>
diff --git a/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx b/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
index 9192ca3ee..63d54e214 100644
--- a/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Stats.scss';
-import { diff } from '../../../services/statsService';
+import { diff, latest } from '../../../services/statsService';
 import { formatNumber } from '../../../utils/number-utils';
 
 export default class ModerationStats extends React.Component {
@@ -9,10 +9,12 @@ export default class ModerationStats extends React.Component {
     static propTypes = {
         query: PropTypes.object.isRequired,
         stats: PropTypes.array.isRequired,
+        form: PropTypes.object.isRequired,
     };
 
     render() {
-        let { query, stats } = this.props;
+        let { query, stats, form } = this.props;
+        const { fin } = form;
         let type = query.codeRegion ? 'regional' : 'national';
 
         return (
@@ -21,11 +23,15 @@ export default class ModerationStats extends React.Component {
                     <h2 className="title" >
                         <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Modération
+                        <span className="asterisque" style={{"marginLeft":"10px"}}>
+                            {'(DEPUIS LE: 01/01/2018 -'}
+                            {fin ? " JUSQU'AU: "+new Date(fin).toLocaleDateString()+")" : "JUSQU'A: Aujourd'hui)"}
+                        </span>
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
                         <div className="stats" >
                             <div className="name">Avis à modérer</div>
-                            <div className="value">{formatNumber(diff(stats, type, 'avis.nbCommentairesAModerer'))}</div>
+                            <div className="value">{formatNumber(latest(stats, type, 'avis.nbCommentairesAModerer'))}</div>
                         </div>
                     </div>
                 </div>
diff --git a/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx b/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
index 3e81296b7..faef66a93 100644
--- a/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Stats.scss';
-import { diff } from '../../../services/statsService';
+import { latest } from '../../../services/statsService';
 import { formatNumber, percentage } from '../../../utils/number-utils';
 
 export default class OrganismeStats extends React.Component {
@@ -9,10 +9,12 @@ export default class OrganismeStats extends React.Component {
     static propTypes = {
         query: PropTypes.object.isRequired,
         stats: PropTypes.array.isRequired,
+        form: PropTypes.object.isRequired,
     };
 
     render() {
-        let { query, stats } = this.props;
+        let { query, stats, form } = this.props;
+        const { fin } = form;
         let type = query.codeRegion ? 'regional' : 'national';
 
         return (
@@ -21,21 +23,25 @@ export default class OrganismeStats extends React.Component {
                     <h2 className="title" >
                         <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Organismes
+                        <span className="asterisque" style={{"marginLeft":"10px"}}>
+                            {'(DEPUIS LE: 01/01/2018 -'}
+                            {fin ? " JUSQU'AU: "+new Date(fin).toLocaleDateString()+")" : "JUSQU'A: Aujourd'hui)"}
+                        </span>
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
                         <div className="stats" >
                             <div className="name">Organismes actifs</div>
-                            <div className="value">{formatNumber(diff(stats, type, 'organismes.nbOrganismesActifs'))}</div>
+                            <div className="value">{formatNumber(latest(stats, type, 'organismes.nbOrganismesActifs'))}</div>
                         </div>
                         <div className="stats" >
                             <div className="name">Taux de commentaires avec réponse</div>
                             <div>
                                 <span className="value highlighted">
-                                    {percentage(diff(stats, type, 'avis.nbReponses'), diff(stats, type, 'avis.nbAvisAvecCommentaire'))}%
+                                    {percentage(latest(stats, type, 'avis.nbReponses'), latest(stats, type, 'avis.nbAvisAvecCommentaire'))}%
                                 </span>
                                 {type === 'regional' &&
                                 <span className="value compare">
-                                    {percentage(diff(stats, 'national', 'avis.nbReponses'), diff(stats, 'national', 'avis.nbAvisAvecCommentaire'))}%*
+                                    {percentage(latest(stats, 'national', 'avis.nbReponses'), latest(stats, 'national', 'avis.nbAvisAvecCommentaire'))}%*
                                 </span>
                                 }
                             </div>
diff --git a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
index 44b0d211b..8b210c359 100644
--- a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
@@ -33,20 +33,16 @@ export default class StagiairesStats extends React.Component {
                         <h2 className="title" >
                             <span aria-hidden="true" className="far fa-user a-icon"></span>
                             Stagiaires
+                            <span className="asterisque" style={{"marginLeft":"10px"}}>
+                                {debut ? " (DEPUIS LE: "+new Date(debut).toLocaleDateString() : '(DEPUIS LE: 01/01/2018 -' /*getFullYear*/}
+                                {fin ? " JUSQU'AU: "+new Date(fin).toLocaleDateString()+")" : "JUSQU'A: Aujourd'hui)"}
+                            </span>
                         </h2>
                         <div className="d-flex justify-content-around flex-wrap">
                             <div className="stats" >
                                 <div className="name">Nombre de stagiaires contactés</div>
                                 <span className="value">
                                     {formatNumber(diff(stats, type, 'avis.nbStagiairesContactes'))}
-                                    {console.log(stats)}
-                                    {console.log(stats[0])}
-                                    {console.log(type)}
-                                </span><br/>
-                                <span className="asterisque">
-                                    {debut ? "DEPUIS LE: "+new Date(debut).toLocaleDateString() : 'DEPUIS LE: 01/01/2018'/*getFullYear*/}
-                                    <br/>
-                                    {fin ? "JUSQU'AU: "+new Date(fin).toLocaleDateString() : "JUSQU'A: Aujourd'hui"}
                                 </span>
                             </div>
                             <div className="stats" >
diff --git a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
index a6a7d4cbf..d88a01153 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsPanel.jsx
@@ -66,7 +66,7 @@ export default class StatsPanel extends React.Component {
                         <div>
                             <span>* National</span>
                             <dl className="row mb-5">
-                                <h2 className="col-13">Statistiques sur les stagiaires&nbsp;:</h2>
+                                <h2 className="col-12">Statistiques sur les stagiaires&nbsp;:</h2>
                                 <dd className="col-12">
                                     <StagiairesStats query={query} form={form} stats={results.stats} store={store} />
                                 </dd>
@@ -75,14 +75,14 @@ export default class StatsPanel extends React.Component {
                             <dl className="row mb-5">
                                 <h2 className="col-sm-12 col-md-12">Statistiques sur les avis&nbsp;:</h2>
                                 <dd className="col-sm-12 col-md-12">
-                                    <AvisStats query={query} stats={results.stats} store={store} />
+                                    <AvisStats query={query} form={form} stats={results.stats} store={store} />
                                 </dd>
                             </dl>
 
                             <dl className="row mb-5">
                                 <h2 className="col-sm-12 col-md-12">Statistiques sur les formations&nbsp;:</h2>
                                 <dd className="col-sm-12 col-md-12">
-                                    <FormationStats query={query} stats={results.stats} store={store} />
+                                    <FormationStats query={query} form={form} stats={results.stats} store={store} />
                                 </dd>
                             </dl>
 
@@ -90,10 +90,10 @@ export default class StatsPanel extends React.Component {
                                 <dl className="row mb-5">
                                     <h2 className="col-sm-12 col-md-12">Statistiques d'administration&nbsp;:</h2>
                                     <dd className="col-sm-12 col-md-5">
-                                        <ModerationStats query={query} stats={results.stats} />
+                                        <ModerationStats query={query} form={form} stats={results.stats} />
                                     </dd>
                                     <dd className="col-sm-12 col-md-7">
-                                        <OrganismeStats query={query} stats={results.stats} />
+                                        <OrganismeStats query={query} form={form} stats={results.stats} />
                                     </dd>
                                 </dl>
                             )}

From 0cce4b9d2d72f96a79a63331600fede0df47c978 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Mon, 10 Jun 2024 15:07:31 +0200
Subject: [PATCH 105/128] feat: accessibilite listbox

---
 .../components/common/page/form/InputText.jsx |   2 +-
 .../components/common/page/form/Periode.scss  |   1 +
 .../components/common/page/form/Select.jsx    | 310 ++++++++++++------
 .../components/common/page/form/Select.scss   | 208 ++++++++----
 .../financeur/components/FinanceurForm.jsx    | 306 ++++++++---------
 5 files changed, 504 insertions(+), 323 deletions(-)

diff --git a/ui/src/backoffice/components/common/page/form/InputText.jsx b/ui/src/backoffice/components/common/page/form/InputText.jsx
index 7eb9e8266..66249a1cc 100644
--- a/ui/src/backoffice/components/common/page/form/InputText.jsx
+++ b/ui/src/backoffice/components/common/page/form/InputText.jsx
@@ -25,7 +25,7 @@ export default class InputText extends React.Component {
 
         return (
             <div className="InputText">
-                <div className="d-flex align-items-stretch champ-texte">
+                <div className="d-flex align-items-stretch champ-texte" style={{"height": "49px"}}>
 
                     {icon &&
                     <div className="icon d-flex align-items-center">
diff --git a/ui/src/backoffice/components/common/page/form/Periode.scss b/ui/src/backoffice/components/common/page/form/Periode.scss
index 9a102808f..adeaed7a7 100644
--- a/ui/src/backoffice/components/common/page/form/Periode.scss
+++ b/ui/src/backoffice/components/common/page/form/Periode.scss
@@ -5,6 +5,7 @@
   background-color: $color-grey-25;
   border: 1px solid $color-grey-5;
   border-radius: 6px;
+  height: 49px;
 
   .au {
     font-weight: $font-weight-bold;
diff --git a/ui/src/backoffice/components/common/page/form/Select.jsx b/ui/src/backoffice/components/common/page/form/Select.jsx
index bc7ad0887..a9f032b78 100644
--- a/ui/src/backoffice/components/common/page/form/Select.jsx
+++ b/ui/src/backoffice/components/common/page/form/Select.jsx
@@ -1,114 +1,212 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactSelect, { components } from 'react-windowed-select';
-import CreatableSelect from 'react-select/creatable';
-import AnalyticsContext from '../../../../../common/components/analytics/AnalyticsContext';
+import React, { useState, useEffect, useRef } from 'react';
 import './Select.scss';
 
-const Option = props => {
-    let { label, meta } = props.data;
-    return (
-        <components.Option {...props}>
-            <div className="d-flex justify-content-between">
-                <div className={`Select__label ${meta ? 'Select__label--with-meta' : ''}`}>{label}</div>
-                {meta &&
-                <div className="Select__meta">{meta}</div>
-                }
-            </div>
-        </components.Option>
+const Select = ({
+  id,
+  placeholder,
+  trackingId,
+  loading,
+  value,
+  options,
+  optionKey,
+  optionLabel,
+  ariaLabelledby,
+  onChange
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [filter, setFilter] = useState('');
+  const [filteredOptions, setFilteredOptions] = useState(options);
+  const [focusedOption, setFocusedOption] = useState(null);
+  const comboboxRef = useRef(null);
+  const listboxRef = useRef(null);
+  const inputRef = useRef(null);
+  const optionRefs = useRef({});
+
+  const normalizeString = (str) => {
+    return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
+  };
+
+  useEffect(() => {
+    setFilteredOptions(
+      options.filter(option =>
+        normalizeString(option[optionLabel]).includes(normalizeString(filter))
+      )
     );
-};
-
-Option.propTypes = {
-    data: PropTypes.object.isRequired,
-};
-
-export default class Select extends React.Component {
-
-    static contextType = AnalyticsContext;
-
-    static propTypes = {
-        value: PropTypes.any,
-        options: PropTypes.array.isRequired,
-        optionKey: PropTypes.string.isRequired,
-        optionLabel: PropTypes.string.isRequired,
-        onChange: PropTypes.func.isRequired,
-        placeholder: PropTypes.string,
-        loading: PropTypes.bool,
-        type: PropTypes.string,
-        trackingId: PropTypes.string,
-        meta: PropTypes.func,
+  }, [filter, options, optionLabel]);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (
+        comboboxRef.current &&
+        !comboboxRef.current.contains(event.target)
+      ) {
+        setIsOpen(false);
+      }
     };
 
-    static defaultProps = {
-        type: 'search',
-        placeholder: '',
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
     };
-
-    findOption = value => {
-        let { options, optionKey } = this.props;
-        let option = options.find(o => o[optionKey] === value);
-
-        return option ? this.toReactSelectOption(option) : null;
-    };
-
-    toReactSelectOption = option => {
-        let { optionKey, optionLabel, meta } = this.props;
-
-        let value = option[optionKey];
-        return {
-            value: value,
-            label: option[optionLabel] || value,
-            ...(meta ? { meta: meta(option) } : {}),
-        };
-    };
-
-    render() {
-        let { trackClick } = this.context;
-        let creatable = this.props.type === 'create';
-        let SelectType = creatable ? CreatableSelect : ReactSelect;
-
-        return (
-            <SelectType
-                className="Select"
-                classNamePrefix="Select"
-                isLoading={this.props.loading}
-                components={{ Option }}
-                value={this.findOption(this.props.value)}
-                options={this.props.options.map(o => this.toReactSelectOption(o))}
-                placeholder={this.props.options.length === 0 ? '' : this.props.placeholder}
-                isClearable
-                onChange={option => {
-
-                    trackClick(this.props.trackingId || 'select');
-
-                    if (!option) {
-                        return this.props.onChange();
-                    }
-
-                    let data = this.props.options.find(o => {
-                        let key = this.props.optionKey ? o[this.props.optionKey] : o;
-                        return key === option.value;
-                    });
-
-                    return this.props.onChange(data);
-                }}
-                {
-                    ...(creatable ? {
-                        autoFocus: true,
-                        openMenuOnFocus: true,
-                        formatCreateLabel: label => `Ajouter "${label}"`,
-                        createOptionPosition: 'first',
-                        onCreateOption: option => {
-                            let data = this.props.optionKey ? { [this.props.optionKey]: option } : option;
-                            return this.props.onChange(data);
-                        }
-                    } : {
-                        isSearchable: true
-                    })
-                }
-            />
-        );
+  }, []);
+
+  const handleInputChange = event => {
+    setFilter(event.target.value);
+    setIsOpen(true);
+  };
+
+  const handleInputKeyDown = event => {
+    let newFocusedOption;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        setIsOpen(true);
+        if (focusedOption === null) {
+          newFocusedOption = 0;
+        } else {
+          newFocusedOption = (focusedOption + 1) % filteredOptions.length;
+        }
+        setFocusedOption(newFocusedOption);
+        if (optionRefs.current[newFocusedOption]) {
+          optionRefs.current[newFocusedOption].scrollIntoView({
+            block: 'nearest',
+            behavior: 'smooth'
+          });
+        }
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        setIsOpen(true);
+        if (focusedOption === null) {
+          newFocusedOption = filteredOptions.length - 1;
+        } else {
+          newFocusedOption = (focusedOption - 1 + filteredOptions.length) % filteredOptions.length;
+        }
+        setFocusedOption(newFocusedOption);
+        if (optionRefs.current[newFocusedOption]) {
+          optionRefs.current[newFocusedOption].scrollIntoView({
+            block: 'nearest',
+            behavior: 'smooth'
+          });
+        }
+        break;
+      case 'Enter':
+        event.preventDefault();
+        if (isOpen && focusedOption !== null) {
+          onChange(filteredOptions[focusedOption]);
+          setIsOpen(false);
+          setFilter('');
+        }
+        break;
+      case 'Escape':
+        setIsOpen(false);
+        break;
+      default:
+        break;
     }
-}
+  };
+
+  const handleOptionClick = option => {
+    onChange(option);
+    setIsOpen(false);
+    setFilter('');
+  };
+
+  const handleClear = () => {
+    setFilter('');
+    setIsOpen(false);
+    //inputRef.current.focus();
+    onChange(null); // Clear the selected value
+  };
+
+  const handleInputFocus = () => {
+    setIsOpen(true);
+  };
+
+  const handleInputBlur = () => {
+    setTimeout(() => {
+      setIsOpen(false);
+      setFilter('');
+    }, 100);
+
+  };
+  
+
+  return (
+    <div className="combobox combobox-list" ref={comboboxRef}>
+      <div className="group">
+        <input
+          id={id}
+          className="cb_edit"
+          type="text"
+          role="combobox"
+          aria-autocomplete="both"
+          aria-expanded={isOpen}
+          aria-controls={`${id}-listbox`}
+          value={value ? options.find(opt => opt[optionKey] === value)?.[optionLabel] : filter}
+          onChange={handleInputChange}
+          onKeyDown={handleInputKeyDown}
+          onFocus={handleInputFocus}
+          onBlur={handleInputBlur}
+          placeholder={placeholder}
+          ref={inputRef}
+        />
+        {(filter || value) && (
+          <button
+            type="button"
+            className="clear-button"
+            aria-label={"Réinitialiser le filtre"}
+            onClick={handleClear}
+          >
+            <svg
+              height="20"
+              width="20"
+              viewBox="0 0 20 20"
+              aria-hidden="true"
+              focusable="false"
+              className="css-tj5bde-Svg">
+              <path
+                  d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path>
+            </svg>
+          </button>
+        )}
+        <button
+          type="button"
+          id={`${id}-button`}
+          aria-label={placeholder}
+          aria-expanded={isOpen}
+          aria-controls={`${id}-listbox`}
+          onClick={() => setIsOpen(!isOpen)}
+          aria-hidden="true"
+        >
+          <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" />
+          </svg>
+        </button>
+      </div>
+      <ul id={`${id}-listbox`} role="listbox" aria-label={placeholder} className={isOpen ? 'open' : ''} ref={listboxRef}>
+        {filteredOptions.length > 0 ? (
+          filteredOptions.map((option, index) => (
+            <li
+              key={option[optionKey]}
+              id={`${id}-${option[optionKey]}`}
+              role="option"
+              aria-selected={index === focusedOption}
+              onClick={() => handleOptionClick(option)}
+              className={index === focusedOption ? 'focused' : ''}
+              ref={el => {
+                optionRefs.current[index] = el;
+              }}
+            >
+              {option[optionLabel]}
+            </li>
+          ))
+        ) : (
+          <li className="no-results">Aucun résultat</li>
+        )}
+      </ul>
+    </div>
+  );
+};
 
+export default Select;
diff --git a/ui/src/backoffice/components/common/page/form/Select.scss b/ui/src/backoffice/components/common/page/form/Select.scss
index ae64f3336..3ec2d1f46 100644
--- a/ui/src/backoffice/components/common/page/form/Select.scss
+++ b/ui/src/backoffice/components/common/page/form/Select.scss
@@ -1,68 +1,142 @@
-@import 'src/common/styles/variables';
-
-.Backoffice .Select {
-
-  .Select__control {
-    background-color: $color-grey-25;
-    box-shadow: unset;
-    border: 1px solid $color-grey-5;
-    border-radius: 6px;
-    padding: 0.30rem;
-
-    .css-1wa3eu0-placeholder {
-      color: black;
-    }
-  }
-
-  .Select__single-value {
-    font-size: 1rem;
-    color: $color-black;
-  }
-
-  .Select__control--is-focused {
-    background-color: $color-grey-5;
-    box-shadow: 0 0 0px 2px black;
-  }
-
-  .Select__clear-indicator {
-    padding-right: 0;
-  }
-
-  .Select__option {
-    padding: 0.5rem;
-    font-size: 0.875rem;
-    border-bottom: solid 1px $color-grey-5;
-  }
-
-  .Select__option--is-focused {
-    background-color: $color-grey-5;
-  }
-
-  .Select__option--is-selected {
-    background-color: $color-grey-25;
-  }
-
-  .Select__indicator {
-    color: $color-black;
-  }
-
-  .Select__indicator-separator {
-    width: 0;
-  }
-
-  .Select__meta {
-    font-size: 0.75rem;
-    color: $color-black-60;
-  }
-
-  .Select__label {
-    color: $color-black;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .Select__label--with-meta {
-    max-width: 85%;
-  }
+.combobox-list {
+  position: relative;
+}
+
+.combobox .group {
+  display: inline-flex;
+  background-color: #c8cbce;
+  box-shadow: unset;
+  border: 1px solid #f4f4f5;
+  border-radius: 6px;
+  padding: .3rem;
+  width: 100%;
+  height: 49px;
+}
+
+.combobox input,
+.combobox button {
+  color: black;
+  box-sizing: border-box;
+  height: 30px;
+  padding: 0;
+  margin: 0;
+  vertical-align: bottom;
+  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;
+  flex: 1 1 0%;
+  flex-wrap: wrap;
+  padding: 2px 8px;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  min-height: 38px;
+}
+
+/* Placeholder styles */
+.combobox input::placeholder {
+  color: black;
+  text-shadow: 0 0 0 gray;
+  opacity: 1;
+}
+
+.combobox input::-webkit-input-placeholder {
+  color: black;
+  text-shadow: 0 0 0 gray;
+  opacity: 1;
+}
+
+.combobox input:-ms-input-placeholder {
+  color: black;
+  text-shadow: 0 0 0 gray;
+  opacity: 1;
+}
+
+.combobox input::-ms-input-placeholder {
+  color: black;
+  text-shadow: 0 0 0 gray;
+  opacity: 1;
+}
+
+.combobox input:focus {
+  border: 2px solid currentcolor;
+  border-radius: 4px;
+}
+
+.combobox button {
+  width: 19px;
+  border: none;
+  outline: none;
+  color: #11181E;
+  background-color: #c8cbce;
+}
+
+.combobox button:focus {
+  border: 2px solid currentcolor;
+  border-radius: 4px;
+}
+
+.combobox button[aria-expanded="true"] svg {
+  transform: rotate(180deg) translate(0, -3px);
+}
+
+ul[role="listbox"] {
+  display: none;
+  max-height: 250px;
+  overflow-y: auto; 
+  top: 100%;
+  padding: 0;
+  background-color: rgb(255, 255, 255);
+  border-radius: 4px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px;
+  margin-bottom: 8px;
+  margin-top: 8px;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  box-sizing: border-box;
+}
+
+ul[role="listbox"].open {
+  display: block;
+}
+
+ul[role="listbox"] li[role="option"] {
+  margin: 0;
+  display: block;
+  padding: .5rem;
+  font-size: .875rem;
+  border-bottom: 1px solid #c8cbce;
+}
+
+ul[role="listbox"] li[role="option"].focused {
+  background-color: #c8cbce;
+}
+
+/* focus and hover styling */
+.combobox.focus {
+  border: 2px solid currentcolor;
+  border-radius: 4px;
+}
+
+.combobox .group.focus polygon,
+.combobox .group:hover polygon {
+  fill-opacity: 1;
+}
+
+.no-results {
+  padding: .5rem;
+  font-size: .875rem;
+  color: #999;
+  text-align: center;
 }
diff --git a/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx b/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
index 6688b6bfc..25c702e05 100644
--- a/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
+++ b/ui/src/backoffice/components/financeur/components/FinanceurForm.jsx
@@ -90,172 +90,180 @@ export default class FinanceurForm extends React.Component {
         let formSynchronizedWithQuery = this.isFormSynchronizedWithQuery();
         let { store, loadFormations } = this.props;
 
-        return <Form>
-            <div className="form-row  FinanceurAvisChartsPanel">
-                <div className="form-group col-lg-6 col-xl-3">
-                    <fieldset>
-                        <label>Période</label>
-                        <Periode
-                            periode={{ debut: this.state.debut, fin: this.state.fin }}
-                            min={moment('2016-01-01T00:00:00Z').toDate()}
-                            onChange={({ debut, fin }) => this.setState({ debut, fin })}
-                        />
-                    </fieldset>
-                </div>
-                <div className="form-group col-lg-6 col-xl-3">
-                    {this.mustShowCodeRegionFilter() ?
+        return (
+            <Form>
+                <div className="form-row FinanceurAvisChartsPanel">
+                    <div className="form-group col-lg-6 col-xl-3">
                         <fieldset>
-                            <label>Regions</label>
-                            <Select
-                                placeholder={'Toutes les régions'}
-                                trackingId="Region"
-                                loading={store.loading}
-                                value={this.state.codeRegion}
-                                options={store.regions}
-                                optionKey="codeRegion"
-                                optionLabel="nom"
-                                onChange={(option = {}) => this.setState({ codeRegion: option.codeRegion })}
-                            />
-                        </fieldset> :
-                        <fieldset>
-                            <label>Départements</label>
-                            <Select
-                                placeholder={'Tous les départements'}
-                                trackingId="Départements"
-                                loading={store.loading}
-                                value={this.state.departement}
-                                options={store.departements}
-                                optionKey="code"
-                                optionLabel="label"
-                                onChange={(option = {}) => this.setState({ departement: option.code })}
+                            <label>Période</label>
+                            <Periode
+                                periode={{ debut: this.state.debut, fin: this.state.fin }}
+                                min={moment('2016-01-01T00:00:00Z').toDate()}
+                                onChange={({ debut, fin }) => this.setState({ debut, fin })}
                             />
                         </fieldset>
-                    }
+                    </div>
+                    <div className="form-group col-lg-6 col-xl-3">
+                        {this.mustShowCodeRegionFilter() ? (
+                            <fieldset>
+                                <label id="combo1-label">Regions</label>
+                                <Select
+                                    id="combo1-label"
+                                    placeholder={'Toutes les régions'}
+                                    trackingId="Region"
+                                    loading={store.loading}
+                                    value={this.state.codeRegion}
+                                    options={store.regions}
+                                    optionKey="codeRegion"
+                                    optionLabel="nom"
+                                    aria-labelledby="combo1-label"
+                                    onChange={(option) => this.setState({ codeRegion: option ? option.codeRegion : null })}
+                                />
+                            </fieldset>
+                        ) : (
+                            <fieldset>
+                                <label>Départements</label>
+                                <Select
+                                    placeholder={'Tous les départements'}
+                                    trackingId="Départements"
+                                    loading={store.loading}
+                                    value={this.state.departement}
+                                    options={store.departements}
+                                    optionKey="code"
+                                    optionLabel="label"
+                                    onChange={(option) => this.setState({ departement: option ? option.code : null })}
+                                />
+                            </fieldset>
+                        )}
+                    </div>
                 </div>
-            </div>
 
-            <div className="form-row">
-                <div className="form-group col-lg-4">
-                    <fieldset>
-                        <label>SIRET de l&apos;organisme de formation</label>
-                        <InputText
-                            type="number"
-                            value={this.state.siret}
-                            placeholder="000000000000000"
-                            icon={<i className="fas fa-search" />}
-                            reset={() => this.setState({ siret: '', siren: null, numeroFormation: null })}
-                            onChange={
-                                (event = {}) => {
+                <div className="form-row">
+                    <div className="form-group col-lg-4">
+                        <fieldset>
+                            <label>SIRET de l&apos;organisme de formation</label>
+                            <InputText
+                                type="number"
+                                value={this.state.siret}
+                                placeholder="000000000000000"
+                                icon={<i className="fas fa-search" />}
+                                reset={() => this.setState({ siret: '', siren: null, numeroFormation: null })}
+                                onChange={(event = {}) => {
                                     const nouveauSIRET = event.target.value;
                                     const nouveauSIREN = store.sirens.find(s => s.siren === nouveauSIRET.substring(0, 9));
-                                    this.setState({
-                                        siret: nouveauSIRET,
-                                        siren: nouveauSIREN?.siren,
-                                        numeroFormation: null
-                                    }, () => {
-                                        if (nouveauSIREN) {
-                                            loadFormations(nouveauSIREN.siren);
+                                    this.setState(
+                                        {
+                                            siret: nouveauSIRET,
+                                            siren: nouveauSIREN?.siren,
+                                            numeroFormation: null
+                                        },
+                                        () => {
+                                            if (nouveauSIREN) {
+                                                loadFormations(nouveauSIREN.siren);
+                                            }
                                         }
-                                    });
-                                }
-                            }
-                        />
-                    </fieldset>
-                </div>
-                <div className="form-group col-lg-4">
-                    <fieldset>
-                        <label>Nom de l&apos;organisme de formation</label>
-                        <Select
-                            placeholder={'Tous les organismes'}
-                            trackingId="Nom de l'organisme de formation"
-                            loading={store.loading}
-                            value={this.state.siren}
-                            options={store.sirens}
-                            optionKey="siren"
-                            optionLabel="name"
-                            onChange={(option = {}) => {
-                                this.setState({ siren: option.siren, numeroFormation: null, siret: '' }, () => {
-                                    loadFormations(option.siren);
-                                });
-                            }}
-                        />
-                    </fieldset>
-                </div>
-                {this.state.siren &&
-                <div className={`form-group col-lg-4`}>
-                    <fieldset>
-                        <label>Formation</label>
-                        <Select
-                            placeholder={'Toutes les formations'}
-                            trackingId="Formation"
-                            loading={store.loading}
-                            value={this.state.numeroFormation}
-                            options={store.formations}
-                            optionKey="numeroFormation"
-                            optionLabel="title"
-                            onChange={(option = {}) => this.setState({ numeroFormation: option.numeroFormation })}
-                        />
-                    </fieldset>
-                </div>
-                }
-                {this.mustShowFinanceurFilter() &&
-                <>
-                    <div className="form-group col-lg-5 col-xl-5">
-                        <fieldset>
-                            <label>Financeur</label>
-                            <Select
-                                placeholder={'Tous les financeurs'}
-                                trackingId="Financeur"
-                                loading={store.loading}
-                                value={this.state.codeFinanceur}
-                                options={store.financeurs}
-                                optionKey="code"
-                                optionLabel="label"
-                                onChange={(option = {}) => this.setState({ codeFinanceur: option.code })}
+                                    );
+                                }}
                             />
                         </fieldset>
                     </div>
-                    <div className="form-group col-lg-5 col-xl-5">
+                    <div className="form-group col-lg-4">
                         <fieldset>
-                            <label>Dispositif de financement</label>
+                            <label>Nom de l&apos;organisme de formation</label>
                             <Select
-                                placeholder={'Tous les dispositifs'}
-                                trackingId="Dispositif"
+                                placeholder={'Tous les organismes'}
+                                trackingId="Nom de l'organisme de formation"
                                 loading={store.loading}
-                                value={this.state.dispositifFinancement}
-                                options={store.dispositifs}
-                                optionKey="code"
-                                optionLabel="code"
-                                onChange={(option = {}) => this.setState({ dispositifFinancement: option.code })}
+                                value={this.state.siren}
+                                options={store.sirens}
+                                optionKey="siren"
+                                optionLabel="name"
+                                onChange={(option) => {
+                                    this.setState({ siren: option ? option.siren : null, numeroFormation: null, siret: '' }, () => {
+                                        if (option) {
+                                            loadFormations(option.siren);
+                                        }
+                                    });
+                                }}
                             />
                         </fieldset>
                     </div>
-                </>
-                }
-            </div>
-            <div className="form-row justify-content-center">
-                <div className="form-group buttons">
-                    <Button
-                        size="small"
-                        className="mr-3"
-                        disabled={store.loading}
-                        onClick={this.resetForm}
-                    >
-                        <i className="fas fa-times mr-2"></i>
-                        Réinitialiser les filtres
-                    </Button>
-                    <Button
-                        size="large"
-                        color="green"
-                        style={formSynchronizedWithQuery ? {} : { border: '2px solid' }}
-                        disabled={store.loading}
-                        onClick={() => this.onSubmit()}
-                    >
-                        {!formSynchronizedWithQuery && <i className="fas fa-sync a-icon"></i>}
-                        Rechercher
-                    </Button>
+                    {this.state.siren && (
+                        <div className={`form-group col-lg-4`}>
+                            <fieldset>
+                                <label>Formation</label>
+                                <Select
+                                    placeholder={'Toutes les formations'}
+                                    trackingId="Formation"
+                                    loading={store.loading}
+                                    value={this.state.numeroFormation}
+                                    options={store.formations}
+                                    optionKey="numeroFormation"
+                                    optionLabel="title"
+                                    onChange={(option) => this.setState({ numeroFormation: option ? option.numeroFormation : null })}
+                                />
+                            </fieldset>
+                        </div>
+                    )}
+                    {this.mustShowFinanceurFilter() && (
+                        <>
+                            <div className="form-group col-lg-5 col-xl-5">
+                                <fieldset>
+                                    <label>Financeur</label>
+                                    <Select
+                                        placeholder={'Tous les financeurs'}
+                                        trackingId="Financeur"
+                                        loading={store.loading}
+                                        value={this.state.codeFinanceur}
+                                        options={store.financeurs}
+                                        optionKey="code"
+                                        optionLabel="label"
+                                        onChange={(option) => this.setState({ codeFinanceur: option ? option.code : null })}
+                                    />
+                                </fieldset>
+                            </div>
+                            <div className="form-group col-lg-5 col-xl-5">
+                                <fieldset>
+                                    <label>Dispositif de financement</label>
+                                    <Select
+                                        placeholder={'Tous les dispositifs'}
+                                        trackingId="Dispositif"
+                                        loading={store.loading}
+                                        value={this.state.dispositifFinancement}
+                                        options={store.dispositifs}
+                                        optionKey="code"
+                                        optionLabel="code"
+                                        onChange={(option) => this.setState({ dispositifFinancement: option ? option.code : null })}
+                                    />
+                                </fieldset>
+                            </div>
+                        </>
+                    )}
+                </div>
+                <div className="form-row justify-content-center">
+                    <div className="form-group buttons">
+                        <Button
+                            size="small"
+                            className="mr-3"
+                            disabled={store.loading}
+                            onClick={this.resetForm}
+                        >
+                            <i className="fas fa-times mr-2"></i>
+                            Réinitialiser les filtres
+                        </Button>
+                        <Button
+                            size="large"
+                            color="green"
+                            style={formSynchronizedWithQuery ? {} : { border: '2px solid' }}
+                            disabled={store.loading}
+                            onClick={() => this.onSubmit()}
+                        >
+                            {!formSynchronizedWithQuery && <i className="fas fa-sync a-icon"></i>}
+                            Rechercher
+                        </Button>
+                    </div>
                 </div>
-            </div>
-        </Form>;
+            </Form>
+        );
     }
 }

From 2440e0fcc41c05e483d5dc6e592560b3469ab07c Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Tue, 11 Jun 2024 10:07:36 +0200
Subject: [PATCH 106/128] feat: accessibilite P05-P09 listbox

---
 .../backoffice/components/anonymous/components/StatsForm.jsx  | 2 +-
 ui/src/backoffice/components/common/page/form/Select.scss     | 1 +
 .../gestion-organismes/components/buttons/Edition.jsx         | 4 ++++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/src/backoffice/components/anonymous/components/StatsForm.jsx b/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
index 477e41fb5..a92ce3bac 100644
--- a/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StatsForm.jsx
@@ -83,7 +83,7 @@ export default class StatsForm extends React.Component {
                                     options={store.regions}
                                     optionKey="codeRegion"
                                     optionLabel="nom"
-                                    onChange={(option = {}) => this.setState({ codeRegion: option.codeRegion })}
+                                    onChange={(option) => this.setState({ codeRegion: option ? option.codeRegion : null })}
                                 />
                             </fieldset>
                             <fieldset>
diff --git a/ui/src/backoffice/components/common/page/form/Select.scss b/ui/src/backoffice/components/common/page/form/Select.scss
index 3ec2d1f46..b89e04a99 100644
--- a/ui/src/backoffice/components/common/page/form/Select.scss
+++ b/ui/src/backoffice/components/common/page/form/Select.scss
@@ -79,6 +79,7 @@
   outline: none;
   color: #11181E;
   background-color: #c8cbce;
+  height: 100%;
 }
 
 .combobox button:focus {
diff --git a/ui/src/backoffice/components/moderateur/gestion-organismes/components/buttons/Edition.jsx b/ui/src/backoffice/components/moderateur/gestion-organismes/components/buttons/Edition.jsx
index 095f33192..92be82f1e 100644
--- a/ui/src/backoffice/components/moderateur/gestion-organismes/components/buttons/Edition.jsx
+++ b/ui/src/backoffice/components/moderateur/gestion-organismes/components/buttons/Edition.jsx
@@ -39,8 +39,12 @@ export default class Edition extends React.Component {
 
         return (
             <div className="Edition">
+                <label id="combo-label-add" className="sr-only">Modifier l´adresse email de contact</label>
                 <Select
                     type="create"
+                    id="combo-label-add"
+                    placeholder={'Modifier l´adresse email de contact'}
+                    aria-labelledby="combo-label-add"
                     value={selected}
                     options={options}
                     loading={false}

From 8cf4aa24741ee53621f5d6281707167d39b04b47 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Wed, 12 Jun 2024 12:01:23 +0200
Subject: [PATCH 107/128] feat: accessibilite correction majuscule

---
 .../backoffice/components/anonymous/components/AvisStats.jsx  | 4 ++--
 .../components/anonymous/components/FormationStats.jsx        | 4 ++--
 .../components/anonymous/components/ModerationStats.jsx       | 4 ++--
 .../components/anonymous/components/OrganismeStats.jsx        | 4 ++--
 .../components/anonymous/components/StagiairesStats.jsx       | 4 ++--
 ui/src/backoffice/components/anonymous/components/Stats.scss  | 1 +
 6 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
index 927ba395d..0c3971c57 100644
--- a/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/AvisStats.jsx
@@ -25,8 +25,8 @@ export default class AvisStats extends React.Component {
                         <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Avis
                         <span className="asterisque" style={{"marginLeft":"10px"}}>
-                            {debut ? " (DEPUIS LE: "+new Date(debut).toLocaleDateString() : '(DEPUIS LE: 01/01/2018 -' /*getFullYear*/}
-                            {fin ? " JUSQU'AU: "+new Date(fin).toLocaleDateString()+")" : "JUSQU'A: Aujourd'hui)"}
+                            {debut ? " (depuis le: "+new Date(debut).toLocaleDateString() : '(depuis le: 01/01/2018 -' /*getFullYear*/}
+                            {fin ? " jusqu'au: "+new Date(fin).toLocaleDateString()+")" : "jusqu'à: Aujourd'hui)"}
                         </span>
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
diff --git a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
index 38301f9a2..95795a976 100644
--- a/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/FormationStats.jsx
@@ -26,8 +26,8 @@ export default class FormationStats extends React.Component {
                             <span aria-hidden="true" className="fas fa-graduation-cap a-icon"></span>
                             Formations
                             <span className="asterisque" style={{"marginLeft":"10px"}}>
-                                {'(DEPUIS LE: 01/01/2018 -'}
-                                {fin ? " JUSQU'AU: "+new Date(fin).toLocaleDateString()+")" : "JUSQU'A: Aujourd'hui)"}
+                                {'(depuis le: 01/01/2018 -'}
+                                {fin ? " jusqu'au: "+new Date(fin).toLocaleDateString()+")" : "jusqu'à: Aujourd'hui)"}
                             </span>
                         </div>
                         <div className="description">(source Intercarif)</div>
diff --git a/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx b/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
index 63d54e214..869c75327 100644
--- a/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/ModerationStats.jsx
@@ -24,8 +24,8 @@ export default class ModerationStats extends React.Component {
                         <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Modération
                         <span className="asterisque" style={{"marginLeft":"10px"}}>
-                            {'(DEPUIS LE: 01/01/2018 -'}
-                            {fin ? " JUSQU'AU: "+new Date(fin).toLocaleDateString()+")" : "JUSQU'A: Aujourd'hui)"}
+                            {'(depuis le: 01/01/2018 -'}
+                            {fin ? " jusqu'au: "+new Date(fin).toLocaleDateString()+")" : "jusqu'à: Aujourd'hui)"}
                         </span>
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
diff --git a/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx b/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
index faef66a93..d3e81eb57 100644
--- a/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/OrganismeStats.jsx
@@ -24,8 +24,8 @@ export default class OrganismeStats extends React.Component {
                         <span aria-hidden="true" className="far fa-comment-alt a-icon"></span>
                         Organismes
                         <span className="asterisque" style={{"marginLeft":"10px"}}>
-                            {'(DEPUIS LE: 01/01/2018 -'}
-                            {fin ? " JUSQU'AU: "+new Date(fin).toLocaleDateString()+")" : "JUSQU'A: Aujourd'hui)"}
+                            {'(depuis le: 01/01/2018 -'}
+                            {fin ? " jusqu'au: "+new Date(fin).toLocaleDateString()+")" : "jusqu'à: Aujourd'hui)"}
                         </span>
                     </h2>
                     <div className="d-flex justify-content-between flex-wrap">
diff --git a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
index 8b210c359..c6bf0ae72 100644
--- a/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
+++ b/ui/src/backoffice/components/anonymous/components/StagiairesStats.jsx
@@ -34,8 +34,8 @@ export default class StagiairesStats extends React.Component {
                             <span aria-hidden="true" className="far fa-user a-icon"></span>
                             Stagiaires
                             <span className="asterisque" style={{"marginLeft":"10px"}}>
-                                {debut ? " (DEPUIS LE: "+new Date(debut).toLocaleDateString() : '(DEPUIS LE: 01/01/2018 -' /*getFullYear*/}
-                                {fin ? " JUSQU'AU: "+new Date(fin).toLocaleDateString()+")" : "JUSQU'A: Aujourd'hui)"}
+                                {debut ? " (depuis le: "+new Date(debut).toLocaleDateString() : '(depuis le: 01/01/2018 -' /*getFullYear*/}
+                                {fin ? " jusqu'au: "+new Date(fin).toLocaleDateString()+")" : "jusqu'à: aujourd'hui)"}
                             </span>
                         </h2>
                         <div className="d-flex justify-content-around flex-wrap">
diff --git a/ui/src/backoffice/components/anonymous/components/Stats.scss b/ui/src/backoffice/components/anonymous/components/Stats.scss
index fdd03b0ec..dd7315d6b 100644
--- a/ui/src/backoffice/components/anonymous/components/Stats.scss
+++ b/ui/src/backoffice/components/anonymous/components/Stats.scss
@@ -26,6 +26,7 @@
   .asterisque {
     font-size: 0.75rem;
     color: $color-black-60;
+    text-transform: uppercase;
   }
 
   .main {

From 387b60b013c27c7ecd9a499ffb4061ecbfe02f81 Mon Sep 17 00:00:00 2001
From: Elias Khallouk <147084912+EliasKhallouk@users.noreply.github.com>
Date: Wed, 12 Jun 2024 16:03:15 +0200
Subject: [PATCH 108/128] feat: accessibilite listbox qui ajoute

---
 .../components/common/page/form/Select.jsx    | 34 ++++++++++++++-----
 .../organisme/components/OrganismeForm.jsx    | 10 +++---
 .../components/Remerciements.jsx              |  1 -
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/ui/src/backoffice/components/common/page/form/Select.jsx b/ui/src/backoffice/components/common/page/form/Select.jsx
index a9f032b78..8fff71d59 100644
--- a/ui/src/backoffice/components/common/page/form/Select.jsx
+++ b/ui/src/backoffice/components/common/page/form/Select.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import './Select.scss';
 
 const Select = ({
+  type,
   id,
   placeholder,
   trackingId,
@@ -57,6 +58,7 @@ const Select = ({
 
   const handleInputKeyDown = event => {
     let newFocusedOption;
+    const optionCount = type === 'create' ? filteredOptions.length + 1 : filteredOptions.length; // +1 for the "Ajouter" option
     switch (event.key) {
       case 'ArrowDown':
         event.preventDefault();
@@ -64,7 +66,7 @@ const Select = ({
         if (focusedOption === null) {
           newFocusedOption = 0;
         } else {
-          newFocusedOption = (focusedOption + 1) % filteredOptions.length;
+          newFocusedOption = (focusedOption + 1) % optionCount;
         }
         setFocusedOption(newFocusedOption);
         if (optionRefs.current[newFocusedOption]) {
@@ -78,9 +80,9 @@ const Select = ({
         event.preventDefault();
         setIsOpen(true);
         if (focusedOption === null) {
-          newFocusedOption = filteredOptions.length - 1;
+          newFocusedOption = optionCount - 1; // Last option is the "Ajouter" option
         } else {
-          newFocusedOption = (focusedOption - 1 + filteredOptions.length) % filteredOptions.length;
+          newFocusedOption = (focusedOption - 1 + optionCount) % optionCount;
         }
         setFocusedOption(newFocusedOption);
         if (optionRefs.current[newFocusedOption]) {
@@ -93,7 +95,11 @@ const Select = ({
       case 'Enter':
         event.preventDefault();
         if (isOpen && focusedOption !== null) {
-          onChange(filteredOptions[focusedOption]);
+          if (focusedOption < filteredOptions.length) {
+            onChange(filteredOptions[focusedOption]);
+          } else if (type === 'create') {
+            onChange({ [optionKey]: filter, [optionLabel]: filter });
+          }
           setIsOpen(false);
           setFilter('');
         }
@@ -115,7 +121,6 @@ const Select = ({
   const handleClear = () => {
     setFilter('');
     setIsOpen(false);
-    //inputRef.current.focus();
     onChange(null); // Clear the selected value
   };
 
@@ -128,9 +133,7 @@ const Select = ({
       setIsOpen(false);
       setFilter('');
     }, 100);
-
   };
-  
 
   return (
     <div className="combobox combobox-list" ref={comboboxRef}>
@@ -202,7 +205,22 @@ const Select = ({
             </li>
           ))
         ) : (
-          <li className="no-results">Aucun résultat</li>
+          type === 'create' ? (
+            <li
+              key="add-new"
+              role="option"
+              aria-selected={focusedOption === filteredOptions.length}
+              onClick={() => handleOptionClick({ [optionKey]: filter, [optionLabel]: filter })}
+              className={focusedOption === filteredOptions.length ? 'focused' : ''}
+              ref={el => {
+                optionRefs.current[filteredOptions.length] = el;
+              }}
+            >
+              Ajouter "{filter}"
+            </li>
+          ) : (
+            <li className="no-results">Aucun résultat</li>
+          )
         )}
       </ul>
     </div>
diff --git a/ui/src/backoffice/components/organisme/components/OrganismeForm.jsx b/ui/src/backoffice/components/organisme/components/OrganismeForm.jsx
index ed1455849..858ab223b 100644
--- a/ui/src/backoffice/components/organisme/components/OrganismeForm.jsx
+++ b/ui/src/backoffice/components/organisme/components/OrganismeForm.jsx
@@ -94,7 +94,7 @@ export default class OrganismeForm extends React.Component {
                             options={store.departements}
                             optionKey="code"
                             optionLabel="label"
-                            onChange={(option = {}) => this.setState({ departement: option.code })}
+                            onChange={(option) => this.setState({ departement: option ? option.code : null })}
                         />
                     </div>
                     <div className="form-group col-lg-6">
@@ -108,10 +108,12 @@ export default class OrganismeForm extends React.Component {
                             optionKey="siren"
                             optionLabel="name"
                             onChange={(option = {}) => {
-                                this.setState({ siren: option.siren, numeroFormation: null }, () => {
-                                    loadFormations(option.siren || account.siret);
+                                const siren = option ? option.siren : undefined;
+                                this.setState({ siren, numeroFormation: null }, () => {
+                                    loadFormations(siren || account.siret);
                                 });
                             }}
+                            
                         />
                     </div>
                     <div className="form-group offset-lg-6 col-lg-6">
@@ -124,7 +126,7 @@ export default class OrganismeForm extends React.Component {
                             optionLabel="title"
                             placeholder={'Toutes les formations'}
                             trackingId="Formation"
-                            onChange={(option = {}) => this.setState({ numeroFormation: option.numeroFormation })}
+                            onChange={(option) => this.setState({ numeroFormation: option ? option.numeroFormation : null })}
                         />
                     </div>
                 </div>
diff --git a/ui/src/questionnaire/components/Remerciements.jsx b/ui/src/questionnaire/components/Remerciements.jsx
index 7fff3eb8a..a5ab6d08f 100644
--- a/ui/src/questionnaire/components/Remerciements.jsx
+++ b/ui/src/questionnaire/components/Remerciements.jsx
@@ -84,7 +84,6 @@ class Remerciements extends Component {
                                                 alt={infosRegion.region.carif.nom} />
                                         </a>
                                         }
-                                        {console.log(infosRegion)}
                                         <div>
                                         <a
                                             className="textimage"

From 71e03ce09dc5a5ea3c2b8f77f66044da40697639 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Mon, 24 Jun 2024 14:52:19 +0200
Subject: [PATCH 109/128] chore: ajout integrity pour jquery

---
 backend/src/http/site/pages/cgu.ejs                       | 2 +-
 backend/src/http/site/pages/faq_financeurs.ejs            | 2 +-
 backend/src/http/site/pages/faq_organismes.ejs            | 2 +-
 backend/src/http/site/pages/faq_stagiaires.ejs            | 2 +-
 backend/src/http/site/pages/homepage.ejs                  | 2 +-
 backend/src/http/site/pages/politique-confidentialite.ejs | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/backend/src/http/site/pages/cgu.ejs b/backend/src/http/site/pages/cgu.ejs
index 62609eabe..39b61b42d 100644
--- a/backend/src/http/site/pages/cgu.ejs
+++ b/backend/src/http/site/pages/cgu.ejs
@@ -10,7 +10,7 @@
     <link rel="icon" type="image/png" href="/static/images/favicon.ico" />
     <link rel="stylesheet" type="text/css" href="/static/css/cgu.css" media="all">
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
-    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
     <script id="rgpd" node-env="<%= utils.nodeEnv %>" src="/static/js/rgpd.js"></script>
 </head>
 
diff --git a/backend/src/http/site/pages/faq_financeurs.ejs b/backend/src/http/site/pages/faq_financeurs.ejs
index f45ff9372..543b96213 100644
--- a/backend/src/http/site/pages/faq_financeurs.ejs
+++ b/backend/src/http/site/pages/faq_financeurs.ejs
@@ -10,7 +10,7 @@
     <link rel="icon" type="image/png" href="/static/images/favicon.ico" />
     <link rel="stylesheet" type="text/css" href="/static/css/faq.css" media="all">
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
-    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
     <script id="rgpd" node-env="<%= utils.nodeEnv %>" src="/static/js/rgpd.js"></script>
     <script src="/static/js/faq.js"></script>
 </head>
diff --git a/backend/src/http/site/pages/faq_organismes.ejs b/backend/src/http/site/pages/faq_organismes.ejs
index ee55342bf..78a570a6a 100644
--- a/backend/src/http/site/pages/faq_organismes.ejs
+++ b/backend/src/http/site/pages/faq_organismes.ejs
@@ -10,7 +10,7 @@
     <link rel="icon" type="image/png" href="/static/images/favicon.ico" />
     <link rel="stylesheet" type="text/css" href="/static/css/faq.css" media="all">
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
-    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
     <script id="rgpd" node-env="<%= utils.nodeEnv %>" src="/static/js/rgpd.js"></script>
     <script src="/static/js/faq.js"></script>
     <script>
diff --git a/backend/src/http/site/pages/faq_stagiaires.ejs b/backend/src/http/site/pages/faq_stagiaires.ejs
index d8384fc5e..b1a823119 100644
--- a/backend/src/http/site/pages/faq_stagiaires.ejs
+++ b/backend/src/http/site/pages/faq_stagiaires.ejs
@@ -10,7 +10,7 @@
     <link rel="icon" type="image/png" href="/static/images/favicon.ico" />
     <link rel="stylesheet" type="text/css" href="/static/css/faq.css" media="all">
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
-    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
     <script id="rgpd" node-env="<%= utils.nodeEnv %>" src="/static/js/rgpd.js"></script>
     <script src="/static/js/faq.js"></script>
 </head>
diff --git a/backend/src/http/site/pages/homepage.ejs b/backend/src/http/site/pages/homepage.ejs
index f995a1d57..b8c36735b 100644
--- a/backend/src/http/site/pages/homepage.ejs
+++ b/backend/src/http/site/pages/homepage.ejs
@@ -10,7 +10,7 @@
     <link rel="icon" type="image/png" href="/static/images/favicon.ico" />
     <link rel="stylesheet" type="text/css" href="/static/css/home.css" media="all">
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
-    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
     <script id="rgpd" node-env="<%= utils.nodeEnv %>" src="/static/js/rgpd.js"></script>
 </head>
 
diff --git a/backend/src/http/site/pages/politique-confidentialite.ejs b/backend/src/http/site/pages/politique-confidentialite.ejs
index 185fc56c8..23c076e76 100644
--- a/backend/src/http/site/pages/politique-confidentialite.ejs
+++ b/backend/src/http/site/pages/politique-confidentialite.ejs
@@ -10,7 +10,7 @@
     <link rel="icon" type="image/png" href="/static/images/favicon.ico" />
     <link rel="stylesheet" type="text/css" href="/static/css/cgu.css" media="all">
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
-    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
     <script id="rgpd" node-env="<%= utils.nodeEnv %>" src="/static/js/rgpd.js"></script>
 </head>
 

From 4f803e84174634dcbf2a52c0fed0e62ffb4578c6 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Tue, 2 Jul 2024 15:09:18 +0200
Subject: [PATCH 110/128] chore: maj conf nginx

---
 misc/docker/nginx/Dockerfile                     | 5 +++--
 misc/docker/nginx/app/nginx/conf.d/locations.inc | 6 ++++--
 misc/docker/nginx/app/nginx/nginx.conf           | 2 +-
 misc/docker/nginx/app/start.sh                   | 2 +-
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/misc/docker/nginx/Dockerfile b/misc/docker/nginx/Dockerfile
index daa435e71..c3f494383 100644
--- a/misc/docker/nginx/Dockerfile
+++ b/misc/docker/nginx/Dockerfile
@@ -1,7 +1,8 @@
 FROM nginx:mainline
 
 RUN apt-get update \
-    && apt-get install -y logrotate
+    && apt-get install -y logrotate \
+    && apt-get -y install fail2ban iptables
 
 #Logrotate
 COPY app/logrotate.d/logrotate.conf /etc/logrotate.conf
@@ -11,5 +12,5 @@ RUN chmod 644 /etc/logrotate.conf
 COPY app/nginx /etc/nginx
 COPY app/start.sh /opt/nginx/start.sh
 RUN chmod +x /opt/nginx/start.sh
-
+    
 CMD /opt/nginx/start.sh
diff --git a/misc/docker/nginx/app/nginx/conf.d/locations.inc b/misc/docker/nginx/app/nginx/conf.d/locations.inc
index 69963e89f..1df714290 100644
--- a/misc/docker/nginx/app/nginx/conf.d/locations.inc
+++ b/misc/docker/nginx/app/nginx/conf.d/locations.inc
@@ -1,6 +1,7 @@
  location ~ ^/(admin|backoffice|questionnaire|widget|stats)(.*)$ {
 
-    limit_req zone=flood burst=100 nodelay;
+    limit_conn conn_limit_per_ip 20; 
+    limit_req zone=req_limit_per_ip burst=100 nodelay;
 
     proxy_buffering off;
 
@@ -15,7 +16,8 @@
 
 location / {
 
-    limit_req zone=flood burst=100 nodelay;
+    limit_conn conn_limit_per_ip 20; 
+    limit_req zone=req_limit_per_ip burst=100 nodelay;
 
     proxy_buffering off;
 
diff --git a/misc/docker/nginx/app/nginx/nginx.conf b/misc/docker/nginx/app/nginx/nginx.conf
index 0fa897ba8..92cd8057a 100644
--- a/misc/docker/nginx/app/nginx/nginx.conf
+++ b/misc/docker/nginx/app/nginx/nginx.conf
@@ -21,7 +21,7 @@ http {
     keepalive_timeout  65;
     #gzip  on;
 
-    limit_req_zone $binary_remote_addr zone=flood:10m rate=400r/m;
+    limit_req_zone $binary_remote_addr zone=req_limit_per_ip:10m rate=400r/m;
     limit_req_log_level error;
 
     include /etc/nginx/conf.d/*.conf;
diff --git a/misc/docker/nginx/app/start.sh b/misc/docker/nginx/app/start.sh
index d65a5be57..12d4e70d1 100755
--- a/misc/docker/nginx/app/start.sh
+++ b/misc/docker/nginx/app/start.sh
@@ -4,4 +4,4 @@ mkdir -p /data/log
 touch /data/log/error.log
 touch /data/log/access.log
 
-nginx && tail -f /data/log/*.log
+nginx && service fail2ban start && tail -f /data/log/*.log

From ce01479f38af1f203022560302db51e2ba5fc7a2 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Thu, 4 Jul 2024 16:20:24 +0200
Subject: [PATCH 111/128] chore: maj conf nginx

---
 misc/docker/nginx/app/nginx/nginx.conf | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/misc/docker/nginx/app/nginx/nginx.conf b/misc/docker/nginx/app/nginx/nginx.conf
index 92cd8057a..211dd96af 100644
--- a/misc/docker/nginx/app/nginx/nginx.conf
+++ b/misc/docker/nginx/app/nginx/nginx.conf
@@ -22,6 +22,8 @@ http {
     #gzip  on;
 
     limit_req_zone $binary_remote_addr zone=req_limit_per_ip:10m rate=400r/m;
+    limit_conn_zone $binary_remote_addr zone=conn_limit_per_ip:10m;
+
     limit_req_log_level error;
 
     include /etc/nginx/conf.d/*.conf;

From e552bff282f3614a6f9efaaedb1be9f594dff40f Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Thu, 4 Jul 2024 19:30:09 +0200
Subject: [PATCH 112/128] chore: maj conf nginx

---
 misc/docker/nginx/app/nginx/conf.d/locations.inc | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/misc/docker/nginx/app/nginx/conf.d/locations.inc b/misc/docker/nginx/app/nginx/conf.d/locations.inc
index 1df714290..0cb60bdd7 100644
--- a/misc/docker/nginx/app/nginx/conf.d/locations.inc
+++ b/misc/docker/nginx/app/nginx/conf.d/locations.inc
@@ -1,6 +1,6 @@
  location ~ ^/(admin|backoffice|questionnaire|widget|stats)(.*)$ {
 
-    limit_conn conn_limit_per_ip 20; 
+    limit_conn conn_limit_per_ip 30;
     limit_req zone=req_limit_per_ip burst=100 nodelay;
 
     proxy_buffering off;
@@ -16,7 +16,7 @@
 
 location / {
 
-    limit_conn conn_limit_per_ip 20; 
+    limit_conn conn_limit_per_ip 30;
     limit_req zone=req_limit_per_ip burst=100 nodelay;
 
     proxy_buffering off;

From 5d707b1d17a60ded5e3525edf5b82f462fbef584 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Fri, 5 Jul 2024 13:22:45 +0200
Subject: [PATCH 113/128] chore: maj conf nginx

---
 misc/docker/nginx/app/nginx/nginx.conf | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/misc/docker/nginx/app/nginx/nginx.conf b/misc/docker/nginx/app/nginx/nginx.conf
index 211dd96af..498e92e45 100644
--- a/misc/docker/nginx/app/nginx/nginx.conf
+++ b/misc/docker/nginx/app/nginx/nginx.conf
@@ -21,8 +21,10 @@ http {
     keepalive_timeout  65;
     #gzip  on;
 
-    limit_req_zone $binary_remote_addr zone=req_limit_per_ip:10m rate=400r/m;
-    limit_conn_zone $binary_remote_addr zone=conn_limit_per_ip:10m;
+    include /etc/nginx/conf.d/jail.conf;
+
+    limit_req_zone $limit zone=req_limit_per_ip:10m rate=400r/m;
+    limit_conn_zone $limit zone=conn_limit_per_ip:10m;
 
     limit_req_log_level error;
 

From 8daf27ca9c17956f9068235d488b66983300d3b8 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Tue, 9 Jul 2024 13:58:02 +0200
Subject: [PATCH 114/128] =?UTF-8?q?feat:r=C3=A9silience=20gestion=20des=20?=
 =?UTF-8?q?avis?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../emails/stagiaires/avisRejectedAlerteEmail.js  |  6 ++++++
 .../emails/stagiaires/avisRejectedInjureEmail.js  |  5 +++++
 .../emails/stagiaires/avisStagiaireEmail.js       |  5 +++++
 .../emails/stagiaires/questionnaire6MoisEmail.js  |  5 +++++
 backend/src/core/components/workflow.js           | 12 +++++++++---
 .../stagiaires/avis/tasks/actions/ResendAction.js |  1 +
 .../stagiaires/avis/tasks/actions/RetryAction.js  |  1 +
 .../stagiaires/avis/tasks/actions/SendAction.js   |  1 +
 .../components/common/avis/buttons/EditButton.jsx | 14 +++++++++++++-
 .../common/avis/buttons/RejectButton.jsx          | 15 ++++++++++++++-
 10 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/backend/src/core/components/emails/stagiaires/avisRejectedAlerteEmail.js b/backend/src/core/components/emails/stagiaires/avisRejectedAlerteEmail.js
index 51c9a84d1..382894000 100644
--- a/backend/src/core/components/emails/stagiaires/avisRejectedAlerteEmail.js
+++ b/backend/src/core/components/emails/stagiaires/avisRejectedAlerteEmail.js
@@ -1,3 +1,5 @@
+const BadDataError = require('./../../../errors');
+
 module.exports = (db, regions, mailer) => {
 
     const templateName = 'avisRejectedAlerteEmail';
@@ -13,6 +15,10 @@ module.exports = (db, regions, mailer) => {
         templateName,
         render,
         send: async stagiaire => {
+            if (!stagiaire.individu || !stagiaire.individu.email) {
+                throw new BadDataError(`Le courriel de l'individu a été supprimé pour raison de RGPD. `);
+            }
+
             let region = regions.findRegionByCodeRegion(stagiaire.codeRegion);
 
             return mailer.createRegionalMailer(region).sendEmail(
diff --git a/backend/src/core/components/emails/stagiaires/avisRejectedInjureEmail.js b/backend/src/core/components/emails/stagiaires/avisRejectedInjureEmail.js
index 6d652a591..2ba5b4140 100644
--- a/backend/src/core/components/emails/stagiaires/avisRejectedInjureEmail.js
+++ b/backend/src/core/components/emails/stagiaires/avisRejectedInjureEmail.js
@@ -1,3 +1,5 @@
+const BadDataError = require('./../../../errors');
+
 module.exports = (db, regions, mailer) => {
 
     const templateName = 'avisRejectedInjureEmail';
@@ -13,6 +15,9 @@ module.exports = (db, regions, mailer) => {
         templateName,
         render,
         send: async stagiaire => {
+            if (!stagiaire.individu || !stagiaire.individu.email) {
+                throw new BadDataError(`Le courriel de l'individu a été supprimé pour raison de RGPD. `);
+            }
 
             let formation = stagiaire.formation;
             let region = regions.findRegionByCodeRegion(stagiaire.codeRegion);
diff --git a/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.js b/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.js
index 92db3ab65..f3b22cb0c 100644
--- a/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.js
+++ b/backend/src/core/components/emails/stagiaires/avisStagiaireEmail.js
@@ -1,3 +1,5 @@
+const BadDataError = require('./../../../errors');
+
 module.exports = (db, regions, mailer) => {
 
     const templateName = 'avisStagiaireEmail';
@@ -16,6 +18,9 @@ module.exports = (db, regions, mailer) => {
         templateName,
         render,
         send: async stagiaire => {
+            if (!stagiaire.individu || !stagiaire.individu.email) {
+                throw new BadDataError(`Le courriel de l'individu a été supprimé pour raison de RGPD. `);
+            }
 
             let onSuccess = () => {
                 return db.collection('stagiaires').updateOne({ '_id': stagiaire._id }, {
diff --git a/backend/src/core/components/emails/stagiaires/questionnaire6MoisEmail.js b/backend/src/core/components/emails/stagiaires/questionnaire6MoisEmail.js
index 1cdec49d8..4c219899d 100644
--- a/backend/src/core/components/emails/stagiaires/questionnaire6MoisEmail.js
+++ b/backend/src/core/components/emails/stagiaires/questionnaire6MoisEmail.js
@@ -1,3 +1,5 @@
+const BadDataError = require('./../../../errors');
+
 module.exports = (db, regions, mailer) => {
 
     const templateName = 'questionnaire6MoisEmail';
@@ -14,6 +16,9 @@ module.exports = (db, regions, mailer) => {
         templateName,
         render,
         send: async stagiaire => {
+            if (!stagiaire.individu || !stagiaire.individu.email) {
+                throw new BadDataError(`Le courriel de l'individu a été supprimé pour raison de RGPD. `);
+            }
             let onSuccess = () => {
                 return db.collection('stagiaires').updateOne({ '_id': stagiaire._id }, {
                     $set: {
diff --git a/backend/src/core/components/workflow.js b/backend/src/core/components/workflow.js
index 06541c738..ddc14fd14 100644
--- a/backend/src/core/components/workflow.js
+++ b/backend/src/core/components/workflow.js
@@ -1,6 +1,7 @@
 const ObjectID = require('mongodb').ObjectID;
 const _ = require('lodash');
 const { IdNotFoundError, ForbiddenError } = require('./../errors');
+const Boom = require('boom');
 
 module.exports = (db, logger, emails) => {
 
@@ -109,9 +110,11 @@ module.exports = (db, logger, emails) => {
                 }
 
                 if ((qualification === 'injure' || qualification === 'alerte')) {
+                    let stagiaire = await db.collection('stagiaires').findOne({ token: original.token });
+                    if (!stagiaire.individu || !stagiaire.individu.email) {
+                        throw Boom.badRequest(`Avis rejeté, cependant le stagiaire n'a pas pu être notifié. `);
+                    }
                     sendEmail(async () => {
-                        let stagiaire = await db.collection('stagiaires').findOne({ token: original.token });
-
                         let message = emails.getEmailMessageByTemplateName(`avisRejected${_.capitalize(qualification)}Email`);
                         return message.send(stagiaire);
                     });
@@ -187,8 +190,11 @@ module.exports = (db, logger, emails) => {
             });
 
             if (options.sendEmail) {
+                let stagiaire = await db.collection('stagiaires').findOne({ token: previous.token });
+                if (!stagiaire.individu || !stagiaire.individu.email) {
+                    throw Boom.badRequest(`Avis supprimé, cependant le courriel n'a pas pu être renvoyé. `);
+                }
                 sendEmail(async () => {
-                    let stagiaire = await db.collection('stagiaires').findOne({ token: previous.token });
                     let message = emails.getEmailMessageByTemplateName('avisStagiaireEmail');
                     return message.send(stagiaire);
                 });
diff --git a/backend/src/jobs/mailing/stagiaires/avis/tasks/actions/ResendAction.js b/backend/src/jobs/mailing/stagiaires/avis/tasks/actions/ResendAction.js
index 35994c360..03a8083d1 100644
--- a/backend/src/jobs/mailing/stagiaires/avis/tasks/actions/ResendAction.js
+++ b/backend/src/jobs/mailing/stagiaires/avis/tasks/actions/ResendAction.js
@@ -25,6 +25,7 @@ class ResendAction {
                 { mailRetry: { $lt: parseInt(avisMaxRelaunch) } }
             ],
             'formation.action.session.nbStagiairesFormes': { $gte: 5 },
+            'individu.email': { $exists: true },
         };
     }
 }
diff --git a/backend/src/jobs/mailing/stagiaires/avis/tasks/actions/RetryAction.js b/backend/src/jobs/mailing/stagiaires/avis/tasks/actions/RetryAction.js
index 6916214c7..27f87dfb7 100644
--- a/backend/src/jobs/mailing/stagiaires/avis/tasks/actions/RetryAction.js
+++ b/backend/src/jobs/mailing/stagiaires/avis/tasks/actions/RetryAction.js
@@ -20,6 +20,7 @@ class RetryAction {
                     mailRetry: { $lt: parseInt(this.configuration.smtp.stagiaires.avisMaxRelaunch) }
                 }
             ],
+            'individu.email': { $exists: true },
         };
     }
 }
diff --git a/backend/src/jobs/mailing/stagiaires/avis/tasks/actions/SendAction.js b/backend/src/jobs/mailing/stagiaires/avis/tasks/actions/SendAction.js
index c43f2137b..265fad622 100644
--- a/backend/src/jobs/mailing/stagiaires/avis/tasks/actions/SendAction.js
+++ b/backend/src/jobs/mailing/stagiaires/avis/tasks/actions/SendAction.js
@@ -16,6 +16,7 @@ class SendAction {
             ...(this.filters.codeRegions ? { 'codeRegion': { $in: this.filters.codeRegions } } : {}),
             ...(this.filters.campaign ? { 'campaign': this.filters.campaign } : {}),
             'formation.action.session.nbStagiairesFormes': { $gte: 5 },
+            'individu.email': { $exists: true },
         };
     }
 }
diff --git a/ui/src/backoffice/components/common/avis/buttons/EditButton.jsx b/ui/src/backoffice/components/common/avis/buttons/EditButton.jsx
index f2c81402e..d74055e7d 100644
--- a/ui/src/backoffice/components/common/avis/buttons/EditButton.jsx
+++ b/ui/src/backoffice/components/common/avis/buttons/EditButton.jsx
@@ -42,6 +42,7 @@ export default class EditButton extends React.Component {
                     await this.props.onChange(this.props.avis, {
                         message: {
                             type: 'local',
+                            color: 'red',
                             text: 'L\'avis a été supprimé.',
                         },
                     });
@@ -60,7 +61,18 @@ export default class EditButton extends React.Component {
                 }
                 onClose={this.handleCancel}
                 onConfirmed={async () => {
-                    await deleteAvis(this.props.avis._id, { sendEmail: true });
+                    try {
+                        await deleteAvis(this.props.avis._id, { sendEmail: true });
+                    } catch(e) {
+                        const messageJson = (await e.json).message;
+                        await this.props.onChange(this.props.avis, {
+                            message: {
+                                text: !messageJson ? e.message : messageJson,
+                                color: 'red',
+                                type: 'local',
+                            }
+                        });
+                    }
                     await this.props.onChange(this.props.avis, {
                         message: {
                             text: 'Le questionnaire a bien été envoyé au stagiaire.',
diff --git a/ui/src/backoffice/components/common/avis/buttons/RejectButton.jsx b/ui/src/backoffice/components/common/avis/buttons/RejectButton.jsx
index 2d60033a9..a97a5f903 100644
--- a/ui/src/backoffice/components/common/avis/buttons/RejectButton.jsx
+++ b/ui/src/backoffice/components/common/avis/buttons/RejectButton.jsx
@@ -50,7 +50,20 @@ export default class RejectButton extends React.Component {
                     </span>
                 }
                 onClose={this.handleCancel}
-                onConfirmed={() => this.reject(this.props.avis, this.state.qualification)} />
+                onConfirmed={async () => {
+                    try {
+                        await this.reject(this.props.avis, this.state.qualification);
+                    } catch(e) {
+                        const messageJson = (await e.json).message;
+                        await this.props.onChange(this.props.avis, {
+                            message: {
+                                text: !messageJson ? e.message : messageJson,
+                                color: 'red',
+                                type: 'local',
+                            }
+                        });
+                    }
+                }} />
         );
     };
 

From 65426c794b2d60eff29d3dc20400c4fbe37be3f5 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Mon, 8 Jul 2024 10:34:50 +0200
Subject: [PATCH 115/128] chore: maj conf nginx

---
 misc/docker/nginx/app/nginx/conf.d/locations.inc | 4 ++--
 misc/docker/nginx/app/nginx/nginx.conf           | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/misc/docker/nginx/app/nginx/conf.d/locations.inc b/misc/docker/nginx/app/nginx/conf.d/locations.inc
index 0cb60bdd7..8bfd637cb 100644
--- a/misc/docker/nginx/app/nginx/conf.d/locations.inc
+++ b/misc/docker/nginx/app/nginx/conf.d/locations.inc
@@ -1,6 +1,6 @@
  location ~ ^/(admin|backoffice|questionnaire|widget|stats)(.*)$ {
 
-    limit_conn conn_limit_per_ip 30;
+    limit_conn conn_limit_per_ip 100;
     limit_req zone=req_limit_per_ip burst=100 nodelay;
 
     proxy_buffering off;
@@ -16,7 +16,7 @@
 
 location / {
 
-    limit_conn conn_limit_per_ip 30;
+    limit_conn conn_limit_per_ip 100;
     limit_req zone=req_limit_per_ip burst=100 nodelay;
 
     proxy_buffering off;
diff --git a/misc/docker/nginx/app/nginx/nginx.conf b/misc/docker/nginx/app/nginx/nginx.conf
index 498e92e45..ab3fb90d1 100644
--- a/misc/docker/nginx/app/nginx/nginx.conf
+++ b/misc/docker/nginx/app/nginx/nginx.conf
@@ -27,6 +27,7 @@ http {
     limit_conn_zone $limit zone=conn_limit_per_ip:10m;
 
     limit_req_log_level error;
+    limit_conn_log_level error;
 
     include /etc/nginx/conf.d/*.conf;
 }

From 9bba142deb727b5392877fde0ae66899b898c6b2 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Tue, 9 Jul 2024 19:49:18 +0200
Subject: [PATCH 116/128] =?UTF-8?q?feat:=20script=20nettoyage=20donn=C3=A9?=
 =?UTF-8?q?es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/jobs/clean/index.js               | 32 ++++++++++++
 .../jobs/clean/tasks/removeOldStagiaires.js   | 45 +++++++++++++++++
 .../jobs/clean/removeOldStagiaires-test.js    | 49 +++++++++++++++++++
 3 files changed, 126 insertions(+)
 create mode 100644 backend/src/jobs/clean/index.js
 create mode 100644 backend/src/jobs/clean/tasks/removeOldStagiaires.js
 create mode 100644 backend/test/integration/jobs/clean/removeOldStagiaires-test.js

diff --git a/backend/src/jobs/clean/index.js b/backend/src/jobs/clean/index.js
new file mode 100644
index 000000000..7326744a3
--- /dev/null
+++ b/backend/src/jobs/clean/index.js
@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+'use strict';
+const cli = require('commander');
+const { execute } = require('../job-utils');
+const removeOldStagiaires = require('./tasks/removeOldStagiaires');
+
+cli.description('Supprime données inutiles')
+.option('--slack', 'Send a slack notification when job is finished')
+.parse(process.argv);
+
+execute(async ({ db, logger, sendSlackNotification }) => {
+
+    const stats = removeOldStagiaires(db, logger);
+
+    if (stats.deletedMailSentNoDate > 0) {
+        sendSlackNotification({
+            text: `[STAGIAIRES] ${stats.deletedMailSentNoDate} stagiaires contactés sans date de contact ont été supprimés`,
+        });
+    }
+    if (stats.deletedMailSentTooOld > 0) {
+        sendSlackNotification({
+            text: `[STAGIAIRES] ${stats.deletedMailSentTooOld} stagiaires contactés il y a plus d'un an ont été supprimés`,
+        });
+    }
+    if (stats.deletedMailNotSent > 0) {
+        sendSlackNotification({
+            text: `[STAGIAIRES] ${stats.deletedMailNotSent} stagiaires pas encore contactés ont été supprimés`,
+        });
+    }
+
+    return stats;
+}, { slack: cli.slack });
diff --git a/backend/src/jobs/clean/tasks/removeOldStagiaires.js b/backend/src/jobs/clean/tasks/removeOldStagiaires.js
new file mode 100644
index 000000000..655e05dc5
--- /dev/null
+++ b/backend/src/jobs/clean/tasks/removeOldStagiaires.js
@@ -0,0 +1,45 @@
+const moment = require('moment');
+
+module.exports = async (db, logger) => {
+    logger.info(`Deleting old stagiaires...`);
+
+    let stats = {
+        deletedMailSentNoDate: 0,
+        deletedMailSentTooOld: 0,
+        deletedMailNotSent: 0,
+    };
+
+    stats.deletedMailSentNoDate = (await db.collection('stagiaires').updateMany(
+        {
+            mailSent: true,
+            mailSentDate: { $exists: false },
+            individu: { $exists: true }
+        },
+        { $unset: { individu: 1 } }
+    )).result.nModified;
+
+    stats.deletedMailSentTooOld = (await db.collection('stagiaires').updateMany(
+        {
+            mailSent: true,
+            mailSentDate: { $lt: moment().subtract(1, 'years').toDate() },
+            individu: { $exists: true },
+        },
+        { $unset: { individu: 1 } }
+    )).result.nModified;
+
+    stats.deletedMailNotSent = (await db.collection('stagiaires').updateMany(
+        {
+            mailSent: { $ne: true },
+            individu: { $exists: true }
+        },
+        { $unset: { individu: 1 } }
+    )).result.nModified;
+
+    await db.collection('jobs').insertOne({
+        type: 'delete-stagiaires',
+        stats: stats,
+        date: new Date(),
+    });
+
+    return stats;
+};
diff --git a/backend/test/integration/jobs/clean/removeOldStagiaires-test.js b/backend/test/integration/jobs/clean/removeOldStagiaires-test.js
new file mode 100644
index 000000000..b93269881
--- /dev/null
+++ b/backend/test/integration/jobs/clean/removeOldStagiaires-test.js
@@ -0,0 +1,49 @@
+const assert = require('assert');
+const { withMongoDB } = require('../../../helpers/with-mongodb');
+const logger = require('../../../helpers/components/fake-logger');
+const importStagiaires = require('../../../../src/jobs/import/stagiaires/tasks/importStagiaires');
+const poleEmploiCSVHandler = require('../../../../src/jobs/import/stagiaires/tasks/handlers/poleEmploiCSVHandler');
+const removeOldStagiaires = require('../../../../src/jobs/clean/tasks/removeOldStagiaires');
+
+const moment = require('moment');
+
+describe.only(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile, insertIntoDatabase }) => {
+
+    it('should remove stagiaire contacted at unknown date', async () => {
+        let db = await getTestDatabase();
+        await insertIntoDatabase('stagiaires', { mailSent: true, individu: { nom: "TOTO" } });
+        await insertIntoDatabase('stagiaires', { mailSent: true });
+
+        const stats = await removeOldStagiaires(db, logger);
+        assert.strictEqual(1, stats.deletedMailSentNoDate);
+        assert.strictEqual(0, stats.deletedMailSentTooOld);
+        assert.strictEqual(0, stats.deletedMailNotSent);
+    });
+
+    it('should remove stagiaire contacted too long ago', async () => {
+        let db = await getTestDatabase();
+        await insertIntoDatabase('stagiaires', { mailSent: true, mailSentDate: moment().subtract(11, 'months').toDate(), individu: { nom: "TATA" } });
+        await insertIntoDatabase('stagiaires', { mailSent: true, mailSentDate: moment().subtract(2, 'years').toDate(), individu: { nom: "TOTO" } });
+        await insertIntoDatabase('stagiaires', { mailSent: true, mailSentDate: moment().subtract(2, 'years').toDate() });
+
+        const stats = await removeOldStagiaires(db, logger);
+        assert.strictEqual(0, stats.deletedMailSentNoDate);
+        assert.strictEqual(1, stats.deletedMailSentTooOld);
+        assert.strictEqual(0, stats.deletedMailNotSent);
+    });
+
+    it('should remove stagiaire not contacted', async () => {
+        let db = await getTestDatabase();
+        let { regions } = await getComponents();
+
+        const statsImportStagiaire = await importStagiaires(db, logger, getTestFile('stagiaires-pe.csv'), poleEmploiCSVHandler(db, regions));
+        await insertIntoDatabase('stagiaires', { mailSent: false });
+
+        const stats = await removeOldStagiaires(db, logger);
+        assert.strictEqual(0, stats.deletedMailSentNoDate);
+        assert.strictEqual(0, stats.deletedMailSentTooOld);
+        assert.strictEqual(5, statsImportStagiaire.imported);
+        assert.strictEqual(5, stats.deletedMailNotSent);
+    });
+
+}));

From dec5972d73d980850110cf59077e8bff6fe569dd Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Wed, 10 Jul 2024 10:06:26 +0200
Subject: [PATCH 117/128] =?UTF-8?q?test:=20script=20nettoyage=20donn=C3=A9?=
 =?UTF-8?q?es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/test/integration/jobs/clean/removeOldStagiaires-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/test/integration/jobs/clean/removeOldStagiaires-test.js b/backend/test/integration/jobs/clean/removeOldStagiaires-test.js
index b93269881..3215e7e53 100644
--- a/backend/test/integration/jobs/clean/removeOldStagiaires-test.js
+++ b/backend/test/integration/jobs/clean/removeOldStagiaires-test.js
@@ -7,7 +7,7 @@ const removeOldStagiaires = require('../../../../src/jobs/clean/tasks/removeOldS
 
 const moment = require('moment');
 
-describe.only(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile, insertIntoDatabase }) => {
+describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile, insertIntoDatabase }) => {
 
     it('should remove stagiaire contacted at unknown date', async () => {
         let db = await getTestDatabase();

From 90a9c9b34b43a0f96adf1a7ecd370feb9b1f3f12 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Wed, 10 Jul 2024 10:16:47 +0200
Subject: [PATCH 118/128] =?UTF-8?q?test:=20accessibilit=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../test/integration/http/api/questionnaire-routes-test.js    | 2 +-
 backend/test/integration/http/utils/externalLinks-test.js     | 4 ++--
 backend/test/unit/regions-test.js                             | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/backend/test/integration/http/api/questionnaire-routes-test.js b/backend/test/integration/http/api/questionnaire-routes-test.js
index 12d8b335f..c513a07dd 100644
--- a/backend/test/integration/http/api/questionnaire-routes-test.js
+++ b/backend/test/integration/http/api/questionnaire-routes-test.js
@@ -122,7 +122,7 @@ describe(__filename, withServer(({ startServer, getTestDatabase, insertIntoDatab
                     }
                 },
                 carif: {
-                    nom: 'Défi Métiers',
+                    nom: 'Défi Métiers - île-de-France',
                     url: 'https://www.defi-metiers.fr/',
                     active: true
                 }
diff --git a/backend/test/integration/http/utils/externalLinks-test.js b/backend/test/integration/http/utils/externalLinks-test.js
index 894c4d36c..b3d0f111e 100644
--- a/backend/test/integration/http/utils/externalLinks-test.js
+++ b/backend/test/integration/http/utils/externalLinks-test.js
@@ -125,8 +125,8 @@ describe(__filename, withMongoDB(({ getTestDatabase, getTestFile, getComponents
             },
         });
 
-        let links = await externalLinks(db, communes).getLink(stagiaire, 'clara');
-        assert.strictEqual(links, 'https://clara.francetravail.fr');
+        let links = await externalLinks(db, communes).getLink(stagiaire, 'mesdroitssociaux');
+        assert.strictEqual(links, 'https://www.mesdroitssociaux.gouv.fr/');
     });
 
     it('should get null link when trying to get Offres France Travail link when formation has no formacode', async () => {
diff --git a/backend/test/unit/regions-test.js b/backend/test/unit/regions-test.js
index bafd649ed..293603cd0 100644
--- a/backend/test/unit/regions-test.js
+++ b/backend/test/unit/regions-test.js
@@ -7,7 +7,7 @@ describe(__filename, () => {
 
         let region = regions().findRegionByCodeRegion('52');
         assert.deepStrictEqual(region, {
-            nom: 'Pays de la Loire',
+            nom: 'Région Pays de la Loire',
             active: true,
             since: '2017-07-01',
             codeRegion: '52',
@@ -48,7 +48,7 @@ describe(__filename, () => {
                 import: 'all',
             },
             carif: {
-                nom: 'Orientation Pays de la Loire',
+                nom: 'Choisir mon metier en Pays de la Loire',
                 url: 'http://www.orientation-paysdelaloire.fr/',
                 active: true
             }

From b4bd898977654d492e8e7760e6b1b0ba25e1f733 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Wed, 10 Jul 2024 10:54:27 +0200
Subject: [PATCH 119/128] =?UTF-8?q?feat:=20nettoyer=20donn=C3=A9es=20inuti?=
 =?UTF-8?q?les?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/jobs/archive/index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/backend/src/jobs/archive/index.js b/backend/src/jobs/archive/index.js
index 2ebaf83cc..807e7aa00 100644
--- a/backend/src/jobs/archive/index.js
+++ b/backend/src/jobs/archive/index.js
@@ -28,6 +28,10 @@ execute(async ({ db, logger, sendSlackNotification }) => {
             { _id: avis._id },
             { $set: { 'status': 'archived' } }
         );
+        await db.collection('stagiaires').updateOne(
+            { token: avis.token },
+            { $unset: { individu: 1 } }
+        );
         if (res.result.nModified > 0) {
             stats.archived++;
         }

From e6da04a5f7a9b2ad7424a18feb43b8b5d519c774 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Wed, 10 Jul 2024 11:12:43 +0200
Subject: [PATCH 120/128] feat: supprimer stagiaries avec avis archives

---
 .../jobs/clean/tasks/removeOldStagiaires.js   | 52 ++++++++++++++-----
 1 file changed, 40 insertions(+), 12 deletions(-)

diff --git a/backend/src/jobs/clean/tasks/removeOldStagiaires.js b/backend/src/jobs/clean/tasks/removeOldStagiaires.js
index 655e05dc5..706aee1bc 100644
--- a/backend/src/jobs/clean/tasks/removeOldStagiaires.js
+++ b/backend/src/jobs/clean/tasks/removeOldStagiaires.js
@@ -1,4 +1,5 @@
 const moment = require('moment');
+const { batchCursor } = require('../../job-utils');
 
 module.exports = async (db, logger) => {
     logger.info(`Deleting old stagiaires...`);
@@ -9,31 +10,58 @@ module.exports = async (db, logger) => {
         deletedMailNotSent: 0,
     };
 
-    stats.deletedMailSentNoDate = (await db.collection('stagiaires').updateMany(
+    let cursorDeletedMailSentNoDate = db.collection('stagiaires').find(
         {
             mailSent: true,
             mailSentDate: { $exists: false },
             individu: { $exists: true }
-        },
-        { $unset: { individu: 1 } }
-    )).result.nModified;
+        }
+    );
+    await batchCursor(cursorDeletedMailSentNoDate, async next => {
+        const stagiaire = await next();
+        const res = await db.collection('stagiaires').updateOne(
+            { token: stagiaire.token },
+            { $unset: { individu: 1 } }
+        );
+        if (res.result.nModified > 0) {
+            stats.deletedMailSentNoDate++;
+        }
+    });
 
-    stats.deletedMailSentTooOld = (await db.collection('stagiaires').updateMany(
+    let cursorDeletedMailSentTooOld = db.collection('stagiaires').find(
         {
             mailSent: true,
             mailSentDate: { $lt: moment().subtract(1, 'years').toDate() },
             individu: { $exists: true },
-        },
-        { $unset: { individu: 1 } }
-    )).result.nModified;
+        }
+    );
+    await batchCursor(cursorDeletedMailSentTooOld, async next => {
+        const stagiaire = await next();
+        const res = await db.collection('stagiaires').updateOne(
+            { token: stagiaire.token },
+            { $unset: { individu: 1 } }
+        );
+        if (res.result.nModified > 0) {
+            stats.deletedMailSentTooOld++;
+        }
+    });
 
-    stats.deletedMailNotSent = (await db.collection('stagiaires').updateMany(
+    let cursorDeletedMailNotSent = db.collection('stagiaires').find(
         {
             mailSent: { $ne: true },
             individu: { $exists: true }
-        },
-        { $unset: { individu: 1 } }
-    )).result.nModified;
+        }
+    );
+    await batchCursor(cursorDeletedMailNotSent, async next => {
+        const stagiaire = await next();
+        const res = await db.collection('stagiaires').updateOne(
+            { token: stagiaire.token },
+            { $unset: { individu: 1 } }
+        );
+        if (res.result.nModified > 0) {
+            stats.deletedMailNotSent++;
+        }
+    });
 
     await db.collection('jobs').insertOne({
         type: 'delete-stagiaires',

From 3ba3edd6e0bb8251f601856079ae886751945232 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Wed, 10 Jul 2024 12:03:41 +0200
Subject: [PATCH 121/128] =?UTF-8?q?feat:=20restaurer=20donn=C3=A9es=20stag?=
 =?UTF-8?q?iaires?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jobs/import/stagiaires/tasks/importStagiaires.js | 12 ++++++++++++
 .../import/stagiaires/tasks/utils/individuAbsent.js  |  7 +++++++
 .../jobs/import/stagiaires/importStagiaires-test.js  |  6 ++++++
 3 files changed, 25 insertions(+)
 create mode 100644 backend/src/jobs/import/stagiaires/tasks/utils/individuAbsent.js

diff --git a/backend/src/jobs/import/stagiaires/tasks/importStagiaires.js b/backend/src/jobs/import/stagiaires/tasks/importStagiaires.js
index 219b9ee5d..b13bbb10b 100644
--- a/backend/src/jobs/import/stagiaires/tasks/importStagiaires.js
+++ b/backend/src/jobs/import/stagiaires/tasks/importStagiaires.js
@@ -5,6 +5,7 @@ const validateStagiaire = require('./utils/validateStagiaire');
 const shouldBeImported = require('./utils/shouldBeImported');
 const hasNotBeenImported = require('./utils/hasNotBeenImported');
 const organismeResponsableAbsent = require('./utils/organismeResponsableAbsent');
+const individuAbsent = require('./utils/individuAbsent');
 const { transformObject, writeObject, ignoreFirstLine, pipeline, parseCSV } = require('../../../../core/utils/stream-utils');
 const { getCampaignDate, getCampaignName, sanitizeCsvLine } = require('./utils/utils');
 
@@ -48,12 +49,23 @@ module.exports = async (db, logger, file, handler, filters = {}, options = {}) =
                         {refreshKey: stagiaire.refreshKey},
                         {
                             $set: {
+                                "individu": stagiaire.individu,
                                 "formation.action.organisme_responsable": stagiaire.formation.action.organisme_responsable
                             }
                         }
                     );
                     stats.imported++;
                     logger.debug('Organisme responsable updated');
+                } else if (shouldStagiaireBeImported && await individuAbsent(db, stagiaire)) {
+                    await db.collection('stagiaires').updateOne(
+                        {refreshKey: stagiaire.refreshKey},
+                        {
+                            $set: {
+                                "individu": stagiaire.individu
+                            }
+                        }
+                    );
+                    stats.imported++;
                 } else {
                     stats.ignored++;
                     logger.debug('Stagiaire ignored', stagiaire, {});
diff --git a/backend/src/jobs/import/stagiaires/tasks/utils/individuAbsent.js b/backend/src/jobs/import/stagiaires/tasks/utils/individuAbsent.js
new file mode 100644
index 000000000..7b8644dfb
--- /dev/null
+++ b/backend/src/jobs/import/stagiaires/tasks/utils/individuAbsent.js
@@ -0,0 +1,7 @@
+module.exports = async (db, stagiaire) => {
+    let nbStagiaires = await db.collection('stagiaires').countDocuments({
+        refreshKey: stagiaire.refreshKey,
+        individu: { $exists: false }
+    });
+    return nbStagiaires === 1;
+};
diff --git a/backend/test/integration/jobs/import/stagiaires/importStagiaires-test.js b/backend/test/integration/jobs/import/stagiaires/importStagiaires-test.js
index 2f30d45b5..ff1c60773 100644
--- a/backend/test/integration/jobs/import/stagiaires/importStagiaires-test.js
+++ b/backend/test/integration/jobs/import/stagiaires/importStagiaires-test.js
@@ -17,6 +17,10 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
         let { regions } = await getComponents();
 
         await importStagiaires(db, logger, getTestFile('stagiaires-pe.csv'), poleEmploiCSVHandler(db, regions));
+
+        await db.collection('stagiaires').updateOne({ 'individu.nom': 'MARTINADO' }, { $unset: { individu: 1 } });
+        await importStagiaires(db, logger, getTestFile('stagiaires-pe.csv'), poleEmploiCSVHandler(db, regions));
+
         const filters = { all: true };
         await countStagiaires(db, logger, filters);
 
@@ -84,7 +88,9 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
                 },
             },
         });
+
         let results_siret_0 = await db.collection('stagiaires').find({ 'individu.nom': 'MARTINADO' }).toArray();
+        assert.strictEqual("MARTINADO", results_siret_0[0].individu.nom);
         assert.strictEqual("82436343601230", results_siret_0[0].formation.action.organisme_formateur.siret);
         assert.strictEqual("ANOTEA 0", results_siret_0[0].formation.action.organisme_formateur.raison_sociale);
     });

From 1c1981700116ab6f241e30aea9f6b5df819c3ba9 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Thu, 11 Jul 2024 18:04:26 +0200
Subject: [PATCH 122/128] =?UTF-8?q?feat:=20meilleur=20trac=C3=A9=20des=20s?=
 =?UTF-8?q?tats=20dans=20les=20batchs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/jobs/archive/index.js             |  8 +++-
 backend/src/jobs/import/stagiaires/index.js   |  4 +-
 .../stagiaires/tasks/importStagiaires.js      |  5 ++-
 .../stagiaires/importStagiaires-test.js       | 45 ++++++++++++++++---
 4 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/backend/src/jobs/archive/index.js b/backend/src/jobs/archive/index.js
index 807e7aa00..a3456b4f9 100644
--- a/backend/src/jobs/archive/index.js
+++ b/backend/src/jobs/archive/index.js
@@ -13,6 +13,7 @@ execute(async ({ db, logger, sendSlackNotification }) => {
     logger.info(`Adding flag 'archived' to old avis...`);
     let stats = {
         archived: 0,
+        stagiaireArchived: 0,
     };
 
     let cursor = db.collection('avis')
@@ -28,18 +29,21 @@ execute(async ({ db, logger, sendSlackNotification }) => {
             { _id: avis._id },
             { $set: { 'status': 'archived' } }
         );
-        await db.collection('stagiaires').updateOne(
+        let resStagiaire = await db.collection('stagiaires').updateOne(
             { token: avis.token },
             { $unset: { individu: 1 } }
         );
         if (res.result.nModified > 0) {
             stats.archived++;
         }
+        if (resStagiaire.result.nModified > 0) {
+            stats.stagiaireArchived++;
+        }
     });
 
     if (stats.archived > 0) {
         sendSlackNotification({
-            text: `[AVIS] ${stats.archived} avis ont été archivé(s)`,
+            text: `[AVIS] ${stats.archived} avis ont été archivé(s) ; [STAGIARIES] ${stats.stagiaireArchived} stagiaires ont été archivé(s)`,
         });
     }
 
diff --git a/backend/src/jobs/import/stagiaires/index.js b/backend/src/jobs/import/stagiaires/index.js
index 0e45c98ae..f58e5955a 100644
--- a/backend/src/jobs/import/stagiaires/index.js
+++ b/backend/src/jobs/import/stagiaires/index.js
@@ -53,7 +53,7 @@ execute(async ({ logger, db, exit, regions, sendSlackNotification }) => {
         if (stats.total && stats.total > 0) {
             sendSlackNotification({
                 text: `[STAGIAIRE] Des nouveaux stagiaires ont été importés : ` +
-                    `${stats.imported} importés / ${stats.ignored} ignorés / ${stats.invalid} erreurs)`,
+                    `${stats.imported} importés / ${stats.updated} mis à jour / ${stats.ignored} ignorés / ${stats.invalid} erreurs)`,
             });
         }
 
@@ -61,7 +61,7 @@ execute(async ({ logger, db, exit, regions, sendSlackNotification }) => {
     } catch (stats) {
         sendSlackNotification({
             text: `[STAGIAIRE] Une erreur est survenue lors de l'import du fichier stagiaires ${file} : ` +
-                `${stats.imported} importés / ${stats.ignored} ignorés / ${stats.invalid} erreurs)`
+                `${stats.imported} importés / ${stats.updated} mis à jour / ${stats.ignored} ignorés / ${stats.invalid} erreurs)`
         });
         throw stats;
     }
diff --git a/backend/src/jobs/import/stagiaires/tasks/importStagiaires.js b/backend/src/jobs/import/stagiaires/tasks/importStagiaires.js
index b13bbb10b..f082cfde0 100644
--- a/backend/src/jobs/import/stagiaires/tasks/importStagiaires.js
+++ b/backend/src/jobs/import/stagiaires/tasks/importStagiaires.js
@@ -20,6 +20,7 @@ module.exports = async (db, logger, file, handler, filters = {}, options = {}) =
     let stats = {
         total: 0,
         imported: 0,
+        updated: 0,
         ignored: 0,
         invalid: 0,
     };
@@ -54,7 +55,7 @@ module.exports = async (db, logger, file, handler, filters = {}, options = {}) =
                             }
                         }
                     );
-                    stats.imported++;
+                    stats.updated++;
                     logger.debug('Organisme responsable updated');
                 } else if (shouldStagiaireBeImported && await individuAbsent(db, stagiaire)) {
                     await db.collection('stagiaires').updateOne(
@@ -65,7 +66,7 @@ module.exports = async (db, logger, file, handler, filters = {}, options = {}) =
                             }
                         }
                     );
-                    stats.imported++;
+                    stats.updated++;
                 } else {
                     stats.ignored++;
                     logger.debug('Stagiaire ignored', stagiaire, {});
diff --git a/backend/test/integration/jobs/import/stagiaires/importStagiaires-test.js b/backend/test/integration/jobs/import/stagiaires/importStagiaires-test.js
index ff1c60773..126c24949 100644
--- a/backend/test/integration/jobs/import/stagiaires/importStagiaires-test.js
+++ b/backend/test/integration/jobs/import/stagiaires/importStagiaires-test.js
@@ -16,10 +16,10 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
         let db = await getTestDatabase();
         let { regions } = await getComponents();
 
-        await importStagiaires(db, logger, getTestFile('stagiaires-pe.csv'), poleEmploiCSVHandler(db, regions));
+        const retourStats1 = await importStagiaires(db, logger, getTestFile('stagiaires-pe.csv'), poleEmploiCSVHandler(db, regions));
 
         await db.collection('stagiaires').updateOne({ 'individu.nom': 'MARTINADO' }, { $unset: { individu: 1 } });
-        await importStagiaires(db, logger, getTestFile('stagiaires-pe.csv'), poleEmploiCSVHandler(db, regions));
+        const retourStats2 = await importStagiaires(db, logger, getTestFile('stagiaires-pe.csv'), poleEmploiCSVHandler(db, regions));
 
         const filters = { all: true };
         await countStagiaires(db, logger, filters);
@@ -89,10 +89,24 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
             },
         });
 
-        let results_siret_0 = await db.collection('stagiaires').find({ 'individu.nom': 'MARTINADO' }).toArray();
-        assert.strictEqual("MARTINADO", results_siret_0[0].individu.nom);
-        assert.strictEqual("82436343601230", results_siret_0[0].formation.action.organisme_formateur.siret);
-        assert.strictEqual("ANOTEA 0", results_siret_0[0].formation.action.organisme_formateur.raison_sociale);
+        let resultsSiret0 = await db.collection('stagiaires').find({ 'individu.nom': 'MARTINADO' }).toArray()[0];
+        assert.strictEqual("MARTINADO", resultsSiret0.individu.nom);
+        assert.strictEqual("82436343601230", resultsSiret0.formation.action.organisme_formateur.siret);
+        assert.strictEqual("ANOTEA 0", resultsSiret0.formation.action.organisme_formateur.raison_sociale);
+        assert.deepStrictEqual({
+            total: 5,
+            imported: 5,
+            ignored: 0,
+            invalid: 0,
+            updated: 0,
+        }, retourStats1);
+        assert.deepStrictEqual({
+            total: 5,
+            imported: 0,
+            ignored: 4,
+            invalid: 0,
+            updated: 1,
+        }, retourStats2);
     });
 
     it('should fail to import stagiaire when codeRegion can not be found', async () => {
@@ -107,6 +121,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
             ignored: 0,
             imported: 0,
             total: 1,
+            updated: 0,
         });
     });
 
@@ -144,8 +159,9 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
         assert.deepStrictEqual(results, {
             invalid: 0,
             ignored: 0,
-            imported: 1,
+            imported: 0,
             total: 1,
+            updated: 1,
         });
 
         const resultsBis = await importStagiaires(db, logger, getTestFile('stagiaires-pe-doublons.csv'), handler);
@@ -158,6 +174,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
             ignored: 1,
             imported: 0,
             total: 1,
+            updated: 0,
         });
     });
 
@@ -173,6 +190,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
             ignored: 0,
             imported: 1,
             total: 1,
+            updated: 0,
         });
     });
 
@@ -202,6 +220,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
             ignored: 1,
             imported: 4,
             total: 5,
+            updated: 0,
         });
     });
 
@@ -301,6 +320,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
                 imported: 5,
                 invalid: 0,
                 total: 5,
+                updated: 0,
             }
         });
     });
@@ -328,6 +348,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
                 imported: 1,
                 invalid: 0,
                 total: 1,
+                updated: 0,
             }
         });
     });
@@ -345,6 +366,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
             ignored: 0,
             imported: 5,
             total: 5,
+            updated: 0,
         });
     });
 
@@ -379,6 +401,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
             ignored: 4,
             imported: 1,
             total: 5,
+            updated: 0,
         });
     });
 
@@ -406,6 +429,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
             ignored: 0,
             imported: 2,
             total: 2,
+            updated: 0,
         });
     });
 
@@ -434,6 +458,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
             ignored: 1,
             imported: 1,
             total: 2,
+            updated: 0,
         });
     });
 
@@ -461,6 +486,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
             ignored: 2,
             imported: 0,
             total: 2,
+            updated: 0,
         });
     });
 
@@ -490,6 +516,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
             ignored: 1,
             imported: 1,
             total: 2,
+            updated: 0,
         });
     });
 
@@ -513,6 +540,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
             ignored: 1,
             imported: 0,
             total: 1,
+            updated: 0,
         });
     });
 
@@ -530,6 +558,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
             ignored: 1,
             imported: 0,
             total: 1,
+            updated: 0,
         });
     });
 
@@ -562,6 +591,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
             ignored: 1,
             imported: 0,
             total: 1,
+            updated: 0,
         });
     });
 
@@ -581,6 +611,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
             ignored: 1,
             imported: 0,
             total: 1,
+            updated: 0,
         });
     });
 

From 928b910545b180dd2a8c10044488de4a38355af7 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Thu, 11 Jul 2024 18:29:10 +0200
Subject: [PATCH 123/128] =?UTF-8?q?test:=20limiter=20le=20nombre=20fausses?=
 =?UTF-8?q?=20donn=C3=A9es=20g=C3=A9n=C3=A9r=C3=A9es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/jobs/data/reset/tasks/resetEmails.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/backend/src/jobs/data/reset/tasks/resetEmails.js b/backend/src/jobs/data/reset/tasks/resetEmails.js
index 31e85d9b9..9e72a88d8 100644
--- a/backend/src/jobs/data/reset/tasks/resetEmails.js
+++ b/backend/src/jobs/data/reset/tasks/resetEmails.js
@@ -11,7 +11,10 @@ module.exports = async db => {
         let cursor = db.collection('stagiaires').find().project({ _id: 1 });
         await batchCursor(cursor, async next => {
             let doc = await next();
-            let res = await db.collection('stagiaires').updateOne({ _id: doc._id }, {
+            let res = await db.collection('stagiaires').updateOne({ 
+                _id: doc._id,
+                individu: { $exists: true },
+            }, {
                 $set: {
                     individu: {
                         nom: faker.name.lastName(),

From d3e163df198923148df9036fd0b33471a7cdf4bf Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Thu, 11 Jul 2024 18:31:16 +0200
Subject: [PATCH 124/128] =?UTF-8?q?feat:=20donn=C3=A9es=20non=20obligatoir?=
 =?UTF-8?q?es=20ignor=C3=A9es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jobs/import/stagiaires/tasks/utils/validateStagiaire.js   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/src/jobs/import/stagiaires/tasks/utils/validateStagiaire.js b/backend/src/jobs/import/stagiaires/tasks/utils/validateStagiaire.js
index 05e16d8d8..15df6f55f 100644
--- a/backend/src/jobs/import/stagiaires/tasks/utils/validateStagiaire.js
+++ b/backend/src/jobs/import/stagiaires/tasks/utils/validateStagiaire.js
@@ -21,8 +21,8 @@ module.exports = stagiaire => {
             email: Joi.string().email().required(),
             telephones: Joi.array().items(Joi.string().allow('')),
             emailValid: Joi.boolean().required(),
-            identifiant_pe: Joi.string().allow(null).required(),
-            identifiant_local: Joi.string().allow(null).required(),
+            identifiant_pe: Joi.string().allow(null),
+            identifiant_local: Joi.string().allow(null),
         },
         formation: {
             numero: Joi.string().allow(null).required(),

From f78ca0fc23ffda831bf556c19479dc9a78f42f6d Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Thu, 11 Jul 2024 18:43:18 +0200
Subject: [PATCH 125/128] =?UTF-8?q?feat:=20donn=C3=A9es=20non=20obligatoir?=
 =?UTF-8?q?es=20ignor=C3=A9es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../integration/jobs/import/stagiaires/importStagiaires-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/test/integration/jobs/import/stagiaires/importStagiaires-test.js b/backend/test/integration/jobs/import/stagiaires/importStagiaires-test.js
index 126c24949..56313cc21 100644
--- a/backend/test/integration/jobs/import/stagiaires/importStagiaires-test.js
+++ b/backend/test/integration/jobs/import/stagiaires/importStagiaires-test.js
@@ -89,7 +89,7 @@ describe(__filename, withMongoDB(({ getTestDatabase, getComponents, getTestFile,
             },
         });
 
-        let resultsSiret0 = await db.collection('stagiaires').find({ 'individu.nom': 'MARTINADO' }).toArray()[0];
+        let resultsSiret0 = (await db.collection('stagiaires').find({ 'individu.nom': 'MARTINADO' }).toArray())[0];
         assert.strictEqual("MARTINADO", resultsSiret0.individu.nom);
         assert.strictEqual("82436343601230", resultsSiret0.formation.action.organisme_formateur.siret);
         assert.strictEqual("ANOTEA 0", resultsSiret0.formation.action.organisme_formateur.raison_sociale);

From afb3b415b8718751e72ec1940eb1e025e1927f36 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Fri, 12 Jul 2024 14:23:09 +0200
Subject: [PATCH 126/128] =?UTF-8?q?feat:=20donn=C3=A9es=20non=20obligatoir?=
 =?UTF-8?q?es=20ignor=C3=A9es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jobs/import/stagiaires/tasks/utils/validateStagiaire.js   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/src/jobs/import/stagiaires/tasks/utils/validateStagiaire.js b/backend/src/jobs/import/stagiaires/tasks/utils/validateStagiaire.js
index 15df6f55f..36bf34dde 100644
--- a/backend/src/jobs/import/stagiaires/tasks/utils/validateStagiaire.js
+++ b/backend/src/jobs/import/stagiaires/tasks/utils/validateStagiaire.js
@@ -21,8 +21,8 @@ module.exports = stagiaire => {
             email: Joi.string().email().required(),
             telephones: Joi.array().items(Joi.string().allow('')),
             emailValid: Joi.boolean().required(),
-            identifiant_pe: Joi.string().allow(null),
-            identifiant_local: Joi.string().allow(null),
+            identifiant_pe: Joi.string().allow(null).allow(''),
+            identifiant_local: Joi.string().allow(null).allow(''),
         },
         formation: {
             numero: Joi.string().allow(null).required(),

From 98ec4ebc3c03fc49d9de36e94624f37d28725ba1 Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Mon, 15 Jul 2024 15:00:02 +0200
Subject: [PATCH 127/128] fix: gestion nb page widget si 0 page

---
 ui/src/widget/ListeWidget.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/src/widget/ListeWidget.jsx b/ui/src/widget/ListeWidget.jsx
index cac39aac7..006e734ec 100644
--- a/ui/src/widget/ListeWidget.jsx
+++ b/ui/src/widget/ListeWidget.jsx
@@ -140,10 +140,12 @@ export default class ListeWidget extends Component {
                                 </Button>
                                 }
 
+                                {pagination.total_pages > 0 &&
                                 <div className="summary">
                                     <span className="d-none d-sm-block">Page</span>
                                     {pagination.page + 1}/{pagination.total_pages}
                                 </div>
+                                }
 
                                 {pagination.total_items > 1 &&
                                 <Button

From c1835a3eadd69cb919b8c42dbc48a3ec6840440e Mon Sep 17 00:00:00 2001
From: Julien Perrin <julien.perrin01@pole-emploi.fr>
Date: Mon, 15 Jul 2024 15:32:04 +0200
Subject: [PATCH 128/128] fix: minify option is deprecated

---
 backend/src/core/components/emails/mailer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/core/components/emails/mailer.js b/backend/src/core/components/emails/mailer.js
index 3cfb76b83..b003d0aa9 100644
--- a/backend/src/core/components/emails/mailer.js
+++ b/backend/src/core/components/emails/mailer.js
@@ -53,7 +53,7 @@ module.exports = (configuration, regions) => {
                 templateName,
                 utils: { moment, ...utils },
             });
-            return mjml(mjmlTemplate, { minify: true }).html;
+            return mjml(mjmlTemplate).html;
         },
         createRegionalMailer: region => {
             return {