From c35a607e79d6466060e2114246689098813882d6 Mon Sep 17 00:00:00 2001
From: Corinne Durrmeyer <corinne@inseo.fr>
Date: Tue, 17 Dec 2024 11:09:18 +0100
Subject: [PATCH 1/5] fix(combobox button): Modify value of aria-haspopup and
 aria-labelledby attributes

---
 app/javascript/components/ComboBox.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/javascript/components/ComboBox.tsx b/app/javascript/components/ComboBox.tsx
index d43843255..a84ad6794 100644
--- a/app/javascript/components/ComboBox.tsx
+++ b/app/javascript/components/ComboBox.tsx
@@ -59,6 +59,8 @@ export function ComboBox({
       <div className="fr-ds-combobox__input" style={{ position: 'relative' }}>
         <Input className="fr-select fr-autocomplete" ref={inputRef} />
         <Button
+          aria-haspopup="false"
+          aria-label=""
           style={{
             width: '40px',
             height: '100%',

From e362c15b1324026f349e8091a371a46b1f080cc3 Mon Sep 17 00:00:00 2001
From: Corinne Durrmeyer <corinne@inseo.fr>
Date: Tue, 17 Dec 2024 11:37:26 +0100
Subject: [PATCH 2/5] refactor(autosave): Remove useless styles

---
 app/assets/stylesheets/autosave.scss | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/app/assets/stylesheets/autosave.scss b/app/assets/stylesheets/autosave.scss
index 11529620a..e8ad5bc7f 100644
--- a/app/assets/stylesheets/autosave.scss
+++ b/app/assets/stylesheets/autosave.scss
@@ -91,17 +91,6 @@ $autosave-status-fade-out-duration: 0.7s;
     transition-property: opacity;
     transition-duration: $autosave-status-fade-in-duration;
   }
-
-  // Make the icon pulse (if any)
-  .autosave-icon {
-    opacity: 1;
-    // Make the icon pulse after being made visible
-    animation-name: pulse;
-    animation-duration: 0.25s;
-    animation-delay: 0.15s;
-    animation-timing-function: linear;
-    animation-fill-mode: backwards;
-  }
 }
 
 // Show only the relevant status message (succeeded of failed)

From 7e38983759dfe2a45a7b9908b00b24235e8f422f Mon Sep 17 00:00:00 2001
From: Corinne Durrmeyer <corinne@inseo.fr>
Date: Tue, 17 Dec 2024 15:10:01 +0100
Subject: [PATCH 3/5] fix(autosave): Apply DSFR colors & icons

---
 app/assets/stylesheets/autosave.scss                  | 11 ++++-------
 .../autosave_footer_component.html.haml               |  4 ++--
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/autosave.scss b/app/assets/stylesheets/autosave.scss
index e8ad5bc7f..39f993bc5 100644
--- a/app/assets/stylesheets/autosave.scss
+++ b/app/assets/stylesheets/autosave.scss
@@ -1,6 +1,3 @@
-@import 'colors';
-@import 'constants';
-
 .autosave {
   position: relative;
   font-size: 0.9em;
@@ -20,12 +17,12 @@
   position: absolute;
   top: 0;
 
-  &.succeeded .autosave-label {
-    color: $green;
+  &.succeeded {
+    color: var(--success-425-625);
   }
 
-  &.failed .autosave-label {
-    color: $orange;
+  &.failed {
+    color: var(--warning-425-625);
   }
 }
 
diff --git a/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml b/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml
index 7cf693d86..237874484 100644
--- a/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml
+++ b/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml
@@ -13,7 +13,7 @@
       = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm', **external_link_attributes
 
   %p.autosave-status.succeeded.fr-mb-0
-    = dsfr_icon('fr-icon-checkbox-circle-fill fr-text-default--success autosave-icon')
+    %span.fr-icon-success-fill.autosave-icon{ 'aria-hidden': 'true' }
     %span.autosave-label
       - if annotation?
         = t('.annotations.confirmation')
@@ -25,7 +25,7 @@
       = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm', **external_link_attributes
 
   %p.autosave-status.failed.fr-mb-0
-    %span.autosave-icon ⚠️
+    %span.fr-icon-warning-fill.autosave-icon{ 'aria-hidden': 'true' }
     %span.autosave-label
       - if annotation?
         = t('.annotations.error')

From c40277c0c65f5cc119b107122b784b14ed443002 Mon Sep 17 00:00:00 2001
From: Corinne Durrmeyer <corinne@inseo.fr>
Date: Tue, 17 Dec 2024 15:35:19 +0100
Subject: [PATCH 4/5] fix(autosave): Add alternative text to icons

---
 .../autosave_footer_component.en.yml          | 12 ++++-----
 .../autosave_footer_component.fr.yml          | 12 ++++-----
 .../autosave_footer_component.html.haml       | 25 +++++++++----------
 spec/system/users/brouillon_spec.rb           |  3 +--
 4 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/app/components/dossiers/autosave_footer_component/autosave_footer_component.en.yml b/app/components/dossiers/autosave_footer_component/autosave_footer_component.en.yml
index d03a8dd98..f176a6295 100644
--- a/app/components/dossiers/autosave_footer_component/autosave_footer_component.en.yml
+++ b/app/components/dossiers/autosave_footer_component/autosave_footer_component.en.yml
@@ -2,15 +2,15 @@
 en:
   brouillon:
     explanation: Your draft is automatically saved.
-    confirmation: Draft saved
-    error: Impossible to save the draft
+    confirmation_html: Draft successfully saved.
+    error_html: '<span class="sr-only">Warning:</span> Impossible to save the draft.'
   en_construction:
     explanation: Your modifications are automatically saved.
     submit_them: Submit them when you’re done.
-    confirmation: Modifications saved
-    error: Impossible to save the modifications.
+    confirmation_html: Modifications successfully saved.
+    error_html: '<span class="sr-only">Warning:</span> Impossible to save the modifications.'
   annotations:
     explanation: Your annotations are automatically saved.
-    confirmation: Annotations saved
-    error: Impossible to save the annotations
+    confirmation_html: Annotations successfully saved.
+    error_html: '<span class="sr-only">Warning:</span> Impossible to save the annotations.'
   more_information: More informations
diff --git a/app/components/dossiers/autosave_footer_component/autosave_footer_component.fr.yml b/app/components/dossiers/autosave_footer_component/autosave_footer_component.fr.yml
index 6d962ca27..6dd6b9df4 100644
--- a/app/components/dossiers/autosave_footer_component/autosave_footer_component.fr.yml
+++ b/app/components/dossiers/autosave_footer_component/autosave_footer_component.fr.yml
@@ -2,15 +2,15 @@
 fr:
   brouillon:
     explanation: Votre brouillon est automatiquement enregistré.
-    confirmation: Brouillon enregistré
-    error: Impossible d’enregistrer le brouillon
+    confirmation_html: 'Brouillon enregistré <span class="sr-only">avec succès</span>'
+    error_html: '<span class="sr-only">Attention :</span> Impossible d’enregistrer le brouillon.'
   en_construction:
     explanation: Vos modifications sont automatiquement enregistrées.
     submit_them: Déposez-les quand vous aurez terminé.
-    confirmation: Modifications enregistrées.
-    error: Impossible d’enregistrer les modifications
+    confirmation_html: 'Modifications enregistrées <span class="sr-only">avec succès</span>'
+    error_html: '<span class="sr-only">Attention :</span> Impossible d’enregistrer les modifications.'
   annotations:
     explanation: Vos annotations sont automatiquement enregistrées.
-    confirmation: Annotations enregistrées
-    error: Impossible d’enregistrer les annotations
+    confirmation_html: 'Annotations enregistrées <span class="sr-only">avec succès</span>'
+    error_html: '<span class="sr-only">Attention :</span> Impossible d’enregistrer les annotations.'
   more_information: En savoir plus
diff --git a/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml b/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml
index 237874484..c1befc5f8 100644
--- a/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml
+++ b/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml
@@ -16,23 +16,22 @@
     %span.fr-icon-success-fill.autosave-icon{ 'aria-hidden': 'true' }
     %span.autosave-label
       - if annotation?
-        = t('.annotations.confirmation')
+        = t('.annotations.confirmation_html')
       - elsif dossier.editing_fork?
-        = t('.en_construction.confirmation')
+        = t('.en_construction.confirmation_html')
       - else
-        = t('.brouillon.confirmation')
+        = t('.brouillon.confirmation_html')
     - if !annotation?
       = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm', **external_link_attributes
 
-  %p.autosave-status.failed.fr-mb-0
-    %span.fr-icon-warning-fill.autosave-icon{ 'aria-hidden': 'true' }
-    %span.autosave-label
-      - if annotation?
-        = t('.annotations.error')
-      - elsif dossier.editing_fork?
-        = t('.en_construction.error')
-      - else
-        = t('.brouillon.error')
-    %button.fr-btn.fr-btn--tertiary.fr-btn--sm.autosave-retry{ type: :button, data: { action: 'autosave-status#onClickRetryButton', autosave_status_target: 'retryButton' } }
+  %p.autosave-status.failed.fr-text--sm.fr-mb-0
+    %span.fr-icon-warning-fill.fr-mr-1v{ 'aria-hidden': 'true' }
+    - if annotation?
+      = t('.annotations.error_html')
+    - elsif dossier.editing_fork?
+      = t('.en_construction.error_html')
+    - else
+      = t('.brouillon.error_html')
+    %button.fr-btn.fr-btn--tertiary.fr-btn--sm.fr-ml-1w.fr-mt-n1v.autosave-retry{ type: :button, data: { action: 'autosave-status#onClickRetryButton', autosave_status_target: 'retryButton' } }
       %span.autosave-retry-label Réessayer
       %span.autosave-retrying-label Enregistrement en cours…
diff --git a/spec/system/users/brouillon_spec.rb b/spec/system/users/brouillon_spec.rb
index 5199d74be..7e23153ef 100644
--- a/spec/system/users/brouillon_spec.rb
+++ b/spec/system/users/brouillon_spec.rb
@@ -614,8 +614,7 @@ describe 'The user', js: true do
       allow_any_instance_of(Users::DossiersController).to receive(:update).and_raise("Server is busy")
       fill_in('texte obligatoire', with: 'a valid user input')
       blur
-      expect(page).to have_css('span', text: 'Impossible d’enregistrer le brouillon', visible: true)
-
+      expect(page).to have_text('Attention : Impossible d’enregistrer le brouillon.')
       # Test that retrying after a failure works
       allow_any_instance_of(Users::DossiersController).to receive(:update).and_call_original
       click_on 'Réessayer'

From e6ab02045073c42d6d7e6b66206d149f2ea37b27 Mon Sep 17 00:00:00 2001
From: Corinne Durrmeyer <corinne@inseo.fr>
Date: Tue, 17 Dec 2024 17:01:38 +0100
Subject: [PATCH 5/5] refactor(autosave): Replace custom styles with DSFR
 classes

---
 app/assets/stylesheets/autosave.scss          | 16 -------------
 .../autosave_footer_component.html.haml       | 23 +++++++++----------
 2 files changed, 11 insertions(+), 28 deletions(-)

diff --git a/app/assets/stylesheets/autosave.scss b/app/assets/stylesheets/autosave.scss
index 39f993bc5..1d975b9a9 100644
--- a/app/assets/stylesheets/autosave.scss
+++ b/app/assets/stylesheets/autosave.scss
@@ -1,15 +1,5 @@
 .autosave {
   position: relative;
-  font-size: 0.9em;
-}
-
-.autosave-explanation {
-  margin-left: 4px;
-}
-
-.autosave-explanation-text,
-.autosave-label {
-  margin-right: 6px;
 }
 
 .autosave-status {
@@ -26,12 +16,6 @@
   }
 }
 
-.autosave-icon {
-  display: inline-block;
-  vertical-align: -1px;
-  margin-right: 4px;
-}
-
 .autosave-retry {
   &:disabled {
     .autosave-retry-label {
diff --git a/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml b/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml
index c1befc5f8..4002cba52 100644
--- a/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml
+++ b/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml
@@ -1,4 +1,4 @@
-.autosave.autosave-state-idle{ data: { controller: 'autosave-status' } }
+.autosave.autosave-state-failed{ data: { controller: 'autosave-status' } }
   %p.autosave-explanation.fr-text--sm.fr-mb-0
     %span.autosave-explanation-text
       - if annotation?
@@ -10,19 +10,18 @@
       - else
         = t('.brouillon.explanation')
     - if !annotation?
-      = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm', **external_link_attributes
+      = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm fr-ml-1w', **external_link_attributes
 
-  %p.autosave-status.succeeded.fr-mb-0
-    %span.fr-icon-success-fill.autosave-icon{ 'aria-hidden': 'true' }
-    %span.autosave-label
-      - if annotation?
-        = t('.annotations.confirmation_html')
-      - elsif dossier.editing_fork?
-        = t('.en_construction.confirmation_html')
-      - else
-        = t('.brouillon.confirmation_html')
+  %p.autosave-status.succeeded.fr-text--sm.fr-mb-0
+    %span.fr-icon-success-fill.fr-mr-1v{ 'aria-hidden': 'true' }
+    - if annotation?
+      = t('.annotations.confirmation_html')
+    - elsif dossier.editing_fork?
+      = t('.en_construction.confirmation_html')
+    - else
+      = t('.brouillon.confirmation_html')
     - if !annotation?
-      = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm', **external_link_attributes
+      = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm fr-ml-1w', **external_link_attributes
 
   %p.autosave-status.failed.fr-text--sm.fr-mb-0
     %span.fr-icon-warning-fill.fr-mr-1v{ 'aria-hidden': 'true' }