Multiple drop down list au DSFR

app/assets/stylesheets/dsfr.scss

@@ -99,6 +99,21 @@ fieldset {
   width: max-content;
 }
 
+button.fr-tag-bug {
+  background-color: $blue-france-500;
+  color: #FFFFFF;
+
+  &:hover {
+    background-color: #1212FF;
+    color: #FFFFFF;
+  }
+
+  .tag-dismiss {
+    font-size: 1rem;
+    margin-left: 10px;
+  }
+}
+
 // on veut ferrer à droite le dropdown de sélecteur de langue
 @media (min-width: 62em) {
   .fr-nav__item.custom-fr-translate-flex-end {

app/components/editable_champ/multiple_drop_down_list_component/multiple_drop_down_list_component.html.haml

@@ -1,15 +1,21 @@
 - if @champ.options?
   - if @champ.render_as_checkboxes?
-    = @form.collection_check_boxes(:value, @champ.enabled_non_empty_options, :to_s, :to_s) do |b|
+    %legend.fr-fieldset__legend--regular.fr-fieldset__legend= render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
+    = @form.collection_check_boxes :value, @champ.enabled_non_empty_options, :to_s, :to_s do |b|
       - tag.div(class: 'editable-champ editable-champ-checkbox') do
-        - b.label(for: @champ.checkbox_id(b.value)) do
+        %fieldset.fr-fieldset__element
-          - b.check_box({ multiple: true, checked: @champ.selected_options.include?(b.value), aria: { describedby: @champ.describedby_id }, id: @champ.checkbox_id(b.value) }) + b.text
+          .fr-checkbox-group
+            = b.check_box(checked: @champ.selected_options.include?(b.value), aria: { describedby: @champ.describedby_id }, id: @champ.checkbox_id(b.value), class: 'fr-checkbox-group__checkbox')
+            %label.fr-label{ for: @champ.checkbox_id(b.value) }
+              = b.text
+
   - else
     %div{ 'data-turbo-focus-group': true }
       - if @champ.selected_options.present?
         .fr-mb-2w
           - @champ.selected_options.each do |option|
-            = render NestedForms::OwnedButtonComponent.new(formaction: champs_options_path(@champ.id, option:), http_method: :delete, opt: { class: 'fr-tag fr-tag--dismiss fr-mb-1w fr-mr-1w', id: @champ.checkbox_id(option) }) do
+            = render NestedForms::OwnedButtonComponent.new(formaction: champs_options_path(@champ.id, option:), http_method: :delete, opt: { class: 'fr-tag fr-tag-bug fr-mb-1w fr-mr-1w', id: @champ.checkbox_id(option) }) do
               = option
+              %span.tag-dismiss x
       - if @champ.unselected_options.present?
-        = @form.select :value, @champ.unselected_options, { selected: '', include_blank: '' }, id: @champ.input_id, aria: { describedby: @champ.describedby_id }
+        = @form.select :value, @champ.unselected_options, { selected: '', include_blank: '' }, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, class: 'fr-select'

app/models/champs/multiple_drop_down_list_champ.rb

@@ -43,6 +43,14 @@ class Champs::MultipleDropDownListChamp < Champ
     enabled_non_empty_options.size <= THRESHOLD_NB_OPTIONS_AS_CHECKBOX
   end
 
+  def html_label?
+    !render_as_checkboxes?
+  end
+
+  def single_checkbox?
+    render_as_checkboxes?
+  end
+
   def blank?
     selected_options.blank?
   end