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

Merge pull request #10017 from mfo/US/a11y-after-signup

Browse source 
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:
Colin Darie 2024-02-21 12:25:35 +00:00 • committed by GitHub
commit 5f5756a034
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 23 additions and 101 deletions
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'