a11y(select): use new ComboMultiple component

app/views/administrateurs/experts_procedures/index.html.haml

@@ -44,14 +44,15 @@
 
             .instructeur-wrapper
               %p.notice Pendant l'instruction d’un dossier, les instructeurs peuvent demander leur avis à un ou plusieurs experts.
-              %p.notice Entrez les adresses email des experts que vous souhaitez affecter à cette démarche
-              - hidden_field_id = SecureRandom.uuid
-              = hidden_field_tag :emails, nil, data: { uuid: hidden_field_id }
-              = react_component("ComboMultipleDropdownList",
+              %p#experts-emails.notice Entrez les adresses email des experts que vous souhaitez affecter à cette démarche
+              = hidden_field_tag :emails, nil
+              = react_component("ComboMultiple",
                 options: [],
                 selected: [], disabled: [],
-                hiddenFieldId: hidden_field_id,
-                label: 'email expert',
+                group: '.instructeur-wrapper',
+                name: 'emails',
+                label: 'Emails',
+                describedby: 'experts-emails',
                 acceptNewValues: true)
 
               = f.submit 'Affecter à la démarche', class: 'button primary send'

app/views/administrateurs/groupe_instructeurs/_instructeurs.html.haml

@@ -5,12 +5,12 @@
     .instructeur-wrapper
       - if !procedure.routee?
         %p.notice Entrez les adresses email des instructeurs que vous souhaitez affecter à cette démarche
-      - hidden_field_id = SecureRandom.uuid
-      = hidden_field_tag :emails, nil, data: { uuid: hidden_field_id }
-      = react_component("ComboMultipleDropdownList",
+      = hidden_field_tag :emails, nil
+      = react_component("ComboMultiple",
         options: available_instructeur_emails, selected: [], disabled: [],
-        hiddenFieldId: hidden_field_id,
-        label: 'email instructeur',
+        group: '.instructeur-wrapper',
+        name: 'emails',
+        label: 'Emails',
         acceptNewValues: true)
 
       = f.submit 'Affecter', class: 'button primary send'

app/views/experts/shared/avis/_form.html.haml

@@ -4,13 +4,12 @@
     %p.avis-notice Les invités pourront consulter le dossier, donner un avis et contribuer au fil de messagerie. Ils ne pourront pas modifier le dossier.
 
     = form_for avis, url: url, html: { class: 'form', data: { persisted_content_id: "expert-ask-avis-for-dossier-#{@avis.dossier.id}" } } do |f|
-      - hidden_field_id = SecureRandom.uuid
-      = hidden_field_tag  'avis[emails]', nil, data: { uuid: hidden_field_id }
-      = react_component("ComboMultipleDropdownList",
-          options: [],
-          selected: [], disabled: [],
-          hiddenFieldId: hidden_field_id,
-          label: 'avis_emails',
+      = hidden_field_tag  'avis[emails]', nil
+      = react_component("ComboMultiple",
+          options: [], selected: [], disabled: [],
+          group: '.ask-avis',
+          name: 'emails',
+          label: 'Emails',
           acceptNewValues: true)
       = f.text_area :introduction, rows: 3, value: avis.introduction || 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true, class: 'persisted-input'
       %p.tab-title Ajouter une pièce jointe

app/views/instructeurs/dossiers/_envoyer_dossier_block.html.haml

@@ -8,8 +8,12 @@
     Le destinataire suivra automatiquement le dossier
   = form_for dossier, url: send_to_instructeurs_instructeur_dossier_path(dossier.procedure, dossier), method: :post, html: { class: 'form recipients-form' } do |f|
     .flex.justify-start.align-start
-      - hidden_field_id = SecureRandom.uuid
-      = hidden_field_tag :recipients, nil, data: { uuid: hidden_field_id }
-      = react_component("ComboMultipleDropdownList", options: potential_recipients.map{|r| [r.email, r.id]}, selected: [], disabled: [], hiddenFieldId: hidden_field_id, label: "email instructeur")
+      = hidden_field_tag :recipients, nil
+      = react_component("ComboMultiple",
+        options: potential_recipients.map{|r| [r.email, r.id]},
+        selected: [], disabled: [],
+        group: '.recipients-form',
+        name: 'recipients',
+        label: 'Emails')
 
       = f.submit "Envoyer", class: "button large send gap-left"

app/views/instructeurs/procedures/show.html.haml

@@ -96,9 +96,14 @@
                   Personnaliser
                 #custom-menu.dropdown-content.fade-in-down
                   = form_tag update_displayed_fields_instructeur_procedure_path(@procedure), method: :patch, class: 'dropdown-form large columns-form' do
-                    - hidden_field_id = SecureRandom.uuid
-                    = hidden_field_tag :values, nil, data: { uuid: hidden_field_id }
-                    = react_component("ComboMultipleDropdownList", options: @displayed_fields_options, selected: @displayed_fields_selected, disabled: [], hiddenFieldId: hidden_field_id, label: 'colonne')
+                    = hidden_field_tag :values, nil
+                    = react_component("ComboMultiple",
+                      options: @displayed_fields_options,
+                      selected: @displayed_fields_selected,
+                      disabled: [],
+                      label: 'Colonne à afficher',
+                      group: '.columns-form',
+                      name: 'values')
 
                     = submit_tag "Enregistrer", class: 'button'
 

app/views/instructeurs/shared/avis/_form.html.haml

@@ -2,20 +2,21 @@
   %h1.tab-title Inviter des personnes à donner leur avis
   %p.avis-notice Les invités pourront consulter le dossier, donner un avis et contribuer au fil de messagerie. Ils ne pourront pas modifier le dossier.
   - if @dossier.procedure.experts_require_administrateur_invitation
-    %p.avis-notice Choisissez des experts à qui vous souhaitez demander un avis parmi la liste prédéfinie par les administrateurs de la démarche
+    %p#avis-emails-description.avis-notice
+      Choisissez des experts à qui vous souhaitez demander un avis parmi la liste prédéfinie par les administrateurs de la démarche
   - else
-    %p.avis-notice Entrez les adresses email des experts à qui vous souhaitez demander un avis
+    %p#avis-emails-description.avis-notice
+      Entrez les adresses email des experts à qui vous souhaitez demander un avis
 
   = form_for avis, url: url, html: { class: 'form', data: { persisted_content_id: "instructeur-ask-avis-for-dossier-#{@dossier.id}" } } do |f|
-    - hidden_field_id = SecureRandom.uuid
-    = hidden_field_tag  'avis[emails]', nil, data: { uuid: hidden_field_id }
-    = react_component("ComboMultipleDropdownList",
+    = hidden_field_tag  'avis[emails]', nil
+    = react_component("ComboMultiple",
         options: @dossier.procedure.experts_require_administrateur_invitation ? @experts_emails : [],
-        selected: [],
-        disabled: [],
-        hiddenFieldId: hidden_field_id,
-        label: 'avis_emails',
-        id: 'avis_emails',
+        selected: [], disabled: [],
+        label: 'Emails',
+        group: '.ask-avis',
+        name: 'emails',
+        describedby: 'avis-emails-description',
         acceptNewValues: !@dossier.procedure.experts_require_administrateur_invitation)
     = f.text_area :introduction, rows: 3, value: avis.introduction || 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true, class: "persisted-input"
     %p.tab-title Ajouter une pièce jointe