Merge pull request #11148 from demarches-simplifiees/a11y-combobox-autosave

ETQ usager, je veux que le message d'échec de l'enregistrement soit suffisamment visible

app/assets/stylesheets/autosave.scss

@@ -1,18 +1,5 @@
-@import 'colors';
-@import 'constants';
-
 .autosave {
   position: relative;
-  font-size: 0.9em;
-}
-
-.autosave-explanation {
-  margin-left: 4px;
-}
-
-.autosave-explanation-text,
-.autosave-label {
-  margin-right: 6px;
 }
 
 .autosave-status {
@@ -20,21 +7,15 @@
   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);
   }
 }
 
-.autosave-icon {
-  display: inline-block;
-  vertical-align: -1px;
-  margin-right: 4px;
-}
-
 .autosave-retry {
   &:disabled {
     .autosave-retry-label {
@@ -91,17 +72,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)

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

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

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,29 +10,27 @@
       - 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
-    = dsfr_icon('fr-icon-checkbox-circle-fill fr-text-default--success autosave-icon')
-    %span.autosave-label
+  %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')
+      = 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
+      = 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-mb-0
-    %span.autosave-icon ⚠️
-    %span.autosave-label
+  %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')
+      = t('.annotations.error_html')
     - elsif dossier.editing_fork?
-        = t('.en_construction.error')
+      = t('.en_construction.error_html')
     - 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' } }
+      = 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…

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%',

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'