Merge pull request #10822 from demarches-simplifiees/a11y-fix-process-create-account-bis
Corrige les défaut d'accessibilité de la page de création de compte accessibilité
This commit is contained in:
commit
dbb34d2b36
15 changed files with 87 additions and 70 deletions
|
@ -74,4 +74,4 @@
|
|||
.fr-fieldset__element.fr-fieldset__element--short-text{ "data-for-tiers-target" => "emailContainer", class: class_names(hidden: !email_notifications?(individual)) }
|
||||
= render Dsfr::InputComponent.new(form: individual, attribute: :email, input_type: :email_field, opts: { "data-for-tiers-target" => "emailInput" })
|
||||
|
||||
= f.submit t('views.users.dossiers.identite.continue'), class: "fr-btn"
|
||||
= f.submit t('views.users.dossiers.identite.continue'), class: "fr-btn", "data-email-input-target": "next"
|
||||
|
|
|
@ -44,15 +44,25 @@ export class EmailInputController extends ApplicationController {
|
|||
}
|
||||
|
||||
accept() {
|
||||
this.ariaRegionTarget.setAttribute('aria-live', 'off');
|
||||
hide(this.ariaRegionTarget);
|
||||
this.inputTarget.value = this.suggestionTarget.innerHTML;
|
||||
this.suggestionTarget.innerHTML = '';
|
||||
const nextTarget = document.querySelector<HTMLElement>(
|
||||
'[data-email-input-target="next"]'
|
||||
);
|
||||
if (nextTarget) {
|
||||
nextTarget.focus();
|
||||
}
|
||||
}
|
||||
|
||||
discard() {
|
||||
this.ariaRegionTarget.setAttribute('aria-live', 'off');
|
||||
hide(this.ariaRegionTarget);
|
||||
this.suggestionTarget.innerHTML = '';
|
||||
const nextTarget = document.querySelector<HTMLElement>(
|
||||
'[data-email-input-target="next"]'
|
||||
);
|
||||
if (nextTarget) {
|
||||
nextTarget.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -19,4 +19,4 @@
|
|||
.fr-fieldset__element
|
||||
= render Dsfr::InputComponent.new(form: f, attribute: :email, input_type: :email_field, opts: { autocomplete: 'email', autofocus: true })
|
||||
|
||||
= f.submit t('devise.passwords.new.request_new_password'), class: 'fr-btn fr-btn--lg fr-mt-4w'
|
||||
= f.submit t('devise.passwords.new.request_new_password'), class: 'fr-btn fr-btn--lg fr-mt-4w', 'data-email-input-target': 'next'
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
.fr-col-12.fr-col-md-6.fr-col-offset-md-3
|
||||
%h1.fr-mt-6w.fr-h2.center= t('.confirmation_sent_by_email')
|
||||
|
||||
%p.center{ aria: { hidden: true } }= image_tag("user/confirmation-email.svg", alt: t('views.confirmation.new.image_alt'))
|
||||
%p.center= image_tag("user/confirmation-email.svg", alt: '')
|
||||
|
||||
= 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
|
||||
|
|
|
@ -52,7 +52,7 @@
|
|||
- elsif nav_bar_profile == :instructeur
|
||||
= render partial: 'shared/help/help_dropdown_instructeur'
|
||||
- else
|
||||
// NB: on mobile in order to have links correctly aligned, we need a left icon
|
||||
-# NB: on mobile in order to have links correctly aligned, we need a left icon #
|
||||
= link_to t('help'), t("links.common.faq.url"), class: 'fr-btn dropdown-button'
|
||||
|
||||
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
%h1.fr-mt-6w.fr-h2.center
|
||||
= t('views.confirmation.new.title')
|
||||
|
||||
%p.center{ aria: { hidden: true } }= image_tag("user/confirmation-email.svg", alt: t('views.confirmation.new.image_alt'))
|
||||
%p.center= image_tag("user/confirmation-email.svg", alt: '')
|
||||
|
||||
= 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
|
||||
|
|
|
@ -7,11 +7,12 @@
|
|||
.fr-container
|
||||
%h1.page-title.fr-h2= t('views.users.dossiers.index.dossiers')
|
||||
|
||||
- if current_user.dossiers.count > 2 || current_user.dossiers_invites.count > 2 || @procedures_for_select.size > 1
|
||||
.fr-grid-row.fr-grid-row--gutters
|
||||
- if current_user.dossiers.count > 2 || current_user.dossiers_invites.count > 2
|
||||
.fr-col
|
||||
.fr-col.fr-mb-5w
|
||||
#search-2.fr-search-bar
|
||||
= form_tag dossiers_path, method: :get, :role => "search", class: "width-100 fr-mb-5w" do
|
||||
= form_tag dossiers_path, method: :get, :role => "search", class: "width-100" do
|
||||
= hidden_field_tag :procedure_id, params[:procedure_id]
|
||||
= label_tag "q", t('views.users.dossiers.search.label'), class: 'fr-label fr-mb-1w'
|
||||
.flex
|
||||
|
@ -19,10 +20,11 @@
|
|||
%button.fr-btn.fr-btn--sm
|
||||
= t('views.users.dossiers.search.label')
|
||||
- if @procedures_for_select.size > 1
|
||||
.fr-col
|
||||
.fr-col.fr-mb-5w
|
||||
= render Dossiers::UserProcedureFilterComponent.new(procedures_for_select: @procedures_for_select)
|
||||
|
||||
- if @search_terms.blank?
|
||||
- if [@user_dossiers, @dossiers_traites, @dossiers_invites, @dossiers_close_to_expiration, @dossiers_supprimes, @dossier_transferes].any?(&:present?)
|
||||
- cache([I18n.locale, current_user.id, @statut, current_user.dossiers, current_user.dossiers_invites], expires_in: 1.hour) do
|
||||
%nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') }
|
||||
%ul.fr-tabs__list{ role: 'tablist' }
|
||||
|
@ -31,6 +33,7 @@
|
|||
dossiers_path(statut: 'en-cours', procedure_id: params[:procedure_id]),
|
||||
active: @statut == 'en-cours',
|
||||
badge: number_with_html_delimiter(@user_dossiers.count))
|
||||
|
||||
- if @dossiers_traites.present?
|
||||
// TODO: when renaming this tab in "Terminé", update notify_near_deletion_to_user email wording accordingly.
|
||||
= tab_item(t('pluralize.traites', count: @dossiers_traites.count),
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
= content_for(:page_id, 'auth')
|
||||
= content_for(:title, t('metas.signup.title'))
|
||||
|
||||
.auth-form
|
||||
= devise_error_messages!
|
||||
|
@ -13,15 +14,16 @@
|
|||
%h2.fr-h6= I18n.t('views.registrations.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 })
|
||||
|
||||
.fr-fieldset__element
|
||||
= render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field,
|
||||
opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: 'turbo-input', turbo_input_url_value: show_password_complexity_path }, aria: {describedby: 'password_hint'}})
|
||||
opts: { autofocus: 'true', autocomplete: 'new-password', data: { controller: 'turbo-input', turbo_input_url_value: show_password_complexity_path, email_input_target: 'next'}, aria: {describedby: 'password_hint'}})
|
||||
|
||||
#password_complexity
|
||||
= render PasswordComplexityComponent.new
|
||||
|
||||
= f.submit t('views.shared.account.create'), id: 'submit-password', disabled: :disabled, class: "fr-btn fr-btn--lg fr-mt-2w", data: { disable_with: t('views.users.passwords.edit.submit_loading') }
|
||||
.fr-btns-group
|
||||
= f.submit t('views.shared.account.create'), id: 'submit-password', disabled: :disabled, class: "fr-btn fr-mt-2w", data: { disable_with: t('views.users.passwords.edit.submit_loading') }
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
%h1.fr-mt-6w.fr-h2.center
|
||||
= t('views.confirmation.new.title')
|
||||
|
||||
%p.center{ aria: { hidden: true } }= image_tag("user/confirmation-email.svg", alt: t('views.confirmation.new.image_alt'))
|
||||
%p.center= image_tag("user/confirmation-email.svg", alt: '')
|
||||
|
||||
= 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
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
.fr-fieldset__element= render Dsfr::InputComponent.new(form: f, attribute: :email, input_type: :email_field, opts: { autocomplete: 'email', autofocus: true })
|
||||
|
||||
.fr-fieldset__element
|
||||
= render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field, opts: { autocomplete: 'current-password' })
|
||||
= render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field, opts: { autocomplete: 'current-password', 'data-email-input-target': 'next' })
|
||||
|
||||
%p= link_to t('views.users.sessions.new.reset_password'), new_user_password_path, class: "fr-link"
|
||||
|
||||
|
|
|
@ -314,8 +314,7 @@ en:
|
|||
confirmation:
|
||||
new:
|
||||
title: 'Confirm your email address'
|
||||
image_alt: "Email sent"
|
||||
email_cta_html: "Before proceeding, we have to validate your email address <strong>%{email}</strong>."
|
||||
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'
|
||||
|
|
|
@ -306,8 +306,7 @@ fr:
|
|||
confirmation:
|
||||
new:
|
||||
title: 'Confirmez votre adresse email'
|
||||
image_alt: "Email envoyé"
|
||||
email_cta_html: "Avant de pouvoir continuer, nous avons besoin de vérifier votre adresse électronique <strong>%{email}</strong>."
|
||||
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'
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
en:
|
||||
metas:
|
||||
signin:
|
||||
title: "Sign-in"
|
||||
title: "Sign in"
|
||||
signup:
|
||||
title: "Create an account"
|
||||
users:
|
||||
dossiers:
|
||||
index:
|
||||
|
|
|
@ -2,6 +2,8 @@ fr:
|
|||
metas:
|
||||
signin:
|
||||
title: "Se connecter"
|
||||
signup:
|
||||
title: "Créer un compte"
|
||||
users:
|
||||
dossiers:
|
||||
index:
|
||||
|
|
|
@ -113,12 +113,12 @@ describe 'users/dossiers/index', type: :view do
|
|||
|
||||
context 'caching', caching: true do
|
||||
it "works" do
|
||||
expect(user_dossiers).to receive(:present?).once
|
||||
expect(user_dossiers).to receive(:present?).thrice
|
||||
2.times { render; user.reload }
|
||||
end
|
||||
|
||||
it "cache key depends on statut" do
|
||||
expect(user_dossiers).to receive(:present?).twice
|
||||
expect(user_dossiers).to receive(:present?).exactly(4).times
|
||||
render
|
||||
|
||||
assign(:statut, "termines")
|
||||
|
@ -128,7 +128,7 @@ describe 'users/dossiers/index', type: :view do
|
|||
end
|
||||
|
||||
it "cache key depends on dossier updated_at" do
|
||||
expect(user_dossiers).to receive(:present?).twice
|
||||
expect(user_dossiers).to receive(:present?).exactly(4).times
|
||||
render
|
||||
|
||||
dossier_termine.touch
|
||||
|
@ -149,7 +149,7 @@ describe 'users/dossiers/index', type: :view do
|
|||
end
|
||||
|
||||
it "cache key depends on dossier invites" do
|
||||
expect(user_dossiers).to receive(:present?).twice
|
||||
expect(user_dossiers).to receive(:present?).exactly(4).times
|
||||
render
|
||||
|
||||
create(:invite, user:)
|
||||
|
@ -159,7 +159,7 @@ describe 'users/dossiers/index', type: :view do
|
|||
end
|
||||
|
||||
it "cache key depends on dossier deletion" do
|
||||
expect(user_dossiers).to receive(:present?).twice
|
||||
expect(user_dossiers).to receive(:present?).exactly(4).times
|
||||
render
|
||||
|
||||
dossier_termine.hide_and_keep_track!(:automatic, :expired)
|
||||
|
|
Loading…
Reference in a new issue