Merge pull request #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/assets/stylesheets/confirmations.scss

@@ -1,66 +0,0 @@
-@import "colors";
-@import "constants";
-
-.devise-confirmations {
-  .one-column-centered {
-    max-width: 600px;
-  }
-
-  .confirmation-icon,
-  .confirmation-preamble,
-  .confirmation-instructions,
-  .confirmation-separator {
-    font-size: 1.15em;
-    margin-bottom: $default-padding * 3;
-  }
-
-  .confirmation-icon {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .confirmation-instructions {
-    color: #000000;
-    background-color: $yellow;
-    margin-left: -15px;
-    margin-right: -15px;
-    padding: 15px 20px 17px 20px;
-  }
-
-  .confirmation-separator {
-    height: 1px;
-    margin-left: -12px;
-    margin-right: -12px;
-    border: none;
-    border-top: 1px solid #DDDDDD;
-  }
-
-  .confirmation-resend {
-
-    p,
-    label {
-      margin-bottom: $default-padding;
-    }
-
-    .form {
-      display: flex;
-      flex-wrap: wrap;
-
-      label {
-        flex-basis: 100%;
-      }
-
-      input,
-      button {
-        margin-bottom: $default-spacer;
-      }
-
-      input[type=email] {
-        width: auto;
-        flex-grow: 1;
-        margin-right: $default-spacer;
-      }
-    }
-  }
-}

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
+
+.fr-container
+  .fr-col-12.fr-col-md-6.fr-col-offset-md-3
     = devise_error_messages!
-    %h1.center= t('views.confirmation.new.title')
+    %h1.fr-mt-6w.fr-h2.center
+      = t('views.confirmation.new.title')
 
-    %img.confirmation-icon{ src: image_url("user/confirmation-email.svg"), alt: t('views.confirmation.new.image_alt') }
+    %p.center{ aria: { hidden: true } }= image_tag("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
+    = 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.confirmation-instructions= t('views.confirmation.new.email_guidelines_html')
-
-    %hr.confirmation-separator
-
-    .confirmation-resend
-      %p= 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'
-
-      %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 @@ describe 'Prefilling a dossier (with a GET request):', js: true do
           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 @@ describe 'Prefilling a dossier (with a POST request):', js: true do
             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 @@ describe 'Signing up:' do
     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 @@ describe 'Signing up:' do
     # 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 @@ describe 'Signing up:' do
       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 @@ describe 'Signing up:' do
 
       # 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 @@ describe 'Signing up:' do
 
       # 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)