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
This commit is contained in:
commit
5f5756a034
7 changed files with 23 additions and 101 deletions
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -3,31 +3,21 @@
|
||||||
- content_for :footer do
|
- content_for :footer do
|
||||||
= render partial: 'root/footer'
|
= 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!
|
= 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
|
= render Dsfr::AlertComponent.new(title: '', state: :info, heading_level: 'h2', extra_class_names: 'fr-mt-6w fr-mb-3w') do |c|
|
||||||
= succeed '.' do
|
- c.with_body do
|
||||||
= t('views.confirmation.new.email_cta')
|
%p= t('views.confirmation.new.email_cta_html', email: resource.email)
|
||||||
- if resource.email.present?
|
%p= t('views.confirmation.new.email_guidelines_html')
|
||||||
%strong= resource.email
|
|
||||||
|
|
||||||
%p.confirmation-instructions= t('views.confirmation.new.email_guidelines_html')
|
= 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')
|
||||||
%hr.confirmation-separator
|
= f.hidden_field :email
|
||||||
|
= f.submit t('views.confirmation.new.resent'), class: 'fr-btn fr-btn--secondary'
|
||||||
.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)
|
|
||||||
\.
|
|
||||||
|
|
|
@ -305,11 +305,10 @@ en:
|
||||||
new:
|
new:
|
||||||
title: 'Confirm your email address'
|
title: 'Confirm your email address'
|
||||||
image_alt: "Email sent"
|
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_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."
|
email_missing: "If you have not received our email (have you checked your spam ?), we can resend it."
|
||||||
resent: 'Resend the confirmation email'
|
resent: 'Resend the confirmation email'
|
||||||
faq: 'Also, you can check our'
|
|
||||||
invites:
|
invites:
|
||||||
dropdown:
|
dropdown:
|
||||||
invite_to_edit: Invite someone to edit this file
|
invite_to_edit: Invite someone to edit this file
|
||||||
|
|
|
@ -301,11 +301,10 @@ fr:
|
||||||
new:
|
new:
|
||||||
title: 'Confirmez votre adresse email'
|
title: 'Confirmez votre adresse email'
|
||||||
image_alt: "Email envoyé"
|
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_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."
|
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'
|
resent: 'Renvoyer un email de confirmation'
|
||||||
faq: 'Vous pouvez également consulter notre'
|
|
||||||
invites:
|
invites:
|
||||||
dropdown:
|
dropdown:
|
||||||
invite_to_edit: Inviter une personne à modifier ce dossier
|
invite_to_edit: Inviter une personne à modifier ce dossier
|
||||||
|
|
|
@ -152,7 +152,7 @@ describe 'Prefilling a dossier (with a GET request):', js: true do
|
||||||
click_on "Créer un compte #{APPLICATION_NAME}"
|
click_on "Créer un compte #{APPLICATION_NAME}"
|
||||||
|
|
||||||
sign_up_with user_email, password
|
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
|
click_confirmation_link_for user_email
|
||||||
expect(page).to have_content('Votre compte a bien été confirmé.')
|
expect(page).to have_content('Votre compte a bien été confirmé.')
|
||||||
|
|
|
@ -103,7 +103,7 @@ describe 'Prefilling a dossier (with a POST request):', js: true do
|
||||||
click_on "Créer un compte #{APPLICATION_NAME}"
|
click_on "Créer un compte #{APPLICATION_NAME}"
|
||||||
|
|
||||||
sign_up_with user_email, password
|
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
|
click_confirmation_link_for user_email
|
||||||
expect(page).to have_content('Votre compte a bien été confirmé.')
|
expect(page).to have_content('Votre compte a bien été confirmé.')
|
||||||
|
|
|
@ -7,7 +7,7 @@ describe 'Signing up:' do
|
||||||
visit new_user_registration_path
|
visit new_user_registration_path
|
||||||
|
|
||||||
sign_up_with user_email, user_password
|
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
|
click_confirmation_link_for user_email
|
||||||
expect(page).to have_content('Votre compte a bien été confirmé.')
|
expect(page).to have_content('Votre compte a bien été confirmé.')
|
||||||
|
@ -59,7 +59,7 @@ describe 'Signing up:' do
|
||||||
# Then with a good password
|
# Then with a good password
|
||||||
sign_up_with user_email, user_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_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
|
end
|
||||||
|
|
||||||
context 'when visiting a procedure' do
|
context 'when visiting a procedure' do
|
||||||
|
@ -72,7 +72,7 @@ describe 'Signing up:' do
|
||||||
expect(page).to have_current_path new_user_registration_path
|
expect(page).to have_current_path new_user_registration_path
|
||||||
|
|
||||||
sign_up_with user_email, user_password
|
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)
|
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
|
# The same page than for initial sign-ups is displayed, to avoid leaking informations
|
||||||
# about the account existence.
|
# 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
|
# The confirmation email is sent again
|
||||||
confirmation_email = open_email(user_email)
|
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
|
# The same page than for initial sign-ups is displayed, to avoid leaking informations
|
||||||
# about the accound existence.
|
# 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
|
# A warning email is sent
|
||||||
warning_email = open_email(user_email)
|
warning_email = open_email(user_email)
|
||||||
|
|
Loading…
Reference in a new issue