Remove .fr-search-bar .fr-label styles. And unse .sr-only instead

This commit is contained in:
Corinne Durrmeyer 2024-05-03 14:54:46 +02:00
parent 03409a798f
commit 6f1b41b1a7
No known key found for this signature in database
GPG key ID: DDC049DDA35585B6
3 changed files with 17 additions and 2 deletions

View file

@ -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
}

View file

@ -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?

View file

@ -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')