Merge pull request #10647 from demarches-simplifiees/a11y-authentification-page

Améliore l'accessibilité de la page d'authentification
This commit is contained in:
Corinne Durrmeyer 2024-07-26 09:38:18 +00:00 committed by GitHub
commit 190addd317
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 49 additions and 75 deletions

View file

@ -4,15 +4,6 @@
$procedure-context-breakpoint: $two-columns-breakpoint;
.procedure-preview {
.paperless-logo {
width: 100%;
margin-bottom: 60px;
@media (max-width: $procedure-context-breakpoint) {
display: none;
}
}
.simple {
margin-bottom: 0.2rem;
font-size: 1.5rem;
@ -56,14 +47,6 @@ $procedure-context-breakpoint: $two-columns-breakpoint;
}
}
.no-procedure-presentation {
margin-bottom: 1.6rem;
p {
margin: 0;
}
}
.procedure-context-content {
@media (max-width: $procedure-context-breakpoint) {
input[type=submit] {

View file

@ -38,7 +38,7 @@
= t('views.users.sessions.new.for_tiers_alert')
.fr-fieldset__element
%p.fr-text--sm= t('utils.mandatory_champs')
%p.fr-text--sm= t('utils.asterisk_html')
.fr-fieldset__element
= render Dsfr::InputComponent.new(form: f, attribute: :email, input_type: :email_field, opts: { autocomplete: 'email' }) do |c|
@ -55,18 +55,16 @@
= f.check_box :remember_me
= f.label :remember_me, t('views.users.sessions.new.remember_me'), class: 'remember-me'
%ul.fr-btns-group
%li= f.submit t('views.users.sessions.new.connection'), class: "fr-btn"
.fr-btns-group= f.submit t('views.users.sessions.new.connection'), class: "fr-btn"
%hr
%h2.fr-h6= t('.you_are_a_citizen')
%ul.fr-btns-group
%li= link_to t('.citizen_page'), new_user_session_path, class: "fr-btn fr-btn--secondary width-100"
.fr-btns-group= link_to t('.citizen_page'), new_user_session_path, class: "fr-btn fr-btn--secondary"
.fr-col-lg.fr-p-6w
= render Dsfr::CalloutComponent.new(title: t('.full_deploy_title'), icon: 'fr-icon-information-line') do |c|
- c.with_body do
= t('.full_deploy_body')
%h2.fr-h6= t('.whats_ds', application_name: Current.application_name)
= image_tag "landing/hero/dematerialiser.svg", class: "paperless-logo", alt: ""
= image_tag "landing/hero/dematerialiser.svg", class: "fr-responsive-img", alt: ""

View file

@ -1,10 +1,6 @@
.no-procedure
= image_tag "landing/hero/dematerialiser.svg", class: "paperless-logo", alt: ""
.baseline.center
.no-procedure-presentation
%p.simple= t('.line1')
%p= t('.line2')
%p= t('.line3')
%hr
%p.small-simple= t('.are_you_new', app_name: Current.application_name)
= link_to t('views.users.sessions.new.find_procedure'), t("links.common.faq.comment_trouver_ma_demarche_url"), title: new_tab_suffix(t('views.users.sessions.new.find_procedure')), class: "fr-btn fr-btn--secondary"
.center
= image_tag "landing/hero/dematerialiser.svg", class: "fr-responsive-img fr-mb-1v", alt: ""
%p.fr-m-4w= t('.text')
%hr
%p= t('.are_you_new', app_name: Current.application_name)
= link_to t('views.users.sessions.new.find_procedure'), t("links.common.faq.comment_trouver_ma_demarche_url"), title: new_tab_suffix(t('views.users.sessions.new.find_procedure')), class: "fr-btn fr-btn--secondary"

View file

@ -18,8 +18,9 @@
.fr-input-group
= label_tag :email, class: 'fr-label' do
Email
= t('.notice_email')
= render EditableChamp::AsteriskMandatoryComponent.new
%span.fr-hint-text
= t('.notice_email')
= email_field_tag :email, params[:email], required: true, autocomplete: 'email', class: 'fr-input'
%fieldset.fr-fieldset{ name: "type" }

View file

@ -13,7 +13,7 @@
%h2.fr-h6= I18n.t('views.users.sessions.new.subtitle')
.fr-fieldset__element
%p.fr-text--sm= t('utils.mandatory_champs')
%p.fr-text--sm= t('utils.asterisk_html')
.fr-fieldset__element= render Dsfr::InputComponent.new(form: f, attribute: :email, input_type: :email_field, opts: { autocomplete: 'email', autofocus: true })
@ -30,11 +30,9 @@
= f.label :remember_me, t('views.users.sessions.new.remember_me'), class: 'remember-me'
.fr-fieldset__element
%ul.fr-btns-group
%li= f.submit t('views.users.sessions.new.connection'), class: "fr-btn fr-btn--lg"
.fr-btns-group= f.submit t('views.users.sessions.new.connection'), class: "fr-btn"
- if AgentConnectService.enabled?
%p.fr-hr-or= t('views.shared.france_connect_login.separator')
%h2.important-header.mb-1= t('views.users.sessions.new.state_civil_servant')
%ul.fr-btns-group
%li= link_to t('views.users.sessions.new.connect_with_agent_connect'), agent_connect_path, class: "fr-btn fr-btn--secondary"
.fr-btns-group= link_to t('views.users.sessions.new.connect_with_agent_connect'), agent_connect_path, class: "fr-btn fr-btn--secondary"

View file

@ -77,9 +77,7 @@ en:
layouts:
commencer:
no_procedure:
line1: A simple tool
line2: to manage dematerialized
line3: administrative forms.
text: A simple tool to manage dematerialized administrative forms.
are_you_new: First time on %{app_name}?
my_account: My account
header:
@ -281,7 +279,7 @@ en:
textarea: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
decimal_number: 49.3
integer_number: 42
email: personne@fournisseur.fr
email: address@mail.com
phone: 0612345678
iban: FR7611315000011234567890138
yes_no: "true"
@ -611,7 +609,7 @@ en:
password: 'Password'
requested_merge_into: 'new email address'
hints:
email: "Expected format : john.doe@example.com"
email: 'Expected format : address@mail.com'
user:
siret: 'SIRET number'
<< : *default_attributes
@ -644,7 +642,7 @@ en:
not_a_phone: 'Invalid phone number'
not_a_rna: 'Invalid RNA number'
url: 'is not a valid link'
invalid_email_format: "is invalid. Please fill in a valid email ex: john.doe@exemple.fr"
invalid_email_format: 'is invalid. Please fill in a valid email ex: address@mail.com'
models:
attestation_template:
attributes:
@ -661,9 +659,9 @@ en:
reset_password_token:
invalid: ": is expired. Ask a new one"
email:
blank: "is empty. Fill in the email"
invalid: "is invalid. Fill in a valid email address, example: john.doe@example.fr"
taken: "already in use. Fill in another email"
blank: 'is empty. Fill in the email'
invalid: 'is invalid. Fill in a valid email address, example: address@mail.com'
taken: 'already in use. Fill in another email'
password:
too_short: "is too short. Fill in a password with at least 8 characters"
not_strong: "not strong enough. Fill in a stronger password"

View file

@ -68,9 +68,7 @@ fr:
layouts:
commencer:
no_procedure:
line1: Un outil simple
line2: pour gérer les formulaires
line3: administratifs dématérialisés.
text: Un outil simple pour gérer les formulaires administratifs dématérialisés.
are_you_new: Vous êtes nouveau sur %{app_name} ?
my_account: Mon compte
header:
@ -273,7 +271,7 @@ fr:
textarea: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
decimal_number: 49.3
integer_number: 42
email: personne@fournisseur.fr
email: adresse@mail.com
phone: 0612345678
iban: FR7611315000011234567890138
yes_no: "true"
@ -331,7 +329,7 @@ fr:
modal_highlight: Les invités ont le droit de voir et modifier votre dossier.
title: Ajouter un invité
email: Adresse mail
email_hint: "Exemple : camilya.martin@exemple.fr"
email_hint: 'Exemple : adresse@mail.com'
invite_message: Ajouter un message à la personne invitée (optionnel)
send_invitation: Envoyer une invitation
withdraw_permission: "Révoquer lautorisation"
@ -617,7 +615,7 @@ fr:
password: 'Mot de passe'
requested_merge_into: 'La nouvelle adresse email'
hints:
email: "Format attendu : john.doe@exemple.fr"
email: 'Format attendu : adresse@mail.com'
user:
siret: 'Numéro SIRET'
<< : *default_attributes
@ -650,7 +648,7 @@ fr:
not_a_phone: 'Numéro de téléphone invalide'
not_a_rna: 'Numéro RNA invalide'
url: 'nest pas un lien valide'
invalid_email_format: "est invalide. Saisir une adresse électronique valide, exemple : john.doe@exemple.fr"
invalid_email_format: 'est invalide. Saisir une adresse électronique valide, exemple : adresse@mail.com'
models:
attestation_template:
attributes:
@ -665,9 +663,9 @@ fr:
reset_password_token:
invalid: ": Votre lien de nouveau mot de passe a expiré. Merci den demander un nouveau."
email:
blank: "est vide. Saisir une adresse électronique"
invalid: "est invalide. Saisir une adresse électronique valide, exemple : john.doe@exemple.fr"
taken: "déjà utilisé. Saisir une autre adresse électronique."
blank: 'est vide. Saisir une adresse électronique'
invalid: 'est invalide. Saisir une adresse électronique valide, exemple : adresse@mail.com'
taken: 'déjà utilisé. Saisir une autre adresse électronique.'
password:
too_short: "est trop court. Saisir un mot de passe avec au moins 8 caractères"
not_strong: "nest pas assez complexe. Saisir un mot de passe plus complexe"

View file

@ -3,4 +3,4 @@ en:
attributes:
champs/email_champ:
hints:
value: "Expected format: name@domain.fr"
value: 'Expected format: address@mail.com'

View file

@ -3,4 +3,4 @@ fr:
attributes:
champs/email_champ:
hints:
value: "Format attendu : nom@domaine.fr"
value: 'Format attendu : adresse@mail.com'

View file

@ -2,9 +2,10 @@ en:
support:
index:
contact: Contact
intro_html: "<p>Contact us via this form and we will answer you as quickly as possible.</p>
<p>Make sure you provide all the required information so we can help you in the best way.</p>"
notice_email: "(example: myaddress@mymail.com)"
intro_html:
'<p>Contact us via this form and we will answer you as quickly as possible.</p>
<p>Make sure you provide all the required information so we can help you in the best way.</p>'
notice_email: 'Expected format: address@mail.com'
your_question: Your question
our_answer: Our answer
notice_pj_product: A screenshot can help us identify the element to improve.

View file

@ -2,9 +2,10 @@ fr:
support:
index:
contact: Contact
intro_html: "<p>Contactez-nous via ce formulaire et nous vous répondrons dans les plus brefs délais.</p>
<p>Pensez bien à nous donner le plus dinformations possible pour que nous puissions vous aider au mieux.</p>"
notice_email: "(exemple : monadresse@monmail.com)"
intro_html:
'<p>Contactez-nous via ce formulaire et nous vous répondrons dans les plus brefs délais.</p>
<p>Pensez bien à nous donner le plus dinformations possible pour que nous puissions vous aider au mieux.</p>'
notice_email: 'Format attendu : adresse@mail.com'
your_question: Votre question
our_answer: Notre réponse
notice_pj_product: Une capture décran peut nous aider à identifier plus facilement lendroit à améliorer.

View file

@ -399,7 +399,7 @@ describe Experts::AvisController, type: :controller do
it do
expect(response).to render_template :instruction
expect(flash.alert).to eq(["toto.fr : Le champ « Email » est invalide. Saisir une adresse électronique valide, exemple : john.doe@exemple.fr"])
expect(flash.alert).to eq(["toto.fr : Le champ « Email » est invalide. Saisir une adresse électronique valide, exemple : adresse@mail.com"])
expect(Avis.last).to eq(previous_avis)
expect(dossier.last_avis_updated_at).to eq(nil)
end
@ -430,7 +430,7 @@ describe Experts::AvisController, type: :controller do
it do
expect(response).to render_template :instruction
expect(flash.alert).to eq(["toto.fr : Le champ « Email » est invalide. Saisir une adresse électronique valide, exemple : john.doe@exemple.fr"])
expect(flash.alert).to eq(["toto.fr : Le champ « Email » est invalide. Saisir une adresse électronique valide, exemple : adresse@mail.com"])
expect(flash.notice).to eq("Une demande davis a été envoyée à titi@titimail.com")
expect(Avis.count).to eq(old_avis_count + 1)
end

View file

@ -817,7 +817,7 @@ describe Instructeurs::DossiersController, type: :controller do
before { subject }
it { expect(response).to render_template :avis }
it { expect(flash.alert).to eq(["emaila.com : Le champ « Email » est invalide. Saisir une adresse électronique valide, exemple : john.doe@exemple.fr"]) }
it { expect(flash.alert).to eq(["emaila.com : Le champ « Email » est invalide. Saisir une adresse électronique valide, exemple : adresse@mail.com"]) }
it { expect { subject }.not_to change(Avis, :count) }
it { expect(dossier.last_avis_updated_at).to eq(nil) }
end
@ -839,7 +839,7 @@ describe Instructeurs::DossiersController, type: :controller do
before { subject }
it { expect(response).to render_template :avis }
it { expect(flash.alert).to eq(["toto.fr : Le champ « Email » est invalide. Saisir une adresse électronique valide, exemple : john.doe@exemple.fr"]) }
it { expect(flash.alert).to eq(["toto.fr : Le champ « Email » est invalide. Saisir une adresse électronique valide, exemple : adresse@mail.com"]) }
it { expect(flash.notice).to eq("Une demande davis a été envoyée à titi@titimail.com") }
it { expect(Avis.count).to eq(old_avis_count + 1) }
it { expect(saved_avis.expert.email).to eq("titi@titimail.com") }

View file

@ -54,7 +54,7 @@ describe Manager::DossiersController, type: :controller do
it do
expect { subject }.not_to have_enqueued_mail
expect(flash[:alert]).to eq("Ladresse email est invalide. Saisir une adresse électronique valide, exemple : john.doe@exemple.fr")
expect(flash[:alert]).to eq("Ladresse email est invalide. Saisir une adresse électronique valide, exemple : adresse@mail.com")
end
end
end

View file

@ -40,7 +40,7 @@ describe Manager::UsersController, type: :controller do
subject
expect(User.find_by(id: user.id).email).not_to eq(nouvel_email)
expect(flash[:error]).to match("Le champ « Adresse électronique » est invalide. Saisir une adresse électronique valide, exemple : john.doe@exemple.fr")
expect(flash[:error]).to match("Le champ « Adresse électronique » est invalide. Saisir une adresse électronique valide, exemple : adresse@mail.com")
end
end
end

View file

@ -83,7 +83,7 @@ describe Users::ProfilController, type: :controller do
end
it { expect(response).to redirect_to(profil_path) }
it { expect(flash.alert).to eq(["Le champ « Adresse électronique » est invalide. Saisir une adresse électronique valide, exemple : john.doe@exemple.fr"]) }
it { expect(flash.alert).to eq(["Le champ « Adresse électronique » est invalide. Saisir une adresse électronique valide, exemple : adresse@mail.com"]) }
end
context 'when the user has an instructeur role' do

View file

@ -98,7 +98,7 @@ describe Users::TransfersController, type: :controller do
context "when email is invalid" do
let(:email) { "not-an-email" }
it_behaves_like 'email error' do
let(:expected_error) { "Ladresse email est invalide. Saisir une adresse électronique valide, exemple : john.doe@exemple.fr" }
let(:expected_error) { "Ladresse email est invalide. Saisir une adresse électronique valide, exemple : adresse@mail.com" }
end
end
end

View file

@ -31,7 +31,7 @@ describe Invite do
it do
expect(invite.save).to be false
expect(invite.errors.full_messages).to eq(["Le champ « Email » est invalide. Saisir une adresse électronique valide, exemple : john.doe@exemple.fr"])
expect(invite.errors.full_messages).to eq(["Le champ « Email » est invalide. Saisir une adresse électronique valide, exemple : adresse@mail.com"])
end
context 'when an email is empty' do