DGNum/demarches-normaliennes
14
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

a11y(users/confirmations#new): avoid autofocus on input to resend the mail, otherwise screen reader goes straight to the input

Browse source
This commit is contained in:
Martin 2024-02-20 14:28:45 +01:00
parent 284ecf864b
commit 48336f0ca4
7 changed files with 23 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
app/assets/stylesheets/confirmations.scss
View file

@ -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;
}
}
}
}

38
app/views/users/confirmations/new.html.haml
View file

@ -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'

3
config/locales/en.yml
View file

@ -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

3
config/locales/fr.yml
View file

@ -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

2
spec/system/users/dossier_prefill_get_spec.rb
View file

@ -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é.')

2
spec/system/users/dossier_prefill_post_spec.rb
View file

@ -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é.')

10
spec/system/users/sign_up_spec.rb
View file

@ -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)