a11y(champs): generalize describedby and update to use new Combo props

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

@@ -6,6 +6,7 @@
 - accept = defined?(accept) ? accept : nil
 - user_can_destroy = defined?(user_can_destroy) ? user_can_destroy : false
 - direct_upload = direct_upload != nil ? false : true
+- champ = form.object.is_a?(Champ) ? form.object : nil
 
 .attachment
   - if defined?(template) && template.attached?
@@ -36,4 +37,6 @@
     class: "attachment-input attachment-input-#{attachment_id} #{'hidden' if persisted}",
     accept: accept,
     direct_upload: direct_upload,
+    id: champ&.input_id,
+    aria: { describedby: champ&.describedby_id },
     data: { 'auto-attach-url': auto_attach_url(form, form.object) }

app/views/shared/dossiers/editable_champs/_address.html.haml

@@ -1,4 +1,6 @@
-- hidden_field_id = SecureRandom.uuid
+= form.hidden_field :value
-= form.hidden_field :value, { data: { uuid: hidden_field_id } }
+= form.hidden_field :external_id
-= form.hidden_field :external_id, { data: { reference: true } }
+= react_component("ComboAdresseSearch",
-= react_component("ComboAdresseSearch", mandatory: champ.mandatory?, hiddenFieldId: hidden_field_id)
+  required: champ.mandatory?,
+  id: champ.input_id,
+  describedby: champ.describedby_id)

app/views/shared/dossiers/editable_champs/_annuaire_education.html.haml

@@ -1,4 +1,6 @@
-- hidden_field_id = SecureRandom.uuid
+= form.hidden_field :value
-= form.hidden_field :value, { data: { uuid: hidden_field_id } }
+= form.hidden_field :external_id
-= form.hidden_field :external_id, { data: { reference: true } }
+= react_component("ComboAnnuaireEducationSearch",
-= react_component("ComboAnnuaireEducationSearch", mandatory: champ.mandatory?, hiddenFieldId: hidden_field_id )
+  required: champ.mandatory?,
+  id: champ.input_id,
+  describedby: champ.describedby_id)

app/views/shared/dossiers/editable_champs/_champ_label.html.haml

@@ -1,10 +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 do
+  = form.label champ.main_value_name, id: champ.labelledby_id, for: champ.input_id do
     = render partial: 'shared/dossiers/editable_champs/champ_label_content', locals: { champ: champ, seen_at: seen_at }
 - else
   .form-label.mb-4
     = render partial: 'shared/dossiers/editable_champs/champ_label_content', locals: { champ: champ, seen_at: seen_at }
 
 - if champ.description.present?
-  .notice{ id: describedby_id(champ) }= string_to_html(champ.description)
+  .notice{ id: champ.describedby_id }= string_to_html(champ.description)

app/views/shared/dossiers/editable_champs/_checkbox.html.haml

@@ -1,4 +1,4 @@
 = form.check_box :value,
-  { required: champ.mandatory? },
+  { required: champ.mandatory?, id: champ.input_id, aria: { describedby: champ.describedby_id } },
   'on',
   'off'

app/views/shared/dossiers/editable_champs/_cnaf.html.haml

@@ -5,7 +5,7 @@
     = form.text_field :numero_allocataire,
       required: champ.mandatory?,
       size: 7,
-      aria: { describedby: describedby_id(champ) }
+      aria: { describedby: champ.describedby_id }
 
   %div
     = form.label :code_postal, t('.code_postal_label')
@@ -13,4 +13,4 @@
     = form.text_field :code_postal,
       size: 5,
       required: champ.mandatory?,
-      aria: { describedby: describedby_id(champ) }
+      aria: { describedby: champ.describedby_id }

app/views/shared/dossiers/editable_champs/_communes.html.haml

@@ -1,6 +1,8 @@
-- hidden_field_id = SecureRandom.uuid
+= form.hidden_field :value
-= form.hidden_field :value, { data: { uuid: hidden_field_id } }
+= form.hidden_field :external_id
-= form.hidden_field :external_id, { data: { reference: true } }
+= form.hidden_field :departement
-= form.hidden_field :departement, { data: { attr: "#{hidden_field_id}:departement" } }
+= form.hidden_field :code_departement
-= form.hidden_field :code_departement, { data: { attr: "#{hidden_field_id}:code_departement" } }
+= react_component("ComboCommunesSearch",
-= react_component("ComboCommunesSearch", mandatory: champ.mandatory?, hiddenFieldId: hidden_field_id)
+  required: champ.mandatory?,
+  id: champ.input_id,
+  describedby: champ.describedby_id)

app/views/shared/dossiers/editable_champs/_date.html.haml

@@ -1,4 +1,6 @@
 = form.date_field :value,
+  id: champ.input_id,
+  aria: { describedby: champ.describedby_id },
   value: champ.value,
   required: champ.mandatory?,
   placeholder: 'aaaa-mm-jj'

app/views/shared/dossiers/editable_champs/_datetime.html.haml

@@ -1,4 +1,4 @@
 - parsed_value = champ.value.present? ? Time.zone.parse(champ.value) : nil
 
 .datetime
-  = form.datetime_select(:value, selected: parsed_value, start_year: datetime_start_year(parsed_value), end_year: Date.today.year + 50, minute_step: 5, include_blank: true)
+  = form.datetime_select(:value, id: champ.input_id, aria: { describedby: champ.describedby_id }, selected: parsed_value, start_year: datetime_start_year(parsed_value), end_year: Date.today.year + 50, minute_step: 5, include_blank: true)

app/views/shared/dossiers/editable_champs/_decimal_number.html.haml

@@ -1,4 +1,6 @@
 = form.number_field :value,
+  id: champ.input_id,
+  aria: { describedby: champ.describedby_id },
   step: :any,
   placeholder: champ.libelle,
   required: champ.mandatory?

app/views/shared/dossiers/editable_champs/_departements.html.haml

@@ -1,4 +1,6 @@
-- hidden_field_id = SecureRandom.uuid
+= form.hidden_field :value
-= form.hidden_field :value, { data: { uuid: hidden_field_id } }
+= form.hidden_field :external_id
-= form.hidden_field :external_id, { data: { reference: true } }
+= react_component("ComboDepartementsSearch",
-= react_component("ComboDepartementsSearch", mandatory: champ.mandatory?, hiddenFieldId: hidden_field_id)
+  required: champ.mandatory?,
+  id: champ.input_id,
+  describedby: champ.describedby_id)

app/views/shared/dossiers/editable_champs/_dgfip.html.haml

@@ -5,7 +5,7 @@
     = form.text_field :numero_fiscal,
       required: champ.mandatory?,
       size: 14,
-      aria: { describedby: describedby_id(champ) }
+      aria: { describedby: champ.describedby_id }
 
   %div
     = form.label :reference_avis, t('.reference_avis_label')
@@ -13,4 +13,4 @@
     = form.text_field :reference_avis,
       size: 14,
       required: champ.mandatory?,
-      aria: { describedby: describedby_id(champ) }
+      aria: { describedby: champ.describedby_id }

app/views/shared/dossiers/editable_champs/_dossier_link.html.haml

@@ -1,5 +1,7 @@
 .dossier-link{ class: "dossier-link-#{form.index}" }
   = form.number_field :value,
+    id: champ.input_id,
+    aria: { describedby: champ.describedby_id },
     placeholder: "Numéro de dossier",
     autocomplete: 'off',
     required: champ.mandatory?,

app/views/shared/dossiers/editable_champs/_drop_down_list.html.haml

@@ -16,7 +16,7 @@
           = form.radio_button :value, Champs::DropDownListChamp::OTHER, checked: champ.other_value_present?
           Autre
   - else
-    = form.select :value, champ.options, selected: champ.selected, required: champ.mandatory?
+    = form.select :value, champ.options, { selected: champ.selected}, required: champ.mandatory?, id: champ.input_id, aria: { describedby: champ.describedby_id }
 
   - if champ.drop_down_other?
     = render partial: "shared/dossiers/drop_down_other_input", locals: { form: form, champ: champ }

app/views/shared/dossiers/editable_champs/_editable_champ.html.haml

@@ -1,4 +1,4 @@
-.editable-champ{ class: "editable-champ-#{champ.type_champ}", data: { 'champ-id': champ.id } }
+.editable-champ{ class: "editable-champ-#{champ.type_champ}", id: champ.input_group_id }
   - if champ.repetition?
     %h3.header-subsection= champ.libelle
     - if champ.description.present?

app/views/shared/dossiers/editable_champs/_email.html.haml

@@ -1,3 +1,5 @@
 = form.email_field :value,
+  id: champ.input_id,
+  aria: { describedby: champ.describedby_id },
   placeholder: champ.libelle,
   required: champ.mandatory?

app/views/shared/dossiers/editable_champs/_engagement.html.haml

@@ -1,4 +1,4 @@
 = form.check_box :value,
-  { required: champ.mandatory? },
+  { required: champ.mandatory?, id: champ.input_id, aria: { describedby: champ.describedby_id } },
   'on',
   'off'

app/views/shared/dossiers/editable_champs/_iban.html.haml

@@ -1,4 +1,5 @@
 = form.text_field :value,
+  id: champ.input_id,
   placeholder: "27 caractères au format FR7630006000011234567890189",
   required: champ.mandatory?,
-  aria: { describedby: describedby_id(champ) }
+  aria: { describedby: champ.describedby_id }

app/views/shared/dossiers/editable_champs/_integer_number.html.haml

@@ -1,3 +1,5 @@
 = form.number_field :value,
+  id: champ.input_id,
+  aria: { describedby: champ.describedby_id },
   placeholder: champ.libelle,
   required: champ.mandatory?

app/views/shared/dossiers/editable_champs/_linked_drop_down_list.html.haml

@@ -1,16 +1,16 @@
 - if champ.options?
   = form.select :primary_value,
     champ.primary_options,
-    { required: champ.mandatory? },
+    {},
-    { data: { secondary_options: champ.secondary_options } }
+    { data: { secondary_options: champ.secondary_options }, required: champ.mandatory?, id: champ.input_id, aria: { describedby: champ.describedby_id } }
-  %span
+
-    = form.label :secondary_value do
+  = form.label :secondary_value, for: "#{champ.input_id}-secondary" do
     = champ.drop_down_secondary_libelle.presence || "Valeur secondaire dépendant de la première"
     - if champ.mandatory?
       %span.mandatory *
   - if champ.drop_down_secondary_description.present?
-      .notice= string_to_html(champ.drop_down_secondary_description)
+    .notice{ id: "#{champ.describedby_id}-secondary" }= string_to_html(champ.drop_down_secondary_description)
   = form.select :secondary_value,
     champ.secondary_options[champ.primary_value],
-    { required: champ.mandatory? },
+    {},
-    { data: { secondary: true } }
+    { data: { secondary: true }, required: champ.mandatory?, id: "#{champ.input_id}-secondary", aria: { describedby: "#{champ.describedby_id}-secondary" } }

app/views/shared/dossiers/editable_champs/_mesri.html.haml

@@ -4,4 +4,4 @@
     %p.notice= t('.ine_notice')
     = form.text_field :ine,
       required: champ.mandatory?,
-      aria: { describedby: describedby_id(champ) }
+      aria: { describedby: champ.describedby_id }

app/views/shared/dossiers/editable_champs/_multiple_drop_down_list.html.haml

@@ -3,10 +3,15 @@
     = form.collection_check_boxes(:value, champ.enabled_non_empty_options, :to_s, :to_s) do |b|
       .editable-champ.editable-champ-checkbox
         = b.label do
-          = b.check_box({ multiple: true, checked: champ&.selected_options&.include?(b.value) })
+          = b.check_box({ multiple: true, checked: champ&.selected_options&.include?(b.value), aria: { describedby: champ.describedby_id } })
           = b.text
 
   - else
-    - hidden_field_id = SecureRandom.uuid
+    = form.hidden_field :value
-    = form.hidden_field :value, { data: { uuid: hidden_field_id } }
+    = react_component("ComboMultipleDropdownList",
-    = react_component("ComboMultipleDropdownList", options: champ.options, selected: champ.selected_options, disabled: champ.disabled_options, hiddenFieldId: hidden_field_id, label: champ.libelle)
+      options: champ.options,
+      selected: champ.selected_options,
+      disabled: champ.disabled_options,
+      id: champ.input_id,
+      labelledby: champ.labelledby_id,
+      describedby: champ.describedby_id)

app/views/shared/dossiers/editable_champs/_number.html.haml

@@ -1,3 +1,5 @@
 = form.number_field :value,
+  id: champ.input_id,
+  aria: { describedby: champ.describedby_id },
   placeholder: champ.libelle,
   required: champ.mandatory?

app/views/shared/dossiers/editable_champs/_pays.html.haml

@@ -1,4 +1,6 @@
-- hidden_field_id = SecureRandom.uuid
+= form.hidden_field :value
-= form.hidden_field :value, { value: champ.localized_value, data: { uuid: hidden_field_id } }
+= form.hidden_field :external_id
-= form.hidden_field :external_id, { data: { reference: true } }
+= react_component("ComboPaysSearch",
-= react_component("ComboPaysSearch", mandatory: champ.mandatory?, hiddenFieldId: hidden_field_id)
+  required: champ.mandatory?,
+  id: champ.input_id,
+  describedby: champ.describedby_id)

app/views/shared/dossiers/editable_champs/_phone.html.haml

@@ -2,6 +2,8 @@
 -# very light validation is made client-side
 -# stronger validation is made server-side
 = form.phone_field :value,
+  id: champ.input_id,
+  aria: { describedby: champ.describedby_id },
   placeholder: champ.libelle,
   required: champ.mandatory?,
   pattern: "[^a-z^A-Z]+"

app/views/shared/dossiers/editable_champs/_pole_emploi.html.haml

@@ -4,4 +4,4 @@
     %p.notice= t('.identifiant_notice')
     = form.text_field :identifiant,
       required: champ.mandatory?,
-      aria: { describedby: describedby_id(champ) }
+      aria: { describedby: champ.describedby_id }

app/views/shared/dossiers/editable_champs/_regions.html.haml

@@ -1,4 +1,6 @@
-- hidden_field_id = SecureRandom.uuid
+= form.hidden_field :value
-= form.hidden_field :value, { data: { uuid: hidden_field_id } }
+= form.hidden_field :external_id
-= form.hidden_field :external_id, { data: { reference: true } }
+= react_component("ComboRegionsSearch",
-= react_component("ComboRegionsSearch", mandatory: champ.mandatory?, hiddenFieldId: hidden_field_id)
+  required: champ.mandatory?,
+  id: champ.input_id,
+  describedby: champ.describedby_id)

app/views/shared/dossiers/editable_champs/_siret.html.haml

@@ -1,4 +1,6 @@
 = form.text_field :value,
+  id: champ.input_id,
+  aria: { describedby: champ.describedby_id },
   placeholder: champ.libelle,
   data: { remote: true, debounce: true, url: champs_siret_path(form.index), params: { champ_id: champ&.id }.to_query, spinner: true },
   required: champ.mandatory?,

app/views/shared/dossiers/editable_champs/_text.html.haml

@@ -1,4 +1,5 @@
 = form.text_field :value,
+  id: champ.input_id,
   placeholder: champ.libelle,
   required: champ.mandatory?,
-  aria: { describedby: describedby_id(champ) }
+  aria: { describedby: champ.describedby_id }

app/views/shared/dossiers/editable_champs/_textarea.html.haml

@@ -1,4 +1,6 @@
 ~ form.text_area :value,
+  id: champ.input_id,
+  aria: { describedby: champ.describedby_id },
   rows: 6,
   required: champ.mandatory?,
   value: html_to_string(champ.value)

spec/controllers/champs/piece_justificative_controller_spec.rb

@@ -29,7 +29,7 @@ describe Champs::PieceJustificativeController, type: :controller do
       it 'renders the attachment template as Javascript' do
         subject
         expect(response.status).to eq(200)
-        expect(response.body).to include("editable-champ[data-champ-id=\"#{champ.id}\"]")
+        expect(response.body).to include("##{champ.input_group_id}")
       end
     end