a11y(users/confirmations#new): avoid autofocus on input to resend the…

… mail, otherwise screen reader goes straight to the input

app/assets/stylesheets/confirmations.scss

@@ -11,7 +11,6 @@
   .confirmation-instructions,
   .confirmation-separator {
     font-size: 1.15em;
-    margin-bottom: $default-padding * 3;
   }
 
   .confirmation-icon {

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

@@ -3,31 +3,28 @@
 - 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')
+    %h1.fr-h1.center= t('views.confirmation.new.title')
 
-    %img.confirmation-icon{ src: image_url("user/confirmation-email.svg"), alt: t('views.confirmation.new.image_alt') }
+    %img.confirmation-icon{ src: image_url("user/confirmation-email.svg"), alt: t('views.confirmation.new.image_alt'), aria: { hidden: true } }
 
-    %h2.confirmation-preamble
-      = succeed '.' do
-        = t('views.confirmation.new.email_cta')
-        - if resource.email.present?
-          %strong= resource.email
+    = render Dsfr::AlertComponent.new(title: t('views.confirmation.new.email_cta', email: resource.email), state: :info, heading_level: 'h2', extra_class_names: 'fr-my-6w') do |c|
+      - c.with_body do
+        %p= t('views.confirmation.new.email_guidelines_html')
 
-    %p.confirmation-instructions= t('views.confirmation.new.email_guidelines_html')
 
-    %hr.confirmation-separator
+    %hr.fr-hr
 
-    .confirmation-resend
-      %p= t('views.confirmation.new.email_missing')
+    %p.fr-mt-6w= t('views.confirmation.new.email_missing')
 
-      = 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'
+    = 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)
+      = f.submit t('views.confirmation.new.resent'), class: 'fr-btn'
 
-      %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)
-        \.
+    %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)
+      \.

config/locales/en.yml

@@ -305,7 +305,7 @@ 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: "Before filling your file, we have to validate your email address : %{email}"
         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'

config/locales/fr.yml

@@ -301,7 +301,7 @@ 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: "Avant d’effectuer votre démarche, nous avons besoin de vérifier votre adresse mail %{email}"
         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'