a11y(bloc-repetable): ETQ usager qui navigue au clavier, lorsque j'ajoute un champs repetable, le focus vient sur le 1er champs du bloc repetable

app/components/editable_champ/civilite_component/civilite_component.html.haml

@@ -2,9 +2,9 @@
   %legend.mandatory-explanation
     Sélectionnez une des valeurs
   %label
-    = @form.radio_button :value, Individual::GENDER_FEMALE
+    = @form.radio_button :value, Individual::GENDER_FEMALE, id: @champ.female_input_id
     = Individual.human_attribute_name('gender.female')
 
   %label
-    = @form.radio_button :value, Individual::GENDER_MALE
+    = @form.radio_button :value, Individual::GENDER_MALE, id: @champ.male_input_id
     = Individual.human_attribute_name('gender.male')

app/components/editable_champ/cnaf_component/cnaf_component.html.haml

@@ -1,16 +1,18 @@
 .cnaf-inputs
   %div
-    = @form.label :numero_allocataire, t('.numero_allocataire_label')
+    = @form.label :numero_allocataire, t('.numero_allocataire_label'), for: @champ.numero_allocataire_input_id
     %p.notice= t('.numero_allocataire_notice')
     = @form.text_field :numero_allocataire,
       required: @champ.required?,
       aria: { describedby: @champ.describedby_id },
-      class: "width-33-desktop"
+      class: "width-33-desktop", id: @champ.numero_allocataire_input_id
 
   %div
-    = @form.label :code_postal, t('.code_postal_label')
+    = @form.label :code_postal, t('.code_postal_label'), for: @champ.code_postal_input_id
     %p.notice= t('.code_postal_notice')
     = @form.text_field :code_postal,
       required: @champ.required?,
       aria: { describedby: @champ.describedby_id },
-      class: "width-33-desktop"
+      class: "width-33-desktop",
+      id: @champ.code_postal_input_id
+

app/components/editable_champ/dgfip_component/dgfip_component.html.haml

@@ -1,16 +1,16 @@
 .dgfip-inputs
   %div
-    = @form.label :numero_fiscal, t('.numero_fiscal_label')
+    = @form.label :numero_fiscal, t('.numero_fiscal_label'), for: @champ.numero_fiscal_input_id
     %p.notice= t('.numero_fiscal_notice')
     = @form.text_field :numero_fiscal,
       required: @champ.required?,
       aria: { describedby: @champ.describedby_id },
-      class: "width-33-desktop"
+      class: "width-33-desktop", id: @champ.numero_fiscal_input_id
 
   %div
-    = @form.label :reference_avis, t('.reference_avis_label')
+    = @form.label :reference_avis, t('.reference_avis_label'), for: @champ.reference_avis_input_id
     %p.notice= t('.reference_avis_notice')
     = @form.text_field :reference_avis,
       required: @champ.required?,
       aria: { describedby: @champ.describedby_id },
-      class: "width-33-desktop"
+      class: "width-33-desktop", id: @champ.reference_avis_input_id

app/components/editable_champ/epci_component.rb

@@ -15,10 +15,6 @@ class EditableChamp::EpciComponent < EditableChamp::EditableChampBaseComponent
     end
   end
 
-  def departement_input_id
-    "#{@champ.input_id}-departement"
-  end
-
   def departement_select_options
     { selected: @champ.code_departement }.merge(@champ.mandatory? ? { prompt: '' } : { include_blank: '' })
   end

app/components/editable_champ/epci_component/epci_component.html.haml

@@ -1,4 +1,5 @@
-%label.notice{ for: departement_input_id } Le département de l’EPCI
-= @form.select :code_departement, departement_options, departement_select_options, required: @champ.required?, id: departement_input_id, class: "width-33-desktop width-100-mobile"
+%label.notice{ for: @champ.code_departement_input_id } Le département de l’EPCI
+= @form.select :code_departement, departement_options, departement_select_options, required: @champ.required?, id: @champ.code_departement_input_id, class: "width-33-desktop width-100-mobile"
 - if @champ.departement?
-  = @form.select :value, epci_options, epci_select_options, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, class: "width-33-desktop width-100-mobile"
+  = @form.label "EPCI", for: @champ.epci_input_id
+  = @form.select :value, epci_options, epci_select_options, required: @champ.required?, id: @champ.epci_input_id, aria: { describedby: @champ.describedby_id }, class: "width-33-desktop width-100-mobile"

app/components/editable_champ/mesri_component/mesri_component.html.haml

@@ -1,9 +1,9 @@
 .mesri-inputs
   %div
-    = @form.label :ine, t('.ine_label')
+    = @form.label :ine, t('.ine_label'), for: @champ.input_id
     %p.notice= t('.ine_notice')
     = @form.text_field :ine,
       required: @champ.required?,
       aria: { describedby: @champ.describedby_id },
-      class: "width-33-desktop"
+      class: "width-33-desktop", id: @champ.input_id
 

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

@@ -1,9 +1,10 @@
+- # TODO, manage input id for focus on add repetition
 - if @champ.options?
   - if @champ.render_as_checkboxes?
     = @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 do
-          - b.check_box({ multiple: true, checked: @champ&.selected_options&.include?(b.value), aria: { describedby: @champ.describedby_id } }) + b.text
+        - b.label(for: @champ.checkbox_id(b.value)) do
+          - 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
   - else
     = @form.hidden_field :value
     = react_component("ComboMultipleDropdownList",

app/components/editable_champ/pole_emploi_component/pole_emploi_component.html.haml

@@ -1,8 +1,8 @@
 .pole-emploi-inputs
   %div
-    = @form.label :identifiant, t('.identifiant_label')
+    = @form.label :identifiant, t('.identifiant_label'), for: @champ.input_id
     %p.notice= t('.identifiant_notice')
     = @form.text_field :identifiant,
       required: @champ.required?,
       aria: { describedby: @champ.describedby_id },
-      class: "width-33-desktop"
+      class: "width-33-desktop", id: @champ.input_id

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

@@ -1,8 +1,8 @@
 %fieldset.radios
-  %label
-    = @form.radio_button :value, true
+  %label{ for: @champ.yes_input_id }
+    = @form.radio_button :value, true, id: @champ.yes_input_id
     Oui
 
-  %label
-    = @form.radio_button :value, false
+  %label{ for: @champ.no_input_id }
+    = @form.radio_button :value, false, id: @champ.no_input_id
     Non

app/models/champ.rb

@@ -232,6 +232,10 @@ class Champ < ApplicationRecord
     end
   end
 
+  def focusable_input_id
+    input_id
+  end
+
   private
 
   def html_id

app/models/champs/civilite_champ.rb

@@ -26,4 +26,16 @@ class Champs::CiviliteChamp < Champ
   def html_label?
     false
   end
+
+  def female_input_id
+    "#{input_id}-female"
+  end
+
+  def male_input_id
+    "#{input_id}-male"
+  end
+
+  def focusable_input_id
+    female_input_id
+  end
 end

app/models/champs/cnaf_champ.rb

@@ -51,4 +51,16 @@ class Champs::CnafChamp < Champs::TextChamp
       { code_postal: code_postal, numero_allocataire: numero_allocataire }.to_json
     end
   end
+
+  def numero_allocataire_input_id
+    "#{input_id}-numero_alocataire"
+  end
+
+  def code_postal_input_id
+    "#{input_id}-code_postal"
+  end
+
+  def focusable_input_id
+    numero_allocataire_input_id
+  end
 end

app/models/champs/dgfip_champ.rb

@@ -51,4 +51,16 @@ class Champs::DgfipChamp < Champs::TextChamp
       { reference_avis: reference_avis, numero_fiscal: numero_fiscal }.to_json
     end
   end
+
+  def numero_fiscal_input_id
+    "#{input_id}-numero_fiscal"
+  end
+
+  def reference_avis_input_id
+    "#{input_id}-reference_avis"
+  end
+
+  def focusable_input_id
+    numero_fiscal_input_id
+  end
 end

app/models/champs/epci_champ.rb

@@ -70,6 +70,18 @@ class Champs::EpciChamp < Champs::TextChamp
     end
   end
 
+  def code_departement_input_id
+    "#{input_id}-code_departement"
+  end
+
+  def epci_input_id
+    "#{input_id}-epci"
+  end
+
+  def focusable_input_id
+    code_departement_input_id
+  end
+
   private
 
   def on_departement_change

app/models/champs/multiple_drop_down_list_champ.rb

@@ -79,6 +79,14 @@ class Champs::MultipleDropDownListChamp < Champ
     update_column(:value, (selected_options - options).to_json)
   end
 
+  def focusable_input_id
+    render_as_checkboxes? ? checkbox_id(options.find(&:present?)) : input_id
+  end
+
+  def checkbox_id(value)
+    "#{input_id}-#{value.parameterize}"
+  end
+
   private
 
   def format_before_save

app/models/champs/repetition_champ.rb

@@ -28,6 +28,7 @@ class Champs::RepetitionChamp < Champ
     champs.group_by(&:row_id).values
   end
 
+
   def add_row(revision)
     added_champs = []
     transaction do

app/models/champs/yes_no_champ.rb

@@ -21,4 +21,15 @@
 #  type_de_champ_id               :integer
 #
 class Champs::YesNoChamp < Champs::BooleanChamp
+  def yes_input_id
+    "#{input_id}-yes"
+  end
+
+  def no_input_id
+    "#{input_id}-no"
+  end
+
+  def focusable_input_id
+    yes_input_id
+  end
 end

app/views/champs/repetition/add.turbo_stream.haml

@@ -1,3 +1,6 @@
 - if @champs.present?
   = fields_for @champ.input_name, @champ do |form|
     = turbo_stream.append dom_id(@champ, :rows), render(EditableChamp::RepetitionRowComponent.new(form: form, champ: @champ, row: @champs))
+    - first_champ_id = @champs.map(&:focusable_input_id).compact.first
+    - if first_champ_id
+      = turbo_stream.focus(first_champ_id)

spec/support/shared_examples_for_prefilled_dossier.rb

@@ -23,7 +23,8 @@ shared_examples "the user has got a prefilled dossier, owned by themselves" do
     expect(page).to have_css('label', text: type_de_champ_multiple_drop_down_list.libelle)
     expect(page).to have_content(multiple_drop_down_list_values.first)
     expect(page).to have_content(multiple_drop_down_list_values.last)
-    expect(page).to have_field(type_de_champ_epci.libelle, with: epci_value.last)
+    expect(page).to have_field("Le département de l’EPCI", with: epci_value.first)
+    expect(page).to have_selector("option[value='#{epci_value.last}'][selected]")
     expect(page).to have_field(type_de_champ_dossier_link.libelle, with: dossier_link_value)
     expect(page).to have_field(commune_libelle, with: '01457')
     expect(page).to have_content(annuaire_education_value.last)