Boutons radio au DSFR

app/components/editable_champ/champ_label_component/champ_label_component.html.haml

@@ -1,7 +1,10 @@
 = # we do this trick because some html elements should use 'label' and some should be plain paragraphs
+
 - if @champ.html_label?
   = @form.label @champ.main_value_name, id: @champ.labelledby_id, for: @champ.input_id, class: 'fr-label' do
     - render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
+- elsif @champ.legend_label?
+  %legend.fr-fieldset__legend.fr-text--regular= render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
 - else
   .fr-label.mb-4{ id: @champ.labelledby_id }
     = render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at

app/components/editable_champ/drop_down_list_component/drop_down_list_component.html.haml

@@ -1,20 +1,23 @@
 - if @champ.options?
   - if @champ.render_as_radios?
-    %fieldset.radios
-      - @champ.enabled_non_empty_options.each do |option|
-        %label
-          = @form.radio_button :value, option
-          = option
+    .fr-fieldset__content
+      - @champ.enabled_non_empty_options.each_with_index do |option, index|
+        .fr-radio-group
+          = @form.radio_button :value, option, id: "#{@champ.id}_radio_option_#{index}"
+          %label.fr-label{ for: "#{@champ.id}_radio_option_#{index}" }
+            = option
 
       - if !@champ.mandatory?
-        %label.blank-radio
-          = @form.radio_button :value, '', checked: @champ.value.blank? && !@champ.other?
-          Non renseigné
+        .fr-radio-group
+          = @form.radio_button :value, '', checked: @champ.value.blank? && !@champ.other?, id: "#{@champ.id}_radio_option_blank"
+          %label.fr-label{ for: "#{@champ.id}_radio_option_blank" }
+            Non renseigné
 
       - if @champ.drop_down_other?
-        %label
-          = @form.radio_button :value, Champs::DropDownListChamp::OTHER, checked: @champ.other?
-          Autre
+        .fr-radio-group
+          = @form.radio_button :value, Champs::DropDownListChamp::OTHER, checked: @champ.other?, id: "#{@champ.id}_radio_option_other"
+          %label.fr-label{ for: "#{@champ.id}_radio_option_other" }
+            Autre
   - else
     = @form.select :value, @champ.options_without_empty_value_when_mandatory(@champ.options), { selected: @champ.selected }, required: @champ.required?, id: @champ.input_id, class: select_class_names, aria: { describedby: @champ.describedby_id }
 

app/components/editable_champ/drop_down_other_input_component/drop_down_other_input_component.html.haml

@@ -1,4 +1,4 @@
 .drop_down_other
   .notice
-    %label{ for: dom_id(@champ, :value_other) } Veuillez saisir votre autre choix
-  = @form.text_field :value_other, maxlength: 200, size: nil, id: dom_id(@champ, :value_other)
+    %label.fr-label{ for: dom_id(@champ, :value_other) } Veuillez saisir votre autre choix
+  = @form.text_field :value_other, maxlength: 200, size: nil, id: dom_id(@champ, :value_other), class: 'fr-input'

app/components/editable_champ/editable_champ_component.rb

@@ -55,6 +55,13 @@ class EditableChamp::EditableChampComponent < ApplicationComponent
     ]
   end
 
+  def radio_group
+    [
+      'boolean',
+      'yes_no'
+    ]
+  end
+
   def html_options
     {
       class: class_names(
@@ -63,7 +70,9 @@ class EditableChamp::EditableChampComponent < ApplicationComponent
           "editable-champ-#{@champ.type_champ}": true,
           "hidden": !@champ.visible?,
           "fr-input-group": input_group.include?(@champ.type_champ),
-          "fr-select-group": select_group.include?(@champ.type_champ)
+          "fr-select-group": select_group.include?(@champ.type_champ),
+          "fr-radio-group": radio_group.include?(@champ.type_champ),
+          "fr-fieldset": @champ.legend_label?
         }.merge(input_group_error_class_names)
       ),
       id: @champ.input_group_id,

app/components/editable_champ/editable_champ_component/editable_champ_component.html.haml

@@ -1,4 +1,4 @@
-= content_tag(:div, html_options) do
+= content_tag((@champ.legend_label? ? :fieldset : :div), html_options) do
   - if has_label?(@champ)
     = render EditableChamp::ChampLabelComponent.new form: @form, champ: @champ, seen_at: @seen_at
   = render component_class.new(form: @form, champ: @champ, seen_at: @seen_at)

app/components/editable_champ/yes_no_component/yes_no_component.html.haml

@@ -1,11 +1,11 @@
-%fieldset.fr-fieldset
-  %legend.fr-fieldset__legend.visually-hidden
-    = t(".legend")
 
-  %label{ for: @champ.yes_input_id }
+.fr-fieldset__element.fr-fieldset__element--inline
+  .fr-radio-group
     = @form.radio_button :value, true, id: @champ.yes_input_id
-    = t(".yes")
-
-  %label{ for: @champ.no_input_id }
+    %label.fr-label{ for: @champ.yes_input_id }
+      = t(".yes")
+.fr-fieldset__element.fr-fieldset__element--inline
+  .fr-radio-group
     = @form.radio_button :value, false, id: @champ.no_input_id
-    = t(".no")
+    %label.fr-label{ for: @champ.no_input_id }
+      = t(".no")

app/models/champ.rb

@@ -160,6 +160,10 @@ class Champ < ApplicationRecord
     true
   end
 
+  def legend_label?
+    false
+  end
+
   def input_group_id
     "champ-#{html_id}"
   end

app/models/champs/drop_down_list_champ.rb

@@ -22,6 +22,14 @@ class Champs::DropDownListChamp < Champ
     end
   end
 
+  def html_label?
+    !render_as_radios?
+  end
+
+  def legend_label?
+    render_as_radios?
+  end
+
   def selected
     other? ? OTHER : value
   end

app/models/champs/yes_no_champ.rb

@@ -1,4 +1,12 @@
 class Champs::YesNoChamp < Champs::BooleanChamp
+  def legend_label?
+    true
+  end
+
+  def html_label?
+    false
+  end
+
   def yes_input_id
     "#{input_id}-yes"
   end

spec/system/users/dropdown_spec.rb

@@ -23,7 +23,7 @@ describe 'dropdown list with other option activated', js: true, retry: 3 do
     scenario 'Select other option and the other input hidden must appear', js: true, retry: 3 do
       fill_individual
 
-      find('.radios').find('label:last-child').find('input').select_option
+      find('.fr-fieldset__content .fr-radio-group:last-of-type input').select_option
       expect(page).to have_selector('.drop_down_other', visible: true)
     end