Merge pull request #10396 from demarches-simplifiees/fix-missing-label

Restaurer l'affichage du label "Filtrer par démarche" sur les pages Usager

app/assets/stylesheets/dsfr.scss

@@ -164,3 +164,18 @@ button.fr-tag-bug {
     border: 2px solid var(--border-action-high-grey);
   }
 }
+
+// On restaure la visibilité des éléments .fr-search-bar .fr-label (en appliquant les valeurs par défaut des différentes propriétés)
+// Et on utilise la classe .sr-only pour masquer les éléments souhaités au cas par cas
+.fr-search-bar .fr-label {
+  position: initial;
+  width: initial;
+  height: initial;
+  padding: initial;
+  margin: initial;
+  overflow: initial;
+  clip: initial;
+  white-space: initial;
+  border: initial;
+  display: block; // Pour cette valeur spécifique, on récupère celle de .fr-label
+}

app/components/dossiers/user_procedure_filter_component/user_procedure_filter_component.en.yml

@@ -1,4 +1,5 @@
-fr:
+en:
   procedures:
-    label: Filter by procedure
-    prompt: All procedures
+    label: Show files by procedure
+    prompt: Select a procedure
+    button: Show

app/components/dossiers/user_procedure_filter_component/user_procedure_filter_component.fr.yml

@@ -1,4 +1,5 @@
 fr:
   procedures:
-    label: Filtrer par démarche
-    prompt: Toutes les démarches
+    label: Afficher les dossiers par démarche
+    prompt: Sélectionner une démarche
+    button: Afficher

app/components/dossiers/user_procedure_filter_component/user_procedure_filter_component.html.haml

@@ -1,5 +1,7 @@
-= form_with(url: dossiers_path, method: :get, data: { controller: 'autosubmit' } ) do |f|
+= form_with(url: dossiers_path, method: :get ) do |f|
   = f.hidden_field :q, value: params[:q], id: nil
-  = f.label :procedure_id, t('.procedure.label'), class: 'sr-only'
-  .fr-input-group
-    = f.select :procedure_id, options_for_select(@procedures_for_select, params[:procedure_id]), { prompt: t('.procedures.prompt') }, class: 'fr-select'
+  = f.label :procedure_id, t('.procedures.label'), class: 'fr-label fr-mb-1w', for: 'procedure_select'
+  .flex
+    = f.select :procedure_id, options_for_select(@procedures_for_select, params[:procedure_id]), { prompt: t('.procedures.prompt') }, class: 'fr-select fr-mr-1w', id: 'procedure_select'
+    %button.fr-btn.fr-btn--sm{ 'aria-label': t('.procedures.label') }
+      = t('.procedures.button')

app/components/procedure/groupes_search_component/groupes_search_component.html.haml

@@ -1,7 +1,7 @@
 = form_with(url: admin_procedure_groupe_instructeurs_path(@procedure),
   method: :get) do
   #header-search.fr-search-bar.fr-mb-2w{ role: "search" }
-    = label_tag :q, 'Rechercher par nom', class: 'fr-label'
+    = label_tag :q, 'Rechercher par nom', class: 'sr-only'
     = text_field_tag :q, @query, class: 'fr-input', type: 'search', autocomplete: 'off', placeholder: 'Rechercher par nom'
     %button.fr-btn{ title: "Rechercher" } Rechercher
   - if @query.present?

app/views/layouts/_search_dossiers_form.html.haml

@@ -3,7 +3,7 @@
     %button.fr-btn--close.fr-btn{ "aria-controls" => "search-modal", :title => t('close_modal', scope: [:layouts, :header]) }= t('close_modal', scope: [:layouts, :header])
     #search-473.fr-search-bar.fr-search-bar--lg
       = form_tag recherche_index_path, method: :get, :role => "search", class: "flex width-100" do
-        = label_tag "q", t('views.users.dossiers.search.search_file'), class: 'fr-label'
+        = label_tag "q", t('views.users.dossiers.search.search_file'), class: 'sr-only'
         = text_field_tag "q", "#{@search_terms if @search_terms.present?}", placeholder: t('views.users.dossiers.search.search_file'), class: "fr-input"
         %button.fr-btn
           = t('views.users.dossiers.search.simple')

app/views/users/dossiers/index.html.haml

@@ -11,12 +11,13 @@
       - if current_user.dossiers.count > 2 || current_user.dossiers_invites.count > 2
         .fr-col
           #search-2.fr-search-bar
-            = form_tag dossiers_path, method: :get, :role => "search", class: "flex width-100 fr-mb-5w" do
+            = form_tag dossiers_path, method: :get, :role => "search", class: "width-100 fr-mb-5w" do
               = hidden_field_tag :procedure_id, params[:procedure_id]
-              = label_tag "q", t('views.users.dossiers.search.search_file'), class: 'fr-label'
-              = text_field_tag "q", "#{@search_terms if @search_terms.present?}", placeholder: t('views.users.dossiers.search.search_file'), class: "fr-input"
+              = label_tag "q", t('views.users.dossiers.search.label'), class: 'fr-label fr-mb-1w'
+              .flex
+                = text_field_tag "q", "#{@search_terms if @search_terms.present?}", placeholder: t('views.users.dossiers.search.prompt'), class: "fr-input"
                 %button.fr-btn.fr-btn--sm
-                = t('views.users.dossiers.search.simple')
+                  = t('views.users.dossiers.search.label')
       - if @procedures_for_select.size > 1
         .fr-col
           = render Dossiers::UserProcedureFilterComponent.new(procedures_for_select: @procedures_for_select)

config/locales/en.yml

@@ -485,6 +485,8 @@ en:
           edit_dossier_title: "Edit my file - You can modify your file as long as it has not been sent for processing"
         search:
           search_file: Search a file (File number, keywords)
+          prompt: (File number, last name / first name, keywords)
+          label: Search a file
           simple: Search
           result_term_title: Search result for « %{search_terms} »
           result_procedure_title: and procedure « %{procedure_libelle} »

config/locales/fr.yml

@@ -488,6 +488,8 @@ fr:
           edit_dossier_title: "Modifier mon dossier - Vous pouvez modifier votre dossier tant qu’il n’est pas passé en instruction"
         search:
           search_file: Rechercher un dossier (N° de dossier, mots-clés)
+          prompt: (N° de dossier, nom / prénom, mots-clés)
+          label: Rechercher un dossier
           simple: Rechercher
           result_term_title: Résultat de la recherche pour « %{search_terms} »
           result_procedure_title: et pour la procédure « %{procedure_libelle} »

spec/system/users/list_dossiers_spec.rb

@@ -280,6 +280,7 @@ describe 'user access to the list of their dossiers', js: true do
 
         it "can be filtered by procedure and display the result - one item" do
           select dossier_en_construction.procedure.libelle, from: 'procedure_id'
+          click_on 'Afficher'
           expect(page).to have_link(dossier_en_construction.procedure.libelle)
           expect(page).not_to have_link(dossier_with_champs.procedure.libelle)
           expect(page).to have_text("1 dossier")
@@ -287,6 +288,7 @@ describe 'user access to the list of their dossiers', js: true do
 
         it "can be filtered by procedure and display the result - no item" do
           select dossier_brouillon.procedure.libelle, from: 'procedure_id'
+          click_on 'Afficher'
           expect(page).not_to have_link(String(dossier_en_construction.id))
           expect(page).not_to have_link(String(dossier_with_champs.id))
           expect(page).to have_content("Résultat de la recherche pour « #{dossier_en_construction.champs_public.first.value} » et pour la procédure « #{dossier_brouillon.procedure.libelle} » ")
@@ -301,8 +303,9 @@ describe 'user access to the list of their dossiers', js: true do
       it "can filter by procedure" do
         expect(page).to have_text('7 en cours')
         expect(page).to have_text('3 traités')
-        expect(page).to have_select('procedure_id', selected: 'Toutes les démarches')
+        expect(page).to have_select('procedure_id', selected: 'Sélectionner une démarche')
         select dossier_brouillon.procedure.libelle, from: 'procedure_id'
+        click_on 'Afficher'
         expect(page).to have_text('1 en cours')
       end
     end