From 6f1b41b1a7d3fb801dede0f28e730533f6832fb0 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Fri, 3 May 2024 14:54:46 +0200 Subject: [PATCH] Remove .fr-search-bar .fr-label styles. And unse .sr-only instead --- app/assets/stylesheets/dsfr.scss | 15 +++++++++++++++ .../groupes_search_component.html.haml | 2 +- app/views/layouts/_search_dossiers_form.html.haml | 2 +- 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/dsfr.scss b/app/assets/stylesheets/dsfr.scss index f1e0344d4..89e2e966b 100644 --- a/app/assets/stylesheets/dsfr.scss +++ b/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 +} diff --git a/app/components/procedure/groupes_search_component/groupes_search_component.html.haml b/app/components/procedure/groupes_search_component/groupes_search_component.html.haml index 7b5308e51..569e3f247 100644 --- a/app/components/procedure/groupes_search_component/groupes_search_component.html.haml +++ b/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? diff --git a/app/views/layouts/_search_dossiers_form.html.haml b/app/views/layouts/_search_dossiers_form.html.haml index f0aab616e..959616163 100644 --- a/app/views/layouts/_search_dossiers_form.html.haml +++ b/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')