From 1989c3e75b08945e3d6062f76ccc06594afb5b71 Mon Sep 17 00:00:00 2001
From: mfo <mfo@users.noreply.github.com>
Date: Thu, 11 Apr 2024 11:34:06 +0200
Subject: [PATCH] fix(Champ.carte): add missing label to search input instead
 of placeholder

Co-authored-by: Corinne Durrmeyer <corinne@inseo.fr>
---
 app/assets/stylesheets/forms.scss             |  5 -----
 app/components/dsfr/input_errorable.rb        | 11 +++++++++--
 .../carte_component/carte_component.html.haml |  1 +
 .../MapEditor/components/AddressInput.tsx     |  6 +++---
 app/javascript/components/MapEditor/index.tsx | 19 ++++++++-----------
 .../locales/models/champs/carte_champ/en.yml  |  7 +++++++
 .../locales/models/champs/carte_champ/fr.yml  |  7 +++++++
 7 files changed, 35 insertions(+), 21 deletions(-)
 create mode 100644 config/locales/models/champs/carte_champ/en.yml
 create mode 100644 config/locales/models/champs/carte_champ/fr.yml

diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss
index 5277606ff..7316d839d 100644
--- a/app/assets/stylesheets/forms.scss
+++ b/app/assets/stylesheets/forms.scss
@@ -357,11 +357,6 @@
   }
 
   [data-reach-combobox-input] {
-    min-height: 62px;
-    border-radius: 4px;
-    border: solid 1px $border-grey;
-    padding: $default-padding;
-
     &:not([class^='width-']) {
       width: 100%;
       min-width: 50%;
diff --git a/app/components/dsfr/input_errorable.rb b/app/components/dsfr/input_errorable.rb
index dc87561f3..9544e17e4 100644
--- a/app/components/dsfr/input_errorable.rb
+++ b/app/components/dsfr/input_errorable.rb
@@ -113,7 +113,11 @@ module Dsfr
       end
 
       def default_hint
-        I18n.t("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}")
+        if I18n.exists?("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}")
+          I18n.t("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}")
+        elsif I18n.exists?("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}_html")
+          I18n.t("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}_html").html_safe
+        end
       end
 
       def password?
@@ -131,7 +135,10 @@ module Dsfr
       def hint?
         return true if get_slot(:hint).present?
 
-        I18n.exists?("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}")
+        maybe_hint = I18n.exists?("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}")
+        maybe_hint_html = I18n.exists?("activerecord.attributes.#{object.class.name.underscore}.hints.#{@attribute}_html")
+
+        maybe_hint || maybe_hint_html
       end
     end
   end
diff --git a/app/components/editable_champ/carte_component/carte_component.html.haml b/app/components/editable_champ/carte_component/carte_component.html.haml
index 08a333e38..ad054669d 100644
--- a/app/components/editable_champ/carte_component/carte_component.html.haml
+++ b/app/components/editable_champ/carte_component/carte_component.html.haml
@@ -3,6 +3,7 @@
 
   = react_component("MapEditor",
     { featureCollection: @champ.to_feature_collection,
+    champId: @champ.input_id,
     url: champs_carte_features_path(@champ),
     options: @champ.render_options,
     autocompleteAnnounceTemplateId: @autocomplete_component.announce_template_id,
diff --git a/app/javascript/components/MapEditor/components/AddressInput.tsx b/app/javascript/components/MapEditor/components/AddressInput.tsx
index 85315e10c..0e2d2d2a5 100644
--- a/app/javascript/components/MapEditor/components/AddressInput.tsx
+++ b/app/javascript/components/MapEditor/components/AddressInput.tsx
@@ -9,7 +9,7 @@ export function AddressInput(
   comboProps: Pick<
     ComboSearchProps,
     'screenReaderInstructions' | 'announceTemplateId'
-  > & { featureCollection: FeatureCollection }
+  > & { featureCollection: FeatureCollection; champId: string }
 ) {
   return (
     <div
@@ -18,9 +18,9 @@ export function AddressInput(
       }}
     >
       <ComboAdresseSearch
-        className="no-margin"
-        placeholder="Rechercher une adresse : saisissez au moins 2 caractères"
+        className="fr-input fr-mt-1w"
         allowInputValues={false}
+        id={comboProps.champId}
         onChange={(_, feature) => {
           fire(document, 'map:zoom', {
             featureCollection: comboProps.featureCollection,
diff --git a/app/javascript/components/MapEditor/index.tsx b/app/javascript/components/MapEditor/index.tsx
index 70cbbd764..0a918c981 100644
--- a/app/javascript/components/MapEditor/index.tsx
+++ b/app/javascript/components/MapEditor/index.tsx
@@ -19,13 +19,15 @@ export default function MapEditor({
   url,
   options,
   autocompleteAnnounceTemplateId,
-  autocompleteScreenReaderInstructions
+  autocompleteScreenReaderInstructions,
+  champId
 }: {
   featureCollection: FeatureCollection;
   url: string;
   options: { layers: string[] };
   autocompleteAnnounceTemplateId: ComboSearchProps['announceTemplateId'];
   autocompleteScreenReaderInstructions: ComboSearchProps['screenReaderInstructions'];
+  champId: string;
 }) {
   const [cadastreEnabled, setCadastreEnabled] = useState(false);
 
@@ -36,20 +38,15 @@ export default function MapEditor({
 
   return (
     <>
-      <p className="fr-hint-text fr-mb-2w">
-        Besoin d&apos;aide ?&nbsp;
-        <a
-          href="https://doc.demarches-simplifiees.fr/pour-aller-plus-loin/cartographie"
-          target="_blank"
-          rel="noreferrer"
-        >
-          consulter les tutoriels video
-        </a>
-      </p>
       {error && <FlashMessage message={error} level="alert" fixed={true} />}
 
       <ImportFileInput featureCollection={featureCollection} {...actions} />
+      <label className="fr-label" htmlFor={champId}>
+        Rechercher une Adresse
+        <span className="fr-hint-text">Saisissez au moins 2 caractères</span>
+      </label>
       <AddressInput
+        champId={champId}
         featureCollection={featureCollection}
         screenReaderInstructions={autocompleteScreenReaderInstructions}
         announceTemplateId={autocompleteAnnounceTemplateId}
diff --git a/config/locales/models/champs/carte_champ/en.yml b/config/locales/models/champs/carte_champ/en.yml
new file mode 100644
index 000000000..332657310
--- /dev/null
+++ b/config/locales/models/champs/carte_champ/en.yml
@@ -0,0 +1,7 @@
+en:
+  activerecord:
+    attributes:
+      champs/carte_champ:
+        hints:
+          value_html: |
+            Need help ? <a href="https://doc.demarches-simplifiees.fr/pour-aller-plus-loin/cartographie" target="_blank" rel="noreferrer">Check our video tutorial</a>"
diff --git a/config/locales/models/champs/carte_champ/fr.yml b/config/locales/models/champs/carte_champ/fr.yml
new file mode 100644
index 000000000..14855754b
--- /dev/null
+++ b/config/locales/models/champs/carte_champ/fr.yml
@@ -0,0 +1,7 @@
+fr:
+  activerecord:
+    attributes:
+      champs/carte_champ:
+        hints:
+          value_html: |
+            Besoin d’aide ? <a href="https://doc.demarches-simplifiees.fr/pour-aller-plus-loin/cartographie" target="_blank" rel="noreferrer">consulter les tutoriels video</a>