amelioration(bloc-repetable): wrap les blocs repetatable dans des fieldsets

app/assets/stylesheets/sections.scss

@@ -51,4 +51,13 @@
     counter-increment: h6;
     content: counter(h1) "."counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
   }
+
+  .repetition {
+    counter-reset: repetition;
+
+    .block-id::after {
+      counter-increment: repetition;
+      content: counter(repetition);
+    }
+  }
 }

app/components/editable_champ/editable_champ_component.rb

@@ -6,7 +6,11 @@ class EditableChamp::EditableChampComponent < ApplicationComponent
   private
 
   def has_label?(champ)
-    types_without_label = [TypeDeChamp.type_champs.fetch(:header_section), TypeDeChamp.type_champs.fetch(:explication)]
+    types_without_label = [
+      TypeDeChamp.type_champs.fetch(:header_section),
+      TypeDeChamp.type_champs.fetch(:explication),
+      TypeDeChamp.type_champs.fetch(:repetition)
+    ]
     !types_without_label.include?(@champ.type_champ)
   end
 

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

@@ -1,10 +1,5 @@
 .editable-champ{ html_options }
-  - if @champ.block?
+  - if has_label?(@champ)
-    %h3.header-subsection= @champ.libelle
-    - if @champ.description.present?
-      .notice= render SimpleFormatComponent.new(@champ.description, allow_a: true)
-
-  - elsif has_label?(@champ)
     = render EditableChamp::ChampLabelComponent.new form: @form, champ: @champ, seen_at: @seen_at
   - if @champ.titre_identite?
     %p.notice= t('.titre_identite_notice')

app/components/editable_champ/repetition_component.rb

@@ -1,2 +1,9 @@
 class EditableChamp::RepetitionComponent < EditableChamp::EditableChampBaseComponent
+  def legend_params
+    @champ.description.present? ? { describedby: dom_id(@champ, :repetition) } : {}
+  end
+
+  def notice_params
+    @champ.description.present? ? { id: dom_id(@champ, :repetition) } : {}
+  end
 end

app/components/editable_champ/repetition_component/repetition_component.html.haml

@@ -1,3 +1,9 @@
+%fieldset
+  %legend.header-subsection{ legend_params }= @champ.libelle
+  - if @champ.description.present?
+    .notice{ notice_params }= render SimpleFormatComponent.new(@champ.description, allow_a: true)
+
+
   .repetition{ id: dom_id(@champ, :rows) }
     - @champ.rows.each do |champs|
       = render EditableChamp::RepetitionRowComponent.new(form: @form, champ: @champ, row: champs, seen_at: @seen_at)

app/components/editable_champ/repetition_row_component/repetition_row_component.html.haml

@@ -1,5 +1,10 @@
 - row_id = "safe-row-selector-#{@row.first.row_id}"
 .row{ id: row_id }
+  - if @row.size > 1
+    %fieldset
+      %legend.block-id= "#{@champ.libelle} "
+      = render EditableChamp::ChampsTreeComponent.new(champs: @row, root_depth: @champ.current_section_level)
+  - else
     = render EditableChamp::ChampsTreeComponent.new(champs: @row, root_depth: @champ.current_section_level)
 
   .flex.row-reverse{ 'data-turbo': 'true' }

spec/support/shared_examples_for_prefilled_dossier.rb

@@ -16,7 +16,7 @@ shared_examples "the user has got a prefilled dossier, owned by themselves" do
     expect(page).to have_css('label', text: type_de_champ_phone.libelle)
     expect(page).to have_field(type_de_champ_rna.libelle, with: rna_value)
     expect(page).to have_field(type_de_champ_siret.libelle, with: siret_value)
-    expect(page).to have_css('h3', text: type_de_champ_repetition.libelle)
+    expect(page).to have_css('legend', text: type_de_champ_repetition.libelle)
     expect(page).to have_field(text_repetition_libelle, with: text_repetition_value)
     expect(page).to have_field(integer_repetition_libelle, with: integer_repetition_value)
     expect(page).to have_field(type_de_champ_datetime.libelle, with: datetime_value)