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

Merge pull request #10822 from demarches-simplifiees/a11y-fix-process-create-account-bis

Browse source 
Corrige les défaut d'accessibilité de la page de création de compte accessibilité
This commit is contained in:
Corinne Durrmeyer 2024-10-01 09:18:04 +00:00 committed by GitHub
commit dbb34d2b36
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 87 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/dossiers/individual_form_component/individual_form_component.html.haml
View file

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

14
app/javascript/controllers/email_input_controller.ts
View file

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

2
app/views/devise/passwords/new.html.haml
View file

@ -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
app/views/france_connect/particulier/confirmation_sent.html.haml
View file

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

2
app/views/layouts/_header.haml
View file

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

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

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

99
app/views/users/dossiers/index.html.haml
View file

@ -7,60 +7,63 @@
.fr-container
%h1.page-title.fr-h2= t('views.users.dossiers.index.dossiers')
.fr-grid-row.fr-grid-row--gutters
- if current_user.dossiers.count > 2 || current_user.dossiers_invites.count > 2
.fr-col
#search-2.fr-search-bar
= form_tag dossiers_path, method: :get, :role => "search", class: "width-100 fr-mb-5w" 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
= text_field_tag "q", "#{@search_terms if @search_terms.present?}", placeholder: t('views.users.dossiers.search.prompt'), class: "fr-input"
%button.fr-btn.fr-btn--sm
= t('views.users.dossiers.search.label')
- if @procedures_for_select.size > 1
.fr-col
= render Dossiers::UserProcedureFilterComponent.new(procedures_for_select: @procedures_for_select)
- 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-mb-5w
#search-2.fr-search-bar
= 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
= text_field_tag "q", "#{@search_terms if @search_terms.present?}", placeholder: t('views.users.dossiers.search.prompt'), class: "fr-input"
%button.fr-btn.fr-btn--sm
= t('views.users.dossiers.search.label')
- if @procedures_for_select.size > 1
.fr-col.fr-mb-5w
= render Dossiers::UserProcedureFilterComponent.new(procedures_for_select: @procedures_for_select)
- if @search_terms.blank?
- 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' }
- if @user_dossiers.present?
= tab_item(t('pluralize.en_cours', count: @user_dossiers.count),
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),
dossiers_path(statut: 'traites', procedure_id: params[:procedure_id]),
active: @statut == 'traites',
badge: number_with_html_delimiter(@dossiers_traites.count))
- 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' }
- if @user_dossiers.present?
= tab_item(t('pluralize.en_cours', count: @user_dossiers.count),
dossiers_path(statut: 'en-cours', procedure_id: params[:procedure_id]),
active: @statut == 'en-cours',
badge: number_with_html_delimiter(@user_dossiers.count))
- if @dossiers_invites.present?
= tab_item(t('pluralize.dossiers_invites', count: @dossiers_invites.count),
dossiers_path(statut: 'dossiers-invites', procedure_id: params[:procedure_id]),
active: @statut == 'dossiers-invites',
badge: number_with_html_delimiter(@dossiers_invites.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),
dossiers_path(statut: 'traites', procedure_id: params[:procedure_id]),
active: @statut == 'traites',
badge: number_with_html_delimiter(@dossiers_traites.count))
- if @dossiers_close_to_expiration.count > 0
= tab_item(t('pluralize.dossiers_close_to_expiration', count: @dossiers_close_to_expiration.count),
dossiers_path(statut: 'dossiers-expirant', procedure_id: params[:procedure_id]),
active: @statut == 'dossiers-expirant',
badge: number_with_html_delimiter(@dossiers_close_to_expiration.count))
- if @dossiers_invites.present?
= tab_item(t('pluralize.dossiers_invites', count: @dossiers_invites.count),
dossiers_path(statut: 'dossiers-invites', procedure_id: params[:procedure_id]),
active: @statut == 'dossiers-invites',
badge: number_with_html_delimiter(@dossiers_invites.count))
- if @dossiers_supprimes.present?
= tab_item(t('pluralize.dossiers_supprimes', count: @dossiers_supprimes.count),
dossiers_path(statut: 'dossiers-supprimes', procedure_id: params[:procedure_id]),
active: @statut == 'dossiers-supprimes',
badge: number_with_html_delimiter(@dossiers_supprimes.count))
- if @dossiers_close_to_expiration.count > 0
= tab_item(t('pluralize.dossiers_close_to_expiration', count: @dossiers_close_to_expiration.count),
dossiers_path(statut: 'dossiers-expirant', procedure_id: params[:procedure_id]),
active: @statut == 'dossiers-expirant',
badge: number_with_html_delimiter(@dossiers_close_to_expiration.count))
- if @dossier_transferes.present?
= tab_item(t('pluralize.dossiers_transferes', count: @dossier_transferes.count),
dossiers_path(statut: 'dossiers-transferes', procedure_id: params[:procedure_id]),
active: @statut == 'dossiers-transferes',
badge: number_with_html_delimiter(@dossier_transferes.count))
- if @dossiers_supprimes.present?
= tab_item(t('pluralize.dossiers_supprimes', count: @dossiers_supprimes.count),
dossiers_path(statut: 'dossiers-supprimes', procedure_id: params[:procedure_id]),
active: @statut == 'dossiers-supprimes',
badge: number_with_html_delimiter(@dossiers_supprimes.count))
- if @dossier_transferes.present?
= tab_item(t('pluralize.dossiers_transferes', count: @dossier_transferes.count),
dossiers_path(statut: 'dossiers-transferes', procedure_id: params[:procedure_id]),
active: @statut == 'dossiers-transferes',
badge: number_with_html_delimiter(@dossier_transferes.count))
.fr-container
.fr-grid-row.fr-grid-row--center

8
app/views/users/registrations/new.html.haml
View file

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

2
app/views/users/sessions/link_sent.html.haml
View file

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

2
app/views/users/sessions/new.html.haml
View file

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

3
config/locales/en.yml
View file

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

3
config/locales/fr.yml
View file

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

4
config/locales/metas.en.yml
View file

@ -1,7 +1,9 @@
en:
metas:
signin:
title: "Sign-in"
title: "Sign in"
signup:
title: "Create an account"
users:
dossiers:
index:

2
config/locales/metas.fr.yml
View file

@ -2,6 +2,8 @@ fr:
metas:
signin:
title: "Se connecter"
signup:
title: "Créer un compte"
users:
dossiers:
index:

10
spec/views/users/dossiers/index.html.haml_spec.rb
View file

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