From 48336f0ca4b07f6e97ffc72936b1bf0ecf76cec8 Mon Sep 17 00:00:00 2001 From: Martin Date: Tue, 20 Feb 2024 14:28:45 +0100 Subject: [PATCH] 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 | 66 ------------------- app/views/users/confirmations/new.html.haml | 38 ++++------- config/locales/en.yml | 3 +- config/locales/fr.yml | 3 +- spec/system/users/dossier_prefill_get_spec.rb | 2 +- .../system/users/dossier_prefill_post_spec.rb | 2 +- spec/system/users/sign_up_spec.rb | 10 +-- 7 files changed, 23 insertions(+), 101 deletions(-) delete mode 100644 app/assets/stylesheets/confirmations.scss diff --git a/app/assets/stylesheets/confirmations.scss b/app/assets/stylesheets/confirmations.scss deleted file mode 100644 index b028d4419..000000000 --- a/app/assets/stylesheets/confirmations.scss +++ /dev/null @@ -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; - } - } - } -} diff --git a/app/views/users/confirmations/new.html.haml b/app/views/users/confirmations/new.html.haml index b705c45a2..587531801 100644 --- a/app/views/users/confirmations/new.html.haml +++ b/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' diff --git a/config/locales/en.yml b/config/locales/en.yml index 8c05912c6..ef825e954 100644 --- a/config/locales/en.yml +++ b/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 %{email}." email_guidelines_html: "Open your mailbox and click on the activation link 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 diff --git a/config/locales/fr.yml b/config/locales/fr.yml index f66e2567d..299bedafc 100644 --- a/config/locales/fr.yml +++ b/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 %{email}." email_guidelines_html: "Ouvrez votre boîte email, et cliquez sur le lien d’activation 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 diff --git a/spec/system/users/dossier_prefill_get_spec.rb b/spec/system/users/dossier_prefill_get_spec.rb index a642504ba..317135555 100644 --- a/spec/system/users/dossier_prefill_get_spec.rb +++ b/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é.') diff --git a/spec/system/users/dossier_prefill_post_spec.rb b/spec/system/users/dossier_prefill_post_spec.rb index ef8102f48..ec8660eb0 100644 --- a/spec/system/users/dossier_prefill_post_spec.rb +++ b/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é.') diff --git a/spec/system/users/sign_up_spec.rb b/spec/system/users/sign_up_spec.rb index d1d0aa815..0fbf1c8e3 100644 --- a/spec/system/users/sign_up_spec.rb +++ b/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)