diff --git a/app/components/dsfr/input_component/input_component.en.yml b/app/components/dsfr/input_component/input_component.en.yml index dcade2424..579c001ee 100644 --- a/app/components/dsfr/input_component/input_component.en.yml +++ b/app/components/dsfr/input_component/input_component.en.yml @@ -4,4 +4,5 @@ en: aria_label: "Show password" label: "Show" email_suggest: - wanna_say: 'Do you mean to say ?' + mistake: "The address seems wrong" + wanna_say: "Do you mean to say:" diff --git a/app/components/dsfr/input_component/input_component.fr.yml b/app/components/dsfr/input_component/input_component.fr.yml index b6cd7a3b8..6681e4f05 100644 --- a/app/components/dsfr/input_component/input_component.fr.yml +++ b/app/components/dsfr/input_component/input_component.fr.yml @@ -4,4 +4,5 @@ fr: aria_label: "Afficher le mot de passe" label: "Afficher" email_suggest: - wanna_say: 'Voulez-vous dire ?' + mistake: "L'adresse semble erronée" + wanna_say: "Vouliez-vous écrire :" diff --git a/app/components/dsfr/input_component/input_component.html.haml b/app/components/dsfr/input_component/input_component.html.haml index bbf1255cd..b9debdc9a 100644 --- a/app/components/dsfr/input_component/input_component.html.haml +++ b/app/components/dsfr/input_component/input_component.html.haml @@ -29,10 +29,14 @@ %label.fr--password__checkbox.fr-label{ for: show_password_id }= t('.show_password.label') - if email? - .suspect-email.hidden{ data: { "email-input-target": 'ariaRegion'}, aria: { live: 'off' } } - = render Dsfr::AlertComponent.new(title: t('.email_suggest.wanna_say'), state: :info, heading_level: :div) do |c| + .suspect-email.hidden{ data: { "email-input-target": 'ariaRegion' }, tabindex: '-1' } + = render Dsfr::AlertComponent.new(title: t('.email_suggest.mistake'), state: '', extra_class_names: 'fr-alert--info' ) do |c| - c.with_body do - %p{ data: { "email-input-target": 'suggestion'} } exemple@gmail.com  ? + %p + = t('.email_suggest.wanna_say') + %span{ data: { "email-input-target": 'suggestion'} } + exemple@gmail.com + = "?" %p = button_tag type: 'button', class: 'fr-btn fr-btn--sm fr-mr-3w', data: { action: 'click->email-input#accept'} do = t('utils.yes') diff --git a/app/javascript/controllers/email_input_controller.ts b/app/javascript/controllers/email_input_controller.ts index d0afb3168..d35458e1e 100644 --- a/app/javascript/controllers/email_input_controller.ts +++ b/app/javascript/controllers/email_input_controller.ts @@ -39,7 +39,7 @@ export class EmailInputController extends ApplicationController { if (data && data.suggestions && data.suggestions.length > 0) { this.suggestionTarget.innerHTML = data.suggestions[0]; show(this.ariaRegionTarget); - this.ariaRegionTarget.setAttribute('aria-live', 'assertive'); + this.ariaRegionTarget.focus(); } } diff --git a/spec/system/users/dossier_creation_spec.rb b/spec/system/users/dossier_creation_spec.rb index a930672cd..8c0db7c38 100644 --- a/spec/system/users/dossier_creation_spec.rb +++ b/spec/system/users/dossier_creation_spec.rb @@ -77,7 +77,7 @@ describe 'Creating a new dossier:', js: true do find('label', text: 'Monsieur').click # force focus out within "#identite-form" do within '.suspect-email' do - expect(page).to have_content("Information : Voulez-vous dire ?") + expect(page).to have_content("L'adresse semble erronée Vouliez-vous écrire : prenom.nom@gmail.com ? Oui Non") click_button("Oui") end click_button("Continuer")