Merge pull request #9451 from demarches-simplifiees/DSFR/civilite

ETQ Usager, je veux voir le champ Civilite au DSFR

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

@@ -1,10 +1,13 @@
-%fieldset.radios
+%fieldset.fr-fieldset
-  %legend.mandatory-explanation
+  %legend.fr-fieldset__legend--regular.fr-fieldset__legend
     Sélectionnez une des valeurs
-  %label
+  .fr-fieldset__element.fr-fieldset__element--inline
-    = @form.radio_button :value, Individual::GENDER_FEMALE, id: @champ.female_input_id
+    .fr-radio-group
-    = Individual.human_attribute_name('gender.female')
+      = @form.radio_button :value, Individual::GENDER_FEMALE, id: @champ.female_input_id
-
+      %label.fr-label{ for: @champ.female_input_id }
-  %label
+        = Individual.human_attribute_name('gender.female')
-    = @form.radio_button :value, Individual::GENDER_MALE, id: @champ.male_input_id
+  .fr-fieldset__element.fr-fieldset__element--inline
-    = Individual.human_attribute_name('gender.male')
+    .fr-radio-group
+      = @form.radio_button :value, Individual::GENDER_MALE, id: @champ.male_input_id
+      %label.fr-label{ for: @champ.male_input_id }
+        = Individual.human_attribute_name('gender.male')

app/views/users/dossiers/identite.html.haml

@@ -10,28 +10,32 @@
 
     %p.fr-hint-text.fr-mb-3w= t('views.users.dossiers.identite.all_required')
 
-    %fieldset
+    %fieldset.fr-fieldset
-      %legend
+      %legend.fr-fieldset__legend--regular.fr-fieldset__legend
         = f.label :gender, t('activerecord.attributes.individual.gender')
-      .radios
+      .fr-fieldset__element.fr-fieldset__element--inline
-        %label
+        .fr-radio-group
-          = f.radio_button :gender, Individual::GENDER_FEMALE, required: true
+          = f.radio_button :gender, Individual::GENDER_FEMALE, required: true, id: "identite_champ_radio_#{Individual::GENDER_FEMALE}"
-          = Individual.human_attribute_name('gender.female')
+          %label.fr-label{ for: "identite_champ_radio_#{Individual::GENDER_FEMALE}" }
-        %label
+            = Individual.human_attribute_name('gender.female')
-          = f.radio_button :gender, Individual::GENDER_MALE, required: true
+      .fr-fieldset__element.fr-fieldset__element--inline
-          = Individual.human_attribute_name('gender.male')
+        .fr-radio-group
+          = f.radio_button :gender, Individual::GENDER_MALE, required: true, id: "identite_champ_radio_#{Individual::GENDER_MALE}"
+          %label.fr-label{ for: "identite_champ_radio_#{Individual::GENDER_MALE}" }
+            = Individual.human_attribute_name('gender.male')
 
     .flex
       .inline-champ
-        = f.label :prenom
+        = f.label :prenom, for: 'identite_champ_first_name', class: 'fr-label'
-        = f.text_field :prenom, class: "small", required: true, autocomplete: 'given-name'
+        = f.text_field :prenom, class: 'fr-input', required: true, autocomplete: 'given-name', id: 'identite_champ_first_name'
       .inline-champ
-        = f.label :nom
+        = f.label :nom, class: 'fr-label', for: 'identite_champ_last_name'
-        = f.text_field :nom, class: "small", required: true, autocomplete: 'family-name'
+        = f.text_field :nom, class: "fr-input", required: true, autocomplete: 'family-name', id: 'identite_champ_last_name'
 
 
     - if @dossier.procedure.ask_birthday?
-      = f.label :birthdate
+      .fr-input-group
-      = f.date_field :birthdate, value: @dossier.individual.birthdate, placeholder: 'format : AAAA-MM-JJ', required: true, class: "small"
+        = f.label :birthdate, class: "fr-label", for: 'identite_champ_birthdate'
+        = f.date_field :birthdate, value: @dossier.individual.birthdate, placeholder: 'format : AAAA-MM-JJ', required: true, class: "fr-input", "aria-describedby" => "identite-champ-date-birthday", id: 'identite_champ_birthdate'
 
     = f.submit t('views.users.dossiers.identite.continue'), class: "fr-btn fr-btn--lg fr-mt-4w"

spec/system/accessibilite/wcag_usager_spec.rb

@@ -109,9 +109,9 @@ describe 'wcag rules for usager', js: true, retry: 3 do
     scenario "dépot d'un dossier" do
       click_on 'Commencer la démarche'
 
-      choose 'Monsieur'
+      find('label', text: 'Monsieur')
-      fill_in('individual_prenom', with: 'prenom')
+      fill_in('identite_champ_first_name', with: 'prenom')
-      fill_in('individual_nom', with: 'nom')
+      fill_in('identite_champ_last_name', with: 'nom')
       click_on 'Continuer'
 
       expect(page).to be_axe_clean

spec/system/api_particulier/api_particulier_spec.rb

@@ -266,9 +266,9 @@ describe 'fetch API Particulier Data', js: true, retry: 3 do
         visit commencer_path(path: procedure.path)
         click_on 'Commencer la démarche'
 
-        choose 'Monsieur'
+        find('label', text: 'Monsieur').click
-        fill_in 'individual_nom',    with: 'Nom'
+        fill_in('identite_champ_first_name', with: 'prenom')
-        fill_in 'individual_prenom', with: 'Prenom'
+        fill_in('identite_champ_last_name', with: 'nom')
 
         click_button('Continuer')
 
@@ -325,9 +325,9 @@ describe 'fetch API Particulier Data', js: true, retry: 3 do
         visit commencer_path(path: procedure.path)
         click_on 'Commencer la démarche'
 
-        choose 'Monsieur'
+        find('label', text: 'Monsieur').click
-        fill_in 'individual_nom',    with: 'Moustaki'
+        fill_in('identite_champ_first_name', with: 'Georges')
-        fill_in 'individual_prenom', with: 'Georges'
+        fill_in('identite_champ_last_name', with: 'Moustaki')
 
         click_button('Continuer')
 
@@ -399,9 +399,9 @@ describe 'fetch API Particulier Data', js: true, retry: 3 do
         visit commencer_path(path: procedure.path)
         click_on 'Commencer la démarche'
 
-        choose 'Madame'
+        find('label[for="identite_champ_radio_Mme"]').click
-        fill_in 'individual_nom',    with: 'Dubois'
+        fill_in('identite_champ_last_name', with: 'Dubois')
-        fill_in 'individual_prenom', with: 'Angela Claire Louise'
+        fill_in('identite_champ_first_name', with: 'Angela Claire Louise')
 
         click_button('Continuer')
 
@@ -463,9 +463,9 @@ describe 'fetch API Particulier Data', js: true, retry: 3 do
         visit commencer_path(path: procedure.path)
         click_on 'Commencer la démarche'
 
-        choose 'Madame'
+        find('label[for="identite_champ_radio_Mme"]').click
-        fill_in 'individual_nom',    with: 'FERRI'
+        fill_in('identite_champ_last_name', with: 'FERRI')
-        fill_in 'individual_prenom', with: 'Karine'
+        fill_in('identite_champ_first_name', with: 'Karine')
 
         click_button('Continuer')
 

spec/system/routing/rules_full_scenario_spec.rb

@@ -262,9 +262,9 @@ describe 'The routing with rules', js: true, retry: 3 do
     visit commencer_path(path: procedure.reload.path)
     click_on 'Commencer la démarche'
 
-    choose 'Monsieur'
+    find('label', text: 'Monsieur').click
-    fill_in 'individual_nom',    with: 'Nom'
+    fill_in('identite_champ_first_name', with: 'Prenom')
-    fill_in 'individual_prenom', with: 'Prenom'
+    fill_in('identite_champ_last_name', with: 'Nom')
     click_button('Continuer')
 
     # the old system should not be present

spec/system/users/brouillon_spec.rb

@@ -10,7 +10,6 @@ describe 'The user' do
     log_in(user, procedure)
 
     fill_individual
-
     # fill data
     fill_in('text', with: 'super texte', match: :first)
     fill_in('textarea', with: 'super textarea')
@@ -22,7 +21,7 @@ describe 'The user' do
     fill_in('integer_number', with: '12')
     scroll_to(find_field('checkbox'), align: :center)
     find('label', text: 'checkbox').click
-    choose('Madame')
+    find('label', text: 'Madame').click
     fill_in('email', with: 'loulou@yopmail.com')
     fill_in('phone', with: '0123456789')
     scroll_to(find_field('Non'), align: :center)
@@ -556,8 +555,8 @@ describe 'The user' do
 
   def fill_individual
     find('label', text: 'Monsieur').click
-    fill_in('individual_prenom', with: 'prenom')
+    fill_in('identite_champ_first_name', with: 'prenom')
-    fill_in('individual_nom', with: 'nom')
+    fill_in('identite_champ_last_name', with: 'nom')
     click_on 'Continuer'
     expect(page).to have_current_path(brouillon_dossier_path(user_dossier))
   end

spec/system/users/dossier_creation_spec.rb

@@ -21,9 +21,9 @@ describe 'Creating a new dossier:' do
         expect(page).to have_current_path identite_dossier_path(user.reload.dossiers.last)
         expect(page).to have_title(libelle)
 
-        choose 'Monsieur'
+        find('label', text: 'Monsieur').click
-        fill_in 'individual_nom',    with: 'Nom'
+        fill_in('identite_champ_first_name', with: 'Prenom')
-        fill_in 'individual_prenom', with: 'Prenom'
+        fill_in('identite_champ_last_name', with: 'Nom')
       end
 
       shared_examples 'the user can create a new draft' do
@@ -41,7 +41,7 @@ describe 'Creating a new dossier:' do
         let(:expected_birthday) { Date.new(1987, 10, 14) }
 
         before do
-          fill_in 'individual_birthdate', with: birthday_format
+          fill_in 'identite_champ_birthdate', with: birthday_format
         end
 
         context 'when the browser supports `type=date` input fields' do

spec/system/users/dropdown_spec.rb

@@ -74,9 +74,9 @@ describe 'dropdown list with other option activated', js: true, retry: 3 do
   private
 
   def fill_individual
-    choose 'Monsieur'
+    find('label', text: 'Monsieur').click
-    fill_in('individual_prenom', with: 'prenom')
+    fill_in('identite_champ_first_name', with: 'prenom')
-    fill_in('individual_nom', with: 'nom')
+    fill_in('identite_champ_last_name', with: 'nom')
     click_on 'Continuer'
     expect(page).to have_current_path(brouillon_dossier_path(user_dossier))
   end

spec/system/users/linked_dropdown_spec.rb

@@ -80,9 +80,9 @@ describe 'linked dropdown lists' do
   end
 
   def fill_individual
-    choose 'Monsieur'
+    find('label', text: 'Monsieur').click
-    fill_in('individual_prenom', with: 'prenom')
+    fill_in('identite_champ_first_name', with: 'prenom')
-    fill_in('individual_nom', with: 'nom')
+    fill_in('identite_champ_last_name', with: 'nom')
     click_on 'Continuer'
     expect(page).to have_current_path(brouillon_dossier_path(user_dossier))
   end