Merge pull request demarches-simplifiees#10017 from mfo/US/a11y-after…

…-signup

ETQ usager utilisant un lecteur d'écran: la page de demande de confirmation de compte ne concentre pas le lecteur d'écran sur le champ pour renvoyer un mail de confirmation

app/views/users/confirmations/new.html.haml

@@ -3,31 +3,21 @@
 - content_for :footer do
   = render partial: 'root/footer'
 
-.container.devise-container.devise-confirmations
-  .one-column-centered
-    = devise_error_messages!
-    %h1.center= t('views.confirmation.new.title')
-
-    %img.confirmation-icon{ src: image_url("user/confirmation-email.svg"), alt: t('views.confirmation.new.image_alt') }
-
-    %h2.confirmation-preamble
-      = succeed '.' do
-        = t('views.confirmation.new.email_cta')
-        - if resource.email.present?
-          %strong= resource.email
 
-    %p.confirmation-instructions= t('views.confirmation.new.email_guidelines_html')
-
-    %hr.confirmation-separator
+.fr-container
+  .fr-col-12.fr-col-md-6.fr-col-offset-md-3
+    = devise_error_messages!
+    %h1.fr-mt-6w.fr-h2.center
+      = t('views.confirmation.new.title')
 
-    .confirmation-resend
-      %p= t('views.confirmation.new.email_missing')
+    %p.center{ aria: { hidden: true } }= image_tag("user/confirmation-email.svg", alt: t('views.confirmation.new.image_alt'))
 
-      = form_for(resource, as: resource_name, url: confirmation_path(resource_name)) do |f|
-        = render Dsfr::InputComponent.new(form: f, attribute: :email, input_type: :email_field, opts: { autofocus: true })
-        = f.submit t('views.confirmation.new.resent'), class: 'fr-btn'
+    = render Dsfr::AlertComponent.new(title: '', state: :info, heading_level: 'h2', extra_class_names: 'fr-mt-6w fr-mb-3w') do |c|
+      - c.with_body do
+        %p= t('views.confirmation.new.email_cta_html', email: resource.email)
+        %p= t('views.confirmation.new.email_guidelines_html')
 
-      %p.fr-mt-3w
-        = t('views.confirmation.new.faq')
-        = link_to(t("links.common.faq.label"), t("links.common.faq.email_non_recu_url"), title: new_tab_suffix(t("links.common.faq.title")), **external_link_attributes)
-        \.
+    = form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { class: 'fr-mb-6w'}) do |f|
+      %legend.fr-hint-text.fr-mb-3w= t('views.confirmation.new.email_missing')
+      = f.hidden_field :email
+      = f.submit t('views.confirmation.new.resent'), class: 'fr-btn fr-btn--secondary'

config/locales/en.yml

@@ -305,11 +305,10 @@ en:
       new:
         title: 'Confirm your email address'
         image_alt: "Email sent"
-        email_cta: "Before filling your file, we have to validate your email address"
+        email_cta_html: "Before filling your file, we have to validate your email address <strong>%{email}</strong>."
         email_guidelines_html: "Open your mailbox and <strong>click on the activation link</strong> within the mail we just sent you."
         email_missing: "If you have not received our email (have you checked your spam ?), we can resend it."
         resent: 'Resend the confirmation email'
-        faq: 'Also, you can check our'
     invites:
       dropdown:
         invite_to_edit: Invite someone to edit this file

config/locales/fr.yml

@@ -301,11 +301,10 @@ fr:
       new:
         title: 'Confirmez votre adresse email'
         image_alt: "Email envoyé"
-        email_cta: "Avant d’effectuer votre démarche, nous avons besoin de vérifier votre adresse"
+        email_cta_html: "Avant d’effectuer votre démarche, nous avons besoin de vérifier votre adresse électronique <strong>%{email}</strong>."
         email_guidelines_html: "Ouvrez votre boîte email, et <strong>cliquez sur le lien d’activation</strong> dans le message que vous avez reçu."
         email_missing: "Si vous n’avez pas reçu notre message (avez-vous vérifié les indésirables ?), nous pouvons vous le renvoyer."
         resent: 'Renvoyer un email de confirmation'
-        faq: 'Vous pouvez également consulter notre'
     invites:
       dropdown:
         invite_to_edit: Inviter une personne à modifier ce dossier

spec/system/users/dossier_prefill_get_spec.rb

@@ -152,7 +152,7 @@
           click_on "Créer un compte #{APPLICATION_NAME}"
 
           sign_up_with user_email, password
-          expect(page).to have_content "nous avons besoin de vérifier votre adresse #{user_email}"
+          expect(page).to have_content "nous avons besoin de vérifier votre adresse électronique #{user_email}"
 
           click_confirmation_link_for user_email
           expect(page).to have_content('Votre compte a bien été confirmé.')

spec/system/users/dossier_prefill_post_spec.rb

@@ -103,7 +103,7 @@
             click_on "Créer un compte #{APPLICATION_NAME}"
 
             sign_up_with user_email, password
-            expect(page).to have_content "nous avons besoin de vérifier votre adresse #{user_email}"
+            expect(page).to have_content "nous avons besoin de vérifier votre adresse électronique #{user_email}"
 
             click_confirmation_link_for user_email
             expect(page).to have_content('Votre compte a bien été confirmé.')

spec/system/users/sign_up_spec.rb

@@ -7,7 +7,7 @@
     visit new_user_registration_path
 
     sign_up_with user_email, user_password
-    expect(page).to have_content "nous avons besoin de vérifier votre adresse #{user_email}"
+    expect(page).to have_content "nous avons besoin de vérifier votre adresse électronique #{user_email}"
 
     click_confirmation_link_for user_email
     expect(page).to have_content('Votre compte a bien été confirmé.')
@@ -59,7 +59,7 @@
     # Then with a good password
     sign_up_with user_email, user_password
     expect(page).to have_current_path new_user_confirmation_path user: { email: user_email }
-    expect(page).to have_content "nous avons besoin de vérifier votre adresse #{user_email}"
+    expect(page).to have_content "nous avons besoin de vérifier votre adresse électronique #{user_email}"
   end
 
   context 'when visiting a procedure' do
@@ -72,7 +72,7 @@
       expect(page).to have_current_path new_user_registration_path
 
       sign_up_with user_email, user_password
-      expect(page).to have_content "nous avons besoin de vérifier votre adresse #{user_email}"
+      expect(page).to have_content "nous avons besoin de vérifier votre adresse électronique #{user_email}"
 
       click_confirmation_link_for(user_email, in_another_browser: true)
 
@@ -100,7 +100,7 @@
 
       # The same page than for initial sign-ups is displayed, to avoid leaking informations
       # about the account existence.
-      expect(page).to have_content "nous avons besoin de vérifier votre adresse #{user_email}"
+      expect(page).to have_content "nous avons besoin de vérifier votre adresse électronique #{user_email}"
 
       # The confirmation email is sent again
       confirmation_email = open_email(user_email)
@@ -129,7 +129,7 @@
 
       # The same page than for initial sign-ups is displayed, to avoid leaking informations
       # about the accound existence.
-      expect(page).to have_content "nous avons besoin de vérifier votre adresse #{user_email}"
+      expect(page).to have_content "nous avons besoin de vérifier votre adresse électronique #{user_email}"
 
       # A warning email is sent
       warning_email = open_email(user_email)