Merge pull request #10309 from mfo/US/section_component_use_html_with_semantic_meaning

tech(a11y): Les champs répétables n'englobent pas leurs champs enfant dans un `fieldset` si il n'y a qu'un seul champ enfant. Idem pour les checkbox uniques

app/components/editable_champ/checkbox_component.rb

@@ -1,9 +1,5 @@
 class EditableChamp::CheckboxComponent < EditableChamp::EditableChampBaseComponent
-  def dsfr_champ_container
-    :fieldset
-  end
-
   def dsfr_input_classname
-    'fr-radio'
+    'fr-checkbox'
   end
 end

app/components/editable_champ/checkbox_component/checkbox_component.html.haml

@@ -1,9 +1,8 @@
-.fr-fieldset__element
+.fr-checkbox-group
-  .fr-checkbox-group
+  = @form.check_box :value,
-    = @form.check_box :value,
+    { required: @champ.required?, id: @champ.input_id, checked: @champ.true?, aria: { describedby: @champ.describedby_id }, class: class_names('required' => @champ.required?)},
-      { required: @champ.required?, id: @champ.input_id, checked: @champ.true?, aria: { describedby: @champ.describedby_id }, class: class_names('required' => @champ.required?)},
+    'true',
-      'true',
+    'false'
-      'false'
+  %label.fr-label{ for: @champ.input_id, id: @champ.labelledby_id }
-    %label.fr-label{ for: @champ.input_id, id: @champ.labelledby_id }
+    %span
-      %span
+      = render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at
-        = render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at

app/components/editable_champ/section_component/section_component.html.haml

@@ -10,13 +10,12 @@
           = fields_for champ.input_name, champ do |form|
             = render EditableChamp::EditableChampComponent.new form:, champ:
 - else
-  %fieldset.fr-fieldset.fr-my-0
+  - if header_section
-    - if header_section
+    .fr-fieldset__legend.fr-my-0{ class: "reset-#{tag_for_depth}" }
-      %legend.fr-fieldset__legend.fr-my-0{ class: "reset-#{tag_for_depth}" }
+      = render EditableChamp::HeaderSectionComponent.new(champ: header_section)
-        = render EditableChamp::HeaderSectionComponent.new(champ: header_section)
+  - splitted_tail.each do |section, champ|
-    - splitted_tail.each do |section, champ|
+    - if section.present?
-      - if section.present?
+      = render section
-        = render section
+    - else
-      - else
+      = fields_for champ.input_name, champ do |form|
-        = fields_for champ.input_name, champ do |form|
+        = render EditableChamp::EditableChampComponent.new form:, champ:
-          = render EditableChamp::EditableChampComponent.new form:, champ:

app/views/shared/dossiers/_edit.html.haml

@@ -21,7 +21,7 @@
 
           = render Procedure::NoticeComponent.new(procedure: dossier.procedure)
 
-    = render EditableChamp::SectionComponent.new(dossier: dossier_for_editing, types_de_champ: dossier_for_editing.revision.types_de_champ_public)
+    %fieldset.fr-fieldset= render EditableChamp::SectionComponent.new(dossier: dossier_for_editing, types_de_champ: dossier_for_editing.revision.types_de_champ_public)
 
     = render Dossiers::PendingCorrectionCheckboxComponent.new(dossier: dossier)
 

app/views/shared/dossiers/_edit_annotations.html.haml

@@ -3,7 +3,7 @@
     %section.counter-start-header-section
       = render NestedForms::FormOwnerComponent.new
       = form_for dossier, url: annotations_instructeur_dossier_path(dossier.procedure, dossier), html: { class: 'form', multipart: true } do |f|
-        = render EditableChamp::SectionComponent.new(dossier:, types_de_champ: dossier.revision.types_de_champ_private)
+        %fieldset.fr-fieldset= render EditableChamp::SectionComponent.new(dossier:, types_de_champ: dossier.revision.types_de_champ_private)
 
       = render Dossiers::EditFooterComponent.new(dossier: dossier, annotation: true)
   - else

spec/components/editable_champ/section_component_spec.rb

@@ -10,8 +10,8 @@ describe EditableChamp::SectionComponent, type: :component do
   context 'list of champs without an header_section' do
     let(:types_de_champ_public) { [{ type: :text }, { type: :textarea }] }
 
-    it 'render in a fieldset' do
+    it 'does not renders within a fieldset' do
-      expect(page).to have_selector("fieldset", count: 1)
+      expect(page).to have_selector("fieldset", count: 0)
     end
 
     it 'renders champs' do
@@ -37,14 +37,16 @@ describe EditableChamp::SectionComponent, type: :component do
   context 'list of champs without section and an header_section having champs' do
     let(:types_de_champ_public) { [{ type: :text }, { type: :header_section, level: 1 }, { type: :text }] }
 
-    it 'renders fieldset' do
+    it 'renders nested champs (after an header section) within a fieldset' do
-      expect(page).to have_selector("fieldset", count: 2)
+      expect(page).to have_selector("fieldset", count: 1)
-      expect(page).to have_selector("legend h2")
+      expect(page).to have_selector("fieldset legend h2")
+      expect(page).to have_selector("input[type=text]", count: 2)
+      expect(page).to have_selector("fieldset input[type=text]", count: 1)
     end
 
-    it 'renders all champs, each in its fieldset' do
+    it 'renders nested within its fieldset' do
       expect(page).to have_selector("input[type=text]", count: 2)
-      expect(page).to have_selector("fieldset > .fr-fieldset__element input[type=text]", count: 2)
+      expect(page).to have_selector("fieldset > .fr-fieldset__element input[type=text]", count: 1)
     end
   end