Merge pull request #10314 from mfo/US/enhance-a11y-on-carte-champs

ETQ Usager je souhaite que le champ carte soit plus accessible

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%;

app/components/dsfr/input_errorable.rb

@@ -111,7 +111,11 @@ module Dsfr
       end
 
       def default_hint
+        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?
@@ -129,7 +133,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

app/components/editable_champ/carte_component.rb

@@ -1,5 +1,8 @@
 class EditableChamp::CarteComponent < EditableChamp::EditableChampBaseComponent
   include ApplicationHelper
+  def dsfr_champ_container
+    :fieldset
+  end
 
   def initialize(**args)
     super(**args)

app/components/editable_champ/carte_component/carte_component.html.haml

@@ -1,11 +1,14 @@
-= render @autocomplete_component
+.fr-fieldset__element
+  = render @autocomplete_component
 
-= react_component("MapEditor",
-  featureCollection: @champ.to_feature_collection,
+  = 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,
-  autocompleteScreenReaderInstructions: t("combo_search_component.screen_reader_instructions"))
+    autocompleteScreenReaderInstructions: t("combo_search_component.screen_reader_instructions") },
+    {class: 'width-100'})
 
-.geo-areas{ id: dom_id(@champ, :geo_areas) }
+  .geo-areas{ id: dom_id(@champ, :geo_areas) }
     = render Dossiers::GeoAreasComponent.new(champ: @champ, editing: true)

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,

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}

app/models/champs/carte_champ.rb

@@ -3,6 +3,14 @@ class Champs::CarteChamp < Champ
   DEFAULT_LON = 2.428462
   DEFAULT_LAT = 46.538192
 
+  def legend_label?
+    true
+  end
+
+  def html_label?
+    false
+  end
+
   # We are not using scopes here as we want to access
   # the following collections on unsaved records.
   def cadastres

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>"

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>